pixelweaver 0.1.0

package/plugins/builtin/drawing-utils.ts

@@ -0,0 +1,431 @@
+/**
+ * Shared drawing utility functions for PixelWeaver's built-in tools.
+ *
+ * Pure functions that compute pixel coordinates for various shapes
+ * and primitives. No side effects -- callers apply the results to
+ * a PixelBuffer themselves.
+ */
+
+import type { PixelBuffer } from '../../src/lib/canvas/pixel-buffer.js';
+import { hexToRgba } from '../../src/lib/color/color-utils.js';
+
+// Re-export the canonical hexToRgba so existing tool/effect plugins keep
+// importing it from drawing-utils without touching their import paths.
+export { hexToRgba };
+
+// --- Point type used throughout ---
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface PixelData {
+  x: number;
+  y: number;
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+// --- Line algorithms ---
+
+/**
+ * Standard Bresenham line algorithm.
+ * Returns all integer pixel coordinates from (x0,y0) to (x1,y1), inclusive.
+ */
+export function bresenhamLine(x0: number, y0: number, x1: number, y1: number): Point[] {
+  const points: Point[] = [];
+
+  const dx = Math.abs(x1 - x0);
+  const dy = Math.abs(y1 - y0);
+  const sx = x0 < x1 ? 1 : -1;
+  const sy = y0 < y1 ? 1 : -1;
+  let err = dx - dy;
+
+  let cx = x0;
+  let cy = y0;
+
+  for (;;) {
+    points.push({ x: cx, y: cy });
+    if (cx === x1 && cy === y1) break;
+
+    const e2 = 2 * err;
+    if (e2 > -dy) {
+      err -= dy;
+      cx += sx;
+    }
+    if (e2 < dx) {
+      err += dx;
+      cy += sy;
+    }
+  }
+
+  return points;
+}
+
+/**
+ * No-doubles Bresenham variant.
+ * Like standard Bresenham but never places two consecutive pixels
+ * that differ only on the minor axis (no "staircase doubling").
+ * This produces a thinner, cleaner line for pixel art.
+ */
+export function bresenhamLineNoDoubles(x0: number, y0: number, x1: number, y1: number): Point[] {
+  const points: Point[] = [];
+
+  const dx = Math.abs(x1 - x0);
+  const dy = Math.abs(y1 - y0);
+  const sx = x0 < x1 ? 1 : -1;
+  const sy = y0 < y1 ? 1 : -1;
+  let err = dx - dy;
+
+  let cx = x0;
+  let cy = y0;
+
+  for (;;) {
+    points.push({ x: cx, y: cy });
+    if (cx === x1 && cy === y1) break;
+
+    const e2 = 2 * err;
+    // When both axes advance simultaneously, that's a diagonal step -- always keep it.
+    // A "double" occurs when only the minor axis advances in isolation.
+    // We detect this by checking if both conditions are met; if so, step diagonally.
+    if (e2 > -dy && e2 < dx) {
+      // Diagonal step -- both axes advance
+      err -= dy;
+      err += dx;
+      cx += sx;
+      cy += sy;
+    } else if (e2 > -dy) {
+      // Major axis step (x advances)
+      err -= dy;
+      cx += sx;
+    } else {
+      // Minor axis step (y advances)
+      err += dx;
+      cy += sy;
+    }
+  }
+
+  return points;
+}
+
+// --- Rectangle algorithms ---
+
+/** Returns perimeter points of a rectangle (no duplicates at corners). */
+export function rectOutline(x: number, y: number, w: number, h: number): Point[] {
+  if (w <= 0 || h <= 0) return [];
+
+  const points: Point[] = [];
+  const x1 = x + w - 1;
+  const y1 = y + h - 1;
+
+  if (w === 1 && h === 1) {
+    points.push({ x, y });
+    return points;
+  }
+
+  // Top edge
+  for (let px = x; px <= x1; px++) points.push({ x: px, y });
+  // Right edge (skip top corner)
+  for (let py = y + 1; py <= y1; py++) points.push({ x: x1, y: py });
+  // Bottom edge (skip right corner), only if h > 1
+  if (h > 1) {
+    for (let px = x1 - 1; px >= x; px--) points.push({ x: px, y: y1 });
+  }
+  // Left edge (skip top and bottom corners), only if w > 1
+  if (w > 1) {
+    for (let py = y1 - 1; py > y; py--) points.push({ x, y: py });
+  }
+
+  return points;
+}
+
+/** Returns all points inside a filled rectangle. */
+export function rectFilled(x: number, y: number, w: number, h: number): Point[] {
+  if (w <= 0 || h <= 0) return [];
+
+  const points: Point[] = [];
+  for (let py = y; py < y + h; py++) {
+    for (let px = x; px < x + w; px++) {
+      points.push({ x: px, y: py });
+    }
+  }
+  return points;
+}
+
+// --- Ellipse algorithms ---
+
+/**
+ * Midpoint ellipse algorithm -- outline only.
+ * Returns all points on the perimeter of the ellipse centered at (cx,cy)
+ * with radii (rx, ry). Handles degenerate cases (rx=0, ry=0).
+ */
+export function ellipseOutline(cx: number, cy: number, rx: number, ry: number): Point[] {
+  if (rx < 0 || ry < 0) return [];
+
+  // Degenerate: single point
+  if (rx === 0 && ry === 0) return [{ x: cx, y: cy }];
+
+  // Degenerate: vertical line
+  if (rx === 0) {
+    const points: Point[] = [];
+    for (let dy = -ry; dy <= ry; dy++) points.push({ x: cx, y: cy + dy });
+    return points;
+  }
+
+  // Degenerate: horizontal line
+  if (ry === 0) {
+    const points: Point[] = [];
+    for (let dx = -rx; dx <= rx; dx++) points.push({ x: cx + dx, y: cy });
+    return points;
+  }
+
+  const pointSet = new Set<string>();
+  const points: Point[] = [];
+
+  function addSymmetric(px: number, py: number): void {
+    const coords = [
+      { x: cx + px, y: cy + py },
+      { x: cx - px, y: cy + py },
+      { x: cx + px, y: cy - py },
+      { x: cx - px, y: cy - py },
+    ];
+    for (const p of coords) {
+      const key = `${String(p.x)},${String(p.y)}`;
+      if (!pointSet.has(key)) {
+        pointSet.add(key);
+        points.push(p);
+      }
+    }
+  }
+
+  // Region 1: slope magnitude < 1
+  let x = 0;
+  let y = ry;
+  const rx2 = rx * rx;
+  const ry2 = ry * ry;
+  let d1 = ry2 - rx2 * ry + 0.25 * rx2;
+
+  addSymmetric(x, y);
+
+  while (ry2 * x < rx2 * y) {
+    x++;
+    if (d1 < 0) {
+      d1 += ry2 * (2 * x + 1);
+    } else {
+      y--;
+      d1 += ry2 * (2 * x + 1) - 2 * rx2 * y;
+    }
+    addSymmetric(x, y);
+  }
+
+  // Region 2: slope magnitude >= 1
+  let d2 = ry2 * (x + 0.5) * (x + 0.5) + rx2 * (y - 1) * (y - 1) - rx2 * ry2;
+
+  while (y >= 0) {
+    addSymmetric(x, y);
+    y--;
+    if (d2 > 0) {
+      d2 += rx2 * (1 - 2 * y);
+    } else {
+      x++;
+      d2 += ry2 * (2 * x + 1) + rx2 * (1 - 2 * y);
+    }
+  }
+
+  return points;
+}
+
+/**
+ * Filled ellipse derived from the outline.
+ * Computes the outline first, then for each scanline fills between the
+ * leftmost and rightmost outline pixels. This ensures the filled version
+ * always contains every outline point.
+ */
+export function ellipseFilled(cx: number, cy: number, rx: number, ry: number): Point[] {
+  if (rx < 0 || ry < 0) return [];
+  if (rx === 0 && ry === 0) return [{ x: cx, y: cy }];
+
+  // Get outline points and compute min/max x per scanline
+  const outline = ellipseOutline(cx, cy, rx, ry);
+  const scanlines = new Map<number, { minX: number; maxX: number }>();
+
+  for (const p of outline) {
+    const entry = scanlines.get(p.y);
+    if (entry) {
+      entry.minX = Math.min(entry.minX, p.x);
+      entry.maxX = Math.max(entry.maxX, p.x);
+    } else {
+      scanlines.set(p.y, { minX: p.x, maxX: p.x });
+    }
+  }
+
+  // Fill each scanline between its extents
+  const points: Point[] = [];
+  for (const [y, { minX, maxX }] of scanlines) {
+    for (let x = minX; x <= maxX; x++) {
+      points.push({ x, y });
+    }
+  }
+
+  return points;
+}
+
+// --- Diamond algorithms ---
+
+/**
+ * Diamond (rhombus) outline.
+ * The diamond is defined by center (cx, cy) and radii (rx, ry).
+ * Its vertices are at (cx +/- rx, cy) and (cx, cy +/- ry).
+ * Uses Bresenham lines between the four vertices.
+ */
+export function diamondOutline(cx: number, cy: number, rx: number, ry: number): Point[] {
+  if (rx < 0 || ry < 0) return [];
+  if (rx === 0 && ry === 0) return [{ x: cx, y: cy }];
+
+  // Four vertices
+  const top: Point = { x: cx, y: cy - ry };
+  const right: Point = { x: cx + rx, y: cy };
+  const bottom: Point = { x: cx, y: cy + ry };
+  const left: Point = { x: cx - rx, y: cy };
+
+  // Draw four edges, deduplicating shared vertices
+  const pointSet = new Set<string>();
+  const points: Point[] = [];
+
+  const edges = [
+    [top, right],
+    [right, bottom],
+    [bottom, left],
+    [left, top],
+  ] as const;
+
+  for (const [from, to] of edges) {
+    const linePoints = bresenhamLine(from.x, from.y, to.x, to.y);
+    for (const p of linePoints) {
+      const key = `${String(p.x)},${String(p.y)}`;
+      if (!pointSet.has(key)) {
+        pointSet.add(key);
+        points.push(p);
+      }
+    }
+  }
+
+  return points;
+}
+
+/**
+ * Filled diamond using scanline approach.
+ * For each row from (cy - ry) to (cy + ry), compute the horizontal extent
+ * based on linear interpolation of the diamond edges.
+ */
+export function diamondFilled(cx: number, cy: number, rx: number, ry: number): Point[] {
+  if (rx < 0 || ry < 0) return [];
+  if (rx === 0 && ry === 0) return [{ x: cx, y: cy }];
+
+  const points: Point[] = [];
+
+  for (let dy = -ry; dy <= ry; dy++) {
+    // Linear interpolation: at distance |dy| from center, the half-width is
+    // rx * (1 - |dy| / ry)
+    const halfWidth = ry === 0 ? rx : Math.round(rx * (1 - Math.abs(dy) / ry));
+    for (let dx = -halfWidth; dx <= halfWidth; dx++) {
+      points.push({ x: cx + dx, y: cy + dy });
+    }
+  }
+
+  return points;
+}
+
+// --- Flood fill ---
+
+/**
+ * Flood fill (BFS) starting from (startX, startY).
+ * Returns all connected pixels whose color is within `tolerance` of the
+ * starting pixel's color (per-channel max distance).
+ * tolerance=0 means exact match (default, preserving legacy behavior).
+ * Returns an empty array if the start is out of bounds.
+ */
+export function floodFill(buffer: PixelBuffer, startX: number, startY: number, tolerance = 0): Point[] {
+  if (!buffer.inBounds(startX, startY)) return [];
+
+  const [tr, tg, tb, ta] = buffer.getPixel(startX, startY);
+  const visited = new Set<number>();
+  const result: Point[] = [];
+  const queue: Point[] = [{ x: startX, y: startY }];
+  const w = buffer.width;
+
+  // Color distance: max absolute difference across RGBA channels.
+  // When tolerance is 0 this reduces to an exact-match check.
+  const matches = (r: number, g: number, b: number, a: number): boolean => {
+    if (tolerance === 0) return r === tr && g === tg && b === tb && a === ta;
+    return Math.max(Math.abs(r - tr), Math.abs(g - tg), Math.abs(b - tb), Math.abs(a - ta)) <= tolerance;
+  };
+
+  // Encode coords as a single integer for fast Set lookups
+  visited.add(startY * w + startX);
+
+  while (queue.length > 0) {
+    const next = queue.shift();
+    if (!next) break;
+    const { x, y } = next;
+    result.push({ x, y });
+
+    // Check 4-connected neighbors
+    const neighbors: Point[] = [
+      { x: x - 1, y },
+      { x: x + 1, y },
+      { x, y: y - 1 },
+      { x, y: y + 1 },
+    ];
+
+    for (const n of neighbors) {
+      if (!buffer.inBounds(n.x, n.y)) continue;
+      const key = n.y * w + n.x;
+      if (visited.has(key)) continue;
+      visited.add(key);
+
+      const [r, g, b, a] = buffer.getPixel(n.x, n.y);
+      if (matches(r, g, b, a)) {
+        queue.push(n);
+      }
+    }
+  }
+
+  return result;
+}
+
+// --- Pixel snapshot/apply helpers ---
+
+/** Read RGBA values at each given point from the buffer. */
+export function snapshotPixels(buffer: PixelBuffer, points: Point[]): PixelData[] {
+  return points.map(({ x, y }) => {
+    const [r, g, b, a] = buffer.getPixel(x, y);
+    return { x, y, r, g, b, a };
+  });
+}
+
+/** Write RGBA values to the buffer for each given pixel. */
+export function applyPixels(buffer: PixelBuffer, pixels: PixelData[]): void {
+  for (const { x, y, r, g, b, a } of pixels) {
+    buffer.setPixel(x, y, r, g, b, a);
+  }
+}
+
+// --- Undo factory ---
+
+/**
+ * Factory that returns the standard snapshot-based undo handler.
+ * The snapshot (PixelData[]) is provided as the third argument by the
+ * dispatcher, which captured it from execute()'s return value.
+ */
+export function makeSnapshotUndo(): (params: Record<string, unknown>, ctx: import('../../src/lib/core/commands.js').CommandContext, snapshot?: unknown) => void {
+  return (_params, ctx, snapshot) => {
+    const buffer = ctx.getActiveBuffer?.();
+    if (!buffer) return;
+    applyPixels(buffer, snapshot as PixelData[]);
+  };
+}
+

package/plugins/builtin/effects/blur.ts

@@ -0,0 +1,97 @@
+/**
+ * Blur Effect -- 1px box blur (average of 8 neighbors + self).
+ *
+ * Registers:
+ *   - Command: `blur` (tier: 'frame')
+ */
+
+import type { PluginModule } from '../../../src/lib/core/plugin-loader.js';
+import type { PixelBuffer } from '../../../src/lib/canvas/pixel-buffer.js';
+import type { PixelData, Point } from '../drawing-utils.js';
+import { snapshotPixels, applyPixels, makeSnapshotUndo } from '../drawing-utils.js';
+import CircleDot from '~icons/lucide/circle-dot';
+
+/**
+ * Compute a 1px box blur of the buffer.
+ * Each pixel becomes the average of itself and its 8 neighbors.
+ */
+export function computeBlur(buffer: PixelBuffer): PixelData[] {
+  const w = buffer.width;
+  const h = buffer.height;
+  const pixels: PixelData[] = [];
+
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      let totalR = 0, totalG = 0, totalB = 0, totalA = 0;
+      let count = 0;
+
+      // 3x3 neighborhood
+      for (let dy = -1; dy <= 1; dy++) {
+        for (let dx = -1; dx <= 1; dx++) {
+          const nx = x + dx;
+          const ny = y + dy;
+          if (buffer.inBounds(nx, ny)) {
+            const [r, g, b, a] = buffer.getPixel(nx, ny);
+            totalR += r;
+            totalG += g;
+            totalB += b;
+            totalA += a;
+            count++;
+          }
+        }
+      }
+
+      pixels.push({
+        x, y,
+        r: Math.round(totalR / count),
+        g: Math.round(totalG / count),
+        b: Math.round(totalB / count),
+        a: Math.round(totalA / count),
+      });
+    }
+  }
+
+  return pixels;
+}
+
+export const blurEffectPlugin: PluginModule = {
+  name: 'builtin/effects/blur',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addCommand('blur', {
+      tier: 'frame',
+      label: 'Blur',
+      category: 'Effects',
+      icon: CircleDot,
+
+      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);
+
+        applyPixels(buffer, computeBlur(buffer));
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe() { return 'Applied 1px box blur'; },
+    });
+
+    api.addMenuItem('menu:effects:blur', {
+      commandId: 'blur',
+      menuPath: 'effects',
+      group: 'blur-sharpen',
+      order: 10,
+      label: 'Blur',
+    });
+  },
+};