progress

Author: Templarian

src/components/pg/inputPixelEditor/README.md

@@ -46,6 +46,7 @@ See usage for each method below.
 | Method     | Tested   | Description |
 | ---------- | -------- | ----------- |
 | `getJson(options)` | -        | Get JSON file. |
+| `getData()` | -           | Get layer data. |
 | `setJson(json)` | -        | Set JSON file. |
 | `reset()` | -  | Reset canvas and data. |
 | `getExportCanvas()` | -  | Get new canvas of export. |
@@ -98,7 +99,7 @@ See usage for each method below.
 
 ### `getJson(options)` Method
 
-The `getJson` method allows getting the JSON representation of the current editor. Optionally this can snapshot the entire undo history.
+The `getJson` method allows getting the JSON representation of the current editor. Optionally this can snapshot the entire undo history. To get only data by layer call `getData()`.
 
 ```typescript
 @Part() $editor: PgInputPixelEditor;
@@ -173,8 +174,8 @@ A complete JSON storage for a 10x10 image.
   ],
   "data": [
     [
-      [1, "M...Z"],
-      [2, "M...Z"]
+      [{ "color": 1, "path": "M...Z" }],
+      [{ "color": 2, "path": "M...Z" }]
     ]
   ],
   "history": []
@@ -220,8 +221,8 @@ The most common layer type.
 {
   "data": [
     [
-      [{ "color": 1, "path": "M...Z" }],
-      [{ "color": 2, "path": "M...Z" }]
+      { "color": 1, "path": "M...Z" },
+      { "color": 2, "path": "M...Z" }
     ]
   ]
 }

src/components/pg/inputPixelEditor/inputPixelEditor.ts

@@ -64,10 +64,11 @@ type HistoryItem = {
 type History = HistoryItem[];
 
 type Layer = {
-  name: string,
-  visible: boolean,
-  locked: boolean,
-  opacity: number,
+  name: string
+  type: 'pixel' | 'reference'
+  visible: boolean
+  locked: boolean
+  opacity: number
   export: boolean
 }
 
@@ -87,11 +88,11 @@ interface File {
 }
 
 interface Export {
-  scale?: number;
-  x?: number;
-  y?: number;
-  width?: number;
-  height?: number;
+  scale?: number
+  x?: number
+  y?: number
+  width?: number
+  height?: number
 }
 
 function toColor([r, g, b, a]: Color) {
@@ -256,6 +257,7 @@ export default class PgInputPixelEditor extends HTMLElement {
       this.#layer = [0];
       this.#layers = [{
         name: 'Layer 1',
+        type: 'pixel',
         export: true,
         locked: false,
         visible: true,
@@ -1369,6 +1371,7 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#data.push(fillGrid(this.width, this.height));
     this.#layers.push({
       name: 'Layer 1',
+      type: 'pixel',
       export: true,
       locked: false,
       visible: true,
@@ -1435,6 +1438,31 @@ export default class PgInputPixelEditor extends HTMLElement {
     return this.#getLayerPaths() as any;
   }
 
+  /**
+   * Save schema for `data`.
+   */
+  getData() {
+    return this.#layers.map((layer, layerIndex) => {
+      switch (layer.type) {
+        case 'pixel':
+          const colors = this.getLayerColorIndexes(layerIndex);
+          return colors.map((color) => {
+            return {
+              color,
+              path: bitmaskToPath(this.#data[layerIndex], {
+                scale: 1,
+                include: [color]
+              }),
+            };
+          });
+        case 'reference':
+          return { "id": "uuid", "position": [0, 0] }
+        default:
+          throw new Error('Not implemented');
+      }
+    });
+  }
+
   getExportPath() {
     return bitmaskToPath(this.#export, { scale: 1 });
   }