pixelweaver 0.1.0

package/plugins/builtin/noise-tool.ts

@@ -0,0 +1,131 @@
+/**
+ * Noise/Scatter Tool Plugin -- fills a region with random pixels.
+ *
+ * Registers:
+ *   - Command: `draw_noise` (tier: 'frame')
+ *   - Tool: `noise`
+ *
+ * Fills a rectangular region with randomly chosen colors from a palette
+ * at a given density (0-1). Uses a seeded PRNG for reproducibility.
+ */
+
+import type { PluginModule } from '../../src/lib/core/plugin-loader.js';
+import type { PixelData } from './drawing-utils.js';
+import { snapshotPixels, applyPixels, hexToRgba, makeSnapshotUndo } from './drawing-utils.js';
+import NoiseIcon from '~icons/lucide/spray-can';
+
+/**
+ * Mulberry32 seeded PRNG.
+ * Returns a function that produces pseudo-random numbers in [0, 1).
+ */
+export function mulberry32(seed: number): () => number {
+  let s = seed | 0;
+  return () => {
+    s = (s + 0x6D2B79F5) | 0;
+    let t = Math.imul(s ^ (s >>> 15), 1 | s);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/**
+ * Compute noise pixels for a rectangular region.
+ * Each pixel in the region has a `density` chance of being filled
+ * with a randomly chosen color from the `colors` array.
+ */
+export function computeNoise(
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  colors: string[],
+  density: number,
+  seed: number,
+): PixelData[] {
+  if (colors.length === 0 || density <= 0) return [];
+
+  const rng = mulberry32(seed);
+  const pixels: PixelData[] = [];
+  const parsedColors = colors.map(hexToRgba);
+
+  for (let py = y; py < y + h; py++) {
+    for (let px = x; px < x + w; px++) {
+      if (rng() < density) {
+        const colorIdx = Math.floor(rng() * parsedColors.length);
+        const c = parsedColors[colorIdx];
+        if (c) {
+          pixels.push({ x: px, y: py, r: c.r, g: c.g, b: c.b, a: c.a });
+        }
+      }
+    }
+  }
+
+  return pixels;
+}
+
+export const noiseToolPlugin: PluginModule = {
+  name: 'builtin/noise',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addCommand('draw_noise', {
+      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 colors = params["colors"];
+        const density = params["density"];
+        const seed = params["seed"] ?? Date.now();
+
+        const noisePixels = computeNoise(x, y, w, h, colors, density, seed);
+
+        const snapshot = snapshotPixels(buffer, noisePixels.map((p) => ({ x: p.x, y: p.y })));
+        applyPixels(buffer, noisePixels);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe(params) {
+        return `Drew noise at (${String(params["x"])},${String(params["y"])}) ${String(params["w"])}x${String(params["h"])} density=${String(params["density"])}`;
+      },
+    });
+
+    api.addToolbarItem('toolbar:drawing-tools:noise', {
+      toolbarId: 'drawing-tools',
+      kind: 'tool',
+      targetId: 'noise',
+      group: 'color',
+      order: 30,
+    });
+
+    api.addTool('noise', {
+      icon: NoiseIcon,
+      cursor: 'crosshair',
+
+      onPointerDown(_e, ctx) {
+        ctx.api.dispatch({
+          type: 'draw_noise',
+          plugin: 'builtin/noise',
+          version: '1.0.0',
+          params: {
+            x: ctx.canvasX,
+            y: ctx.canvasY,
+            w: 8,
+            h: 8,
+            colors: [ctx.color],
+            density: 0.5,
+            seed: Date.now(),
+            layerId: '',
+          },
+        });
+      },
+    });
+  },
+};

package/plugins/builtin/pattern-stamp-tool.ts

@@ -0,0 +1,162 @@
+/**
+ * Pattern Stamp Tool Plugin -- paints with a tiling pattern.
+ *
+ * Registers:
+ *   - Command: `draw_pattern` (tier: 'frame')
+ *   - Tool: `pattern-stamp`
+ *
+ * The pattern is defined as a flat RGBA array (patternData) with dimensions
+ * patternWidth x patternHeight. Painting tiles the pattern at each stroke point.
+ */
+
+import type { PluginModule } from '../../src/lib/core/plugin-loader.js';
+import type { PixelData, Point } from './drawing-utils.js';
+import { snapshotPixels, applyPixels, bresenhamLine, makeSnapshotUndo } from './drawing-utils.js';
+import StampIcon from '~icons/lucide/stamp';
+
+/**
+ * Compute the pixels to draw when stamping a pattern at a list of points.
+ * Each point is the center of a stamp. The pattern is tiled (modular) so
+ * the pattern coordinates wrap based on the absolute canvas position.
+ *
+ * @param points       Stroke points (e.g., from Bresenham interpolation)
+ * @param patternWidth Width of the pattern in pixels
+ * @param patternHeight Height of the pattern in pixels
+ * @param patternData  Flat RGBA array: [r0, g0, b0, a0, r1, g1, b1, a1, ...]
+ */
+export function computePatternPixels(
+  points: Point[],
+  patternWidth: number,
+  patternHeight: number,
+  patternData: number[],
+): PixelData[] {
+  if (patternWidth <= 0 || patternHeight <= 0 || patternData.length === 0) return [];
+
+  // Deduplicate points
+  const seen = new Set<string>();
+  const pixels: PixelData[] = [];
+
+  for (const p of points) {
+    const key = `${String(p.x)},${String(p.y)}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+
+    // Use modular arithmetic to tile the pattern across the canvas
+    // Ensure non-negative modulo for negative coordinates
+    const patX = ((p.x % patternWidth) + patternWidth) % patternWidth;
+    const patY = ((p.y % patternHeight) + patternHeight) % patternHeight;
+    const idx = (patY * patternWidth + patX) * 4;
+
+    const r = patternData[idx] ?? 0;
+    const g = patternData[idx + 1] ?? 0;
+    const b = patternData[idx + 2] ?? 0;
+    const a = patternData[idx + 3] ?? 0;
+
+    // Skip fully transparent pattern pixels
+    if (a === 0) continue;
+
+    pixels.push({ x: p.x, y: p.y, r, g, b, a });
+  }
+
+  return pixels;
+}
+
+export const patternStampToolPlugin: PluginModule = {
+  name: 'builtin/pattern-stamp',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addCommand('draw_pattern', {
+      tier: 'frame',
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        const points = params["points"];
+        const patternWidth = params["patternWidth"];
+        const patternHeight = params["patternHeight"];
+        const patternData = params["patternData"];
+
+        const pixels = computePatternPixels(points, patternWidth, patternHeight, patternData);
+
+        const snapshot = snapshotPixels(buffer, pixels.map((p) => ({ x: p.x, y: p.y })));
+        applyPixels(buffer, pixels);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe(params) {
+        const points = params["points"];
+        return `Stamped pattern (${String(params["patternWidth"])}x${String(params["patternHeight"])}) at ${String(points.length)} point(s)`;
+      },
+    });
+
+    api.addToolbarItem('toolbar:drawing-tools:pattern-stamp', {
+      toolbarId: 'drawing-tools',
+      kind: 'tool',
+      targetId: 'pattern-stamp',
+      group: 'advanced',
+      order: 20,
+    });
+
+    // -- Stroke state --
+    let drawing = false;
+    let lastX = 0;
+    let lastY = 0;
+    let strokePoints: Map<string, Point> = new Map();
+
+    api.addTool('pattern-stamp', {
+      icon: StampIcon,
+      cursor: 'crosshair',
+
+      onPointerDown(_e, ctx) {
+        drawing = true;
+        lastX = ctx.canvasX;
+        lastY = ctx.canvasY;
+        strokePoints = new Map();
+        const key = `${String(ctx.canvasX)},${String(ctx.canvasY)}`;
+        strokePoints.set(key, { x: ctx.canvasX, y: ctx.canvasY });
+      },
+
+      onPointerMove(_e, ctx) {
+        if (!drawing) return;
+
+        const line = bresenhamLine(lastX, lastY, ctx.canvasX, ctx.canvasY);
+        for (const p of line) {
+          const key = `${String(p.x)},${String(p.y)}`;
+          if (!strokePoints.has(key)) {
+            strokePoints.set(key, p);
+          }
+        }
+
+        lastX = ctx.canvasX;
+        lastY = ctx.canvasY;
+      },
+
+      onPointerUp(_e, ctx) {
+        if (!drawing) return;
+        drawing = false;
+
+        const points = Array.from(strokePoints.values());
+        if (points.length === 0) return;
+
+        ctx.api.dispatch({
+          type: 'draw_pattern',
+          plugin: 'builtin/pattern-stamp',
+          version: '1.0.0',
+          params: {
+            points,
+            patternWidth: 2,
+            patternHeight: 2,
+            patternData: [255, 0, 0, 255, 0, 0, 0, 0, 0, 0, 0, 0, 255, 0, 0, 255],
+            layerId: '',
+          },
+        });
+
+        strokePoints = new Map();
+      },
+    });
+  },
+};

package/plugins/builtin/pencil-tool.ts

@@ -0,0 +1,25 @@
+/**
+ * Pencil Tool Plugin -- draws individual pixels with Bresenham interpolation.
+ *
+ * Registers:
+ *   - Command: `draw_pixels` (tier: 'frame')
+ *   - Tool: `pencil`
+ *
+ * Thin wrapper around makeStrokeTool; color is resolved from the active
+ * foreground color at pointer-down time.
+ */
+
+import { makeStrokeTool } from './make-stroke-tool.js';
+import { hexToRgba } from './drawing-utils.js';
+import PencilIcon from '~icons/lucide/pencil';
+
+export const pencilToolPlugin = makeStrokeTool({
+  pluginName: 'builtin/pencil',
+  commandName: 'draw_pixels',
+  toolId: 'pencil',
+  icon: PencilIcon,
+  toolbarOrder: 10,
+  toolbarGroup: 'draw',
+  describeVerb: 'Drew',
+  resolveColor: (ctx) => hexToRgba(ctx.color),
+});

package/plugins/builtin/rect-tool.ts

@@ -0,0 +1,179 @@
+/**
+ * Rectangle Tool Plugin -- draws axis-aligned rectangles.
+ *
+ * Registers:
+ *   - Command: `draw_rect` (tier: 'frame')
+ *   - Tool: `rect`
+ *
+ * Click-drag defines the rectangle. The command supports both outline and filled
+ * modes via the `filled` param. Default is outline.
+ */
+
+import type { PluginModule } from '../../src/lib/core/plugin-loader.js';
+import {
+  rectOutline,
+  rectFilled,
+  snapshotPixels,
+  applyPixels,
+  hexToRgba,
+  makeSnapshotUndo,
+} from './drawing-utils.js';
+import { getToolOptionValue } from '../../src/lib/core/tool-options-state.svelte.js';
+import { setShapePreview, clearShapePreview } from '../../src/lib/canvas/shape-preview-state.svelte.js';
+import RectIcon from '~icons/lucide/square';
+import PaintBucketIcon from '~icons/lucide/paint-bucket';
+
+export const rectToolPlugin: PluginModule = {
+  name: 'builtin/rect',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addCommand('draw_rect', {
+      tier: 'frame',
+      icon: RectIcon,
+
+      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 filled = params["filled"];
+        const { r, g, b, a } = hexToRgba(params["color"]);
+
+        const pointsFn = filled ? rectFilled : rectOutline;
+        const points = pointsFn(x, y, w, h);
+
+        const snapshot = snapshotPixels(buffer, points);
+        const pixels = points.map((p) => ({ ...p, r, g, b, a }));
+        applyPixels(buffer, pixels);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe(params) {
+        const filled = params["filled"] ? 'filled ' : '';
+        return `Drew ${filled}rect at (${String(params["x"])},${String(params["y"])}) ${String(params["w"])}x${String(params["h"])}`;
+      },
+    });
+
+    api.addToolbarItem('toolbar:drawing-tools:rect', {
+      toolbarId: 'drawing-tools',
+      kind: 'tool',
+      targetId: 'rect',
+      group: 'shapes',
+      order: 10,
+    });
+
+    // -- Stroke state --
+    let drawing = false;
+    let startX = 0;
+    let startY = 0;
+    let color = '';
+
+    api.addTool('rect', {
+      icon: RectIcon,
+      cursor: 'crosshair',
+      options: [
+        { id: 'filled', label: 'Filled', icon: PaintBucketIcon, type: 'toggle', defaultValue: false },
+      ],
+
+      onPointerDown(_e, ctx) {
+        drawing = true;
+        startX = ctx.canvasX;
+        startY = ctx.canvasY;
+        color = ctx.color;
+      },
+
+      onPointerMove(e, ctx) {
+        if (!drawing) return;
+
+        // Shift constrains to square (equal width/height)
+        let endX = ctx.canvasX;
+        let endY = ctx.canvasY;
+        if (e.shiftKey) {
+          const maxDim = Math.max(Math.abs(endX - startX), Math.abs(endY - startY));
+          endX = startX + maxDim * (Math.sign(endX - startX) || 1);
+          endY = startY + maxDim * (Math.sign(endY - startY) || 1);
+        }
+
+        // Ctrl draws from center: start becomes center, mirror endpoint
+        let previewStartX = startX;
+        let previewStartY = startY;
+        let previewEndX = endX;
+        let previewEndY = endY;
+        if (e.ctrlKey) {
+          const dx = endX - startX;
+          const dy = endY - startY;
+          previewStartX = startX - dx;
+          previewStartY = startY - dy;
+          previewEndX = startX + dx;
+          previewEndY = startY + dy;
+        }
+
+        setShapePreview({
+          type: 'rect',
+          startX: previewStartX,
+          startY: previewStartY,
+          endX: previewEndX,
+          endY: previewEndY,
+          color,
+          filled: getToolOptionValue('rect', 'filled') as boolean,
+        });
+      },
+
+      onPointerUp(e, ctx) {
+        if (!drawing) return;
+        drawing = false;
+        clearShapePreview();
+
+        // Shift constrains to square (equal width/height)
+        let endX = ctx.canvasX;
+        let endY = ctx.canvasY;
+        if (e.shiftKey) {
+          const maxDim = Math.max(Math.abs(endX - startX), Math.abs(endY - startY));
+          endX = startX + maxDim * (Math.sign(endX - startX) || 1);
+          endY = startY + maxDim * (Math.sign(endY - startY) || 1);
+        }
+
+        // Ctrl draws from center: start becomes center, mirror endpoint
+        let finalStartX = startX;
+        let finalStartY = startY;
+        let finalEndX = endX;
+        let finalEndY = endY;
+        if (e.ctrlKey) {
+          const dx = endX - startX;
+          const dy = endY - startY;
+          finalStartX = startX - dx;
+          finalStartY = startY - dy;
+          finalEndX = startX + dx;
+          finalEndY = startY + dy;
+        }
+
+        // Normalize so x,y is top-left and w,h are positive
+        const x = Math.min(finalStartX, finalEndX);
+        const y = Math.min(finalStartY, finalEndY);
+        const w = Math.abs(finalEndX - finalStartX) + 1;
+        const h = Math.abs(finalEndY - finalStartY) + 1;
+
+        ctx.api.dispatch({
+          type: 'draw_rect',
+          plugin: 'builtin/rect',
+          version: '1.0.0',
+          params: {
+            x,
+            y,
+            w,
+            h,
+            filled: getToolOptionValue('rect', 'filled'),
+            color,
+            layerId: '',
+          },
+        });
+      },
+    });
+  },
+};