pixelweaver 0.1.0

package/plugins/builtin/effects/color-effects.ts

@@ -0,0 +1,278 @@
+/**
+ * Color Effects -- per-pixel color manipulation commands.
+ *
+ * Registers:
+ *   - Command: `invert` (tier: 'frame') -- inverts RGB channels
+ *   - Command: `grayscale` (tier: 'frame') -- converts to luminance-based gray
+ *   - Command: `colorize` (tier: 'frame') -- tints all non-transparent pixels
+ *   - Command: `brightness_contrast` (tier: 'frame') -- adjusts brightness/contrast
+ *   - Command: `hue_shift` (tier: 'frame') -- shifts hue by degrees
+ *
+ * All effects operate on every pixel in the active buffer.
+ */
+
+import type { PluginModule } from '../../../src/lib/core/plugin-loader.js';
+import type { PixelBuffer } from '../../../src/lib/canvas/pixel-buffer.js';
+import type { PixelData, Point } from '../drawing-utils.js';
+import { snapshotPixels, applyPixels, hexToRgba, makeSnapshotUndo } from '../drawing-utils.js';
+import { rgbToHsv, hsvToRgb } from '../../../src/lib/color/color-utils.js';
+import Contrast from '~icons/lucide/contrast';
+import Eclipse from '~icons/lucide/eclipse';
+import Paintbrush from '~icons/lucide/paintbrush';
+import SunMoon from '~icons/lucide/sun-moon';
+import Rainbow from '~icons/lucide/rainbow';
+
+// --- Helpers ---
+
+/** Snapshot the entire buffer and return it. */
+function snapshotAll(buffer: PixelBuffer): PixelData[] {
+  const allPoints: Point[] = [];
+  for (let y = 0; y < buffer.height; y++) {
+    for (let x = 0; x < buffer.width; x++) {
+      allPoints.push({ x, y });
+    }
+  }
+  return snapshotPixels(buffer, allPoints);
+}
+
+/** Clamp a value to 0-255. */
+function clamp255(v: number): number {
+  return Math.max(0, Math.min(255, Math.round(v)));
+}
+
+// --- Pixel transform functions (exported for testability) ---
+
+/** Invert RGB channels, preserve alpha. */
+export function invertPixels(buffer: PixelBuffer): PixelData[] {
+  const pixels: PixelData[] = [];
+  for (let y = 0; y < buffer.height; y++) {
+    for (let x = 0; x < buffer.width; x++) {
+      const [r, g, b, a] = buffer.getPixel(x, y);
+      pixels.push({ x, y, r: 255 - r, g: 255 - g, b: 255 - b, a });
+    }
+  }
+  return pixels;
+}
+
+/** Convert to luminance-based grayscale (ITU-R BT.601), preserve alpha. */
+export function grayscalePixels(buffer: PixelBuffer): PixelData[] {
+  const pixels: PixelData[] = [];
+  for (let y = 0; y < buffer.height; y++) {
+    for (let x = 0; x < buffer.width; x++) {
+      const [r, g, b, a] = buffer.getPixel(x, y);
+      const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
+      pixels.push({ x, y, r: gray, g: gray, b: gray, a });
+    }
+  }
+  return pixels;
+}
+
+/** Tint non-transparent pixels with a color, blending via luminance. */
+export function colorizePixels(buffer: PixelBuffer, color: string): PixelData[] {
+  const tint = hexToRgba(color);
+  const pixels: PixelData[] = [];
+  for (let y = 0; y < buffer.height; y++) {
+    for (let x = 0; x < buffer.width; x++) {
+      const [r, g, b, a] = buffer.getPixel(x, y);
+      if (a === 0) {
+        pixels.push({ x, y, r, g, b, a });
+        continue;
+      }
+      // Blend: use original luminance with tint hue/saturation
+      const lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+      pixels.push({
+        x, y,
+        r: clamp255(tint.r * lum),
+        g: clamp255(tint.g * lum),
+        b: clamp255(tint.b * lum),
+        a,
+      });
+    }
+  }
+  return pixels;
+}
+
+/** Adjust brightness (-255 to 255) and contrast (-100 to 100). */
+export function brightnessContrastPixels(
+  buffer: PixelBuffer,
+  brightness: number,
+  contrast: number,
+): PixelData[] {
+  // Contrast factor: maps [-100, 100] to a multiplier
+  const factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
+  const pixels: PixelData[] = [];
+
+  for (let y = 0; y < buffer.height; y++) {
+    for (let x = 0; x < buffer.width; x++) {
+      const [r, g, b, a] = buffer.getPixel(x, y);
+      pixels.push({
+        x, y,
+        r: clamp255(factor * (r + brightness - 128) + 128),
+        g: clamp255(factor * (g + brightness - 128) + 128),
+        b: clamp255(factor * (b + brightness - 128) + 128),
+        a,
+      });
+    }
+  }
+  return pixels;
+}
+
+/** Shift hue by a number of degrees (0-360). Preserve saturation, value, and alpha. */
+export function hueShiftPixels(buffer: PixelBuffer, degrees: number): PixelData[] {
+  const pixels: PixelData[] = [];
+  for (let y = 0; y < buffer.height; y++) {
+    for (let x = 0; x < buffer.width; x++) {
+      const [r, g, b, a] = buffer.getPixel(x, y);
+      if (a === 0) {
+        pixels.push({ x, y, r, g, b, a });
+        continue;
+      }
+      const hsv = rgbToHsv(r, g, b);
+      const newH = ((hsv.h + degrees) % 360 + 360) % 360;
+      const rgb = hsvToRgb(newH, hsv.s, hsv.v);
+      pixels.push({ x, y, r: rgb.r, g: rgb.g, b: rgb.b, a });
+    }
+  }
+  return pixels;
+}
+
+// --- Plugin ---
+
+export const colorEffectsPlugin: PluginModule = {
+  name: 'builtin/effects/color-effects',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    // -- Invert --
+    api.addCommand('invert', {
+      tier: 'frame',
+      label: 'Invert',
+      category: 'Effects',
+      icon: Contrast,
+      execute(_params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+        const snapshot = snapshotAll(buffer);
+        applyPixels(buffer, invertPixels(buffer));
+        return snapshot;
+      },
+      undo: makeSnapshotUndo(),
+      describe() { return 'Inverted colors'; },
+    });
+
+    // -- Grayscale --
+    api.addCommand('grayscale', {
+      tier: 'frame',
+      label: 'Grayscale',
+      category: 'Effects',
+      icon: Eclipse,
+      execute(_params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+        const snapshot = snapshotAll(buffer);
+        applyPixels(buffer, grayscalePixels(buffer));
+        return snapshot;
+      },
+      undo: makeSnapshotUndo(),
+      describe() { return 'Converted to grayscale'; },
+    });
+
+    // -- Colorize --
+    api.addCommand('colorize', {
+      tier: 'frame',
+      label: 'Colorize',
+      category: 'Effects',
+      icon: Paintbrush,
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+        const snapshot = snapshotAll(buffer);
+        applyPixels(buffer, colorizePixels(buffer, params["color"]));
+        return snapshot;
+      },
+      undo: makeSnapshotUndo(),
+      describe(params) { return `Colorized with ${String(params["color"])}`; },
+    });
+
+    // -- Brightness/Contrast --
+    api.addCommand('brightness_contrast', {
+      tier: 'frame',
+      label: 'Brightness/Contrast',
+      category: 'Effects',
+      icon: SunMoon,
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+        const snapshot = snapshotAll(buffer);
+        applyPixels(buffer, brightnessContrastPixels(
+          buffer,
+          params["brightness"],
+          params["contrast"],
+        ));
+        return snapshot;
+      },
+      undo: makeSnapshotUndo(),
+      describe(params) {
+        return `Adjusted brightness=${String(params["brightness"])} contrast=${String(params["contrast"])}`;
+      },
+    });
+
+    // -- Hue Shift --
+    api.addCommand('hue_shift', {
+      tier: 'frame',
+      label: 'Hue Shift',
+      category: 'Effects',
+      icon: Rainbow,
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+        const snapshot = snapshotAll(buffer);
+        applyPixels(buffer, hueShiftPixels(buffer, params["degrees"]));
+        return snapshot;
+      },
+      undo: makeSnapshotUndo(),
+      describe(params) { return `Shifted hue by ${String(params["degrees"])} degrees`; },
+    });
+
+    // -- Menu items for all color effects --
+    api.addMenuItem('menu:effects:invert', {
+      commandId: 'invert',
+      menuPath: 'effects',
+      group: 'adjustments',
+      order: 10,
+      label: 'Invert',
+    });
+
+    api.addMenuItem('menu:effects:grayscale', {
+      commandId: 'grayscale',
+      menuPath: 'effects',
+      group: 'adjustments',
+      order: 20,
+      label: 'Grayscale',
+    });
+
+    api.addMenuItem('menu:effects:colorize', {
+      commandId: 'colorize',
+      menuPath: 'effects',
+      group: 'adjustments',
+      order: 30,
+      label: 'Colorize',
+    });
+
+    api.addMenuItem('menu:effects:brightness-contrast', {
+      commandId: 'brightness_contrast',
+      menuPath: 'effects',
+      group: 'adjustments',
+      order: 40,
+      label: 'Brightness/Contrast',
+    });
+
+    api.addMenuItem('menu:effects:hue-shift', {
+      commandId: 'hue_shift',
+      menuPath: 'effects',
+      group: 'adjustments',
+      order: 50,
+      label: 'Hue Shift',
+    });
+  },
+};

