Connect color ui to lib

See #33
Lazerbeak12345 · Feb 14, 2022 · d226a37 · d226a37
1 parent 236f43c
commit d226a37
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 5 deletions.
diff --git a/pixelmanipulator.html b/pixelmanipulator.html
@@ -105,7 +105,8 @@
 					<div>
 						<label>
 							Alpha (Opacity)
-							<input type="range" min="0" max="255" id="customColorAlpha">
+							<span id="customColorAlphaText"></span>
+							<input type="range" min="0" max="255" step="1" id="customColorAlpha">
 						</label>
 					</div>
 				</div>
@@ -316,9 +317,31 @@
 				updateLargeLinesX(e.offsetX,e.offsetY);
 				updateLargeLinesY(e.offsetX,e.offsetY);
 			};
+			function rgb2hex(color){
+				return "#"+
+					color[0].toString(16).padStart(2,"0")+
+					color[1].toString(16).padStart(2,"0")+
+					color[2].toString(16).padStart(2,"0")
+			}
+			function hex2rgba(hex,alpha){
+				var matches=hex.match(/#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i);
+				if(!matches) return matches;
+				var output=[
+						// The 0th is just the whole string
+						parseInt(matches[1],16), 
+						parseInt(matches[2],16),
+						parseInt(matches[3],16)
+					];
+				if(typeof alpha!=="undefined")
+					output.push(alpha);
+				return output;
+			}
 			function updateCustomizer(value){
 				var elm=p.elementTypeMap[value],
 						customizeSection=document.getElementById("customizePatternSection");
+				document.getElementById("customizeColor").value=rgb2hex(elm.color);
+				document.getElementById("customColorAlpha").value=elm.color[3];// Raw alpha value
+				document.getElementById("customColorAlphaText").innerText=elm.color[3];
 				if(typeof elm.pattern==="string"){
 					customizeSection.classList.remove("hidden");
 					document.getElementById("customizeLoop").checked=elm.loop||false;
@@ -351,7 +374,9 @@
 					shfocusboxElm=document.getElementById('shfocusbox'),
 					customizer=document.getElementById('customizer'),
 					customizerS=document.getElementById("customSelect"),
-					customizeLoop=document.getElementById("customizeLoop");
+					customizeLoop=document.getElementById("customizeLoop"),
+					customizeColor=document.getElementById("customizeColor"),
+					customizeColorAlpha=document.getElementById("customColorAlpha");
 				p.canvas.addEventListener('click', updateBox);
 				selectorBoxElm.addEventListener('click',selectorClicked);
 				p.canvas.addEventListener('mousemove', updateSmallLines);
@@ -366,6 +391,15 @@
 				largexline1Elm.addEventListener('mousemove',bigLineGotHovered);
 				largeylineElm.addEventListener('mousemove',bigLineGotHovered);
 				largeyline1Elm.addEventListener('mousemove',bigLineGotHovered);
+				function changeColor(){
+					console.log("change color");
+					p.modifyElement(p.elementTypeMap[customizerS.value].number,{
+						color:hex2rgba(customizeColor.value,parseInt(customizeColorAlpha.value))
+					});
+					updateCustomizer(customizerS.value);
+				}
+				customizeColor.addEventListener('change',changeColor);
+				customizeColorAlpha.addEventListener('change',changeColor);
 				customizeLoop.addEventListener('change',function(){
 					console.group("change loop",this.checked);
 					p.modifyElement(p.elementTypeMap[customizerS.value].number,{

diff --git a/pixelmanipulator.js b/pixelmanipulator.js
@@ -270,13 +270,15 @@
 			},
 			modifyElement:function(id,data) {
 				//                (# ,{}  )
-				var oldData=innerP.elementTypeMap[innerP.elementNumList[id]];
+				var name=innerP.elementNumList[id],
+					oldData=innerP.elementTypeMap[name];
+				delete innerP.elementTypeMap[name]; // Needs to be gone for color check
 				if(typeof data.name!=="undefined"&&(innerP.elementTypeMap[data.name]||{number:id}).number!==id)
 					throw new Error("The name "+data.name+" is already in use!");
 				if(typeof data.color!=="undefined"){
 					while (data.color.length<4)
 						data.color.push(255);
-					if(innerP.colorToId(data.color)!==id)
+					if(typeof innerP.colorToId(data.color)!=="undefined")
 						throw new Error("The color "+data.color+" is already in use!");
 				}
 				if(typeof data.loop!=="undefined"&&typeof data.pattern==="undefined")
@@ -318,7 +320,7 @@
 				}
 				if(typeof oldData.hitbox==="undefined")
 					oldData.hitbox=innerP.neighborhoods.moore();
-				innerP.elementTypeMap[oldData.name]=oldData;
+				innerP.elementTypeMap[name]=oldData;
 			},
 			__WhatIs:function(getPixelId) {//Generator for whatIs
 				//           (()        )