pixelweaver 0.1.0

package/plugins/builtin/eraser-tool.ts

@@ -0,0 +1,23 @@
+/**
+ * Eraser Tool Plugin -- sets pixels to transparent (0,0,0,0).
+ *
+ * Registers:
+ *   - Command: `erase_pixels` (tier: 'frame')
+ *   - Tool: `eraser`
+ *
+ * Thin wrapper around makeStrokeTool; always writes fully transparent pixels.
+ */
+
+import { makeStrokeTool } from './make-stroke-tool.js';
+import EraserIcon from '~icons/lucide/eraser';
+
+export const eraserToolPlugin = makeStrokeTool({
+  pluginName: 'builtin/eraser',
+  commandName: 'erase_pixels',
+  toolId: 'eraser',
+  icon: EraserIcon,
+  toolbarOrder: 20,
+  toolbarGroup: 'draw',
+  describeVerb: 'Erased',
+  resolveColor: () => ({ r: 0, g: 0, b: 0, a: 0 }),
+});

package/plugins/builtin/eyedropper-tool.ts

@@ -0,0 +1,83 @@
+/**
+ * Eyedropper Tool Plugin -- picks color from canvas pixels.
+ *
+ * Registers:
+ *   - Tool: `eyedropper`
+ *
+ * Does NOT register its own command. Instead, it dispatches `set_foreground_color`
+ * (assumed to be registered by the color commands plugin). If that command is not
+ * registered, it falls back to a no-op with a console warning.
+ *
+ * Reads the pixel color under the pointer from the composited render buffer
+ * and sets it as the foreground color. Supports drag-to-sample via onPointerMove.
+ */
+
+import type { PluginModule } from '../../src/lib/core/plugin-loader.js';
+import type { ToolContext } from '../../src/lib/core/plugin-types.js';
+import { getRenderBuffer } from '../../src/lib/canvas/render-state.svelte.js';
+import { rgbToHex } from '../../src/lib/color/color-utils.js';
+import EyedropperIcon from '~icons/lucide/pipette';
+
+/**
+ * Sample the composited pixel at (canvasX, canvasY) and dispatch
+ * set_foreground_color. Skips fully transparent pixels (nothing to pick).
+ */
+function sampleAndDispatch(ctx: ToolContext): void {
+  const buffer = getRenderBuffer();
+  if (!buffer) return;
+
+  const x = Math.floor(ctx.canvasX);
+  const y = Math.floor(ctx.canvasY);
+
+  if (!buffer.inBounds(x, y)) return;
+
+  const [r, g, b, a] = buffer.getPixel(x, y);
+
+  // Fully transparent pixel -- nothing meaningful to sample
+  if (a === 0) return;
+
+  const hex = rgbToHex(r, g, b);
+  ctx.api.dispatch({
+    type: 'set_foreground_color',
+    plugin: 'builtin/eyedropper',
+    version: '1.0.0',
+    params: { color: hex },
+  });
+}
+
+export const eyedropperToolPlugin: PluginModule = {
+  name: 'builtin/eyedropper',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addToolbarItem('toolbar:drawing-tools:eyedropper', {
+      toolbarId: 'drawing-tools',
+      kind: 'tool',
+      targetId: 'eyedropper',
+      group: 'color',
+      order: 10,
+    });
+
+    let dragging = false;
+
+    api.addTool('eyedropper', {
+      icon: EyedropperIcon,
+      cursor: 'crosshair',
+
+      onPointerDown(_e, ctx) {
+        dragging = true;
+        sampleAndDispatch(ctx);
+      },
+
+      onPointerMove(_e, ctx) {
+        // Drag-to-sample: continuously pick color while pointer is held down
+        if (!dragging) return;
+        sampleAndDispatch(ctx);
+      },
+
+      onPointerUp() {
+        dragging = false;
+      },
+    });
+  },
+};

package/plugins/builtin/fill-tool.ts

