Flood fill selection.

Author: Templarian

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

@@ -38,7 +38,7 @@ <h3>Canvas Tools</h3>
   <div>
     <h3>Selection Tools</h3>
     <button part="selectRectangle">Select Rectangle</button>
-    <button part="selectCircle">Select Circle</button>
+    <button part="selectEllipse">Select Circle</button>
     <button part="selectLasso">Select Lasso</button>
     <button part="selectMagic">Select Magic Wand</button>
   </div>

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

@@ -44,7 +44,7 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
   @Part() $modeEllipse: HTMLButtonElement;
   @Part() $modeEllipseOutline: HTMLButtonElement;
   @Part() $selectRectangle: HTMLButtonElement;
-  @Part() $selectCircle: HTMLButtonElement;
+  @Part() $selectEllipse: HTMLButtonElement;
   @Part() $selectLasso: HTMLButtonElement;
   @Part() $selectMagic: HTMLButtonElement;
 
@@ -104,6 +104,15 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     this.$selectRectangle.addEventListener('click', () => {
       this.$input.inputModeSelectRectangle();
     });
+    this.$selectEllipse.addEventListener('click', () => {
+      this.$input.inputModeSelectEllipse();
+    });
+    this.$selectLasso.addEventListener('click', () => {
+      this.$input.inputModeSelectLasso();
+    });
+    this.$selectMagic.addEventListener('click', () => {
+      this.$input.inputModeSelectMagicWand();
+    });
     this.$reset.addEventListener('click', () => {
       this.$input.reset();
     });

src/pg/inputPixelEditor/inputPixelEditor.ts

@@ -18,6 +18,7 @@ import diffGrid from './utils/diffGrid';
 import { getGuides } from './utils/getGuides';
 import { getOutline } from './utils/getOutline';
 import { getGridColorIndexes } from './utils/getGridColorIndexes';
+import { getFloodFill } from './utils/getFloodFill';
 
 type Color = [number, number, number, number];
 
@@ -297,6 +298,14 @@ export default class PgInputPixelEditor extends HTMLElement {
     });
   }
 
+  clearSelection() {
+    this.#selectionPixels.forEach(([x, y]) => {
+      this.#selection[y][x] = 0;
+    });
+    this.#selectionPixels.clear();
+    this.$selectionPath.classList.toggle('hide', true);
+  }
+
   #setSelectionPixel(x: number, y: number) {
     this.#selectionPixels.set(`${x},${y}`, [x, y]);
     this.#selection[y][x] = 1;
