pixelweaver 0.1.0

package/plugins/builtin/drawing-primitives-plugin.ts

@@ -0,0 +1,362 @@
+/**
+ * Drawing Primitives Plugin -- adds 6 drawing primitive commands.
+ *
+ * Registers:
+ *   - Command: `scatter` (tier: 'frame') -- set individual pixels
+ *   - Command: `copy_region` (tier: 'frame') -- copy rectangular region
+ *   - Command: `replace_color` (tier: 'frame') -- find-and-replace color
+ *   - Command: `checkerboard` (tier: 'frame') -- fill rect with checkerboard
+ *   - Command: `draw_polygon` (tier: 'frame') -- outline or filled polygon
+ *   - Command: `iso_outline` (tier: 'frame') -- isometric diamond outline
+ */
+
+import type { PluginModule } from '../../src/lib/core/plugin-loader.js';
+import type { PixelData } from './drawing-utils.js';
+import {
+  snapshotPixels,
+  applyPixels,
+  hexToRgba,
+  bresenhamLine,
+  makeSnapshotUndo,
+} from './drawing-utils.js';
+import Pentagon from '~icons/lucide/pentagon';
+
+export const drawingPrimitivesPlugin: PluginModule = {
+  name: 'builtin/drawing-primitives',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    // --- scatter ---
+
+    api.addCommand('scatter', {
+      tier: 'frame',
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        const points = params["points"];
+        const { r, g, b, a } = hexToRgba(params["color"]);
+
+        const pixelPoints = points.map(([x, y]) => ({ x, y }));
+
+        const snapshot = snapshotPixels(buffer, pixelPoints);
+        const pixels: PixelData[] = pixelPoints.map((p) => ({ ...p, r, g, b, a }));
+        applyPixels(buffer, pixels);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe(params) {
+        const points = params["points"];
+        return `Scattered ${String(points.length)} pixels`;
+      },
+    });
+
+    // --- copy_region ---
+
+    api.addCommand('copy_region', {
+      tier: 'frame',
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        const srcX = params["srcX"];
+        const srcY = params["srcY"];
+        const w = params["w"];
+        const h = params["h"];
+        const dstX = params["dstX"];
+        const dstY = params["dstY"];
+
+        // Read source pixels first (handles overlapping src/dst regions)
+        const srcPixels: PixelData[] = [];
+        for (let dy = 0; dy < h; dy++) {
+          for (let dx = 0; dx < w; dx++) {
+            const sx = srcX + dx;
+            const sy = srcY + dy;
+            if (buffer.inBounds(sx, sy)) {
+              const [r, g, b, a] = buffer.getPixel(sx, sy);
+              srcPixels.push({ x: dx, y: dy, r, g, b, a });
+            }
+          }
+        }
+
+        // Snapshot destination region before writing
+        const dstPoints = [];
+        for (let dy = 0; dy < h; dy++) {
+          for (let dx = 0; dx < w; dx++) {
+            dstPoints.push({ x: dstX + dx, y: dstY + dy });
+          }
+        }
+        const snapshot = snapshotPixels(buffer, dstPoints);
+
+        // Write source pixels at destination offset
+        const writePixels: PixelData[] = srcPixels.map((p) => ({
+          ...p,
+          x: dstX + p.x,
+          y: dstY + p.y,
+        }));
+        applyPixels(buffer, writePixels);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe(params) {
+        return `Copied region ${String(params["w"])}x${String(params["h"])} from (${String(params["srcX"])},${String(params["srcY"])}) to (${String(params["dstX"])},${String(params["dstY"])})`;
+      },
+    });
+
+    // --- replace_color ---
+
+    api.addCommand('replace_color', {
+      tier: 'frame',
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        const old = hexToRgba(params["oldColor"]);
+        const nw = hexToRgba(params["newColor"]);
+
+        // Scan entire buffer for exact RGBA matches, capturing the original pixels as snapshot
+        const snapshot: PixelData[] = [];
+        for (let y = 0; y < buffer.height; y++) {
+          for (let x = 0; x < buffer.width; x++) {
+            const [r, g, b, a] = buffer.getPixel(x, y);
+            if (r === old.r && g === old.g && b === old.b && a === old.a) {
+              snapshot.push({ x, y, r, g, b, a });
+            }
+          }
+        }
+
+        // Replace matching pixels with new color
+        const replacements: PixelData[] = snapshot.map((p) => ({
+          x: p.x,
+          y: p.y,
+          r: nw.r,
+          g: nw.g,
+          b: nw.b,
+          a: nw.a,
+        }));
+        applyPixels(buffer, replacements);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe(params) {
+        return `Replaced ${String(params["oldColor"])} with ${String(params["newColor"])}`;
+      },
+    });
+
+    // --- checkerboard ---
+
+    api.addCommand('checkerboard', {
+      tier: 'frame',
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        const x = params["x"];
+        const y = params["y"];
+        const w = params["w"];
+        const h = params["h"];
+        const c1 = hexToRgba(params["color1"]);
+        const c2 = hexToRgba(params["color2"]);
+        const size = params["size"] || 1;
+
+        const points = [];
+        for (let py = y; py < y + h; py++) {
+          for (let px = x; px < x + w; px++) {
+            points.push({ x: px, y: py });
+          }
+        }
+
+        const snapshot = snapshotPixels(buffer, points);
+
+        // Assign color based on cell position in the checkerboard grid
+        const pixels: PixelData[] = points.map((p) => {
+          const cell = (Math.floor(p.x / size) + Math.floor(p.y / size)) % 2 === 0;
+          const c = cell ? c1 : c2;
+          return { ...p, r: c.r, g: c.g, b: c.b, a: c.a };
+        });
+        applyPixels(buffer, pixels);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe(params) {
+        return `Drew checkerboard ${String(params["w"])}x${String(params["h"])}`;
+      },
+    });
+
+    // --- draw_polygon ---
+
+    api.addCommand('draw_polygon', {
+      tier: 'frame',
+      icon: Pentagon,
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        const vertices = params["points"];
+        const filled = params["filled"];
+        const { r, g, b, a } = hexToRgba(params["color"]);
+
+        let points: { x: number; y: number }[];
+
+        if (filled) {
+          points = scanlineFillPolygon(vertices);
+        } else {
+          // Outline: draw lines between consecutive vertices + closing edge
+          const pointSet = new Set<string>();
+          points = [];
+          for (let i = 0; i < vertices.length; i++) {
+            const v0 = vertices[i];
+            const v1 = vertices[(i + 1) % vertices.length];
+            if (!v0 || !v1) continue;
+            const [x0, y0] = v0;
+            const [x1, y1] = v1;
+            for (const p of bresenhamLine(x0, y0, x1, y1)) {
+              const key = `${String(p.x)},${String(p.y)}`;
+              if (!pointSet.has(key)) {
+                pointSet.add(key);
+                points.push(p);
+              }
+            }
+          }
+        }
+
+        const snapshot = snapshotPixels(buffer, points);
+        const pixels: PixelData[] = points.map((p) => ({ ...p, r, g, b, a }));
+        applyPixels(buffer, pixels);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe(params) {
+        const vertices = params["points"];
+        const filled = params["filled"];
+        return `Drew ${filled ? 'filled ' : ''}polygon with ${String(vertices.length)} vertices`;
+      },
+    });
+
+    // --- iso_outline ---
+
+    api.addCommand('iso_outline', {
+      tier: 'frame',
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        const { r, g, b, a } = hexToRgba(params["color"]);
+
+        // Diamond vertices for 2:1 isometric ratio filling the canvas
+        const midX = Math.floor(buffer.width / 2);
+        const midY = Math.floor(buffer.height / 2);
+        const top = { x: midX, y: 0 };
+        const right = { x: buffer.width - 1, y: midY };
+        const bottom = { x: midX, y: buffer.height - 1 };
+        const left = { x: 0, y: midY };
+
+        // Draw four edges with deduplication
+        const pointSet = new Set<string>();
+        const points: { x: number; y: number }[] = [];
+        const edges = [
+          [top, right],
+          [right, bottom],
+          [bottom, left],
+          [left, top],
+        ] as const;
+
+        for (const [from, to] of edges) {
+          for (const p of bresenhamLine(from.x, from.y, to.x, to.y)) {
+            const key = `${String(p.x)},${String(p.y)}`;
+            if (!pointSet.has(key)) {
+              pointSet.add(key);
+              points.push(p);
+            }
+          }
+        }
+
+        const snapshot = snapshotPixels(buffer, points);
+        const pixels: PixelData[] = points.map((p) => ({ ...p, r, g, b, a }));
+        applyPixels(buffer, pixels);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe() {
+        return 'Drew isometric tile outline';
+      },
+    });
+  },
+};
+
+// --- Scanline fill helper ---
+
+/**
+ * Scanline fill for an arbitrary polygon defined by vertex pairs.
+ * For each Y row within the bounding box, finds all X intersections
+ * with polygon edges, sorts them, and fills between consecutive pairs.
+ */
+function scanlineFillPolygon(vertices: [number, number][]): { x: number; y: number }[] {
+  if (vertices.length < 3) return [];
+
+  // Compute bounding box
+  let minY = Infinity;
+  let maxY = -Infinity;
+  for (const [, y] of vertices) {
+    if (y < minY) minY = y;
+    if (y > maxY) maxY = y;
+  }
+
+  const points: { x: number; y: number }[] = [];
+  const n = vertices.length;
+
+  for (let y = minY; y <= maxY; y++) {
+    const intersections: number[] = [];
+
+    for (let i = 0; i < n; i++) {
+      const v0 = vertices[i];
+      const v1 = vertices[(i + 1) % n];
+      if (!v0 || !v1) continue;
+      const [x0, y0] = v0;
+      const [x1, y1] = v1;
+
+      // Skip horizontal edges
+      if (y0 === y1) continue;
+
+      // Check if scanline y intersects this edge (exclude top vertex to avoid double-counting)
+      const yMin = Math.min(y0, y1);
+      const yMax = Math.max(y0, y1);
+      if (y < yMin || y >= yMax) continue;
+
+      // Compute x intersection using linear interpolation
+      const x = x0 + ((y - y0) * (x1 - x0)) / (y1 - y0);
+      intersections.push(Math.round(x));
+    }
+
+    // Sort intersections and fill between consecutive pairs
+    intersections.sort((a, b) => a - b);
+    for (let i = 0; i < intersections.length - 1; i += 2) {
+      const start = intersections[i];
+      const end = intersections[i + 1];
+      if (start === undefined || end === undefined) continue;
+      for (let x = start; x <= end; x++) {
+        points.push({ x, y });
+      }
+    }
+  }
+
+  return points;
+}