pixelweaver 0.1.0

package/src/lib/variants/palette-swap.test.ts

@@ -0,0 +1,101 @@
+import { describe, it, expect } from 'vitest';
+import { PixelBuffer } from '../canvas/pixel-buffer.js';
+import { applyPaletteSwap, applyGroupPaletteSwap } from './palette-swap.js';
+import type { Layer } from '../layers/layer-types.js';
+import type { Frame } from '../animation/frame-model.svelte.js';
+
+describe('applyPaletteSwap', () => {
+  it('should swap a single color', () => {
+    const buf = new PixelBuffer(2, 1);
+    buf.setPixel(0, 0, 255, 0, 0, 255); // red
+    buf.setPixel(1, 0, 0, 255, 0, 255); // green
+
+    const colorMap = new Map([['#FF0000', '#0000FF']]); // red -> blue
+    const result = applyPaletteSwap(buf, colorMap);
+
+    expect(result.getPixel(0, 0)).toEqual([0, 0, 255, 255]); // now blue
+    expect(result.getPixel(1, 0)).toEqual([0, 255, 0, 255]); // unchanged
+  });
+
+  it('should swap multiple colors simultaneously', () => {
+    const buf = new PixelBuffer(2, 1);
+    buf.setPixel(0, 0, 255, 0, 0, 255);
+    buf.setPixel(1, 0, 0, 255, 0, 255);
+
+    const colorMap = new Map([
+      ['#FF0000', '#00FF00'], // red -> green
+      ['#00FF00', '#FF0000'], // green -> red
+    ]);
+    const result = applyPaletteSwap(buf, colorMap);
+
+    expect(result.getPixel(0, 0)).toEqual([0, 255, 0, 255]); // was red, now green
+    expect(result.getPixel(1, 0)).toEqual([255, 0, 0, 255]); // was green, now red
+  });
+
+  it('should leave unmatched colors unchanged', () => {
+    const buf = new PixelBuffer(1, 1);
+    buf.setPixel(0, 0, 128, 64, 32, 255);
+
+    const colorMap = new Map([['#FF0000', '#0000FF']]);
+    const result = applyPaletteSwap(buf, colorMap);
+
+    expect(result.getPixel(0, 0)).toEqual([128, 64, 32, 255]);
+  });
+
+  it('should preserve alpha during swap', () => {
+    const buf = new PixelBuffer(1, 1);
+    buf.setPixel(0, 0, 255, 0, 0, 128); // semi-transparent red
+
+    const colorMap = new Map([['#FF0000', '#0000FF']]);
+    const result = applyPaletteSwap(buf, colorMap);
+
+    expect(result.getPixel(0, 0)).toEqual([0, 0, 255, 128]); // blue with same alpha
+  });
+
+  it('should not modify the original buffer', () => {
+    const buf = new PixelBuffer(1, 1);
+    buf.setPixel(0, 0, 255, 0, 0, 255);
+
+    const colorMap = new Map([['#FF0000', '#0000FF']]);
+    applyPaletteSwap(buf, colorMap);
+
+    // Original remains red
+    expect(buf.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+  });
+
+  it('should handle empty color map (returns clone)', () => {
+    const buf = new PixelBuffer(1, 1);
+    buf.setPixel(0, 0, 255, 0, 0, 255);
+
+    const result = applyPaletteSwap(buf, new Map());
+    expect(result.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+    // Should be a separate buffer
+    result.setPixel(0, 0, 0, 0, 0, 0);
+    expect(buf.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+  });
+});
+
+describe('applyGroupPaletteSwap', () => {
+  it('should swap colors across all layers in a group for all frames', () => {
+    const layer: Layer = { id: 'l1', name: 'L1', type: 'pixel', visible: true, opacity: 100, blendMode: 'normal', locked: false };
+    const group: Layer = {
+      id: 'g1', name: 'Group', type: 'group', visible: true, opacity: 100, blendMode: 'normal', locked: false,
+      children: [layer], expanded: true,
+    };
+
+    const buf = new PixelBuffer(1, 1);
+    buf.setPixel(0, 0, 255, 0, 0, 255);
+    const frame: Frame = { id: 'f1', index: 0, durationMs: null, pixelData: new Map([['l1', buf]]) };
+
+    const colorMap = new Map([['#FF0000', '#0000FF']]);
+    const result = applyGroupPaletteSwap('g1', colorMap, [group], [frame]);
+
+    expect(result.size).toBe(1);
+    const frameResult = result.get('f1');
+    expect(frameResult).toBeDefined();
+    expect(frameResult?.get('l1')?.getPixel(0, 0)).toEqual([0, 0, 255, 255]);
+
+    // Original is unchanged
+    expect(buf.getPixel(0, 0)).toEqual([255, 0, 0, 255]);
+  });
+});

package/src/lib/variants/palette-swap.ts

@@ -0,0 +1,114 @@
+/**
+ * Palette Swap Engine -- applies color replacement maps to PixelBuffers.
+ *
+ * Color matching is exact hex match (not fuzzy). For each pixel, if its
+ * RGB value matches a key in the color map, the pixel is replaced with
+ * the mapped value. Alpha is preserved.
+ */
+
+import { PixelBuffer } from '../canvas/pixel-buffer.js';
+import { hexToRgb } from '../color/color-utils.js';
+import type { Layer } from '../layers/layer-types.js';
+import type { Frame } from '../animation/frame-model.svelte.js';
+
+/**
+ * Pre-compute a lookup from RGB key string ("R,G,B") to replacement [r,g,b]
+ * for fast per-pixel matching without repeated hex conversions.
+ */
+function buildRgbLookup(
+  colorMap: Map<string, string>,
+): Map<string, [number, number, number]> {
+  const lookup = new Map<string, [number, number, number]>();
+  for (const [origHex, newHex] of colorMap) {
+    const orig = hexToRgb(origHex);
+    const repl = hexToRgb(newHex);
+    lookup.set(`${String(orig.r)},${String(orig.g)},${String(orig.b)}`, [repl.r, repl.g, repl.b]);
+  }
+  return lookup;
+}
+
+/**
+ * Apply a palette swap to a PixelBuffer.
+ * For each pixel, if its color matches a key in the colorMap, replace with the value.
+ * Alpha is preserved. Returns a new buffer (does not modify the input).
+ */
+export function applyPaletteSwap(
+  buffer: PixelBuffer,
+  colorMap: Map<string, string>,
+): PixelBuffer {
+  if (colorMap.size === 0) return buffer.clone();
+
+  const result = buffer.clone();
+  const lookup = buildRgbLookup(colorMap);
+  const { data } = result;
+
+  for (let i = 0; i < data.length; i += 4) {
+    if (data[i + 3] === 0) continue; // skip transparent
+    const key = `${String(data[i] ?? 0)},${String(data[i + 1] ?? 0)},${String(data[i + 2] ?? 0)}`;
+    const replacement = lookup.get(key);
+    if (replacement) {
+      data[i] = replacement[0];
+      data[i + 1] = replacement[1];
+      data[i + 2] = replacement[2];
+      // alpha preserved
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Recursively collect IDs of all pixel layers within a group.
+ */
+function collectPixelLayerIds(layer: Layer): string[] {
+  if (layer.type === 'pixel') return [layer.id];
+  if (layer.children) {
+    return layer.children.flatMap(collectPixelLayerIds);
+  }
+  return [];
+}
+
+/**
+ * Find a layer by ID in the tree (depth-first search).
+ */
+function findLayer(id: string, tree: Layer[]): Layer | undefined {
+  for (const layer of tree) {
+    if (layer.id === id) return layer;
+    if (layer.type === 'group' && layer.children) {
+      const found = findLayer(id, layer.children);
+      if (found) return found;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Apply palette swap to all pixel layers in a group across all frames.
+ * Returns the swapped pixel data without modifying originals.
+ *
+ * @returns Map of frameId -> (layerId -> swapped PixelBuffer)
+ */
+export function applyGroupPaletteSwap(
+  groupId: string,
+  colorMap: Map<string, string>,
+  layerTree: Layer[],
+  frames: Frame[],
+): Map<string, Map<string, PixelBuffer>> {
+  const group = findLayer(groupId, layerTree);
+  if (!group || group.type !== 'group') return new Map();
+
+  const pixelLayerIds = collectPixelLayerIds(group);
+  const result = new Map<string, Map<string, PixelBuffer>>();
+
+  for (const frame of frames) {
+    const frameMap = new Map<string, PixelBuffer>();
+    for (const layerId of pixelLayerIds) {
+      const buffer = frame.pixelData.get(layerId);
+      if (!buffer) continue;
+      frameMap.set(layerId, applyPaletteSwap(buffer, colorMap));
+    }
+    result.set(frame.id, frameMap);
+  }
+
+  return result;
+}