pixelweaver 0.1.0

package/src/lib/canvas/canvas-state.test.ts

@@ -0,0 +1,139 @@
+import { describe, it, expect } from 'vitest';
+import { canvasState, MAX_CANVAS_SIZE } from './canvas-state.svelte.js';
+
+describe('Canvas State', () => {
+  describe('screenToCanvas / canvasToScreen roundtrip', () => {
+    it('should roundtrip at zoom 1 with no pan', () => {
+      canvasState.zoom = 1;
+      canvasState.panX = 0;
+      canvasState.panY = 0;
+
+      const screen = canvasState.canvasToScreen(5, 10);
+      const canvas = canvasState.screenToCanvas(screen.x, screen.y);
+
+      expect(canvas.x).toBeCloseTo(5, 5);
+      expect(canvas.y).toBeCloseTo(10, 5);
+    });
+
+    it('should roundtrip at zoom 8 with no pan', () => {
+      canvasState.zoom = 8;
+      canvasState.panX = 0;
+      canvasState.panY = 0;
+
+      const screen = canvasState.canvasToScreen(3, 7);
+      expect(screen.x).toBe(24); // 3 * 8
+      expect(screen.y).toBe(56); // 7 * 8
+
+      const canvas = canvasState.screenToCanvas(24, 56);
+      expect(canvas.x).toBeCloseTo(3, 5);
+      expect(canvas.y).toBeCloseTo(7, 5);
+    });
+
+    it('should roundtrip at zoom 16 with pan offset', () => {
+      canvasState.zoom = 16;
+      canvasState.panX = 100;
+      canvasState.panY = 50;
+
+      const screen = canvasState.canvasToScreen(2, 4);
+      expect(screen.x).toBe(2 * 16 + 100); // 132
+      expect(screen.y).toBe(4 * 16 + 50);  // 114
+
+      const canvas = canvasState.screenToCanvas(132, 114);
+      expect(canvas.x).toBeCloseTo(2, 5);
+      expect(canvas.y).toBeCloseTo(4, 5);
+    });
+
+    it('should handle fractional screen coordinates', () => {
+      canvasState.zoom = 4;
+      canvasState.panX = 10;
+      canvasState.panY = 10;
+
+      // Screen position in the middle of a pixel
+      const canvas = canvasState.screenToCanvas(12, 12);
+      expect(canvas.x).toBeCloseTo(0.5, 5);
+      expect(canvas.y).toBeCloseTo(0.5, 5);
+    });
+
+    it('should handle negative pan (canvas scrolled left/up)', () => {
+      canvasState.zoom = 8;
+      canvasState.panX = -50;
+      canvasState.panY = -30;
+
+      const screen = canvasState.canvasToScreen(0, 0);
+      expect(screen.x).toBe(-50);
+      expect(screen.y).toBe(-30);
+
+      const canvas = canvasState.screenToCanvas(-50, -30);
+      expect(canvas.x).toBeCloseTo(0, 5);
+      expect(canvas.y).toBeCloseTo(0, 5);
+    });
+  });
+
+  describe('zoom and dimension bounds', () => {
+    it(`should clamp canvasWidth to 1-${String(MAX_CANVAS_SIZE)}`, () => {
+      canvasState.canvasWidth = 0;
+      expect(canvasState.canvasWidth).toBe(1);
+
+      canvasState.canvasWidth = MAX_CANVAS_SIZE + 1000;
+      expect(canvasState.canvasWidth).toBe(MAX_CANVAS_SIZE);
+
+      canvasState.canvasWidth = 64;
+      expect(canvasState.canvasWidth).toBe(64);
+    });
+
+    it(`should clamp canvasHeight to 1-${String(MAX_CANVAS_SIZE)}`, () => {
+      canvasState.canvasHeight = -5;
+      expect(canvasState.canvasHeight).toBe(1);
+
+      canvasState.canvasHeight = MAX_CANVAS_SIZE + 1000;
+      expect(canvasState.canvasHeight).toBe(MAX_CANVAS_SIZE);
+
+      canvasState.canvasHeight = 128;
+      expect(canvasState.canvasHeight).toBe(128);
+    });
+
+    it('should store zoom value directly', () => {
+      canvasState.zoom = 4;
+      expect(canvasState.zoom).toBe(4);
+
+      canvasState.zoom = 32;
+      expect(canvasState.zoom).toBe(32);
+    });
+
+    it('should store pan values directly', () => {
+      canvasState.panX = -123;
+      canvasState.panY = 456;
+      expect(canvasState.panX).toBe(-123);
+      expect(canvasState.panY).toBe(456);
+    });
+  });
+
+  describe('cursor state', () => {
+    it('should store cursor coordinates', () => {
+      canvasState.cursorX = 15;
+      canvasState.cursorY = 20;
+      expect(canvasState.cursorX).toBe(15);
+      expect(canvasState.cursorY).toBe(20);
+    });
+
+    it('should store cursorInBounds', () => {
+      canvasState.cursorInBounds = true;
+      expect(canvasState.cursorInBounds).toBe(true);
+
+      canvasState.cursorInBounds = false;
+      expect(canvasState.cursorInBounds).toBe(false);
+    });
+  });
+
+  // Reset state after tests to avoid leaking between test files
+  it('should reset to defaults', () => {
+    canvasState.canvasWidth = 32;
+    canvasState.canvasHeight = 32;
+    canvasState.zoom = 8;
+    canvasState.panX = 0;
+    canvasState.panY = 0;
+    canvasState.cursorX = 0;
+    canvasState.cursorY = 0;
+    canvasState.cursorInBounds = false;
+  });
+});