@@ -0,0 +1,93 @@
+/**
+ * Fill Bucket Tool Plugin -- flood fills contiguous same-color regions.
+ *
+ * Registers:
+ *   - Command: `flood_fill` (tier: 'frame')
+ *   - Tool: `fill`
+ *
+ * On click, performs a BFS flood fill from the clicked pixel, collecting all
+ * 4-connected pixels with the same color, then sets them to the foreground color.
+ * The entire operation is dispatched as a single undoable command.
+ */
+
+import type { PluginModule } from '../../src/lib/core/plugin-loader.js';
+import type { ToolOption } from '../../src/lib/core/plugin-types.js';
+import { floodFill, snapshotPixels, applyPixels, hexToRgba, makeSnapshotUndo } from './drawing-utils.js';
+import { getToolOptionValue } from '../../src/lib/core/tool-options-state.svelte.js';
+import FillIcon from '~icons/lucide/paint-bucket';
+
+export const fillToolPlugin: PluginModule = {
+  name: 'builtin/fill',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addCommand('flood_fill', {
+      tier: 'frame',
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        const { r, g, b, a } = hexToRgba(params["color"]);
+        const tolerance = params["tolerance"] ?? 0;
+        const region = floodFill(buffer, params["x"], params["y"], tolerance);
+
+        const snapshot = snapshotPixels(buffer, region);
+        const fillPixels = region.map((p) => ({ ...p, r, g, b, a }));
+        applyPixels(buffer, fillPixels);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe(params) {
+        const tol = params["tolerance"] ?? 0;
+        const tolSuffix = tol > 0 ? ` (tolerance ${String(tol)})` : '';
+        return `Flood fill at (${String(params["x"])}, ${String(params["y"])}) with ${String(params["color"])}${tolSuffix}`;
+      },
+    });
+
+    api.addToolbarItem('toolbar:drawing-tools:fill', {
+      toolbarId: 'drawing-tools',
+      kind: 'tool',
+      targetId: 'fill',
+      group: 'draw',
+      order: 30,
+    });
+
+    const toleranceOption: ToolOption = {
+      id: 'tolerance',
+      label: 'Tolerance',
+      type: 'select',
+      choices: [
+        { value: 0, label: '0' },
+        { value: 10, label: '10' },
+        { value: 25, label: '25' },
+        { value: 50, label: '50' },
+      ],
+      defaultValue: 0,
+    };
+
+    api.addTool('fill', {
+      icon: FillIcon,
+      cursor: 'crosshair',
+      options: [toleranceOption],
+
+      onPointerDown(_e, ctx) {
+        const tolerance = (getToolOptionValue('fill', 'tolerance') as number) || 0;
+        ctx.api.dispatch({
+          type: 'flood_fill',
+          plugin: 'builtin/fill',
+          version: '1.0.0',
+          params: {
+            x: ctx.canvasX,
+            y: ctx.canvasY,
+            color: ctx.color,
+            tolerance,
+            layerId: '',
+          },
+        });
+      },
+    });
+  },
+};

package/plugins/builtin/gradient-tool.ts

