pixelweaver 0.1.0

package/plugins/builtin/selection-tool.ts

@@ -0,0 +1,388 @@
+/**
+ * Selection Tool Plugin -- rectangle and lasso (polygon) selection.
+ *
+ * Registers:
+ *   - Command: `select_rect` (tier: 'frame') -- not pixel-modifying, but recorded for undo
+ *   - Command: `select_lasso` (tier: 'frame')
+ *   - Command: `move_selection` (tier: 'frame') -- moves selected pixels
+ *   - Command: `delete_selection` (tier: 'frame') -- clears selected pixels to transparent
+ *   - Command: `deselect` (tier: 'frame')
+ *   - Tool: `rect-select`
+ *   - Tool: `lasso-select`
+ *
+ * Selection state is a module-level Set<string> of "x,y" keys.
+ * Only operations that modify pixels (move, delete) are true undoable commands.
+ * Selecting/deselecting is non-destructive but still recorded for undo convenience.
+ */
+
+import type { PluginModule } from '../../src/lib/core/plugin-loader.js';
+import type { PixelData, Point } from './drawing-utils.js';
+import { snapshotPixels, applyPixels } from './drawing-utils.js';
+import RectSelectIcon from '~icons/lucide/square-dashed';
+import SelectIcon from '~icons/lucide/lasso';
+
+// --- Selection state (module-level singleton) ---
+
+/** The current set of selected pixel coordinates as "x,y" strings. */
+let selectedPixels = new Set<string>();
+
+/** Whether any pixels are currently selected. */
+export function hasSelection(): boolean {
+  return selectedPixels.size > 0;
+}
+
+/** Get the current selection set (read-only reference). */
+export function getSelectedPixels(): ReadonlySet<string> {
+  return selectedPixels;
+}
+
+/** Check if a specific pixel is selected. */
+export function isSelected(x: number, y: number): boolean {
+  return selectedPixels.has(`${String(x)},${String(y)}`);
+}
+
+/** Select all pixels inside a rectangle. */
+export function selectRect(x: number, y: number, w: number, h: number): void {
+  selectedPixels = new Set<string>();
+  for (let py = y; py < y + h; py++) {
+    for (let px = x; px < x + w; px++) {
+      selectedPixels.add(`${String(px)},${String(py)}`);
+    }
+  }
+}
+
+/**
+ * Select all pixels inside a polygon defined by the given vertices.
+ * Uses the ray-casting algorithm for point-in-polygon testing.
+ */
+export function selectLasso(points: Point[]): void {
+  if (points.length < 3) {
+    selectedPixels = new Set<string>();
+    return;
+  }
+
+  // Compute bounding box of the polygon
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const p of points) {
+    if (p.x < minX) minX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y > maxY) maxY = p.y;
+  }
+
+  selectedPixels = new Set<string>();
+  // Test each pixel in the bounding box
+  for (let py = Math.floor(minY); py <= Math.ceil(maxY); py++) {
+    for (let px = Math.floor(minX); px <= Math.ceil(maxX); px++) {
+      if (pointInPolygon(px, py, points)) {
+        selectedPixels.add(`${String(px)},${String(py)}`);
+      }
+    }
+  }
+}
+
+/** Clear the current selection. */
+export function deselect(): void {
+  selectedPixels = new Set<string>();
+}
+
+/**
+ * Ray-casting point-in-polygon test.
+ * Casts a ray from (px, py) in the +X direction and counts edge crossings.
+ * An odd count means the point is inside.
+ */
+export function pointInPolygon(px: number, py: number, polygon: Point[]): boolean {
+  let inside = false;
+  const n = polygon.length;
+
+  for (let i = 0, j = n - 1; i < n; j = i++) {
+    const pi = polygon[i];
+    const pj = polygon[j];
+    if (!pi || !pj) continue;
+    const xi = pi.x, yi = pi.y;
+    const xj = pj.x, yj = pj.y;
+
+    // Check if the ray from (px, py) in +X direction crosses the edge (i, j)
+    const intersect =
+      ((yi > py) !== (yj > py)) &&
+      (px < (xj - xi) * (py - yi) / (yj - yi) + xi);
+
+    if (intersect) inside = !inside;
+  }
+
+  return inside;
+}
+
+// --- Plugin ---
+
+export const selectionToolPlugin: PluginModule = {
+  name: 'builtin/selection',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    // --- Commands ---
+
+    api.addCommand('select_rect', {
+      tier: 'frame',
+
+      execute(params) {
+        // Capture previous selection as snapshot for undo
+        const prevSelection = Array.from(selectedPixels);
+        selectRect(
+          params["x"],
+          params["y"],
+          params["w"],
+          params["h"],
+        );
+        return prevSelection;
+      },
+
+      undo(_params, _ctx, snapshot) {
+        selectedPixels = new Set((snapshot ?? []) as string[]);
+      },
+
+      describe(params) {
+        return `Selected rect (${String(params["x"])},${String(params["y"])}) ${String(params["w"])}x${String(params["h"])}`;
+      },
+    });
+
+    api.addCommand('select_lasso', {
+      tier: 'frame',
+
+      execute(params) {
+        const prevSelection = Array.from(selectedPixels);
+        selectLasso(params["points"]);
+        return prevSelection;
+      },
+
+      undo(_params, _ctx, snapshot) {
+        selectedPixels = new Set((snapshot ?? []) as string[]);
+      },
+
+      describe(params) {
+        const pts = params["points"];
+        return `Selected lasso with ${String(pts.length)} vertices`;
+      },
+    });
+
+    api.addCommand('move_selection', {
+      tier: 'frame',
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        const dx = params["dx"];
+        const dy = params["dy"];
+
+        // Build snapshot of all affected pixels (source + destination) before modifying
+        const allPoints: Point[] = [];
+        for (const key of selectedPixels) {
+          const [sx, sy] = key.split(',').map(Number) as [number, number];
+          allPoints.push({ x: sx, y: sy });
+          allPoints.push({ x: sx + dx, y: sy + dy });
+        }
+        const snapshot = snapshotPixels(buffer, allPoints);
+
+        // Read selected pixel colors, clear originals, write at offset
+        const pixelColors: { x: number; y: number; r: number; g: number; b: number; a: number }[] = [];
+        for (const key of selectedPixels) {
+          const [sx, sy] = key.split(',').map(Number) as [number, number];
+          const [r, g, b, a] = buffer.getPixel(sx, sy);
+          pixelColors.push({ x: sx, y: sy, r, g, b, a });
+        }
+
+        // Clear original positions
+        for (const pc of pixelColors) {
+          buffer.setPixel(pc.x, pc.y, 0, 0, 0, 0);
+        }
+
+        // Write at new positions
+        for (const pc of pixelColors) {
+          const nx = pc.x + dx;
+          const ny = pc.y + dy;
+          if (buffer.inBounds(nx, ny)) {
+            buffer.setPixel(nx, ny, pc.r, pc.g, pc.b, pc.a);
+          }
+        }
+
+        // Update selection coordinates
+        const newSelection = new Set<string>();
+        for (const key of selectedPixels) {
+          const [sx, sy] = key.split(',').map(Number) as [number, number];
+          newSelection.add(`${String(sx + dx)},${String(sy + dy)}`);
+        }
+        selectedPixels = newSelection;
+
+        return snapshot;
+      },
+
+      undo(params, ctx, snapshot) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        applyPixels(buffer, snapshot as PixelData[]);
+
+        // Reverse the selection coordinate shift
+        const dx = params["dx"];
+        const dy = params["dy"];
+        const restoredSelection = new Set<string>();
+        for (const key of selectedPixels) {
+          const [sx, sy] = key.split(',').map(Number) as [number, number];
+          restoredSelection.add(`${String(sx - dx)},${String(sy - dy)}`);
+        }
+        selectedPixels = restoredSelection;
+      },
+
+      describe(params) {
+        return `Moved selection by (${String(params["dx"])}, ${String(params["dy"])})`;
+      },
+    });
+
+    api.addCommand('delete_selection', {
+      tier: 'frame',
+
+      execute(_params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        // Snapshot selected pixels for undo
+        const points: Point[] = [];
+        for (const key of selectedPixels) {
+          const [x, y] = key.split(',').map(Number) as [number, number];
+          points.push({ x, y });
+        }
+        const snapshot = snapshotPixels(buffer, points);
+
+        // Clear selected pixels to transparent
+        for (const key of selectedPixels) {
+          const [x, y] = key.split(',').map(Number) as [number, number];
+          buffer.setPixel(x, y, 0, 0, 0, 0);
+        }
+
+        return snapshot;
+      },
+
+      undo(_params, ctx, snapshot) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        applyPixels(buffer, snapshot as PixelData[]);
+      },
+
+      describe() {
+        return `Deleted selected pixels`;
+      },
+    });
+
+    api.addCommand('deselect', {
+      tier: 'frame',
+
+      execute() {
+        const prevSelection = Array.from(selectedPixels);
+        deselect();
+        return prevSelection;
+      },
+
+      undo(_params, _ctx, snapshot) {
+        selectedPixels = new Set((snapshot ?? []) as string[]);
+      },
+
+      describe() {
+        return 'Deselected';
+      },
+    });
+
+    // --- Toolbar contributions ---
+
+    api.addToolbarItem('toolbar:drawing-tools:rect-select', {
+      toolbarId: 'drawing-tools',
+      kind: 'tool',
+      targetId: 'rect-select',
+      group: 'select',
+      order: 10,
+    });
+
+    api.addToolbarItem('toolbar:drawing-tools:lasso-select', {
+      toolbarId: 'drawing-tools',
+      kind: 'tool',
+      targetId: 'lasso-select',
+      group: 'select',
+      order: 20,
+    });
+
+    // --- Tools ---
+
+    // Rectangle select tool
+    let rectDrawing = false;
+    let rectStartX = 0;
+    let rectStartY = 0;
+
+    api.addTool('rect-select', {
+      icon: RectSelectIcon,
+      cursor: 'crosshair',
+
+      onPointerDown(_e, ctx) {
+        rectDrawing = true;
+        rectStartX = ctx.canvasX;
+        rectStartY = ctx.canvasY;
+      },
+
+      onPointerMove(_e, _ctx) {
+        // Preview handled by canvas viewport
+      },
+
+      onPointerUp(_e, ctx) {
+        if (!rectDrawing) return;
+        rectDrawing = false;
+
+        const x = Math.min(rectStartX, ctx.canvasX);
+        const y = Math.min(rectStartY, ctx.canvasY);
+        const w = Math.abs(ctx.canvasX - rectStartX) + 1;
+        const h = Math.abs(ctx.canvasY - rectStartY) + 1;
+
+        ctx.api.dispatch({
+          type: 'select_rect',
+          plugin: 'builtin/selection',
+          version: '1.0.0',
+          params: { x, y, w, h },
+        });
+      },
+    });
+
+    // Lasso select tool
+    let lassoDrawing = false;
+    let lassoPoints: Point[] = [];
+
+    api.addTool('lasso-select', {
+      icon: SelectIcon,
+      cursor: 'crosshair',
+
+      onPointerDown(_e, ctx) {
+        lassoDrawing = true;
+        lassoPoints = [{ x: ctx.canvasX, y: ctx.canvasY }];
+      },
+
+      onPointerMove(_e, ctx) {
+        if (!lassoDrawing) return;
+        lassoPoints.push({ x: ctx.canvasX, y: ctx.canvasY });
+      },
+
+      onPointerUp(_e, ctx) {
+        if (!lassoDrawing) return;
+        lassoDrawing = false;
+
+        if (lassoPoints.length < 3) return;
+
+        ctx.api.dispatch({
+          type: 'select_lasso',
+          plugin: 'builtin/selection',
+          version: '1.0.0',
+          params: { points: lassoPoints },
+        });
+
+        lassoPoints = [];
+      },
+    });
+  },
+};

