diff --git a/README.md b/README.md index 1a9a9995..9ff0fa86 100644 --- a/README.md +++ b/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. diff --git a/package.json b/package.json index 3d94c7bf..1abac715 100644 --- a/package.json +++ b/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": "git@github.com:Lazerbeak12345/pixelmanipulator.git", diff --git a/pixelmanipulator.html b/pixelmanipulator.html index a2e053d6..0dae20d5 100644 --- a/pixelmanipulator.html +++ b/pixelmanipulator.html @@ -205,7 +205,7 @@ View Pixelmanipulator On GitHub! - Library v, Frontend v1.29.0 + Library v, Frontend v1.30.0 @@ -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() }; diff --git a/pixelmanipulator.js b/pixelmanipulator.js index 4d576f4a..ae1b92fb 100644 --- a/pixelmanipulator.js +++ b/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() {