@@ -531,19 +540,20 @@ export default class PgInputPixelEditor extends HTMLElement {
 
   handleKeyDown(event: KeyboardEvent) {
     console.log(event.shiftKey, event.ctrlKey, event.altKey, event.key);
+    this.#isShift = true;
     switch (event.key) {
       case ' ':
         console.log('space');
         break;
       case 'Escape':
         console.log('escape');
-        // Cancel editing
+        this.clearSelection();
         break;
     }
   }
 
   handleKeyUp(event: KeyboardEvent) {
-
+    this.#isShift = false;
   }
 
   handleContextMenu(event: MouseEvent) {
@@ -618,28 +628,64 @@ export default class PgInputPixelEditor extends HTMLElement {
     //  return;
     //}
     // Single Tap
-    if (newX === this.#startX && newY === this.#startY && this.#startColor === 1) {
+    if (newX === this.#startX && newY === this.#startY) {
       switch (this.#inputMode) {
+        case InputMode.SelectMagicWand:
+          if (!event.shiftKey) {
+            this.clearSelection();
+          }
+          const color = this.#data[this.#layer][newY][newX];
+          console.log(color);
+          const pixels = getFloodFill(this.#data[this.#layer], newX, newY, [color]);
+          pixels.forEach(([x, y]) => {
+            this.#setSelectionPixel(x, y);
+          });
+          this.$selectionPathPreview.classList.toggle('hide', true);
+          this.$selectionPath.classList.toggle('hide', false);
+          this.$selectionPath.setAttribute('d', bitmaskToPath(this.#selection, { scale: this.size }));
+          break;
         case InputMode.Pixel:
-          this.#setPixel(newX, newY, 0);
-          this.#data[this.#layer][newY][newX] = 0;
+          if (this.#startColor === 1) {
+            this.#setPixel(newX, newY, 0);
+            this.#data[this.#layer][newY][newX] = 0;
+          }
           break;
         case InputMode.Stamp:
-          this.#inputStamp.forEach((point) => {
-            this.#setPixel(newX + point[0], newY + point[1], 0);
-          });
+          if (this.#startColor === 1) {
+            this.#inputStamp.forEach((point) => {
+              this.#setPixel(newX + point[0], newY + point[1], 0);
+            });
+          }
           break;
       }
     } else {
       switch (this.#inputMode) {
         case InputMode.SelectRectangle:
           this.#clearSelectionPreview();
+          if (!event.shiftKey) {
+            this.clearSelection();
+          }
           getRectanglePixels(this.#startX, this.#startY, newX, newY).forEach(({ x, y }) => {
             this.#setSelectionPixel(x, y);
           });
           this.$selectionPathPreview.classList.toggle('hide', true);
           this.$selectionPath.classList.toggle('hide', false);
           this.$selectionPath.setAttribute('d', bitmaskToPath(this.#selection, { scale: this.size }));
+          break;
+        case InputMode.SelectEllipse:
+          this.#clearSelectionPreview();
+          if (!event.shiftKey) {
+            this.clearSelection();
+          }
+          getEllipsePixels(this.#startX, this.#startY, newX, newY).forEach(({ x, y }) => {
+            this.#setSelectionPixel(x, y);
+          });
+          this.$selectionPathPreview.classList.toggle('hide', true);
+          this.$selectionPath.classList.toggle('hide', false);
+          this.$selectionPath.setAttribute('d', bitmaskToPath(this.#selection, { scale: this.size }));
+          break;
+        case InputMode.SelectLasso:
+
           break;
         case InputMode.Line:
           getLinePixels(this.#startX, this.#startY, newX, newY).forEach(({ x, y }) => {
@@ -862,6 +908,10 @@ export default class PgInputPixelEditor extends HTMLElement {
     this.#redoHistory = [];
   }
 
+  getHistory() {
+    return this.#undoHistory;
+  }
+
   applyTemplate(template: number[][]) {
     this.#data = [template];
     this.#setPixelAll();

src/pg/inputPixelEditor/utils/getFloodFill.ts

@@ -0,0 +1,83 @@
+/**
+ * Represents a coordinate in the 2D array.
+ */
+type Coordinate = [number, number];
+
+/**
+ * Flood fills a 2D array starting from a specific coordinate to find all connected numbers
+ * that are within a specified set of target values.
+ *
+ * @param grid The 2D array (grid) of numbers.
+ * @param startX The starting x-coordinate.
+ * @param startY The starting y-coordinate.
+ * @param targetValues The set of numbers to search for (e.g., [1, 2, 5]).
+ * @returns A list of [x, y] coordinates that were found during the flood fill.
+ */
+export function getFloodFill(
+  grid: number[][],
+  startX: number,
+  startY: number,
+  targetValues: number[]
+): Coordinate[] {
+  // Use a Set for quick lookups of target values
+  const targets = new Set(targetValues);
+
+  // Check if starting coordinates are valid and if the value at the start is a target
+  if (
+    startY < 0 ||
+    startY >= grid.length ||
+    startX < 0 ||
+    startX >= grid[0].length ||
+    !targets.has(grid[startY][startX])
+  ) {
+    return [];
+  }
+
+  // Queue for Breadth-First Search (BFS)
+  const queue: Coordinate[] = [[startX, startY]];
+  // Set to keep track of visited coordinates to avoid cycles and redundant processing
+  const visited = new Set<string>();
+  const foundPixels: Coordinate[] = [];
+
+  // Helper to convert [x, y] to a string key for the 'visited' set
+  const toKey = (x: number, y: number) => `${x},${y}`;
+
+  // Mark the starting pixel as visited and add to found list
+  visited.add(toKey(startX, startY));
+  foundPixels.push([startX, startY]);
+
+  while (queue.length > 0) {
+    const [currentX, currentY] = queue.shift()!;
+    const currentValue = grid[currentY][currentX];
+
+    // Define potential neighbors (up, down, left, right)
+    const neighbors: Coordinate[] = [
+      [currentX + 1, currentY],
+      [currentX - 1, currentY],
+      [currentX, currentY + 1],
+      [currentX, currentY - 1],
+    ];
+
+    for (const [nextX, nextY] of neighbors) {
+      // Check bounds
+      if (
+        nextY >= 0 &&
+        nextY < grid.length &&
+        nextX >= 0 &&
+        nextX < grid[0].length
+      ) {
+        const neighborValue = grid[nextY][nextX];
+        const key = toKey(nextX, nextY);
+
+        // If the neighbor has a target value and has not been visited yet
+        if (targets.has(neighborValue) && !visited.has(key)) {
+          visited.add(key);
+          foundPixels.push([nextX, nextY]);
+          queue.push([nextX, nextY]);
+        }
+      }
+    }
+  }
+
+  return foundPixels;
+}