Still buggy

Author: Templarian

src/pg/inputPixelEditor/README.md

@@ -46,7 +46,9 @@ See usage for each method below.
 | `removeLayer(index)` | -      | Remove layer. |
 | `flattenLayers(layerIndexes)` | -      | Flatten layers. |
 | `moveLayer(startIndex, endIndex)` | -    | Move layer. |
+| `getColor()` | -     | Get selected color |
 | `getColors()` | -    | Get colors. |
+| `selectColor(index)` | -    | Select color. |
 | `setColor(index, r, g, b, a)` | -  | Set Color. |
 | `addColor(r, g, b, a)` | -    | Add color. |
 | `removeColor(index)` | -    | Remove color. |
@@ -57,6 +59,7 @@ See usage for each method below.
 | `flipHorizontal()` | -  | Flip horizontal. |
 | `flipVertical()` | -  | Flip vertical. |
 | `invert()` | -  | Invert layer. |
+| `outline()` | - | Outline layer with selected color. |
 
 ### `save(options)` Method
 
@@ -101,7 +104,7 @@ A complete JSON storage for a 10x10 image.
 {
   "width": 10,
   "height": 10,
-  "transparent": true,
+  "transparent": [0],
   "colors": [
     [0, 0, 0, 0],
     [0, 0, 0, 1],

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

@@ -29,6 +29,7 @@ <h3>Canvas Tools</h3>
     <button part="reset">Reset</button>
     <button part="clear">Clear</button>
     <button part="invert">Invert</button>
+    <button part="outline">Outline</button>
     |
     <button part="save">Save</button>
     <button part="open">Open</button>

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

@@ -31,6 +31,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   @Part() $reset: HTMLButtonElement;
   @Part() $clear: HTMLButtonElement;
   @Part() $invert: HTMLButtonElement;
+  @Part() $outline: HTMLButtonElement;
   @Part() $modeStamp1: HTMLButtonElement;
   @Part() $modeStamp2: HTMLButtonElement;
   @Part() $modeStamp3: HTMLButtonElement;
@@ -104,6 +105,9 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     this.$invert.addEventListener('click', () => {
       this.$input.invert();
     });
+    this.$outline.addEventListener('click', () => {
+      this.$input.outline();
+    });
     this.$save.addEventListener('click', async () => {
       const json = await this.$input.save();
       this.$output.textContent = JSON.stringify(json, null, 4);

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -16,6 +16,7 @@ import bitmaskToPath from './utils/bitmapToMask';
 import createLayer from './utils/createLayer';
 import diffGrid from './utils/diffGrid';
 import { getGuides } from './utils/getGuides';
+import { getOutline } from './utils/getOutline';
 
 type Color = [number, number, number, number];
 
@@ -1076,6 +1077,16 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#data.splice(index, 1);
   }
 
+  /**
+   * Outline.
+   */
+  outline() {
+    const pixels = getOutline(this.#data[this.#layer]);
+    pixels.forEach(([x, y]) => {
+      this.#setPixel(x, y, this.#color);
+    });
+  }
+
   /**
    * Flatten layers, first index determines the color
    */

src/pg/inputPixelEditor/utils/getOutline.ts

@@ -1,4 +1,4 @@
-function getOutline(grid) {
+/*export function getOutline(grid) {
   const outline: number[][] = [];
   const rows = grid.length;
   const cols = grid[0].length;
@@ -35,5 +35,129 @@ function getOutline(grid) {
     }
   }
 
+  return outline;
+} */
+
+export function getOutline(grid) {
+  const rows = grid.length;
+  const cols = grid[0].length;
+
+  // ------------------------------------------------------------
+  // 1. Flood-fill background reachable from outside
+  // ------------------------------------------------------------
+  const outside = Array.from({ length: rows }, () => Array(cols).fill(false));
+  const queue: number[][] = [];
+
+  // Add border 0-cells
+  for (let x = 0; x < cols; x++) {
+    if (grid[0][x] === 0) queue.push([x, 0]);
+    if (grid[rows - 1][x] === 0) queue.push([x, rows - 1]);
+  }
+  for (let y = 0; y < rows; y++) {
+    if (grid[y][0] === 0) queue.push([0, y]);
+    if (grid[y][cols - 1] === 0) queue.push([cols - 1, y]);
+  }
+
+  // BFS flood fill
+  while (queue.length) {
+    const [x, y] = queue.shift() as number[];
+    if (outside[y][x]) continue;
+    outside[y][x] = true;
+
+    const dirs = [[1,0],[-1,0],[0,1],[0,-1]];
+    for (const [dx, dy] of dirs) {
+      const nx = x + dx, ny = y + dy;
+      if (
+        nx >= 0 && nx < cols &&
+        ny >= 0 && ny < rows &&
+        grid[ny][nx] === 0 &&
+        !outside[ny][nx]
+      ) {
+        queue.push([nx, ny]);
+      }
+    }
+  }
+
+  // ------------------------------------------------------------
+  // 2. Collect boundary cells (unordered)
+  // ------------------------------------------------------------
+  const boundary = new Set();
+  const key = (x, y) => `${x},${y}`;
+
+  for (let y = 0; y < rows; y++) {
+    for (let x = 0; x < cols; x++) {
+      if (grid[y][x] !== 1) continue;
+
+      const dirs = [[1,0],[-1,0],[0,1],[0,-1]];
+      for (const [dx, dy] of dirs) {
+        const nx = x + dx, ny = y + dy;
+
+        if (
+          nx < 0 || nx >= cols ||
+          ny < 0 || ny >= rows ||
+          (grid[ny][nx] === 0 && outside[ny][nx])
+        ) {
+          boundary.add(key(x, y));
+          break;
+        }
+      }
+    }
+  }
+
+  if (boundary.size === 0) return [];
+
+  // ------------------------------------------------------------
+  // 3. SAFE OUTLINE WALK (no infinite loops)
+  // ------------------------------------------------------------
+
+  // Convert boundary set to a fast lookup
+  const isBoundary = (x, y) => boundary.has(key(x, y));
+
+  // Find a starting boundary cell
+  const [startKey] = boundary;
+  // @ts-ignore
+  const [sx, sy] = startKey.split(',').map(Number);
+
+  const outline: number[][] = [];
+  const visited = new Set();
+  let current = { x: sx, y: sy };
+
+  // Moore-neighborhood directions (8 directions)
+  const dirs8 = [
+    [1,0], [1,1], [0,1], [-1,1],
+    [-1,0], [-1,-1], [0,-1], [1,-1]
+  ];
+
+  const maxSteps = rows * cols * 8;
+
+  for (let step = 0; step < maxSteps; step++) {
+    outline.push([current.x, current.y]);
+    visited.add(key(current.x, current.y));
+
+    // Try to find next boundary neighbor
+    let next = null;
+    for (const [dx, dy] of dirs8) {
+      const nx = current.x + dx;
+      const ny = current.y + dy;
+      if (isBoundary(nx, ny) && !visited.has(key(nx, ny))) {
+        // @ts-ignore
+        next = { x: nx, y: ny };
+        break;
+      }
+    }
+
+    // If no next step → open contour (C-shape)
+    if (!next) break;
+
+    // If next is start → closed loop
+    // @ts-ignore
+    if (next.x === sx && next.y === sy) {
+      outline.push([sx, sy]);
+      break;
+    }
+
+    current = next;
+  }
+
   return outline;
 }