package/src/lib/canvas/input-handler.ts

@@ -0,0 +1,221 @@
+/**
+ * Input Handler -- translates pointer/keyboard events on the canvas
+ * element into canvas-space coordinates and viewport actions.
+ *
+ * Handles:
+ *   - Zoom: scroll wheel (centered on cursor position)
+ *   - Pan: middle-click drag OR spacebar + left-click drag
+ *   - Pointer tracking: screen -> canvas coordinate conversion
+ *   - Pressure: captures pressure from Pointer Events API (tablets)
+ */
+
+import { canvasState } from './canvas-state.svelte.js';
+import { zoomStepUp, zoomStepDown } from './zoom-utils.js';
+
+// --- Tool callback hooks ---
+// Set by input-plugin.ts to route pointer events to the active tool.
+
+type ToolEventCallback = (e: PointerEvent) => void;
+
+let toolDown: ToolEventCallback | null = null;
+let toolMove: ToolEventCallback | null = null;
+let toolUp: ToolEventCallback | null = null;
+
+export function setToolCallbacks(callbacks: {
+  onPointerDown?: ToolEventCallback;
+  onPointerMove?: ToolEventCallback;
+  onPointerUp?: ToolEventCallback;
+}): void {
+  toolDown = callbacks.onPointerDown ?? null;
+  toolMove = callbacks.onPointerMove ?? null;
+  toolUp = callbacks.onPointerUp ?? null;
+}
+
+// --- Input state ---
+// These are plain module-level variables. `export let` was previously used
+// here, but that syntax belongs to Svelte 4 component scripts -- in a plain
+// .ts module it only creates a named export that can't be reassigned by
+// importers, which is misleading. isDrawing/isPanning are internal-only;
+// pressure is exposed via getPressure() for imperative reads from input-plugin.
+
+let isDrawing = false;
+let isPanning = false;
+let pressure = 0;
+
+/** Current pointer pressure (0-1). Read imperatively inside event handlers. */
+export function getPressure(): number {
+  return pressure;
+}
+
+/** True when the user is mid-stroke or panning (used to suppress shortcuts like Space). */
+export function isInteracting(): boolean {
+  return isDrawing || isPanning;
+}
+
+// --- Internal state ---
+
+let spaceHeld = false;
+let panStartX = 0;
+let panStartY = 0;
+let panStartPanX = 0;
+let panStartPanY = 0;
+let boundElement: HTMLCanvasElement | null = null;
+
+// --- Event handlers ---
+
+function onPointerDown(e: PointerEvent): void {
+  if (!boundElement) return;
+  boundElement.setPointerCapture(e.pointerId);
+
+  if (e.button === 1 || (e.button === 0 && spaceHeld)) {
+    // Middle-click or space+left-click: start panning
+    isPanning = true;
+    panStartX = e.clientX;
+    panStartY = e.clientY;
+    panStartPanX = canvasState.panX;
+    panStartPanY = canvasState.panY;
+    e.preventDefault();
+    return;
+  }
+
+  if (e.button === 0) {
+    isDrawing = true;
+    pressure = e.pressure;
+    updateCursor(e);
+    toolDown?.(e);
+  }
+}
+
+function onPointerMove(e: PointerEvent): void {
+  if (isPanning) {
+    canvasState.panX = panStartPanX + (e.clientX - panStartX);
+    canvasState.panY = panStartPanY + (e.clientY - panStartY);
+    return;
+  }
+
+  pressure = e.pressure;
+  updateCursor(e);
+
+  // Dispatch to the active tool only while drawing (not just hovering)
+  if (isDrawing) {
+    toolMove?.(e);
+  }
+}
+
+function onPointerUp(e: PointerEvent): void {
+  if (boundElement) {
+    boundElement.releasePointerCapture(e.pointerId);
+  }
+
+  if (isPanning) {
+    isPanning = false;
+    return;
+  }
+
+  // Notify the tool before clearing isDrawing, so it knows the stroke is ending.
+  // Update cursor first so the tool gets the final pointer position.
+  if (isDrawing) {
+    updateCursor(e);
+    toolUp?.(e);
+  }
+
+  isDrawing = false;
+  pressure = 0;
+}
+
+function onPointerLeave(): void {
+  canvasState.cursorInBounds = false;
+}
+
+function onWheel(e: WheelEvent): void {
+  e.preventDefault();
+
+  // Get screen position of cursor relative to the canvas element
+  if (!boundElement) return;
+  const rect = boundElement.getBoundingClientRect();
+  const screenX = e.clientX - rect.left;
+  const screenY = e.clientY - rect.top;
+
+  // Step zoom (use current zoom for step calculation)
+  const oldZoom = canvasState.zoom;
+  const newZoom = e.deltaY < 0 ? zoomStepUp(oldZoom) : zoomStepDown(oldZoom);
+
+  // Smoothly animate toward the new zoom, keeping the cursor as pivot
+  canvasState.setZoomAnimated(newZoom, screenX, screenY);
+}
+
+function onKeyDown(e: KeyboardEvent): void {
+  if (e.code === 'Space' && !e.repeat) {
+    spaceHeld = true;
+    e.preventDefault();
+  }
+}
+
+function onKeyUp(e: KeyboardEvent): void {
+  if (e.code === 'Space') {
+    spaceHeld = false;
+    // If we were panning via space, stop
+    if (isPanning) {
+      isPanning = false;
+    }
+  }
+}
+
+/** Update cursor position from a pointer event. */
+function updateCursor(e: PointerEvent): void {
+  if (!boundElement) return;
+  const rect = boundElement.getBoundingClientRect();
+  const screenX = e.clientX - rect.left;
+  const screenY = e.clientY - rect.top;
+
+  const { x, y } = canvasState.screenToCanvas(screenX, screenY);
+  const px = Math.floor(x);
+  const py = Math.floor(y);
+
+  canvasState.cursorX = px;
+  canvasState.cursorY = py;
+  // In tile mode coordinates wrap, so the cursor is always "in bounds"
+  canvasState.cursorInBounds =
+    canvasState.tileMode ||
+    (px >= 0 && px < canvasState.canvasWidth &&
+     py >= 0 && py < canvasState.canvasHeight);
+}
+
+// --- Context menu suppression (prevent right-click menu on canvas) ---
+
+function onContextMenu(e: Event): void {
+  e.preventDefault();
+}
+
+// --- Bind / Unbind ---
+
+/**
+ * Attach all input event listeners to a canvas element.
+ * Returns an unbind function that removes all listeners.
+ */
+export function bindInputHandler(element: HTMLCanvasElement): () => void {
+  boundElement = element;
+
+  element.addEventListener('pointerdown', onPointerDown);
+  element.addEventListener('pointermove', onPointerMove);
+  element.addEventListener('pointerup', onPointerUp);
+  element.addEventListener('pointerleave', onPointerLeave);
+  element.addEventListener('wheel', onWheel, { passive: false });
+  element.addEventListener('contextmenu', onContextMenu);
+
+  // Keyboard events need to be on window/document since canvas might not have focus
+  window.addEventListener('keydown', onKeyDown);
+  window.addEventListener('keyup', onKeyUp);
+
+  return () => {
+    element.removeEventListener('pointerdown', onPointerDown);
+    element.removeEventListener('pointermove', onPointerMove);
+    element.removeEventListener('pointerup', onPointerUp);
+    element.removeEventListener('pointerleave', onPointerLeave);
+    element.removeEventListener('wheel', onWheel);
+    element.removeEventListener('contextmenu', onContextMenu);
+    window.removeEventListener('keydown', onKeyDown);
+    window.removeEventListener('keyup', onKeyUp);
+    boundElement = null;
+  };
+}

