Progress for multi-color support.

Author: Templarian

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

@@ -8,6 +8,7 @@ import { patterns } from './constants';
 import template from './basic.html';
 import style from './basic.css';
 
+const IconPicker = 'M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z';
 const IconTrash = 'M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z';
 const IconLayerEdit = 'M4.63 10.27L3 9L12 2L19.94 8.17L12.5 15.61L12 16L4.63 10.27M10 18.94V18.11L10.59 17.53L10.63 17.5L4.62 12.81L3 14.07L10 19.5V18.94M21.7 12.58L20.42 11.3C20.21 11.09 19.86 11.09 19.65 11.3L18.65 12.3L20.7 14.35L21.7 13.35C21.91 13.14 21.91 12.79 21.7 12.58M12 21H14.06L20.11 14.93L18.06 12.88L12 18.94V21Z';
 
@@ -221,17 +222,62 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
       label: 'Alpha',
       key: 'a',
       editable: true,
+    }, {
+      label: 'Selected',
+      key: 'selected',
+      hideLabel: true,
+    }, {
+      label: 'Select',
+      key: 'select',
+      hideLabel: true,
     }, {
       label: 'Delete',
       key: 'delete',
       hideLabel: true,
     }];
+    this.$colors.data.push(...this.$input.getColors().map(([r, g, b, a], i) => {
+      return createTableItem({
+        r,
+        g,
+        b,
+        a,
+        selected: i === 1,
+        select: {
+          type: PgTableCellButtonIcon,
+          icon: IconPicker,
+          value: i,
+        },
+        delete: {
+          type: PgTableCellButtonIcon,
+          icon: IconTrash,
+          value: i,
+        }
+      });
+    }));
+    this.$colors.addEventListener('action', (e: any) => {
+      const { getColumn, getRows, key } = e.detail;
+      switch(key) {
+        case 'select':
+          getRows().forEach(({ getColumn }) => {
+            getColumn('selected').value = false;
+          });
+          getColumn('selected').value = true;
+          this.$input.selectColor(getColumn('select').value);
+          break;
+      }
+    });
     this.$addColor.addEventListener('click', () => {
       this.$colors.data.push(createTableItem({
         r: 5,
         g: 5,
         b: 5,
         a: 1,
+        selected: false,
+        select: {
+          type: PgTableCellButtonIcon,
+          icon: IconPicker,
+          value: this.$colors.data.length,
+        },
         delete: {
           type: PgTableCellButtonIcon,
           icon: IconTrash

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -116,9 +116,11 @@ export default class PgInputPixelEditor extends HTMLElement {
   #undoHistory: History[] = [];
   #redoHistory: History[] = [];
   #context: CanvasRenderingContext2D;
+  #color: number = 1;
   #colors: Color[] = [
     [0, 0, 0, 0],
-    [0, 0, 0, 1]
+    [0, 0, 0, 1],
+    [255, 0, 255, 1]
   ];
   #baseLayer: HTMLCanvasElement;
   #baseLayerContext: CanvasRenderingContext2D;
@@ -535,7 +537,7 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#startY = newY;
     this.#x = newX;
     this.#y = newY;
-    const color = event.buttons === 32 ? 0 : 1;
+    const color = event.buttons === 32 ? 0 : this.#color;
     switch (this.#inputMode) {
       case InputMode.Pixel:
         this.#setPixel(newX, newY, color);
@@ -660,7 +662,7 @@ export default class PgInputPixelEditor extends HTMLElement {
         points.push([newX, newY]);
       }
       // Is Eraser
-      const color = event.buttons === 32 ? 0 : 1;
+      const color = event.buttons === 32 ? 0 : this.#color;
       // Shape tools only care about the last point
       if (points.length === 0) { return; }
       const [lastX, lastY] = points.at(-1) as [number, number];
@@ -1023,6 +1025,14 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#init();
   }
 
+  selectColor(index) {
+    this.#color = index;
+  }
+
+  getColors() {
+    return this.#colors;
+  }
+
   addColor(r, g, b, a) {
     this.#colors.push([r, g, b, a]);
   }

src/pg/inputPixelEditor/utils/getOutline.ts

@@ -0,0 +1,39 @@
+function getOutline(grid) {
+  const outline: number[][] = [];
+  const rows = grid.length;
+  const cols = grid[0].length;
+
+  // Directions: [dx, dy]
+  const dirs = [
+    [0, -1], // up
+    [1, 0],  // right
+    [0, 1],  // down
+    [-1, 0]  // left
+  ];
+
+  for (let y = 0; y < rows; y++) {
+    for (let x = 0; x < cols; x++) {
+      if (grid[y][x] !== 1) continue;
+
+      // Check if this cell touches the boundary of the shape
+      let isBoundary = false;
+
+      for (const [dx, dy] of dirs) {
+        const nx = x + dx;
+        const ny = y + dy;
+
+        // If neighbor is out of bounds OR is zero, this is an outline cell
+        if (ny < 0 || ny >= rows || nx < 0 || nx >= cols || grid[ny][nx] === 0) {
+          isBoundary = true;
+          break;
+        }
+      }
+
+      if (isBoundary) {
+        outline.push([x, y]);
+      }
+    }
+  }
+
+  return outline;
+}