rewriting save file

Author: Templarian

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

@@ -124,7 +124,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
           suggestedName: 'Canvas',
           types: [{
             description: 'SVG Document',
-            accept: {'image/svg+xml': ['.svg']},
+            accept: { 'image/svg+xml': ['.svg'] },
           }],
         });
         const writable = await handle.createWritable();
@@ -143,7 +143,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
           suggestedName: 'CanvasName',
           types: [{
             description: 'SVG Document',
-            accept: {'image/svg+xml': ['.svg']},
+            accept: { 'image/svg+xml': ['.svg'] },
           }],
         });
         const writable = await handle.createWritable();
@@ -184,7 +184,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     ];
     this.$layers.addEventListener('action', (e: any) => {
       const { getColumn, getRows, key } = e.detail;
-      switch(key) {
+      switch (key) {
         case 'select':
           getRows().forEach(({ getColumn }) => {
             getColumn('selected').value = false;
@@ -259,15 +259,28 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
       });
     }));
     this.$colors.addEventListener('action', (e: any) => {
-      const { getColumn, getRows, key } = e.detail;
-      switch(key) {
+      const { getColumn, getRows, key, value, index } = e.detail;
+      const [r, g, b, a] = this.$input.getColor(index);
+      switch (key) {
         case 'select':
           getRows().forEach(({ getColumn }) => {
             getColumn('selected').value = false;
           });
           getColumn('selected').value = true;
           this.$input.selectColor(getColumn('select').value);
           break;
+        case 'r':
+          this.$input.setColor(index, value, g, b, a);
+          break;
+        case 'g':
+          this.$input.setColor(index, r, value, b, a);
+          break;
+        case 'b':
+          this.$input.setColor(index, r, g, value, a);
+          break;
+        case 'a':
+          this.$input.setColor(index, r, g, b, value);
+          break;
       }
     });
     this.$addColor.addEventListener('click', () => {
@@ -295,7 +308,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     if (files.length !== 1) {
       throw new Error('select only 1 file');
     }
-    switch(files[0].type) {
+    switch (files[0].type) {
       case 'image/svg+xml':
         // Read the file
         const reader = new FileReader();

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -17,6 +17,7 @@ import createLayer from './utils/createLayer';
 import diffGrid from './utils/diffGrid';
 import { getGuides } from './utils/getGuides';
 import { getOutline } from './utils/getOutline';
+import { getGridColorIndexes } from './utils/getGridColorIndexes';
 
 type Color = [number, number, number, number];
 
@@ -1042,6 +1043,10 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#colors.splice(index, 1);
   }
 
+  getColor(index) {
+    return this.#colors[index];
+  }
+
   setColor(index, r, g, b, a) {
     this.#colors[index] = [r, g, b, a];
   }
@@ -1094,6 +1099,10 @@ export default class PgInputPixelEditor extends HTMLElement {
 
   }
 
+  getLayerColorIndexes() {
+    return getGridColorIndexes(this.#data[this.#layer]);
+  }
+
   getLayerPaths() {
     return this.#data.map(layer => bitmaskToPath(layer, { scale: 1 }));
   }

src/pg/inputPixelEditor/utils/getGridColorIndexes.ts

@@ -0,0 +1,13 @@
+export function getGridColorIndexes(arr: number[][]) {
+  const seen = new Set();
+  const result: number[] = [];
+  for (const innerArray of arr) {
+    for (const value of innerArray) {
+      if (!seen.has(value)) {
+        seen.add(value);
+        result.push(value);
+      }
+    }
+  }
+  return result;
+}