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()
};