Finishing touches on customizer.

README.md

@@ -18,10 +18,11 @@ between the viewfinder and the full-view pixel array - are also equipped so you
 can line up your complicated large-scale builds. You can even disable the
 targeter lines, the "focus box;" a box indicating the location of the
 viewfinder, and the pixelCounter, a tool that lets you see how many of what
-pixel are present. Don't forget that the pixel placer menu lets you not only set
-a different element for alt, normal and control clicking, but lets you fill the
-full-view pixel array with a specified random percent of that element with only
-a button click.
+pixel are present. Don't forget that the pixel placer menu lets you not only
+set a different element for alt, normal and control clicking, but lets you fill
+the full-view pixel array with a specified random percent of that element with
+only a button click. All this, and a newly added element customizer, allowing
+one to edit the color, name and loop attributes of an element.
 
 Pre-programmed cellular automata include:
 
@@ -113,7 +114,7 @@ The example code above included `B2/S23` (AKA "Conway's game of Life") as an exa
 
 ## Documentation
 
-Function-by function documentation. (Updated last for version `4.4`)
+Function-by function documentation. (Updated last for version `4.5`)
 
 ### The global
 
@@ -233,6 +234,17 @@ All of the properties that this object can accept are these:
 }
 ```
 
+#### modifyElement
+
+Takes the element ID number and an object (same syntax as above).
+
+Any values present in the object will be applied to the pre-existing element.
+
+Automatically calls `aliasElements` if `name` is present in the object.
+
+If `pattern` is present, it will intelegently replace the `liveCell` and
+`deadCell` callbacks.
+
 #### addMultipleElements
 
 `p.addMultipleElements` can make your code more readable and passes in the input
@@ -251,6 +263,16 @@ p.addMultipleElements({
 });
 ```
 
+#### aliasElements
+
+Takes the old data object and the new one. (currently only accesses the "name" property)
+
+Adds element to `nameAliases`, and ensures no alias loops are present.
+
+#### getElementByName
+
+Returns the element from `elementTypeMap`, respecting aliases in `nameAliases`.
+
 #### About The Pre-built classes
 
 As shown in Getting Started, there are "Lifelike" automata. But there are also "Wolfram" automata.
@@ -537,6 +559,10 @@ A function that sets things such as `imageSmoothinEnabled` to be `false`, and de
 
 These functions get called before and after the `iterate` function does it's work (respectfully).
 
+#### onElementModified
+
+Gets called after a call to `modifyElement`. The ID is passed as the only argument.
+
 #### version
 
 This is a string indicating the version of the library. Follows [semver](https://semver.org).
@@ -572,10 +598,18 @@ Format is much like the argument to `p.addMultipleElements`, but is sanitized.
 Includes a `number` value that serves as the element's ID number and a `name`
 value for convenience in making general components of elements.
 
+> Warning! Does not respect the `nameAliases` object!
+
 #### elementNumList
 
 A list of all string-names in `p.elementTypeMap`, in order of ID number.
 
+#### nameAliases
+
+A mapping from old names for element to new names to for elements.
+
+Allows a user to modify the name of an element at runtime.
+
 #### mode
 
 A string indicating weather it is currently animating or not.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelmanipulator",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "description": "Run any cellular automata on an html5 canvas.",
   "main": "pixelmanipulator.js",
   "repository": "[email protected]:Lazerbeak12345/pixelmanipulator.git",

pixelmanipulator.html

@@ -205,7 +205,7 @@
 							<a target="_blank" href="https://github.com/Lazerbeak12345/pixelmanipulator">View Pixelmanipulator On GitHub!</a>
 						</div>
 						<!-- Frontend will be 2.0.0 when I refresh the GUI's look. -->
-						Library v<span id="backendversion"></span>, Frontend v1.29.0
+						Library v<span id="backendversion"></span>, Frontend v1.30.0
 					</div><!--The frontend version is different because there are changes that don't impact the rest of the library -->
 				</div>
 			</div>
@@ -342,8 +342,8 @@
 					output.push(alpha);
 				return output;
 			}
-			function updateCustomizer(value){
-				var elm=p.elementTypeMap[value],
+			function updateCustomizer(){
+				var elm=p.elementTypeMap[document.getElementById("customSelect").value],
 						customizeSection=document.getElementById("customizePatternSection");
 				document.getElementById("customizeColor").value=rgb2hex(elm.color);
 				document.getElementById("customColorAlpha").value=elm.color[3];// Raw alpha value
@@ -403,15 +403,13 @@
 					p.modifyElement(p.elementTypeMap[customizerS.value].number,{
 						name:this.value
 					});
-					customizerS.value=this.value;
-					updateCustomizer(customizerS.value);
+					updateCustomizer();
 				});
 				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);
@@ -420,7 +418,6 @@
 					p.modifyElement(p.elementTypeMap[customizerS.value].number,{
 						loop:this.checked
 					});
-					updateCustomizer(customizerS.value);
 					console.groupEnd("change loop");
 				});
 				shtargeterElm.addEventListener('click',function() {
@@ -437,12 +434,12 @@
 					selectorBoxElm.style.visibility=state;
 				});
 				customizerS.addEventListener('change',function(){
-					updateCustomizer(this.value)
+					updateCustomizer()
 				})
 				document.getElementById('customizeT').addEventListener('click',function() {
 					if(this.checked){
 						customizer.classList.remove("hidden")
-						updateCustomizer(customizerS.value)
+						updateCustomizer()
 					}else{
 						customizer.classList.add("hidden")
 					}
@@ -668,6 +665,7 @@
 				csve.value=(p.getElementByName(csv)||{name:""}).name;
 				asve.value=(p.getElementByName(asv)||{name:""}).name;
 				cusve.value=(p.getElementByName(cusv)||{name:""}).name;
+				if(cusve.value)updateCustomizer()
 			};
 		</script>
 	</body>

pixelmanipulator.js

@@ -17,7 +17,7 @@
 // Concerning the function commments, # is number, [] means array, {} means object, () means function, true means boolean and, "" means string. ? means optional, seperated with : means that it could be one or the other
 (function(g) {
 	'use strict';
-	var pxversion="4.4.0";
+	var pxversion="4.5.0";
 	function pix(require,exports,module) {//done like this for better support for things like require.js and Dojo
 		/*function ret(v) {
 			return (function() {