package/plugins/builtin/effects/flip.ts

@@ -0,0 +1,83 @@
+/**
+ * Flip Effect -- flips the active layer horizontally or vertically.
+ *
+ * Registers:
+ *   - Command: `flip` (tier: 'frame')
+ */
+
+import type { PluginModule } from '../../../src/lib/core/plugin-loader.js';
+import type { PixelBuffer } from '../../../src/lib/canvas/pixel-buffer.js';
+import type { PixelData, Point } from '../drawing-utils.js';
+import { snapshotPixels, applyPixels, makeSnapshotUndo } from '../drawing-utils.js';
+import FlipHorizontal2 from '~icons/lucide/flip-horizontal-2';
+
+/**
+ * Compute flipped pixel data for a buffer.
+ *
+ * @param direction 'h' for horizontal (left-right), 'v' for vertical (top-bottom)
+ */
+export function computeFlip(
+  buffer: PixelBuffer,
+  direction: 'h' | 'v',
+): PixelData[] {
+  const w = buffer.width;
+  const h = buffer.height;
+  const pixels: PixelData[] = [];
+
+  for (let dy = 0; dy < h; dy++) {
+    for (let dx = 0; dx < w; dx++) {
+      const sx = direction === 'h' ? (w - 1 - dx) : dx;
+      const sy = direction === 'v' ? (h - 1 - dy) : dy;
+      const [r, g, b, a] = buffer.getPixel(sx, sy);
+      pixels.push({ x: dx, y: dy, r, g, b, a });
+    }
+  }
+
+  return pixels;
+}
+
+export const flipEffectPlugin: PluginModule = {
+  name: 'builtin/effects/flip',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addCommand('flip', {
+      tier: 'frame',
+      label: 'Flip',
+      category: 'Effects',
+      icon: FlipHorizontal2,
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        const allPoints: Point[] = [];
+        for (let y = 0; y < buffer.height; y++) {
+          for (let x = 0; x < buffer.width; x++) {
+            allPoints.push({ x, y });
+          }
+        }
+        const snapshot = snapshotPixels(buffer, allPoints);
+
+        const pixels = computeFlip(buffer, params["direction"]);
+        applyPixels(buffer, pixels);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe(params) {
+        const dir = params["direction"] === 'h' ? 'horizontally' : 'vertically';
+        return `Flipped layer ${dir}`;
+      },
+    });
+
+    api.addMenuItem('menu:effects:flip', {
+      commandId: 'flip',
+      menuPath: 'effects',
+      group: 'transform',
+      order: 10,
+      label: 'Flip',
+    });
+  },
+};

