pixelweaver 0.1.0

package/plugins/builtin/diamond-tool.ts

@@ -0,0 +1,182 @@
+/**
+ * Diamond Tool Plugin -- draws isometric diamond (rhombus) shapes.
+ *
+ * Registers:
+ *   - Command: `draw_diamond` (tier: 'frame')
+ *   - Tool: `diamond`
+ *
+ * Click-drag defines the bounding box. The diamond inscribes the box, with
+ * vertices at the midpoints of each edge. Supports outline and filled modes.
+ */
+
+import type { PluginModule } from '../../src/lib/core/plugin-loader.js';
+import {
+  diamondOutline,
+  diamondFilled,
+  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 DiamondIcon from '~icons/lucide/diamond';
+import PaintBucketIcon from '~icons/lucide/paint-bucket';
+
+export const diamondToolPlugin: PluginModule = {
+  name: 'builtin/diamond',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addCommand('draw_diamond', {
+      tier: 'frame',
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        const cx = params["cx"];
+        const cy = params["cy"];
+        const radiusX = params["radiusX"];
+        const radiusY = params["radiusY"];
+        const filled = params["filled"];
+        const { r, g, b, a } = hexToRgba(params["color"]);
+
+        const pointsFn = filled ? diamondFilled : diamondOutline;
+        const points = pointsFn(cx, cy, radiusX, radiusY);
+
+        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}diamond at (${String(params["cx"])},${String(params["cy"])}) rx=${String(params["radiusX"])} ry=${String(params["radiusY"])}`;
+      },
+    });
+
+    api.addToolbarItem('toolbar:drawing-tools:diamond', {
+      toolbarId: 'drawing-tools',
+      kind: 'tool',
+      targetId: 'diamond',
+      group: 'shapes',
+      order: 30,
+    });
+
+    // -- Stroke state --
+    let drawing = false;
+    let startX = 0;
+    let startY = 0;
+    let color = '';
+
+    api.addTool('diamond', {
+      icon: DiamondIcon,
+      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 equal width/height diamond
+        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: 'diamond',
+          startX: previewStartX,
+          startY: previewStartY,
+          endX: previewEndX,
+          endY: previewEndY,
+          color,
+          filled: getToolOptionValue('diamond', 'filled') as boolean,
+        });
+      },
+
+      onPointerUp(e, ctx) {
+        if (!drawing) return;
+        drawing = false;
+        clearShapePreview();
+
+        // Shift constrains to equal width/height diamond
+        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;
+        }
+
+        const x0 = Math.min(finalStartX, finalEndX);
+        const y0 = Math.min(finalStartY, finalEndY);
+        const x1 = Math.max(finalStartX, finalEndX);
+        const y1 = Math.max(finalStartY, finalEndY);
+
+        const cx = Math.round((x0 + x1) / 2);
+        const cy = Math.round((y0 + y1) / 2);
+        const radiusX = Math.floor((x1 - x0) / 2);
+        const radiusY = Math.floor((y1 - y0) / 2);
+
+        ctx.api.dispatch({
+          type: 'draw_diamond',
+          plugin: 'builtin/diamond',
+          version: '1.0.0',
+          params: {
+            cx,
+            cy,
+            radiusX,
+            radiusY,
+            filled: getToolOptionValue('diamond', 'filled'),
+            color,
+            layerId: '',
+          },
+        });
+      },
+    });
+  },
+};

package/plugins/builtin/dither-tool.ts

@@ -0,0 +1,186 @@
+/**
+ * Dither Tool Plugin -- applies ordered Bayer dithering to a region.
+ *
+ * Registers:
+ *   - Command: `draw_dither` (tier: 'frame')
+ *   - Tool: `dither`
+ *
+ * Fills a rectangular region with an ordered dither pattern between two colors.
+ * Supports 2x2 and 4x4 Bayer matrices.
+ */
+
+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 DitherIcon from '~icons/lucide/grip';
+
+/**
+ * Bayer 2x2 ordered dither matrix.
+ * Values 0-3, threshold = value / 4.
+ */
+export const BAYER_2X2 = [
+  [0, 2],
+  [3, 1],
+];
+
+/**
+ * Bayer 4x4 ordered dither matrix.
+ * Values 0-15, threshold = value / 16.
+ */
+export const BAYER_4X4 = [
+  [0,  8,  2,  10],
+  [12, 4,  14, 6],
+  [3,  11, 1,  9],
+  [15, 7,  13, 5],
+];
+
+/**
+ * Compute dithered pixels for a rectangular region.
+ * For each pixel, the Bayer matrix threshold determines whether to use color0 or color1.
+ * A simple 50/50 blend parameter "t" is used -- t = 0.5 produces a classic checkerboard-like dither.
+ * The actual blend is based on pixel position within the dither matrix.
+ */
+export function computeDither(
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  color0: string,
+  color1: string,
+  matrixSize: 2 | 4,
+): PixelData[] {
+  const c0 = hexToRgba(color0);
+  const c1 = hexToRgba(color1);
+  const matrix = matrixSize === 2 ? BAYER_2X2 : BAYER_4X4;
+  const divisor = matrixSize * matrixSize;
+  const pixels: PixelData[] = [];
+
+  for (let py = y; py < y + h; py++) {
+    for (let px = x; px < x + w; px++) {
+      // Threshold from the Bayer matrix (tiled across the region)
+      const row = matrix[py % matrixSize];
+      const threshold = (row?.[px % matrixSize] ?? 0) / divisor;
+      // Use 0.5 as the blend level: pixels with threshold < 0.5 get color1
+      const useColor1 = threshold < 0.5;
+      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 ditherToolPlugin: PluginModule = {
+  name: 'builtin/dither',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addCommand('draw_dither', {
+      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 allPoints: Point[] = [];
+        for (let py = y; py < y + h; py++) {
+          for (let px = x; px < x + w; px++) {
+            allPoints.push({ x: px, y: py });
+          }
+        }
+        const snapshot = snapshotPixels(buffer, allPoints);
+
+        const pixels = computeDither(
+          x,
+          y,
+          w,
+          h,
+          params["color0"],
+          params["color1"],
+          params["matrixSize"],
+        );
+        applyPixels(buffer, pixels);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe(params) {
+        return `Drew ${String(params["matrixSize"])}x${String(params["matrixSize"])} dither at (${String(params["x"])},${String(params["y"])}) ${String(params["w"])}x${String(params["h"])}`;
+      },
+    });
+
+    api.addToolbarItem('toolbar:drawing-tools:dither', {
+      toolbarId: 'drawing-tools',
+      kind: 'tool',
+      targetId: 'dither',
+      group: 'color',
+      order: 40,
+    });
+
+    // -- Stroke state --
+    let drawing = false;
+    let startX = 0;
+    let startY = 0;
+    let drawColor = '';
+
+    api.addTool('dither', {
+      icon: DitherIcon,
+      cursor: 'crosshair',
+
+      onPointerDown(_e, ctx) {
+        drawing = true;
+        startX = ctx.canvasX;
+        startY = ctx.canvasY;
+        drawColor = ctx.color;
+      },
+
+      onPointerMove(_e, ctx) {
+        if (!drawing) return;
+        // Show the dither region as a filled rect preview
+        setShapePreview({
+          type: 'rect',
+          startX,
+          startY,
+          endX: ctx.canvasX,
+          endY: ctx.canvasY,
+          color: drawColor,
+          filled: true,
+        });
+      },
+
+      onPointerUp(_e, ctx) {
+        if (!drawing) return;
+        drawing = false;
+        clearShapePreview();
+
+        const x = Math.min(startX, ctx.canvasX);
+        const y = Math.min(startY, ctx.canvasY);
+        const w = Math.abs(ctx.canvasX - startX) + 1;
+        const h = Math.abs(ctx.canvasY - startY) + 1;
+
+        ctx.api.dispatch({
+          type: 'draw_dither',
+          plugin: 'builtin/dither',
+          version: '1.0.0',
+          params: {
+            x,
+            y,
+            w,
+            h,
+            color0: drawColor,
+            color1: '#000000',
+            matrixSize: 2,
+            layerId: '',
+          },
+        });
+      },
+    });
+  },
+};