pixelweaver 0.1.0

package/plugins/builtin/effects/rotate.ts

@@ -0,0 +1,357 @@
+/**
+ * Rotate Effect -- rotates the active layer by 90/180/270 degrees or free angle.
+ *
+ * Registers:
+ *   - Command: `rotate` (tier: 'frame')
+ *
+ * For cardinal rotations (90/180/270), pixels are swapped directly.
+ * For free angle rotation, uses nearest-neighbor sampling.
+ */
+
+import type { PluginModule } from '../../../src/lib/core/plugin-loader.js';
+import { PixelBuffer } from '../../../src/lib/canvas/pixel-buffer.js';
+import RotateCw from '~icons/lucide/rotate-cw';
+
+/**
+ * Snapshot captured by rotate execute() for undo: the original buffer
+ * dimensions, a copy of its pixel data, and the (frameIndex, layerId)
+ * pair the rotation was applied to. On undo we reconstruct a PixelBuffer
+ * from this snapshot and write it back to the ORIGINAL pair via
+ * setBufferForLayer so that switching the active layer/frame between
+ * execute and undo still restores the correct layer.
+ *
+ * frameIndex / layerId may be null/empty if the context doesn't implement
+ * getActiveFrameIndex/getActiveLayerId -- in that case undo falls back to
+ * setActiveBuffer (legacy contexts).
+ */
+interface BufferSnapshot {
+  width: number;
+  height: number;
+  data: Uint8ClampedArray;
+  frameIndex: number | null;
+  layerId: string | null;
+}
+
+/**
+ * Snapshot for rotate_canvas: captures the pre-rotation dimensions and a
+ * list of every (frameIndex, layerId) buffer the command touched. Undo
+ * iterates the list and writes each captured buffer back through
+ * setBufferForLayer, then restores canvas size to oldWidth/oldHeight.
+ */
+interface WholeCanvasRotateSnapshot {
+  oldWidth: number;
+  oldHeight: number;
+  entries: Array<{
+    frameIndex: number;
+    layerId: string;
+    width: number;
+    height: number;
+    data: Uint8ClampedArray;
+  }>;
+}
+
+/**
+ * Compute the rotated pixel data for a buffer.
+ *
+ * Returns a NEW PixelBuffer sized to match the rotation result:
+ *   - 0 / 180 degrees: same dimensions (w x h)
+ *   - 90 / 270 degrees: swapped dimensions (h x w)
+ *   - non-cardinal angles: same dimensions (w x h), nearest-neighbor sampled
+ *
+ * The returned buffer is independent of the input. Callers are responsible for
+ * writing it back into the canvas (and, for dim-swapping cases, updating
+ * canvas/layer state accordingly).
+ */
+export function computeRotation(
+  buffer: PixelBuffer,
+  angle: number,
+): PixelBuffer {
+  const w = buffer.width;
+  const h = buffer.height;
+
+  // Normalize angle to [0, 360)
+  const normalizedAngle = ((angle % 360) + 360) % 360;
+
+  if (normalizedAngle === 90) {
+    // 90 CW: output buffer is h wide x w tall.
+    // Source (sx, sy) -> destination (h-1-sy, sx).
+    // Inverse (used here): dest (dx, dy) <- source (dy, h-1-dx).
+    const out = new PixelBuffer(h, w);
+    for (let dy = 0; dy < w; dy++) {
+      for (let dx = 0; dx < h; dx++) {
+        const sx = dy;
+        const sy = h - 1 - dx;
+        const [r, g, b, a] = buffer.getPixel(sx, sy);
+        out.setPixel(dx, dy, r, g, b, a);
+      }
+    }
+    return out;
+  } else if (normalizedAngle === 180) {
+    // 180: dimensions unchanged. dest(dx, dy) <- source(w-1-dx, h-1-dy).
+    const out = new PixelBuffer(w, h);
+    for (let dy = 0; dy < h; dy++) {
+      for (let dx = 0; dx < w; dx++) {
+        const sx = w - 1 - dx;
+        const sy = h - 1 - dy;
+        const [r, g, b, a] = buffer.getPixel(sx, sy);
+        out.setPixel(dx, dy, r, g, b, a);
+      }
+    }
+    return out;
+  } else if (normalizedAngle === 270) {
+    // 270 CW (= 90 CCW): output buffer is h wide x w tall.
+    // Source (sx, sy) -> destination (sy, w-1-sx).
+    // Inverse (used here): dest (dx, dy) <- source (w-1-dy, dx).
+    const out = new PixelBuffer(h, w);
+    for (let dy = 0; dy < w; dy++) {
+      for (let dx = 0; dx < h; dx++) {
+        const sx = w - 1 - dy;
+        const sy = dx;
+        const [r, g, b, a] = buffer.getPixel(sx, sy);
+        out.setPixel(dx, dy, r, g, b, a);
+      }
+    }
+    return out;
+  } else if (normalizedAngle === 0) {
+    // No rotation: return a clone.
+    return buffer.clone();
+  } else {
+    // Free angle: nearest-neighbor sampling, same dimensions.
+    const out = new PixelBuffer(w, h);
+    const rad = (normalizedAngle * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const cx = (w - 1) / 2;
+    const cy = (h - 1) / 2;
+
+    for (let dy = 0; dy < h; dy++) {
+      for (let dx = 0; dx < w; dx++) {
+        // Rotate destination pixel back to find source
+        const rx = dx - cx;
+        const ry = dy - cy;
+        const sx = Math.round(rx * cos + ry * sin + cx);
+        const sy = Math.round(-rx * sin + ry * cos + cy);
+
+        const [r, g, b, a] = buffer.inBounds(sx, sy) ? buffer.getPixel(sx, sy) : [0, 0, 0, 0];
+        out.setPixel(dx, dy, r, g, b, a);
+      }
+    }
+    return out;
+  }
+}
+
+export const rotateEffectPlugin: PluginModule = {
+  name: 'builtin/effects/rotate',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addCommand('rotate', {
+      tier: 'frame',
+      label: 'Rotate',
+      category: 'Effects',
+      icon: RotateCw,
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        // Snapshot old dims + raw pixel data + the active (frameIndex, layerId)
+        // so undo can rebuild the original buffer and write it back to the
+        // ORIGINAL layer/frame -- not whatever happens to be active at undo
+        // time. Captured defensively: contexts that don't implement
+        // getActiveFrameIndex/getActiveLayerId fall through to the legacy
+        // setActiveBuffer path at undo time.
+        const snapshot: BufferSnapshot = {
+          width: buffer.width,
+          height: buffer.height,
+          data: new Uint8ClampedArray(buffer.data),
+          frameIndex: ctx.getActiveFrameIndex?.() ?? null,
+          layerId: ctx.getActiveLayerId?.() ?? null,
+        };
+
+        // computeRotation returns a NEW PixelBuffer sized to the result:
+        //   - 0/180/free: same dimensions
+        //   - 90/270: swapped dimensions (h x w)
+        // Push it through setActiveBuffer so the canvas and active layer
+        // adopt the new dimensions. If the context does not implement
+        // setActiveBuffer (legacy contexts), fall back to blitting the
+        // rotated pixels into the existing buffer (clipped to its bounds).
+        const rotated = computeRotation(buffer, params["angle"]);
+        if (ctx.setActiveBuffer) {
+          ctx.setActiveBuffer(rotated);
+        } else {
+          // Fallback: clear then overlay within the fixed buffer. This will
+          // visually clip for 90/270 on non-square canvases but keeps the
+          // command functional in contexts without buffer replacement.
+          for (let y = 0; y < buffer.height; y++) {
+            for (let x = 0; x < buffer.width; x++) {
+              buffer.setPixel(x, y, 0, 0, 0, 0);
+            }
+          }
+          for (let y = 0; y < rotated.height; y++) {
+            for (let x = 0; x < rotated.width; x++) {
+              const [r, g, b, a] = rotated.getPixel(x, y);
+              buffer.setPixel(x, y, r, g, b, a);
+            }
+          }
+        }
+        return snapshot;
+      },
+
+      undo(_params, ctx, snapshot) {
+        const snap = snapshot as BufferSnapshot | undefined;
+        if (!snap) return;
+        // Rebuild the original buffer from the snapshot and push it back.
+        // new Uint8ClampedArray(snap.data) decouples the restored buffer
+        // from the snapshot so redo can re-snapshot cleanly.
+        const restored = new PixelBuffer(
+          snap.width,
+          snap.height,
+          new Uint8ClampedArray(snap.data),
+        );
+        // Prefer writing back to the ORIGINAL (frame, layer) pair captured
+        // at execute time. Falls back to setActiveBuffer (current pair) if
+        // the context doesn't support per-layer writes or the snapshot
+        // predates this change.
+        if (
+          ctx.setBufferForLayer &&
+          snap.frameIndex !== null &&
+          snap.layerId !== null
+        ) {
+          ctx.setBufferForLayer(snap.frameIndex, snap.layerId, restored);
+        } else if (ctx.setActiveBuffer) {
+          ctx.setActiveBuffer(restored);
+        } else {
+          // Fallback: write snapshot pixels back into the current buffer.
+          const buffer = ctx.getActiveBuffer?.();
+          if (!buffer) return;
+          for (let y = 0; y < snap.height; y++) {
+            for (let x = 0; x < snap.width; x++) {
+              const i = (y * snap.width + x) * 4;
+              buffer.setPixel(
+                x,
+                y,
+                snap.data[i] ?? 0,
+                snap.data[i + 1] ?? 0,
+                snap.data[i + 2] ?? 0,
+                snap.data[i + 3] ?? 0,
+              );
+            }
+          }
+        }
+      },
+
+      describe(params) {
+        return `Rotated layer by ${String(params["angle"])} degrees`;
+      },
+    });
+
+    api.addMenuItem('menu:effects:rotate', {
+      commandId: 'rotate',
+      menuPath: 'effects',
+      group: 'transform',
+      order: 20,
+      label: 'Rotate',
+    });
+
+    // --- Whole-canvas rotation ---
+    //
+    // rotate_canvas rotates EVERY pixel layer across EVERY frame by the
+    // same angle so the entire project stays consistent. Canvas dimensions
+    // are updated exactly once at the end, not per-layer write (each
+    // setBufferForLayer call does update canvas size, but the final
+    // setCanvasSize wins after all writes).
+    api.addCommand('rotate_canvas', {
+      tier: 'project',
+      undoable: true,
+      label: 'Rotate Canvas',
+      category: 'Image',
+      icon: RotateCw,
+
+      execute(params, ctx): WholeCanvasRotateSnapshot | undefined {
+        const angle = params["angle"];
+        // Require the richer context APIs -- whole-canvas ops have no
+        // sensible fallback path in legacy contexts.
+        if (!ctx.getAllFrameLayerBuffers || !ctx.setBufferForLayer || !ctx.setCanvasSize) {
+          console.warn('rotate_canvas: context missing whole-canvas APIs');
+          return;
+        }
+        const pairs = ctx.getAllFrameLayerBuffers();
+        if (pairs.length === 0) return;
+
+        // Capture old canvas dims from the first buffer. All buffers
+        // should share the same dimensions (they always do in the current
+        // model -- canvas-wide resize is enforced via canvasState).
+        const firstPair = pairs[0];
+        if (!firstPair) return;
+        const first = firstPair.buffer;
+        const snapshot: WholeCanvasRotateSnapshot = {
+          oldWidth: first.width,
+          oldHeight: first.height,
+          entries: pairs.map((p) => ({
+            frameIndex: p.frameIndex,
+            layerId: p.layerId,
+            width: p.buffer.width,
+            height: p.buffer.height,
+            // Copy the data -- the original buffer object gets replaced
+            // below so we can't just hold a reference.
+            data: new Uint8ClampedArray(p.buffer.data),
+          })),
+        };
+
+        // Rotate each buffer and write it back through setBufferForLayer.
+        // computeRotation returns a new buffer; for 90/270 on non-square
+        // source the dims swap -- that's expected and applies uniformly
+        // to every layer, so the final canvas dims stay consistent.
+        let finalW = first.width;
+        let finalH = first.height;
+        for (const { frameIndex, layerId, buffer } of pairs) {
+          const rotated = computeRotation(buffer, angle);
+          ctx.setBufferForLayer(frameIndex, layerId, rotated);
+          finalW = rotated.width;
+          finalH = rotated.height;
+        }
+
+        // Explicit canvas resize once at the end -- setBufferForLayer
+        // already updates canvasState per write, but an explicit call
+        // here makes the "one authoritative final size" semantics clear.
+        ctx.setCanvasSize(finalW, finalH);
+
+        return snapshot;
+      },
+
+      undo(_params, ctx, snapshot) {
+        const snap = snapshot as WholeCanvasRotateSnapshot | undefined;
+        if (!snap) return;
+        if (!ctx.setBufferForLayer || !ctx.setCanvasSize) return;
+
+        // Restore every captured buffer, then restore canvas dims.
+        // Order matters: the last setBufferForLayer call resizes canvas
+        // to the restored buffer's dims (which equals snap.oldWidth/Height
+        // because all entries share the same pre-rotation dims), and the
+        // final setCanvasSize is a no-op-or-correction guard.
+        for (const entry of snap.entries) {
+          const restored = new PixelBuffer(
+            entry.width,
+            entry.height,
+            new Uint8ClampedArray(entry.data),
+          );
+          ctx.setBufferForLayer(entry.frameIndex, entry.layerId, restored);
+        }
+        ctx.setCanvasSize(snap.oldWidth, snap.oldHeight);
+      },
+
+      describe(params) {
+        return `Rotated canvas by ${String(params["angle"])} degrees`;
+      },
+    });
+
+    api.addMenuItem('menu:image:rotate-canvas', {
+      commandId: 'rotate_canvas',
+      menuPath: 'image',
+      group: 'transform',
+      order: 40,
+      label: 'Rotate Canvas',
+    });
+  },
+};