@@ -0,0 +1,204 @@
+/**
+ * Gradient Tool Plugin -- draws linear gradients between two points.
+ *
+ * Registers:
+ *   - Command: `draw_gradient` (tier: 'frame')
+ *   - Tool: `gradient`
+ *
+ * Two modes:
+ *   - 'smooth': linear RGB interpolation between color0 and color1
+ *   - 'dithered': Bayer 2x2 ordered dithering between the two colors
+ *
+ * The gradient is drawn across the full canvas, projecting each pixel
+ * onto the line from (x0,y0) to (x1,y1).
+ */
+
+import type { PluginModule } from '../../src/lib/core/plugin-loader.js';
+import type { PixelData, Point } from './drawing-utils.js';
+import { snapshotPixels, applyPixels, hexToRgba, makeSnapshotUndo } from './drawing-utils.js';
+import { setShapePreview, clearShapePreview } from '../../src/lib/canvas/shape-preview-state.svelte.js';
+import GradientIcon from '~icons/lucide/droplets';
+
+/**
+ * Bayer 2x2 dither matrix.
+ * Threshold values are 0-3, normalized by dividing by 4.
+ */
+const BAYER_2X2 = [
+  [0, 2],
+  [3, 1],
+];
+
+/** Linearly interpolate between two values. */
+function lerp(a: number, b: number, t: number): number {
+  return Math.round(a + (b - a) * t);
+}
+
+/**
+ * Compute gradient pixels for the region covered by the line from (x0,y0) to (x1,y1).
+ * Each pixel on the canvas is projected onto the gradient line to determine its t value.
+ */
+export function computeGradient(
+  width: number,
+  height: number,
+  x0: number,
+  y0: number,
+  x1: number,
+  y1: number,
+  color0: string,
+  color1: string,
+  mode: 'smooth' | 'dithered',
+): PixelData[] {
+  const c0 = hexToRgba(color0);
+  const c1 = hexToRgba(color1);
+  const pixels: PixelData[] = [];
+
+  // Direction vector and its squared length
+  const dx = x1 - x0;
+  const dy = y1 - y0;
+  const lenSq = dx * dx + dy * dy;
+
+  // Degenerate case: start and end are the same point; fill with color0
+  if (lenSq === 0) {
+    for (let py = 0; py < height; py++) {
+      for (let px = 0; px < width; px++) {
+        pixels.push({ x: px, y: py, r: c0.r, g: c0.g, b: c0.b, a: c0.a });
+      }
+    }
+    return pixels;
+  }
+
+  for (let py = 0; py < height; py++) {
+    for (let px = 0; px < width; px++) {
+      // Project (px, py) onto the gradient line to find parameter t
+      const t = Math.max(0, Math.min(1,
+        ((px - x0) * dx + (py - y0) * dy) / lenSq,
+      ));
+
+      if (mode === 'smooth') {
+        pixels.push({
+          x: px,
+          y: py,
+          r: lerp(c0.r, c1.r, t),
+          g: lerp(c0.g, c1.g, t),
+          b: lerp(c0.b, c1.b, t),
+          a: lerp(c0.a, c1.a, t),
+        });
+      } else {
+        // Dithered mode: use Bayer 2x2 threshold to choose between c0 and c1
+        const row = BAYER_2X2[py % 2];
+        const threshold = (row?.[px % 2] ?? 0) / 4;
+        const useColor1 = t > threshold;
+        const c = useColor1 ? c1 : c0;
+        pixels.push({ x: px, y: py, r: c.r, g: c.g, b: c.b, a: c.a });
+      }
+    }
+  }
+
+  return pixels;
+}
+
+export const gradientToolPlugin: PluginModule = {
+  name: 'builtin/gradient',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addCommand('draw_gradient', {
+      tier: 'frame',
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        const allPoints: Point[] = [];
+        for (let y = 0; y < buffer.height; y++) {
+          for (let x = 0; x < buffer.width; x++) {
+            allPoints.push({ x, y });
+          }
+        }
+        const snapshot = snapshotPixels(buffer, allPoints);
+
+        const pixels = computeGradient(
+          buffer.width,
+          buffer.height,
+          params["x0"],
+          params["y0"],
+          params["x1"],
+          params["y1"],
+          params["color0"],
+          params["color1"],
+          params["mode"],
+        );
+        applyPixels(buffer, pixels);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe(params) {
+        return `Drew ${String(params["mode"])} gradient from (${String(params["x0"])},${String(params["y0"])}) to (${String(params["x1"])},${String(params["y1"])})`;
+      },
+    });
+
+    api.addToolbarItem('toolbar:drawing-tools:gradient', {
+      toolbarId: 'drawing-tools',
+      kind: 'tool',
+      targetId: 'gradient',
+      group: 'color',
+      order: 20,
+    });
+
+    // -- Stroke state for drag interaction --
+    let drawing = false;
+    let startX = 0;
+    let startY = 0;
+    let drawColor = '';
+
+    api.addTool('gradient', {
+      icon: GradientIcon,
+      cursor: 'crosshair',
+
+      onPointerDown(_e, ctx) {
+        drawing = true;
+        startX = ctx.canvasX;
+        startY = ctx.canvasY;
+        drawColor = ctx.color;
+      },
+
+      onPointerMove(_e, ctx) {
+        if (!drawing) return;
+        // Show the gradient axis as a line preview
+        setShapePreview({
+          type: 'line',
+          startX,
+          startY,
+          endX: ctx.canvasX,
+          endY: ctx.canvasY,
+          color: drawColor,
+          filled: false,
+        });
+      },
+
+      onPointerUp(_e, ctx) {
+        if (!drawing) return;
+        drawing = false;
+        clearShapePreview();
+
+        ctx.api.dispatch({
+          type: 'draw_gradient',
+          plugin: 'builtin/gradient',
+          version: '1.0.0',
+          params: {
+            x0: startX,
+            y0: startY,
+            x1: ctx.canvasX,
+            y1: ctx.canvasY,
+            color0: drawColor,
+            color1: '#000000',
+            mode: 'smooth',
+            layerId: '',
+          },
+        });
+      },
+    });
+  },
+};

package/plugins/builtin/gradient.test.ts