package/plugins/builtin/selection.test.ts

@@ -0,0 +1,195 @@
+/**
+ * Tests for the selection tool plugin.
+ *
+ * Covers rect select, lasso select, point-in-polygon,
+ * move selection, delete selection, and deselect.
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { PixelBuffer } from '../../src/lib/canvas/pixel-buffer.js';
+import { commandRegistry } from '../../src/lib/core/registries.svelte.js';
+import { dispatch, undoLast, _resetForTesting as resetDispatcher, setContext } from '../../src/lib/core/dispatcher.js';
+import type { Command } from '../../src/lib/core/commands.js';
+import type { CommandType, ParamsOf } from '../../src/lib/core/command-params.js';
+import { createPluginAPI } from '../../src/lib/core/plugin-api.js';
+
+import {
+  selectionToolPlugin,
+  selectRect,
+  selectLasso,
+  deselect,
+  isSelected,
+  hasSelection,
+  getSelectedPixels,
+  pointInPolygon,
+} from './selection-tool.js';
+
+// --- Helpers ---
+
+// Typed overload: validates params when type is a known command literal
+function makeCommand<T extends CommandType>(type: T, params: ParamsOf<T>): Command;
+// String fallback: for dynamic/unknown command types in tests
+function makeCommand(type: string, params?: Record<string, unknown>): Command;
+function makeCommand(type: string, params: Record<string, unknown> = {}): Command {
+  return { type, plugin: 'test', version: '1.0.0', params, timestamp: Date.now(), id: crypto.randomUUID() };
+}
+
+function setupBuffer(width = 16, height = 16): PixelBuffer {
+  const buffer = new PixelBuffer(width, height);
+  setContext({ getActiveBuffer: () => buffer });
+  return buffer;
+}
+
+// --- Tests ---
+
+describe('Selection Tool Plugin', () => {
+  beforeEach(() => {
+    resetDispatcher();
+    deselect();
+    const api = createPluginAPI('builtin/selection');
+    selectionToolPlugin.register(api);
+  });
+
+  it('should register all selection commands', () => {
+    expect(commandRegistry.get('select_rect')).toBeDefined();
+    expect(commandRegistry.get('select_lasso')).toBeDefined();
+    expect(commandRegistry.get('move_selection')).toBeDefined();
+    expect(commandRegistry.get('delete_selection')).toBeDefined();
+    expect(commandRegistry.get('deselect')).toBeDefined();
+  });
+
+  it('rect select sets correct pixels in selection', () => {
+    selectRect(2, 3, 4, 5);
+    expect(hasSelection()).toBe(true);
+    expect(isSelected(2, 3)).toBe(true);
+    expect(isSelected(5, 7)).toBe(true);
+    expect(isSelected(1, 3)).toBe(false);
+    expect(isSelected(6, 3)).toBe(false);
+    expect(getSelectedPixels().size).toBe(20); // 4 * 5
+  });
+
+  it('lasso select with triangle selects correct interior points', () => {
+    // Triangle with vertices at (0,0), (10,0), (5,10)
+    const triangle = [{ x: 0, y: 0 }, { x: 10, y: 0 }, { x: 5, y: 10 }];
+    selectLasso(triangle);
+    expect(hasSelection()).toBe(true);
+    // Center of the triangle should be selected
+    expect(isSelected(5, 3)).toBe(true);
+    // Far outside should not be selected
+    expect(isSelected(15, 15)).toBe(false);
+  });
+
+  it('point-in-polygon handles boundary and concave shapes', () => {
+    // Concave L-shape polygon
+    const lShape = [
+      { x: 0, y: 0 },
+      { x: 4, y: 0 },
+      { x: 4, y: 2 },
+      { x: 2, y: 2 },
+      { x: 2, y: 4 },
+      { x: 0, y: 4 },
+    ];
+    // Inside the L
+    expect(pointInPolygon(1, 1, lShape)).toBe(true);
+    expect(pointInPolygon(1, 3, lShape)).toBe(true);
+    // Inside the notch (outside the L)
+    expect(pointInPolygon(3, 3, lShape)).toBe(false);
+    // Clearly outside
+    expect(pointInPolygon(5, 5, lShape)).toBe(false);
+  });
+
+  it('move selection: pixels move and old area becomes transparent', () => {
+    const buffer = setupBuffer(16, 16);
+    // Paint some pixels
+    buffer.setPixel(2, 2, 255, 0, 0, 255);
+    buffer.setPixel(3, 2, 0, 255, 0, 255);
+    selectRect(2, 2, 2, 1);
+
+    dispatch(makeCommand('move_selection', { dx: 5, dy: 3 }));
+
+    // Old positions should be transparent
+    expect(buffer.getPixel(2, 2)).toEqual([0, 0, 0, 0]);
+    expect(buffer.getPixel(3, 2)).toEqual([0, 0, 0, 0]);
+    // New positions should have the colors
+    expect(buffer.getPixel(7, 5)).toEqual([255, 0, 0, 255]);
+    expect(buffer.getPixel(8, 5)).toEqual([0, 255, 0, 255]);
+  });
+
+  it('delete selection: selected pixels become transparent', () => {
+    const buffer = setupBuffer(8, 8);
+    buffer.fill(255, 0, 0, 255);
+    selectRect(1, 1, 3, 3);
+
+    dispatch(makeCommand('delete_selection', {}));
+
+    // Selected region should be transparent
+    expect(buffer.getPixel(1, 1)).toEqual([0, 0, 0, 0]);
+    expect(buffer.getPixel(2, 2)).toEqual([0, 0, 0, 0]);
+    expect(buffer.getPixel(3, 3)).toEqual([0, 0, 0, 0]);
+    // Outside selection should be unchanged
+    expect(buffer.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+    expect(buffer.getPixel(4, 4)).toEqual([255, 0, 0, 255]);
+  });
+
+  it('deselect clears the selection', () => {
+    selectRect(0, 0, 5, 5);
+    expect(hasSelection()).toBe(true);
+    deselect();
+    expect(hasSelection()).toBe(false);
+    expect(getSelectedPixels().size).toBe(0);
+  });
+
+  it('undo delete_selection restores pixels', () => {
+    const buffer = setupBuffer(8, 8);
+    buffer.fill(100, 200, 50, 255);
+    selectRect(2, 2, 2, 2);
+
+    dispatch(makeCommand('delete_selection', {}));
+    expect(buffer.getPixel(2, 2)).toEqual([0, 0, 0, 0]);
+
+    undoLast();
+    expect(buffer.getPixel(2, 2)).toEqual([100, 200, 50, 255]);
+    expect(buffer.getPixel(3, 3)).toEqual([100, 200, 50, 255]);
+  });
+
+  it('undo move_selection restores pixels to original positions', () => {
+    const buffer = setupBuffer(16, 16);
+    buffer.setPixel(4, 4, 255, 128, 0, 255);
+    selectRect(4, 4, 1, 1);
+
+    dispatch(makeCommand('move_selection', { dx: 3, dy: 2 }));
+    expect(buffer.getPixel(4, 4)).toEqual([0, 0, 0, 0]);
+    expect(buffer.getPixel(7, 6)).toEqual([255, 128, 0, 255]);
+
+    undoLast();
+    expect(buffer.getPixel(4, 4)).toEqual([255, 128, 0, 255]);
+  });
+
+  it('point-in-polygon correctly handles a square', () => {
+    const square = [
+      { x: 0, y: 0 },
+      { x: 10, y: 0 },
+      { x: 10, y: 10 },
+      { x: 0, y: 10 },
+    ];
+    expect(pointInPolygon(5, 5, square)).toBe(true);
+    expect(pointInPolygon(-1, 5, square)).toBe(false);
+    expect(pointInPolygon(11, 5, square)).toBe(false);
+  });
+
+  it('select_rect command via dispatch', () => {
+    setupBuffer();
+    dispatch(makeCommand('select_rect', { x: 1, y: 1, w: 3, h: 3 }));
+    expect(isSelected(1, 1)).toBe(true);
+    expect(isSelected(3, 3)).toBe(true);
+    expect(getSelectedPixels().size).toBe(9);
+  });
+
+  it('select_lasso command via dispatch', () => {
+    setupBuffer();
+    const triangle = [{ x: 0, y: 0 }, { x: 10, y: 0 }, { x: 5, y: 10 }];
+    dispatch(makeCommand('select_lasso', { points: triangle }));
+    expect(hasSelection()).toBe(true);
+    expect(isSelected(5, 3)).toBe(true);
+  });
+});