pixelweaver 0.1.0

package/src/lib/canvas/canvas-renderer.ts

@@ -0,0 +1,408 @@
+/**
+ * Canvas Renderer -- draws the pixel canvas, grid, and cursor onto
+ * an HTML Canvas 2D context.
+ *
+ * Performance strategy: pixel data is drawn to an offscreen canvas at
+ * 1:1 scale, then scaled up with drawImage() (hardware-accelerated,
+ * nearest-neighbor when imageSmoothingEnabled = false).
+ */
+
+import type { PixelBuffer } from './pixel-buffer.js';
+import type { ShapePreview } from './shape-preview-state.svelte.js';
+
+// --- Offscreen canvas cache (reused between frames) ---
+
+let offscreen: OffscreenCanvas | null = null;
+let offCtx: OffscreenCanvasRenderingContext2D | null = null;
+let offWidth = 0;
+let offHeight = 0;
+
+/** Ensure the offscreen canvas matches the pixel buffer dimensions. */
+function ensureOffscreen(w: number, h: number): void {
+  if (offscreen && offWidth === w && offHeight === h) return;
+  offscreen = new OffscreenCanvas(w, h);
+  const ctx = offscreen.getContext('2d');
+  if (!ctx) throw new Error('Failed to get 2d context from OffscreenCanvas');
+  offCtx = ctx;
+  offWidth = w;
+  offHeight = h;
+}
+
+// --- Theme-aware color helpers ---
+
+/**
+ * Read a CSS custom property from the document root at render time.
+ * Falls back to the provided default when running outside a browser
+ * or when the variable is not set.
+ */
+function cssVar(name: string, fallback: string): string {
+  if (typeof document === 'undefined') return fallback;
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return value || fallback;
+}
+
+/** Workspace background color (the area outside the pixel canvas). */
+function getWorkspaceBg(): string {
+  return cssVar('--bg-canvas', '#121212');
+}
+
+/** Border/outline color used around the pixel canvas. */
+function getBorderColor(): string {
+  return cssVar('--border', '#3a3a3a');
+}
+
+/** Detect whether the active theme is light. */
+function isLightTheme(): boolean {
+  if (typeof document === 'undefined') return false;
+  return document.documentElement.dataset["theme"] === 'light';
+}
+
+/** Grid line color -- dark on light backgrounds, light on dark backgrounds. */
+function getGridColor(): string {
+  return isLightTheme() ? 'rgba(0, 0, 0, 0.15)' : 'rgba(255, 255, 255, 0.1)';
+}
+
+/** Cursor highlight fill -- subtle overlay that contrasts with both themes. */
+function getCursorFillColor(): string {
+  return isLightTheme() ? 'rgba(0, 0, 0, 0.1)' : 'rgba(255, 255, 255, 0.15)';
+}
+
+/** Cursor outline -- must be clearly visible on the canvas. */
+function getCursorStrokeColor(): string {
+  return isLightTheme() ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255, 255, 255, 0.6)';
+}
+
+/** Border around the small color indicator next to the cursor. */
+function getIndicatorBorderColor(): string {
+  return isLightTheme() ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.5)';
+}
+
+// --- Main render ---
+
+/**
+ * Render the full canvas view: background, pixel data, grid, and cursor.
+ *
+ * @param ctx       - The destination 2D context (the on-screen canvas).
+ * @param buffer    - The pixel data to render.
+ * @param zoom      - Zoom factor (each pixel = zoom x zoom screen pixels).
+ * @param panX      - Horizontal pan offset in screen pixels.
+ * @param panY      - Vertical pan offset in screen pixels.
+ */
+export function renderCanvas(
+  ctx: CanvasRenderingContext2D,
+  buffer: PixelBuffer,
+  zoom: number,
+  panX: number,
+  panY: number,
+): void {
+  const { width: cw, height: ch } = ctx.canvas;
+
+  // Clear to workspace background color (reads CSS variable so it follows theme)
+  ctx.fillStyle = getWorkspaceBg();
+  ctx.fillRect(0, 0, cw, ch);
+
+  // Draw pixel data via offscreen canvas for crisp nearest-neighbor scaling
+  ensureOffscreen(buffer.width, buffer.height);
+  // After ensureOffscreen, both offCtx and offscreen are guaranteed non-null.
+  if (!offCtx || !offscreen) return;
+  offCtx.putImageData(buffer.toImageData(), 0, 0);
+
+  ctx.imageSmoothingEnabled = false;
+  ctx.drawImage(
+    offscreen,
+    0, 0, buffer.width, buffer.height,
+    panX, panY, buffer.width * zoom, buffer.height * zoom,
+  );
+
+  // Canvas border (1px outline around the canvas area)
+  renderBorder(ctx, buffer.width, buffer.height, zoom, panX, panY);
+}
+
+// --- Border ---
+
+/** Draw a 1px outline around the canvas area so the user can see its bounds. */
+function renderBorder(
+  ctx: CanvasRenderingContext2D,
+  width: number,
+  height: number,
+  zoom: number,
+  panX: number,
+  panY: number,
+): void {
+  // Use the theme border color so the outline is visible on both themes
+  ctx.strokeStyle = getBorderColor();
+  ctx.lineWidth = 1;
+  // Offset by 0.5 to land on exact pixel boundaries and avoid anti-aliasing
+  ctx.strokeRect(
+    panX - 0.5,
+    panY - 0.5,
+    width * zoom + 1,
+    height * zoom + 1,
+  );
+}
+
+// --- Grid ---
+
+/**
+ * Draw pixel grid lines. Only meaningful when zoom >= 4.
+ * Uses theme-aware semi-transparent lines that don't obscure the art.
+ */
+export function renderGrid(
+  ctx: CanvasRenderingContext2D,
+  width: number,
+  height: number,
+  zoom: number,
+  panX: number,
+  panY: number,
+): void {
+  if (zoom < 4) return;
+
+  const totalW = width * zoom;
+  const totalH = height * zoom;
+
+  ctx.strokeStyle = getGridColor();
+  ctx.lineWidth = 0.5;
+
+  ctx.beginPath();
+
+  // Vertical lines
+  for (let x = 0; x <= width; x++) {
+    const sx = panX + x * zoom;
+    ctx.moveTo(sx, panY);
+    ctx.lineTo(sx, panY + totalH);
+  }
+
+  // Horizontal lines
+  for (let y = 0; y <= height; y++) {
+    const sy = panY + y * zoom;
+    ctx.moveTo(panX, sy);
+    ctx.lineTo(panX + totalW, sy);
+  }
+
+  ctx.stroke();
+}
+
+// --- Cursor overlay ---
+
+/**
+ * Draw a cursor highlight over the pixel(s) the pointer is on.
+ *
+ * @param ctx       - The destination 2D context.
+ * @param x         - Canvas pixel X coordinate.
+ * @param y         - Canvas pixel Y coordinate.
+ * @param zoom      - Current zoom level.
+ * @param panX      - Horizontal pan offset.
+ * @param panY      - Vertical pan offset.
+ * @param toolSize  - Size of the tool brush in pixels (1 = single pixel).
+ * @param color     - Current drawing color as [r, g, b, a].
+ */
+export function renderCursor(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  zoom: number,
+  panX: number,
+  panY: number,
+  toolSize: number = 1,
+  color: [number, number, number, number] = [255, 255, 255, 255],
+): void {
+  // Pixel highlight: semi-transparent outline around the cursor pixel(s)
+  const half = Math.floor(toolSize / 2);
+  const sx = panX + (x - half) * zoom;
+  const sy = panY + (y - half) * zoom;
+  const size = toolSize * zoom;
+
+  // Fill with a subtle overlay
+  ctx.fillStyle = getCursorFillColor();
+  ctx.fillRect(sx, sy, size, size);
+
+  // Outline
+  ctx.strokeStyle = getCursorStrokeColor();
+  ctx.lineWidth = 1;
+  ctx.strokeRect(sx + 0.5, sy + 0.5, size - 1, size - 1);
+
+  // Small color indicator (4x4 square in the top-right corner of cursor area)
+  const indicatorSize = Math.max(4, Math.min(8, zoom / 2));
+  const ix = sx + size + 2;
+  const iy = sy - indicatorSize - 2;
+  ctx.fillStyle = `rgba(${String(color[0])}, ${String(color[1])}, ${String(color[2])}, ${String(color[3] / 255)})`;
+  ctx.fillRect(ix, iy, indicatorSize, indicatorSize);
+  ctx.strokeStyle = getIndicatorBorderColor();
+  ctx.lineWidth = 0.5;
+  ctx.strokeRect(ix, iy, indicatorSize, indicatorSize);
+}
+
+// --- Isometric guide overlay ---
+
+/**
+ * Draw an isometric diamond guide inscribed in the canvas rectangle,
+ * plus center crosshair lines. Helps users align isometric tile sprites.
+ *
+ * The diamond vertices sit at the midpoints of the canvas edges:
+ *   Top:    (width/2, 0)
+ *   Right:  (width, height/2)
+ *   Bottom: (width/2, height)
+ *   Left:   (0, height/2)
+ *
+ * All coordinates are in canvas pixel space, converted to screen space
+ * via zoom and pan.
+ */
+export function renderIsoGuide(
+  ctx: CanvasRenderingContext2D,
+  width: number,
+  height: number,
+  zoom: number,
+  panX: number,
+  panY: number,
+): void {
+  // Convert canvas-pixel vertices to screen-space
+  const topX = panX + (width / 2) * zoom;
+  const topY = panY;
+  const rightX = panX + width * zoom;
+  const rightY = panY + (height / 2) * zoom;
+  const bottomX = panX + (width / 2) * zoom;
+  const bottomY = panY + height * zoom;
+  const leftX = panX;
+  const leftY = panY + (height / 2) * zoom;
+
+  const guideColor = isLightTheme() ? 'rgba(200, 0, 200,' : 'rgba(0, 220, 220,';
+
+  ctx.save();
+
+  // Diamond outline -- dashed, 60% opacity
+  ctx.strokeStyle = `${guideColor} 0.6)`;
+  ctx.lineWidth = 1;
+  ctx.setLineDash([4, 4]);
+
+  ctx.beginPath();
+  ctx.moveTo(topX, topY);
+  ctx.lineTo(rightX, rightY);
+  ctx.lineTo(bottomX, bottomY);
+  ctx.lineTo(leftX, leftY);
+  ctx.closePath();
+  ctx.stroke();
+
+  // Center crosshair lines -- 30% opacity
+  ctx.strokeStyle = `${guideColor} 0.3)`;
+  ctx.setLineDash([4, 4]);
+
+  const centerX = panX + (width / 2) * zoom;
+  const centerY = panY + (height / 2) * zoom;
+
+  ctx.beginPath();
+  // Horizontal line through center
+  ctx.moveTo(panX, centerY);
+  ctx.lineTo(panX + width * zoom, centerY);
+  // Vertical line through center
+  ctx.moveTo(centerX, panY);
+  ctx.lineTo(centerX, panY + height * zoom);
+  ctx.stroke();
+
+  ctx.restore();
+}
+
+// --- Shape preview overlay ---
+
+/**
+ * Draw a live rubber-band preview for shape tools (rect, ellipse, diamond, line).
+ *
+ * The preview is drawn as a canvas 2D overlay at the zoomed/panned position,
+ * NOT as pixel data. It uses dashed strokes and semi-transparent fills so the
+ * user can see what will be drawn without modifying the pixel buffer.
+ *
+ * Coordinates in the preview are in canvas pixel space; this function converts
+ * them to screen space using zoom and pan.
+ */
+export function renderShapePreview(
+  ctx: CanvasRenderingContext2D,
+  preview: ShapePreview,
+  zoom: number,
+  panX: number,
+  panY: number,
+): void {
+  // Normalize so x0,y0 is top-left for rect/ellipse/diamond
+  // (line uses raw start/end)
+  const x0 = Math.min(preview.startX, preview.endX);
+  const y0 = Math.min(preview.startY, preview.endY);
+  const x1 = Math.max(preview.startX, preview.endX);
+  const y1 = Math.max(preview.startY, preview.endY);
+
+  // Screen coordinates: offset by +0.5 pixel to cover the full pixel cell
+  // (a pixel at canvas coord N spans screen range [N*zoom, (N+1)*zoom])
+  const sx0 = panX + x0 * zoom;
+  const sy0 = panY + y0 * zoom;
+  const sw = (x1 - x0 + 1) * zoom;
+  const sh = (y1 - y0 + 1) * zoom;
+
+  ctx.save();
+
+  // Semi-transparent version of the drawing color for fills
+  const fillColor = preview.color + '33'; // ~20% opacity hex
+  // Slightly more opaque for strokes
+  const strokeColor = preview.color + '99'; // ~60% opacity hex
+
+  ctx.lineWidth = 1;
+  ctx.setLineDash([4, 4]);
+  ctx.strokeStyle = strokeColor;
+  ctx.fillStyle = fillColor;
+
+  switch (preview.type) {
+    case 'rect':
+      if (preview.filled) {
+        ctx.fillRect(sx0, sy0, sw, sh);
+      }
+      ctx.strokeRect(sx0, sy0, sw, sh);
+      break;
+
+    case 'ellipse': {
+      // Derive center and radii in screen space
+      const cx = sx0 + sw / 2;
+      const cy = sy0 + sh / 2;
+      const rx = sw / 2;
+      const ry = sh / 2;
+
+      ctx.beginPath();
+      ctx.ellipse(cx, cy, Math.max(0, rx), Math.max(0, ry), 0, 0, Math.PI * 2);
+      if (preview.filled) {
+        ctx.fill();
+      }
+      ctx.stroke();
+      break;
+    }
+
+    case 'diamond': {
+      // Four vertices at midpoints of the bounding box edges
+      const midX = sx0 + sw / 2;
+      const midY = sy0 + sh / 2;
+
+      ctx.beginPath();
+      ctx.moveTo(midX, sy0);          // top
+      ctx.lineTo(sx0 + sw, midY);     // right
+      ctx.lineTo(midX, sy0 + sh);     // bottom
+      ctx.lineTo(sx0, midY);          // left
+      ctx.closePath();
+      if (preview.filled) {
+        ctx.fill();
+      }
+      ctx.stroke();
+      break;
+    }
+
+    case 'line': {
+      // Line uses raw start/end (not normalized)
+      // +0.5 pixel offset so the line goes through pixel centers
+      const lx0 = panX + (preview.startX + 0.5) * zoom;
+      const ly0 = panY + (preview.startY + 0.5) * zoom;
+      const lx1 = panX + (preview.endX + 0.5) * zoom;
+      const ly1 = panY + (preview.endY + 0.5) * zoom;
+
+      ctx.beginPath();
+      ctx.moveTo(lx0, ly0);
+      ctx.lineTo(lx1, ly1);
+      ctx.stroke();
+      break;
+    }
+  }
+
+  ctx.restore();
+}

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

