bump tools and pixel editor stuff

Author: Templarian

package-lock.json

@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@pictogrammers/element": "0.0.71",
-    "@pictogrammers/element-esbuild": "^0.0.13",
+    "@pictogrammers/element-esbuild": "^0.0.15",
     "@pictogrammers/element-jest": "^0.1.10",
     "cross-env": "^7.0.3",
     "npm-run-all": "^4.1.5",

package.json

@@ -167,18 +167,20 @@ A complete JSON storage for a 10x10 image.
 There are currently 6 differnet layer types.
 
 - `pixel` - Raster artboard of pixels.
-  - `path` - pixels
-  - `color` - colorIndex
+  - `color: 0` - colorIndex
+  - `path: ''` - pixels
 - `reference`
-  - `id` - uuid of frame
+  - `id: 'uuid'` - uuid of frame
   - `position: [x, y]`
 - `pattern` - Repeat an existing frame
-  - `path` - pixels
-  - `id` - uuid of frame
-  - `offset [x, y]` - offset pattern
+  - `id: 'uuid'` - uuid of frame
+  - `position: [x, y]` - required
+  - `size: [x, y]` - optional, size to clip at
+  - `offset [x, y]` - optional, offset pattern
 - `linear` - Linear gradient.
   - `start: [x, y]`
   - `end: [x, y]`
+  - `path: ''` - optional, mask
   - `stops: [[stop, colorIndex], [stop, colorIndex]]`
   - `dither: 'bayer4' | 'bayer8', 'bayer16'`
 - `radial` - Radial gradients.
@@ -188,8 +190,85 @@ There are currently 6 differnet layer types.
   - `stops: [[stop, colorIndex], [stop, colorIndex]]`
   - `dither: 'bayer4' | 'bayer8' | 'bayer16'`
 - `text` - Text, maybe???
-  - `id` - file uuid
-  - `value` - string
+  - `id: 'uuid'` - file uuid
+  - `value: ''` - string
+
+### Layer `pixel` Type
+
+The most common layer type.
+
+```json
+{
+  "data": [
+    [
+      [{ "color": 1, "path": "M...Z" }],
+      [{ "color": 2, "path": "M...Z" }]
+    ]
+  ]
+}
+```
+
+### Layer `reference` Type
+
+Using an existing canvas in a design can be done with a reference layer.
+
+```json
+{
+  "data": [
+    [{ "id": "uuid", "position": [0, 0] }]
+  ]
+}
+```
+
+### Layer `pattern` Type
+
+Using an existing canvas, but in a repeating pattern.
+
+```json
+{
+  "data": [
+    [{ "id": "uuid", "position": [0, 0], "size": [100, 100] }],
+    [{ "id": "uuid", "position": [0, 0], "offset": [0, -2] }]
+  ]
+}
+```
+
+### Layer `linear` / `radial` Type
+
+Linear and radial gradient between 2 points. Both allow a mask to be applied.
+
+```json
+{
+  "data": [
+    [{ "id": "uuid", "start": [0, 0], "end": [100, 100] }],
+    [{ "id": "uuid", "start": [0, 0], "end": [100, 0], "stops": [] }]
+  ]
+}
+```
+
+### Layer `text` Type
+
+Pull down a known font and use it as a reference.
+
+```json
+{
+  "data": [
+    [{ "id": "uuid", "value": "Hello World!", "position": [0, 0] }],
+    [{ "id": "uuid", "value": "Hello World!", "position": [0, 0], "wrap": 100 }]
+  ]
+}
+```
+
+If a `id` is not found in the current file it will call the `reference` event. This event will need to return the found file to the `callback`. This could slow down initial project load.
+
+```typescript
+this.$input.addEventListener('reference', (e: any) => {
+  const { id, callback } = e.detail;
+  if (id === 'uuid') {
+    callback(file);
+  }
+});
+```
 
 ## History
 

src/components/pg/inputPixelEditor/README.md

@@ -66,7 +66,7 @@ <h3>Color Tools <button part="addColor">Add Color</button></h3>
     <pg-table part="colors"></pg-table>
   </div>
   <div>
-    <h3>Layer Tools <button part="addLayer">Add Layer</button></h3>
+    <h3>Layer Tools&nbsp;<small>(inversed, lower index is a higher layer)</small> <button part="addLayer">Add Layer</button></h3>
     <pg-table part="layers"></table>
   </div>
   <div>

src/components/pg/inputPixelEditor/__examples__/basic/basic.html

@@ -1370,10 +1370,14 @@ export default class PgInputPixelEditor extends HTMLElement {
   }
 
   /**
-   * Flatten layers, first index determines the color
+   * Flatten layers, always merges to lowest layer
+   * Note 0 is the lowest layer.
    */
   flattenLayers(indexes: number[]) {
-
+    // ${x},${y} = [x, y, color]
+    const changedPixels = new Map<string, number[]>();
+    //this.#data[index]
+    // Update preview
   }
 
   getLayerColorIndexes(layerIndex = this.#layer[0]) {