Starting layer editing.

Author: Templarian

src/pg/inputPixelEditor/README.md

@@ -40,13 +40,14 @@ See usage for each method below.
 | `hasUndo()` | -     | Has undo |
 | `hasRedo()` | -     | Has redo |
 | `redo()` | -           | Redo. |
-| `selectLayer()` | -    | Select layer. |
+| `selectLayer(index)` | -    | Select layer. |
 | `getLayers()` | -    | Get layer array. |
 | `addLayer(option)` | -        | Add layer. |
 | `removeLayer(index)` | -      | Remove layer. |
 | `flattenLayers(layerIndexes)` | -      | Flatten layers. |
 | `moveLayer(startIndex, endIndex)` | -    | Move layer. |
 | `getColors()` | -    | Get colors. |
+| `setColor(index, r, g, b, a)` | -  | Set Color. |
 | `addColor(r, g, b, a)` | -    | Add color. |
 | `removeColor(index)` | -    | Remove color. |
 | `moveColor(startIndex, endIndex)` | -    | Move index. |

src/pg/inputPixelEditor/__examples__/basic/basic.ts

@@ -161,9 +161,14 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
       hideLabel: true,
     }];
     this.$addLayer.addEventListener('click', () => {
-      // number[][][]
-      // this.$input.addLayer();
-
+      this.$layers.data.push(
+        createTableItem({
+          name: 'Layer 1',
+          type: 'pixel',
+          selected: true,
+        })
+      );
+      this.$input.addLayer();
     });
     // Colors
     this.$colors.columns = [{

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -995,4 +995,43 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#init();
   }
 
+  addColor(r, g, b, a) {
+    this.#colors.push([r, g, b, a]);
+  }
+
+  removeColor(index) {
+    this.#colors.splice(index, 1);
+  }
+
+  setColor(index, r, g, b, a) {
+    this.#colors[index] = [r, g, b, a];
+  }
+
+  moveColor(startIndex, endIndex) {
+
+  }
+
+  getLayers() {
+    return this.#data.map((data, index) => index);
+  }
+
+  selectLayer(index) {
+    this.#layer = index;
+  }
+
+  addLayer() {
+    this.#data.push(fillGrid(this.width, this.height));
+  }
+
+  removeLayer(index) {
+    this.#data.splice(index, 1);
+  }
+
+  /**
+   * Flatten layers, first index determines the color
+   */
+  flattenLayers(layerIndexes: number[]) {
+
+  }
+
 }

src/pg/json/json.ts

@@ -83,6 +83,9 @@ export default class PgJson extends HTMLElement {
 
   render(changes) {
     if (changes.value && this.value !== null) {
+      if (this.$container.children.length === 1) {
+        this.$container.children[0].remove();
+      }
       if (typeof this.value === 'object') {
         const $object = document.createElement('pg-json-object') as PgJsonObject;
         $object.value = unwrapObject(this.value);