package/src/lib/canvas/input-plugin.ts

@@ -0,0 +1,150 @@
+/**
+ * Input Plugin -- routes pointer events from input-handler to the active tool.
+ *
+ * Bridges the gap between raw pointer input (input-handler.ts) and tool
+ * definitions (ToolDefinition.onPointerDown/Move/Up). Constructs a
+ * ToolContext with canvas coordinates, pressure, and foreground color.
+ *
+ * Locked-layer guard: before dispatching to a tool, checks whether the
+ * active layer is locked. If it is, the event is swallowed and a one-shot
+ * notification is shown. The notification flag resets when the active layer
+ * changes, when the lock state changes, or on a new pointer-down.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import type { ToolContext } from '../core/plugin-types.js';
+import { toolRegistry } from '../core/registries.svelte.js';
+import { getActiveTool } from '../shortcuts/shortcut-state.svelte.js';
+import { canvasState } from './canvas-state.svelte.js';
+import { wrapCoordinate } from './tile-mode.js';
+import { getForegroundColor, setForegroundColor } from '../color/color-state.svelte.js';
+import { getActiveLayer } from '../layers/layer-tree.svelte.js';
+import { getRenderBuffer } from './render-state.svelte.js';
+import { rgbToHex } from '../color/color-utils.js';
+// getPressure() reads the current pointer pressure imperatively -- makeContext()
+// is only called inside event handlers, so a plain getter is sufficient.
+import { getPressure, setToolCallbacks } from './input-handler.js';
+
+/** Stable ID reused for the locked-layer notification so it replaces rather than stacks. */
+const LOCKED_NOTIFICATION_ID = 'input-plugin:layer-locked';
+
+export const inputPlugin: PluginModule = {
+  name: 'builtin/input',
+  version: '1.0.0',
+  description: 'Routes pointer events to the active tool',
+
+  register(api) {
+    // --- Locked-layer one-shot notification state ---
+    // Tracks which layer+locked combo was last notified so we don't spam
+    // the same message on every pointer event. Resets when the layer or
+    // its lock state changes, or on a fresh pointer-down.
+    let notifiedLayerId: string | null = null;
+    let notifiedLocked = false;
+
+    /**
+     * Check if the active layer is locked. If it is, fire a one-shot
+     * notification (unless we already notified for this exact layer+locked
+     * state) and return true (= block the event). If the layer/lock
+     * context changed since last notification, reset the flag.
+     *
+     * @param resetFlag  Pass true on pointer-down to allow re-notification
+     *                   for a new stroke even if the layer hasn't changed.
+     */
+    function isActiveLayerLocked(resetFlag: boolean): boolean {
+      const layer = getActiveLayer();
+      if (!layer) return false;
+
+      // Detect context change: different layer or lock state flipped
+      const contextChanged =
+        layer.id !== notifiedLayerId || layer.locked !== notifiedLocked;
+
+      if (contextChanged || resetFlag) {
+        notifiedLayerId = layer.id;
+        notifiedLocked = layer.locked;
+        // Context changed -- allow a fresh notification if still locked
+        if (!layer.locked) return false;
+        // Layer is locked and we haven't notified for this context yet
+        api.notify({
+          id: LOCKED_NOTIFICATION_ID,
+          message: 'Layer is locked',
+          type: 'warning',
+          autoDismissMs: 3000,
+        });
+        return true;
+      }
+
+      // Same context as before -- just silently block if locked
+      return layer.locked;
+    }
+
+    /** Build a ToolContext from the current state. */
+    function makeContext(): ToolContext {
+      let x = canvasState.cursorX;
+      let y = canvasState.cursorY;
+
+      // In tile mode, wrap coordinates so drawing seamlessly wraps around edges
+      if (canvasState.tileMode) {
+        const wrapped = wrapCoordinate(x, y, canvasState.canvasWidth, canvasState.canvasHeight);
+        x = wrapped.x;
+        y = wrapped.y;
+      }
+
+      return {
+        canvasX: x,
+        canvasY: y,
+        pressure: getPressure(),
+        color: getForegroundColor(),
+        api,
+      };
+    }
+
+    setToolCallbacks({
+      onPointerDown(e: PointerEvent) {
+        // Alt+click: quick eyedropper -- sample pixel color regardless of active tool
+        if (e.altKey) {
+          const buffer = getRenderBuffer();
+          if (!buffer) return;
+
+          let x = Math.floor(canvasState.cursorX);
+          let y = Math.floor(canvasState.cursorY);
+
+          if (canvasState.tileMode) {
+            const wrapped = wrapCoordinate(x, y, canvasState.canvasWidth, canvasState.canvasHeight);
+            x = wrapped.x;
+            y = wrapped.y;
+          }
+
+          if (!buffer.inBounds(x, y)) return;
+
+          const [r, g, b, a] = buffer.getPixel(x, y);
+          if (a === 0) return;
+
+          setForegroundColor(rgbToHex(r, g, b));
+          return;
+        }
+
+        if (isActiveLayerLocked(true)) return;
+        const tool = toolRegistry.get(getActiveTool());
+        if (tool?.onPointerDown) {
+          tool.onPointerDown(e, makeContext());
+        }
+      },
+
+      onPointerMove(e: PointerEvent) {
+        if (isActiveLayerLocked(false)) return;
+        const tool = toolRegistry.get(getActiveTool());
+        if (tool?.onPointerMove) {
+          tool.onPointerMove(e, makeContext());
+        }
+      },
+
+      onPointerUp(e: PointerEvent) {
+        if (isActiveLayerLocked(false)) return;
+        const tool = toolRegistry.get(getActiveTool());
+        if (tool?.onPointerUp) {
+          tool.onPointerUp(e, makeContext());
+        }
+      },
+    });
+  },
+};