package/plugins/builtin/effects/scale.ts

@@ -0,0 +1,258 @@
+/**
+ * Scale Effect -- resizes the active layer with nearest-neighbor interpolation.
+ *
+ * Registers:
+ *   - Command: `scale` (tier: 'frame')
+ *
+ * computeScale() returns a NEW PixelBuffer sized to (newWidth, newHeight).
+ * execute() pushes it through ctx.setActiveBuffer so the canvas adopts the
+ * new dimensions. Undo rebuilds the original buffer from a dim+data snapshot.
+ */
+
+import type { PluginModule } from '../../../src/lib/core/plugin-loader.js';
+import { PixelBuffer } from '../../../src/lib/canvas/pixel-buffer.js';
+import Scaling from '~icons/lucide/scaling';
+
+/**
+ * Snapshot captured for undo: original dimensions, a copy of the pixel data,
+ * and the (frameIndex, layerId) pair the scale was applied to. Mirrors the
+ * BufferSnapshot type in rotate.ts -- kept private per module to avoid a
+ * cross-effect dependency. See rotate.ts for the full rationale behind
+ * capturing frameIndex/layerId for undo.
+ */
+interface BufferSnapshot {
+  width: number;
+  height: number;
+  data: Uint8ClampedArray;
+  frameIndex: number | null;
+  layerId: string | null;
+}
+
+/**
+ * Snapshot for scale_canvas: captures the pre-scale dimensions and a list
+ * of every (frameIndex, layerId) buffer the command touched. Undo iterates
+ * the list and writes each captured buffer back through setBufferForLayer,
+ * then restores canvas size. Mirrors WholeCanvasRotateSnapshot in rotate.ts.
+ */
+interface WholeCanvasScaleSnapshot {
+  oldWidth: number;
+  oldHeight: number;
+  entries: Array<{
+    frameIndex: number;
+    layerId: string;
+    width: number;
+    height: number;
+    data: Uint8ClampedArray;
+  }>;
+}
+
+/**
+ * Compute scaled pixels using nearest-neighbor sampling.
+ *
+ * Returns a NEW PixelBuffer sized (newWidth x newHeight). Each destination
+ * pixel is mapped back to the nearest source pixel. The returned buffer is
+ * independent of the input; callers are responsible for swapping it into
+ * the active state (setActiveBuffer) and updating canvas dimensions.
+ */
+export function computeScale(
+  buffer: PixelBuffer,
+  newWidth: number,
+  newHeight: number,
+): PixelBuffer {
+  const srcW = buffer.width;
+  const srcH = buffer.height;
+  const out = new PixelBuffer(newWidth, newHeight);
+
+  for (let dy = 0; dy < newHeight; dy++) {
+    for (let dx = 0; dx < newWidth; dx++) {
+      // Nearest-neighbor: map destination to source.
+      const sx = Math.floor((dx * srcW) / newWidth);
+      const sy = Math.floor((dy * srcH) / newHeight);
+      const [r, g, b, a] = buffer.getPixel(sx, sy);
+      out.setPixel(dx, dy, r, g, b, a);
+    }
+  }
+
+  return out;
+}
+
+export const scaleEffectPlugin: PluginModule = {
+  name: 'builtin/effects/scale',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addCommand('scale', {
+      tier: 'frame',
+      label: 'Scale',
+      category: 'Effects',
+      icon: Scaling,
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        // Snapshot old dims + raw pixel data + active (frameIndex, layerId).
+        // See rotate.ts for why the pair is captured: undo must write back
+        // to the ORIGINAL layer/frame regardless of what's active at undo
+        // time.
+        const snapshot: BufferSnapshot = {
+          width: buffer.width,
+          height: buffer.height,
+          data: new Uint8ClampedArray(buffer.data),
+          frameIndex: ctx.getActiveFrameIndex?.() ?? null,
+          layerId: ctx.getActiveLayerId?.() ?? null,
+        };
+
+        const scaled = computeScale(
+          buffer,
+          params["newWidth"],
+          params["newHeight"],
+        );
+
+        if (ctx.setActiveBuffer) {
+          ctx.setActiveBuffer(scaled);
+        } else {
+          // Fallback for contexts without buffer replacement: blit the
+          // scaled pixels into the existing buffer, clipped to its bounds.
+          // Out-of-range pixels (beyond the old buffer dims) are lost and
+          // unused cells in the old buffer are cleared to transparent.
+          for (let y = 0; y < buffer.height; y++) {
+            for (let x = 0; x < buffer.width; x++) {
+              if (x < scaled.width && y < scaled.height) {
+                const [r, g, b, a] = scaled.getPixel(x, y);
+                buffer.setPixel(x, y, r, g, b, a);
+              } else {
+                buffer.setPixel(x, y, 0, 0, 0, 0);
+              }
+            }
+          }
+        }
+        return snapshot;
+      },
+
+      undo(_params, ctx, snapshot) {
+        const snap = snapshot as BufferSnapshot | undefined;
+        if (!snap) return;
+        const restored = new PixelBuffer(
+          snap.width,
+          snap.height,
+          new Uint8ClampedArray(snap.data),
+        );
+        // Prefer writing back to the ORIGINAL (frame, layer) pair captured
+        // at execute time; fall back to setActiveBuffer for legacy contexts.
+        if (
+          ctx.setBufferForLayer &&
+          snap.frameIndex !== null &&
+          snap.layerId !== null
+        ) {
+          ctx.setBufferForLayer(snap.frameIndex, snap.layerId, restored);
+        } else if (ctx.setActiveBuffer) {
+          ctx.setActiveBuffer(restored);
+        } else {
+          const buffer = ctx.getActiveBuffer?.();
+          if (!buffer) return;
+          for (let y = 0; y < snap.height; y++) {
+            for (let x = 0; x < snap.width; x++) {
+              const i = (y * snap.width + x) * 4;
+              buffer.setPixel(
+                x,
+                y,
+                snap.data[i] ?? 0,
+                snap.data[i + 1] ?? 0,
+                snap.data[i + 2] ?? 0,
+                snap.data[i + 3] ?? 0,
+              );
+            }
+          }
+        }
+      },
+
+      describe(params) {
+        return `Scaled layer to ${String(params["newWidth"])}x${String(params["newHeight"])}`;
+      },
+    });
+
+    api.addMenuItem('menu:effects:scale', {
+      commandId: 'scale',
+      menuPath: 'effects',
+      group: 'transform',
+      order: 30,
+      label: 'Scale',
+    });
+
+    // --- Whole-canvas scale ---
+    //
+    // scale_canvas resizes EVERY pixel layer across EVERY frame to the
+    // same new dimensions. Canvas size is updated exactly once at the
+    // end. See rotate.ts's rotate_canvas for the shared design rationale.
+    api.addCommand('scale_canvas', {
+      tier: 'project',
+      undoable: true,
+      label: 'Scale Canvas',
+      category: 'Image',
+      icon: Scaling,
+
+      execute(params, ctx): WholeCanvasScaleSnapshot | undefined {
+        const newWidth = params["newWidth"];
+        const newHeight = params["newHeight"];
+        if (!ctx.getAllFrameLayerBuffers || !ctx.setBufferForLayer || !ctx.setCanvasSize) {
+          console.warn('scale_canvas: context missing whole-canvas APIs');
+          return;
+        }
+        const pairs = ctx.getAllFrameLayerBuffers();
+        if (pairs.length === 0) return;
+
+        const firstPair = pairs[0];
+        if (!firstPair) return;
+        const first = firstPair.buffer;
+        const snapshot: WholeCanvasScaleSnapshot = {
+          oldWidth: first.width,
+          oldHeight: first.height,
+          entries: pairs.map((p) => ({
+            frameIndex: p.frameIndex,
+            layerId: p.layerId,
+            width: p.buffer.width,
+            height: p.buffer.height,
+            data: new Uint8ClampedArray(p.buffer.data),
+          })),
+        };
+
+        for (const { frameIndex, layerId, buffer } of pairs) {
+          const scaled = computeScale(buffer, newWidth, newHeight);
+          ctx.setBufferForLayer(frameIndex, layerId, scaled);
+        }
+
+        ctx.setCanvasSize(newWidth, newHeight);
+        return snapshot;
+      },
+
+      undo(_params, ctx, snapshot) {
+        const snap = snapshot as WholeCanvasScaleSnapshot | undefined;
+        if (!snap) return;
+        if (!ctx.setBufferForLayer || !ctx.setCanvasSize) return;
+
+        for (const entry of snap.entries) {
+          const restored = new PixelBuffer(
+            entry.width,
+            entry.height,
+            new Uint8ClampedArray(entry.data),
+          );
+          ctx.setBufferForLayer(entry.frameIndex, entry.layerId, restored);
+        }
+        ctx.setCanvasSize(snap.oldWidth, snap.oldHeight);
+      },
+
+      describe(params) {
+        return `Scaled canvas to ${String(params["newWidth"])}x${String(params["newHeight"])}`;
+      },
+    });
+
+    api.addMenuItem('menu:image:scale-canvas', {
+      commandId: 'scale_canvas',
+      menuPath: 'image',
+      group: 'transform',
+      order: 50,
+      label: 'Scale Canvas',
+    });
+  },
+};