@@ -0,0 +1,142 @@
+/**
+ * Tests for the gradient tool plugin.
+ *
+ * Covers smooth and dithered gradient modes, horizontal and diagonal gradients.
+ */
+
+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 { gradientToolPlugin, computeGradient } from './gradient-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 = 8, height = 8): PixelBuffer {
+  const buffer = new PixelBuffer(width, height);
+  setContext({ getActiveBuffer: () => buffer });
+  return buffer;
+}
+
+// --- Tests ---
+
+describe('Gradient Tool Plugin', () => {
+  beforeEach(() => {
+    resetDispatcher();
+    const api = createPluginAPI('builtin/gradient');
+    gradientToolPlugin.register(api);
+  });
+
+  it('should register the draw_gradient command', () => {
+    expect(commandRegistry.get('draw_gradient')).toBeDefined();
+  });
+
+  it('smooth gradient: endpoints have correct colors', () => {
+    // Horizontal gradient across an 8-wide canvas
+    const pixels = computeGradient(8, 1, 0, 0, 7, 0, '#FF0000', '#0000FF', 'smooth');
+
+    // Leftmost pixel should be red
+    const first = pixels[0];
+    if (!first) throw new Error("missing pixel");
+    expect(first.r).toBe(255);
+    expect(first.g).toBe(0);
+    expect(first.b).toBe(0);
+
+    // Rightmost pixel should be blue
+    const last = pixels[7];
+    if (!last) throw new Error("missing pixel");
+    expect(last.r).toBe(0);
+    expect(last.g).toBe(0);
+    expect(last.b).toBe(255);
+  });
+
+  it('smooth gradient: midpoint is blended', () => {
+    const pixels = computeGradient(8, 1, 0, 0, 7, 0, '#FF0000', '#0000FF', 'smooth');
+    // Midpoint (x=3 or x=4) should have some red and some blue
+    const mid = pixels[4];
+    if (!mid) throw new Error("missing pixel");
+    expect(mid.r).toBeGreaterThan(0);
+    expect(mid.b).toBeGreaterThan(0);
+  });
+
+  it('dithered gradient: produces a pattern (not solid colors)', () => {
+    // 4x4 canvas with horizontal dithered gradient
+    const pixels = computeGradient(4, 4, 0, 0, 3, 0, '#FF0000', '#0000FF', 'dithered');
+
+    // Collect unique colors
+    const colorSet = new Set<string>();
+    for (const p of pixels) {
+      colorSet.add(`${String(p.r)},${String(p.g)},${String(p.b)}`);
+    }
+
+    // Should have at least 2 distinct colors (the dither pattern)
+    expect(colorSet.size).toBeGreaterThanOrEqual(2);
+  });
+
+  it('horizontal gradient fills all pixels', () => {
+    const buffer = setupBuffer(8, 4);
+
+    dispatch(makeCommand('draw_gradient', {
+      x0: 0, y0: 0, x1: 7, y1: 0,
+      color0: '#FF0000', color1: '#0000FF',
+      mode: 'smooth',
+      layerId: '',
+    }));
+
+    // Every pixel should be non-transparent
+    for (let y = 0; y < 4; y++) {
+      for (let x = 0; x < 8; x++) {
+        const [, , , a] = buffer.getPixel(x, y);
+        expect(a).toBe(255);
+      }
+    }
+  });
+
+  it('diagonal gradient works correctly', () => {
+    const pixels = computeGradient(4, 4, 0, 0, 3, 3, '#000000', '#FFFFFF', 'smooth');
+
+    // Top-left (0,0) should be black
+    const topLeft = pixels[0];
+    if (!topLeft) throw new Error("missing pixel");
+    expect(topLeft.r).toBe(0);
+    expect(topLeft.g).toBe(0);
+    expect(topLeft.b).toBe(0);
+
+    // Bottom-right (3,3) should be white
+    const bottomRight = pixels[3 * 4 + 3];
+    if (!bottomRight) throw new Error("missing pixel");
+    expect(bottomRight.r).toBe(255);
+    expect(bottomRight.g).toBe(255);
+    expect(bottomRight.b).toBe(255);
+  });
+
+  it('gradient undoes correctly', () => {
+    const buffer = setupBuffer(4, 4);
+
+    dispatch(makeCommand('draw_gradient', {
+      x0: 0, y0: 0, x1: 3, y1: 0,
+      color0: '#FF0000', color1: '#0000FF',
+      mode: 'smooth',
+      layerId: '',
+    }));
+
+    expect(buffer.getPixel(0, 0)[0]).toBe(255); // Red
+
+    undoLast();
+
+    // Should be back to transparent
+    expect(buffer.getPixel(0, 0)).toEqual([0, 0, 0, 0]);
+  });
+});