package/src/lib/canvas/onion-skin.ts

@@ -0,0 +1,94 @@
+/**
+ * Onion Skin Renderer -- draws semi-transparent tinted ghosts of adjacent
+ * animation frames behind the current frame.
+ *
+ * Previous frame: 25% opacity, red tint.
+ * Next frame:     25% opacity, blue tint.
+ *
+ * Uses source-atop compositing to tint only non-transparent pixels,
+ * then draws the result onto the main canvas at reduced opacity.
+ */
+
+import type { PixelBuffer } from './pixel-buffer.js';
+
+/** Tint color and opacity for a single onion ghost frame. */
+interface OnionGhost {
+  buffer: PixelBuffer;
+  tintColor: string;
+  opacity: number;
+}
+
+/**
+ * Render a single onion ghost frame onto the destination context.
+ *
+ * 1. Draw the composited buffer to a temporary OffscreenCanvas at 1:1.
+ * 2. Apply a color tint via source-atop (only tints non-transparent pixels).
+ * 3. Draw the tinted result onto the main canvas at reduced globalAlpha.
+ */
+function renderGhost(
+  ctx: CanvasRenderingContext2D,
+  ghost: OnionGhost,
+  zoom: number,
+  panX: number,
+  panY: number,
+): void {
+  const { width, height } = ghost.buffer;
+
+  // Build a 1:1 temporary canvas with the pixel data
+  const tmp = new OffscreenCanvas(width, height);
+  const tmpCtx = tmp.getContext('2d');
+  if (!tmpCtx) return;
+  tmpCtx.putImageData(ghost.buffer.toImageData(), 0, 0);
+
+  // Tint non-transparent pixels using source-atop: the fill only lands
+  // where existing alpha is non-zero, preserving transparency elsewhere.
+  tmpCtx.globalCompositeOperation = 'source-atop';
+  tmpCtx.fillStyle = ghost.tintColor;
+  tmpCtx.fillRect(0, 0, width, height);
+
+  // Draw the tinted ghost onto the main canvas at reduced opacity
+  ctx.save();
+  ctx.imageSmoothingEnabled = false;
+  ctx.globalAlpha = ghost.opacity;
+  ctx.drawImage(
+    tmp,
+    0, 0, width, height,
+    panX, panY, width * zoom, height * zoom,
+  );
+  ctx.restore();
+}
+
+/**
+ * Render onion skin ghosts for the given adjacent-frame buffers.
+ *
+ * @param ctx       - The destination 2D context (the on-screen canvas).
+ * @param prevFrame - Composited pixel buffer for the previous frame, or null.
+ * @param nextFrame - Composited pixel buffer for the next frame, or null.
+ * @param zoom      - Zoom factor.
+ * @param panX      - Horizontal pan offset in screen pixels.
+ * @param panY      - Vertical pan offset in screen pixels.
+ */
+export function renderOnionSkin(
+  ctx: CanvasRenderingContext2D,
+  prevFrame: PixelBuffer | null,
+  nextFrame: PixelBuffer | null,
+  zoom: number,
+  panX: number,
+  panY: number,
+): void {
+  if (prevFrame) {
+    renderGhost(ctx, {
+      buffer: prevFrame,
+      tintColor: 'rgba(255, 0, 0, 0.5)',
+      opacity: 0.25,
+    }, zoom, panX, panY);
+  }
+
+  if (nextFrame) {
+    renderGhost(ctx, {
+      buffer: nextFrame,
+      tintColor: 'rgba(0, 0, 255, 0.5)',
+      opacity: 0.25,
+    }, zoom, panX, panY);
+  }
+}