package/plugins/builtin/effects/glow.ts

@@ -0,0 +1,118 @@
+/**
+ * Glow Effect -- adds a soft glow around non-transparent pixels.
+ *
+ * Registers:
+ *   - Command: `glow` (tier: 'frame')
+ *
+ * Expands non-transparent pixels by `radius`, blurs the expansion,
+ * and blends it with the given color at reduced opacity.
+ * The glow only fills currently transparent pixels.
+ */
+
+import type { PluginModule } from '../../../src/lib/core/plugin-loader.js';
+import type { PixelBuffer } from '../../../src/lib/canvas/pixel-buffer.js';
+import type { PixelData } from '../drawing-utils.js';
+import { snapshotPixels, applyPixels, hexToRgba, makeSnapshotUndo } from '../drawing-utils.js';
+import Sun from '~icons/lucide/sun';
+
+/**
+ * Compute glow pixels for a buffer.
+ * For each transparent pixel within `radius` Chebyshev distance of a non-transparent pixel,
+ * set it to the glow color with opacity that fades with distance.
+ */
+export function computeGlow(
+  buffer: PixelBuffer,
+  radius: number,
+  color: string,
+  opacity: number,
+): PixelData[] {
+  const w = buffer.width;
+  const h = buffer.height;
+  const c = hexToRgba(color);
+  const pixels: PixelData[] = [];
+
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      const [, , , a] = buffer.getPixel(x, y);
+      // Only add glow to transparent pixels
+      if (a > 0) continue;
+
+      // Find the nearest non-transparent pixel within radius (Chebyshev distance)
+      let minDist = Infinity;
+      for (let dy = -radius; dy <= radius; dy++) {
+        for (let dx = -radius; dx <= radius; dx++) {
+          if (dx === 0 && dy === 0) continue;
+          const nx = x + dx;
+          const ny = y + dy;
+          if (!buffer.inBounds(nx, ny)) continue;
+
+          const [, , , na] = buffer.getPixel(nx, ny);
+          if (na > 0) {
+            // Use Euclidean distance for smoother falloff
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            if (dist < minDist) minDist = dist;
+          }
+        }
+      }
+
+      if (minDist <= radius) {
+        // Fade opacity linearly with distance
+        const falloff = 1 - (minDist / (radius + 1));
+        const glowAlpha = Math.round(opacity * 255 * falloff);
+        if (glowAlpha > 0) {
+          pixels.push({ x, y, r: c.r, g: c.g, b: c.b, a: glowAlpha });
+        }
+      }
+    }
+  }
+
+  return pixels;
+}
+
+export const glowEffectPlugin: PluginModule = {
+  name: 'builtin/effects/glow',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addCommand('glow', {
+      tier: 'frame',
+      label: 'Glow',
+      category: 'Effects',
+      icon: Sun,
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        const glowPixels = computeGlow(
+          buffer,
+          params["radius"],
+          params["color"],
+          params["opacity"],
+        );
+
+        const snapshot = snapshotPixels(
+          buffer,
+          glowPixels.map((p) => ({ x: p.x, y: p.y })),
+        );
+
+        applyPixels(buffer, glowPixels);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe(params) {
+        return `Added glow radius=${String(params["radius"])} ${String(params["color"])} at ${String(params["opacity"])} opacity`;
+      },
+    });
+
+    api.addMenuItem('menu:effects:glow', {
+      commandId: 'glow',
+      menuPath: 'effects',
+      group: 'stylize',
+      order: 10,
+      label: 'Glow',
+    });
+  },
+};

