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 85611c6d..0dae20d5 100644 --- a/pixelmanipulator.html +++ b/pixelmanipulator.html @@ -33,22 +33,33 @@ top:0; left:0; } - #zoom-box{/*This is the container for the zoomed-in box that the user can interact with*/ + #menu-box{ position:fixed; top:0; right:0; z-index:999; height:100%; - flex-direction:column; + flex-direction:row; display:flex; + } + #menu-box>div{ border-left:1px solid lightgrey; } + #zoom-box{/*This is the container for the zoomed-in box that the user can interact with*/ + height:100%; + flex-direction:column; + display:flex; + } #scroll-box{ overflow-y:scroll; } #scroll-box>div{ padding-bottom:1em; } + #scroll-box input[type="text"]{ + text-align:right; + width:3em; + } #actions-box{ border-bottom:1px solid lightgrey; } @@ -66,16 +77,12 @@ #selectorBox:hover{ border:solid rgba(255,255,255,.5) 1px; } - input[type="text"]{ - text-align:right; - width:3em; - } - /*.outline{ - /*border:1px solid metal; - }*/ .click-type-random{ padding-left:1em } + .hidden{ + display:none; + }
@@ -84,65 +91,123 @@ -