@@ -0,0 +1,232 @@
+/**
+ * Canvas State -- reactive singleton holding viewport and cursor state.
+ *
+ * Uses Svelte 5 runes ($state) so that any component reading these
+ * properties will automatically re-render when they change.
+ *
+ * Module-level singleton -- one canvas state per app instance.
+ */
+
+// --- Canvas dimensions ---
+
+/**
+ * Maximum canvas dimension in pixels. Previously 512; raised to 4096 so that
+ * effects producing larger buffers (rotate 90/270 on tall canvases, upscale)
+ * don't get silently clamped. 4096 is a conservative sanity ceiling -- the
+ * compositor and PixelBuffer are size-agnostic, and the browser's ImageData
+ * supports much larger sizes, but 4096x4096 RGBA already costs 64 MB per
+ * layer/frame, so raising it further would invite real memory trouble.
+ */
+export const MAX_CANVAS_SIZE = 4096;
+
+/** Minimum canvas dimension in pixels. */
+export const MIN_CANVAS_SIZE = 1;
+
+/** Width of the pixel canvas. */
+let canvasWidth = $state(32);
+
+/** Height of the pixel canvas. */
+let canvasHeight = $state(32);
+
+// --- Viewport (how the canvas is displayed in the browser) ---
+
+/** Zoom level: each canvas pixel is rendered as zoom x zoom screen pixels. */
+let zoom = $state(8);
+
+/** Horizontal pan offset in screen pixels. */
+let panX = $state(0);
+
+/** Vertical pan offset in screen pixels. */
+let panY = $state(0);
+
+// --- Cursor ---
+
+/** Cursor X in canvas pixel coordinates (0-based). */
+let cursorX = $state(0);
+
+/** Cursor Y in canvas pixel coordinates (0-based). */
+let cursorY = $state(0);
+
+/** Whether the cursor is currently over the canvas area. */
+let cursorInBounds = $state(false);
+
+// --- Display toggles ---
+
+/** Whether the pixel grid overlay is shown (at sufficient zoom). */
+let showGrid = $state(true);
+
+/** Whether the sub-pixel grid overlay is shown (finer grid within each pixel). */
+let showPixelGrid = $state(false);
+
+/** Whether tile mode is active (3x3 ghost grid + coordinate wrapping). */
+let tileMode = $state(false);
+
+/** Whether onion skinning is active (ghost frames before/after current). */
+let onionSkin = $state(false);
+
+/** Whether the isometric diamond guide overlay is shown on the canvas. */
+let isoGuide = $state(false);
+
+// --- Animated zoom/pan ---
+
+/** Target values for smooth interpolation. */
+let targetZoom = $state(8);
+let targetPanX = $state(0);
+let targetPanY = $state(0);
+let isAnimating = false;
+
+/** Lerp factor per frame -- 0.25 gives snappy-but-smooth motion. */
+const LERP = 0.25;
+
+/** Thresholds below which we snap to the target to avoid endless ticking. */
+const ZOOM_EPSILON = 0.01;
+const PAN_EPSILON = 0.5;
+
+/**
+ * Internal animation tick that lerps zoom/pan toward their targets.
+ * Self-schedules via requestAnimationFrame until close enough.
+ */
+function animationTick(): void {
+  const zoomDiff = targetZoom - zoom;
+  const panXDiff = targetPanX - panX;
+  const panYDiff = targetPanY - panY;
+
+  if (
+    Math.abs(zoomDiff) < ZOOM_EPSILON &&
+    Math.abs(panXDiff) < PAN_EPSILON &&
+    Math.abs(panYDiff) < PAN_EPSILON
+  ) {
+    // Close enough -- snap to targets and stop animating
+    zoom = targetZoom;
+    panX = targetPanX;
+    panY = targetPanY;
+    isAnimating = false;
+    return;
+  }
+
+  zoom += zoomDiff * LERP;
+  panX += panXDiff * LERP;
+  panY += panYDiff * LERP;
+
+  requestAnimationFrame(animationTick);
+}
+
+function startAnimation(): void {
+  if (isAnimating) return;
+  isAnimating = true;
+  requestAnimationFrame(animationTick);
+}
+
+// --- Coordinate conversion ---
+
+/**
+ * Convert screen (viewport) coordinates to canvas pixel coordinates.
+ * Returns fractional values; floor them to get the pixel index.
+ */
+function screenToCanvas(screenX: number, screenY: number): { x: number; y: number } {
+  return {
+    x: (screenX - panX) / zoom,
+    y: (screenY - panY) / zoom,
+  };
+}
+
+/**
+ * Convert canvas pixel coordinates to screen (viewport) coordinates.
+ * Returns the top-left corner of the pixel on screen.
+ */
+function canvasToScreen(canvasX: number, canvasY: number): { x: number; y: number } {
+  return {
+    x: canvasX * zoom + panX,
+    y: canvasY * zoom + panY,
+  };
+}
+
+// --- Public API (exported as a singleton object) ---
+
+export const canvasState = {
+  get canvasWidth() { return canvasWidth; },
+  set canvasWidth(v: number) {
+    canvasWidth = Math.max(MIN_CANVAS_SIZE, Math.min(MAX_CANVAS_SIZE, Math.round(v)));
+  },
+
+  get canvasHeight() { return canvasHeight; },
+  set canvasHeight(v: number) {
+    canvasHeight = Math.max(MIN_CANVAS_SIZE, Math.min(MAX_CANVAS_SIZE, Math.round(v)));
+  },
+
+  get zoom() { return zoom; },
+  set zoom(v: number) { zoom = v; targetZoom = v; },
+
+  get panX() { return panX; },
+  set panX(v: number) { panX = v; targetPanX = v; },
+
+  get panY() { return panY; },
+  set panY(v: number) { panY = v; targetPanY = v; },
+
+  get cursorX() { return cursorX; },
+  set cursorX(v: number) { cursorX = v; },
+
+  get cursorY() { return cursorY; },
+  set cursorY(v: number) { cursorY = v; },
+
+  get cursorInBounds() { return cursorInBounds; },
+  set cursorInBounds(v: boolean) { cursorInBounds = v; },
+
+  get showGrid() { return showGrid; },
+  set showGrid(v: boolean) { showGrid = v; },
+
+  get showPixelGrid() { return showPixelGrid; },
+  set showPixelGrid(v: boolean) { showPixelGrid = v; },
+
+  get tileMode() { return tileMode; },
+  set tileMode(v: boolean) { tileMode = v; },
+
+  get onionSkin() { return onionSkin; },
+  set onionSkin(v: boolean) { onionSkin = v; },
+
+  get isoGuide() { return isoGuide; },
+  set isoGuide(v: boolean) { isoGuide = v; },
+
+  screenToCanvas,
+  canvasToScreen,
+
+  /**
+   * Animate zoom toward a target value while keeping a pivot point stable.
+   * The pivot is in screen-space (relative to the canvas element).
+   */
+  setZoomAnimated(newZoom: number, pivotScreenX: number, pivotScreenY: number): void {
+    // Canvas-space position under the pivot at the current (or target) zoom
+    const before = {
+      x: (pivotScreenX - targetPanX) / targetZoom,
+      y: (pivotScreenY - targetPanY) / targetZoom,
+    };
+
+    targetZoom = newZoom;
+
+    // Adjust target pan so the same canvas-space point stays under the pivot
+    targetPanX = pivotScreenX - before.x * newZoom;
+    targetPanY = pivotScreenY - before.y * newZoom;
+
+    startAnimation();
+  },
+
+  /** Animate pan to a specific screen offset. */
+  setPanAnimated(x: number, y: number): void {
+    targetPanX = x;
+    targetPanY = y;
+    startAnimation();
+  },
+};
+
+// --- Serialization ---
+
+/** Serialize canvas dimensions for project save. */
+export function serializeCanvasState(): { width: number; height: number } {
+  return { width: canvasState.canvasWidth, height: canvasState.canvasHeight };
+}
+
+/** Restore canvas dimensions from a saved project. */
+export function deserializeCanvasState(data: { width: number; height: number }): void {
+  canvasState.canvasWidth = data.width;
+  canvasState.canvasHeight = data.height;
+}