package/plugins/builtin/effects/outline.ts

@@ -0,0 +1,110 @@
+/**
+ * Outline Effect -- adds an N-pixel outline around non-transparent pixels.
+ *
+ * Registers:
+ *   - Command: `outline` (tier: 'frame')
+ *
+ * For each transparent pixel that has a non-transparent neighbor within
+ * `thickness` distance, it is filled with the outline color.
+ */
+
+import type { PluginModule } from '../../../src/lib/core/plugin-loader.js';
+import type { PixelBuffer } from '../../../src/lib/canvas/pixel-buffer.js';
+import type { PixelData } from '../drawing-utils.js';
+import { snapshotPixels, applyPixels, hexToRgba, makeSnapshotUndo } from '../drawing-utils.js';
+import Frame from '~icons/lucide/frame';
+
+/**
+ * Compute outline pixels for a buffer.
+ * Finds all transparent pixels within `thickness` Chebyshev distance
+ * of any non-transparent pixel, and sets them to the outline color.
+ */
+export function computeOutline(
+  buffer: PixelBuffer,
+  thickness: number,
+  color: string,
+): PixelData[] {
+  const w = buffer.width;
+  const h = buffer.height;
+  const c = hexToRgba(color);
+  const pixels: PixelData[] = [];
+
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      const [, , , a] = buffer.getPixel(x, y);
+      // Only add outline to currently transparent pixels
+      if (a > 0) continue;
+
+      // Check if any non-transparent pixel is within thickness distance
+      let shouldOutline = false;
+      outer:
+      for (let dy = -thickness; dy <= thickness; dy++) {
+        for (let dx = -thickness; dx <= thickness; dx++) {
+          if (dx === 0 && dy === 0) continue;
+          const nx = x + dx;
+          const ny = y + dy;
+          if (!buffer.inBounds(nx, ny)) continue;
+
+          const [, , , na] = buffer.getPixel(nx, ny);
+          if (na > 0) {
+            shouldOutline = true;
+            break outer;
+          }
+        }
+      }
+
+      if (shouldOutline) {
+        pixels.push({ x, y, r: c.r, g: c.g, b: c.b, a: c.a });
+      }
+    }
+  }
+
+  return pixels;
+}
+
+export const outlineEffectPlugin: PluginModule = {
+  name: 'builtin/effects/outline',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addCommand('outline', {
+      tier: 'frame',
+      label: 'Outline',
+      category: 'Effects',
+      icon: Frame,
+
+      execute(params, ctx) {
+        const buffer = ctx.getActiveBuffer?.();
+        if (!buffer) return;
+
+        const outlinePixels = computeOutline(
+          buffer,
+          params["thickness"],
+          params["color"],
+        );
+
+        const snapshot = snapshotPixels(
+          buffer,
+          outlinePixels.map((p) => ({ x: p.x, y: p.y })),
+        );
+
+        applyPixels(buffer, outlinePixels);
+        return snapshot;
+      },
+
+      undo: makeSnapshotUndo(),
+
+      describe(params) {
+        return `Added ${String(params["thickness"])}px outline in ${String(params["color"])}`;
+      },
+    });
+
+    api.addMenuItem('menu:effects:outline', {
+      commandId: 'outline',
+      menuPath: 'effects',
+      group: 'stylize',
+      order: 30,
+      label: 'Outline',
+    });
+  },
+};