pixelweaver 0.1.0

package/src/lib/layers/layer-tree.test.ts

@@ -0,0 +1,383 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import * as tree from './layer-tree.svelte.js';
+
+// --- Setup ---
+
+beforeEach(() => {
+  tree._resetForTesting();
+});
+
+// --- Add / Remove ---
+
+describe('addLayer', () => {
+  it('should add a pixel layer to the tree', () => {
+    const layer = tree.addLayer('Background');
+    expect(layer.type).toBe('pixel');
+    expect(layer.name).toBe('Background');
+    expect(tree.getLayers()).toHaveLength(1);
+    expect(tree.getLayers()[0]).toBe(layer);
+  });
+
+  it('should set the new layer as active', () => {
+    const layer = tree.addLayer('Layer 1');
+    expect(tree.getActiveLayerId()).toBe(layer.id);
+  });
+
+  it('should add above the active layer by default', () => {
+    const l1 = tree.addLayer('Bottom');
+    const l2 = tree.addLayer('Top');
+    // l1 is at index 0 (bottom), l2 at index 1 (above)
+    expect(tree.getLayers()[0]).toBe(l1);
+    expect(tree.getLayers()[1]).toBe(l2);
+  });
+
+  it('should add a layer into a group', () => {
+    tree.addLayer('Outside');
+    const group = tree.addGroup('Group');
+    const inside = tree.addLayer('Inside', { parentId: group.id });
+    expect(group.children).toHaveLength(1);
+    expect(group.children?.[0]).toBe(inside);
+  });
+
+  it('should add at a specific index', () => {
+    tree.addLayer('First');
+    tree.addLayer('Third');
+    const second = tree.addLayer('Second', { index: 1 });
+    expect(tree.getLayers()[1]).toBe(second);
+  });
+});
+
+describe('addGroup', () => {
+  it('should add a group layer to the tree', () => {
+    const group = tree.addGroup('Skin');
+    expect(group.type).toBe('group');
+    expect(group.children).toEqual([]);
+    expect(tree.getLayers()).toHaveLength(1);
+  });
+
+  it('should not change active layer (groups cannot be active)', () => {
+    const pixel = tree.addLayer('Pixel');
+    tree.addGroup('Group');
+    expect(tree.getActiveLayerId()).toBe(pixel.id);
+  });
+});
+
+describe('removeLayer', () => {
+  it('should remove a layer from the tree', () => {
+    const layer = tree.addLayer('Doomed');
+    tree.removeLayer(layer.id);
+    expect(tree.getLayers()).toHaveLength(0);
+  });
+
+  it('should select nearest pixel layer when the active layer is removed', () => {
+    const l1 = tree.addLayer('Layer 1');
+    const l2 = tree.addLayer('Layer 2');
+    expect(tree.getActiveLayerId()).toBe(l2.id);
+
+    tree.removeLayer(l2.id);
+    expect(tree.getActiveLayerId()).toBe(l1.id);
+  });
+
+  it('should clear active layer ID when all layers are removed', () => {
+    const layer = tree.addLayer('Only');
+    tree.removeLayer(layer.id);
+    expect(tree.getActiveLayerId()).toBe('');
+  });
+
+  it('should remove a group and reassign active if active was inside', () => {
+    // Create an outside layer, then a group with a child inside it
+    const outside = tree.addLayer('Outside');
+    const group = tree.addGroup('Group');
+    const inside = tree.addLayer('Inside', { parentId: group.id });
+    tree.setActiveLayer(inside.id);
+
+    tree.removeLayer(group.id);
+    // Active should have switched to the nearest remaining pixel layer
+    expect(tree.getActiveLayerId()).toBe(outside.id);
+  });
+});
+
+// --- Duplicate ---
+
+describe('duplicateLayer', () => {
+  it('should create a copy with a new ID', () => {
+    const original = tree.addLayer('Original');
+    const clone = tree.duplicateLayer(original.id);
+    expect(clone.id).not.toBe(original.id);
+    expect(clone.name).toBe('Original copy');
+    expect(tree.getLayers()).toHaveLength(2);
+  });
+
+  it('should place the copy above the original', () => {
+    const original = tree.addLayer('Original');
+    const clone = tree.duplicateLayer(original.id);
+    expect(tree.getLayers()[0]).toBe(original);
+    expect(tree.getLayers()[1]).toBe(clone);
+  });
+
+  it('should duplicate a group with all children', () => {
+    const group = tree.addGroup('Group');
+    tree.addLayer('Child', { parentId: group.id });
+    const clone = tree.duplicateLayer(group.id);
+    expect(clone.type).toBe('group');
+    expect(clone.children).toHaveLength(1);
+    expect(clone.children?.[0]?.id).not.toBe(group.children?.[0]?.id);
+  });
+});
+
+// --- Move ---
+
+describe('moveLayer', () => {
+  it('should move a layer into a group', () => {
+    const layer = tree.addLayer('Movable');
+    const group = tree.addGroup('Target');
+    tree.moveLayer(layer.id, group.id, 0);
+    expect(tree.getLayers()).toHaveLength(1); // only the group at root
+    expect(group.children).toHaveLength(1);
+    expect(group.children?.[0]).toBe(layer);
+  });
+
+  it('should move a layer out of a group to root', () => {
+    const group = tree.addGroup('Group');
+    const layer = tree.addLayer('Inside', { parentId: group.id });
+    tree.moveLayer(layer.id, null, 0);
+    expect(tree.getLayers()[0]).toBe(layer);
+    expect(group.children).toHaveLength(0);
+  });
+
+  it('should reorder layers at root level', () => {
+    const l1 = tree.addLayer('First');
+    const l2 = tree.addLayer('Second');
+    // Move l2 to index 0 (below l1)
+    tree.moveLayer(l2.id, null, 0);
+    expect(tree.getLayers()[0]).toBe(l2);
+    expect(tree.getLayers()[1]).toBe(l1);
+  });
+});
+
+// --- Property mutations ---
+
+describe('renameLayer', () => {
+  it('should change the layer name', () => {
+    const layer = tree.addLayer('Old Name');
+    tree.renameLayer(layer.id, 'New Name');
+    expect(layer.name).toBe('New Name');
+  });
+});
+
+describe('setVisibility', () => {
+  it('should toggle visibility', () => {
+    const layer = tree.addLayer('Layer');
+    expect(layer.visible).toBe(true);
+    tree.setVisibility(layer.id, false);
+    expect(layer.visible).toBe(false);
+  });
+});
+
+describe('setOpacity', () => {
+  it('should set opacity and clamp to 0-100', () => {
+    const layer = tree.addLayer('Layer');
+    tree.setOpacity(layer.id, 50);
+    expect(layer.opacity).toBe(50);
+    tree.setOpacity(layer.id, -10);
+    expect(layer.opacity).toBe(0);
+    tree.setOpacity(layer.id, 200);
+    expect(layer.opacity).toBe(100);
+  });
+});
+
+describe('setBlendMode', () => {
+  it('should change blend mode', () => {
+    const layer = tree.addLayer('Layer');
+    tree.setBlendMode(layer.id, 'multiply');
+    expect(layer.blendMode).toBe('multiply');
+  });
+});
+
+describe('setLocked', () => {
+  it('should set locked state', () => {
+    const layer = tree.addLayer('Layer');
+    tree.setLocked(layer.id, true);
+    expect(layer.locked).toBe(true);
+  });
+});
+
+describe('setActiveLayer', () => {
+  it('should set the active layer to a pixel layer', () => {
+    const l1 = tree.addLayer('Layer 1');
+    tree.addLayer('Layer 2');
+    tree.setActiveLayer(l1.id);
+    expect(tree.getActiveLayerId()).toBe(l1.id);
+  });
+
+  it('should throw when setting active to a group', () => {
+    tree.addLayer('Pixel');
+    const group = tree.addGroup('Group');
+    expect(() => { tree.setActiveLayer(group.id); }).toThrow();
+  });
+});
+
+describe('toggleExpanded', () => {
+  it('should toggle expanded state on a group', () => {
+    const group = tree.addGroup('Group');
+    expect(group.expanded).toBe(true);
+    tree.toggleExpanded(group.id);
+    expect(group.expanded).toBe(false);
+    tree.toggleExpanded(group.id);
+    expect(group.expanded).toBe(true);
+  });
+});
+
+// --- Group / Ungroup ---
+
+describe('groupLayers', () => {
+  it('should wrap layers in a new group', () => {
+    const l1 = tree.addLayer('A');
+    const l2 = tree.addLayer('B');
+    const group = tree.groupLayers([l1.id, l2.id], 'My Group');
+    expect(group.type).toBe('group');
+    expect(group.children).toHaveLength(2);
+    expect(group.children?.[0]).toBe(l1);
+    expect(group.children?.[1]).toBe(l2);
+    expect(tree.getLayers()).toHaveLength(1);
+    expect(tree.getLayers()[0]).toBe(group);
+  });
+
+  it('should throw if layers are not siblings', () => {
+    // Place outside explicitly at root level so it's not a sibling of inside
+    const outside = tree.addLayer('Outside', { index: 0 });
+    const group = tree.addGroup('Group');
+    const inside = tree.addLayer('Inside', { parentId: group.id });
+    expect(() => tree.groupLayers([inside.id, outside.id], 'Bad')).toThrow('siblings');
+  });
+});
+
+describe('ungroupLayer', () => {
+  it('should dissolve a group, moving children to parent', () => {
+    const l1 = tree.addLayer('A');
+    const l2 = tree.addLayer('B');
+    const group = tree.groupLayers([l1.id, l2.id], 'Group');
+
+    tree.ungroupLayer(group.id);
+    expect(tree.getLayers()).toHaveLength(2);
+    expect(tree.getLayers()[0]).toBe(l1);
+    expect(tree.getLayers()[1]).toBe(l2);
+  });
+});
+
+// --- Queries ---
+
+describe('getLayer', () => {
+  it('should find a layer anywhere in the tree', () => {
+    const group = tree.addGroup('Group');
+    const child = tree.addLayer('Child', { parentId: group.id });
+    expect(tree.getLayer(child.id)).toBe(child);
+  });
+
+  it('should return undefined for nonexistent ID', () => {
+    expect(tree.getLayer('nonexistent')).toBeUndefined();
+  });
+});
+
+describe('getParent', () => {
+  it('should return the parent group of a nested layer', () => {
+    const group = tree.addGroup('Group');
+    const child = tree.addLayer('Child', { parentId: group.id });
+    expect(tree.getParent(child.id)).toBe(group);
+  });
+
+  it('should return undefined for root-level layers', () => {
+    const layer = tree.addLayer('Root');
+    expect(tree.getParent(layer.id)).toBeUndefined();
+  });
+});
+
+describe('getPath', () => {
+  it('should return path from root to a nested layer', () => {
+    const group = tree.addGroup('Group');
+    const child = tree.addLayer('Child', { parentId: group.id });
+    const path = tree.getPath(child.id);
+    expect(path).toHaveLength(2);
+    expect(path[0]).toBe(group);
+    expect(path[1]).toBe(child);
+  });
+});
+
+describe('getFlatList', () => {
+  it('should return layers in depth-first order', () => {
+    const l1 = tree.addLayer('Bottom');
+    const group = tree.addGroup('Group');
+    const child = tree.addLayer('GroupChild', { parentId: group.id });
+    const l2 = tree.addLayer('Top');
+    const flat = tree.getFlatList();
+    expect(flat.map((l) => l.id)).toEqual([l1.id, group.id, child.id, l2.id]);
+  });
+});
+
+describe('getAllPixelLayers', () => {
+  it('should return only pixel layers', () => {
+    const l1 = tree.addLayer('Pixel 1');
+    tree.addGroup('Group');
+    const l2 = tree.addLayer('Pixel 2');
+    const pixels = tree.getAllPixelLayers();
+    expect(pixels.map((l) => l.id)).toEqual([l1.id, l2.id]);
+  });
+});
+
+describe('getVisiblePixelLayers', () => {
+  it('should skip hidden layers', () => {
+    const l1 = tree.addLayer('Visible');
+    const l2 = tree.addLayer('Hidden');
+    tree.setVisibility(l2.id, false);
+    const visible = tree.getVisiblePixelLayers();
+    expect(visible.map((l) => l.id)).toEqual([l1.id]);
+  });
+
+  it('should skip children of hidden groups', () => {
+    // Add a root-level layer first so it becomes active
+    const outside = tree.addLayer('Outside');
+    const group = tree.addGroup('Group');
+    tree.addLayer('Inside', { parentId: group.id });
+    tree.setVisibility(group.id, false);
+    const visible = tree.getVisiblePixelLayers();
+    expect(visible.map((l) => l.id)).toEqual([outside.id]);
+  });
+});
+
+// --- Serialization ---
+
+describe('serialize / deserialize', () => {
+  it('should roundtrip the tree structure', () => {
+    const l1 = tree.addLayer('Bottom');
+    const group = tree.addGroup('Group');
+    tree.addLayer('Child', { parentId: group.id });
+    // Explicitly add Top at root level (active is currently Child inside the group)
+    tree.addLayer('Top', { index: tree.getLayers().length });
+    tree.setActiveLayer(l1.id);
+
+    const snapshot = tree.serialize();
+
+    // Verify it's a plain object (not reactive references)
+    expect(JSON.parse(JSON.stringify(snapshot))).toEqual(snapshot);
+
+    tree._resetForTesting();
+    expect(tree.getLayers()).toHaveLength(0);
+
+    tree.deserialize(snapshot);
+    expect(tree.getLayers()).toHaveLength(3);
+    expect(tree.getActiveLayerId()).toBe(l1.id);
+    expect(tree.getLayers()[1]?.type).toBe('group');
+    expect(tree.getLayers()[1]?.children).toHaveLength(1);
+  });
+
+  it('should not share references between original and deserialized tree', () => {
+    tree.addLayer('Layer');
+    const snapshot = tree.serialize();
+    tree.deserialize(snapshot);
+    // Mutating the deserialized tree should not affect the snapshot
+    const firstId = tree.getLayers()[0]?.id;
+    if (!firstId) throw new Error('missing first layer');
+    tree.renameLayer(firstId, 'Changed');
+    expect(snapshot.layers[0]?.name).toBe('Layer');
+  });
+});

package/src/lib/layers/layer-types.ts

@@ -0,0 +1,56 @@
+/**
+ * Layer type definitions for the PixelWeaver layer system.
+ *
+ * Layers are the primary organizational unit for pixel data.
+ * They form a tree: groups contain children (which may be layers or nested groups).
+ * The ordering convention is bottom-to-top: first element in an array is drawn first.
+ */
+
+export type BlendMode = 'normal' | 'multiply' | 'screen' | 'overlay';
+
+export interface Layer {
+  id: string;
+  name: string;
+  type: 'pixel' | 'group';
+  visible: boolean;
+  opacity: number; // 0-100
+  blendMode: BlendMode;
+  locked: boolean;
+
+  // Group-only properties:
+  children?: Layer[];
+  expanded?: boolean; // UI state: is the group expanded in the layer panel?
+}
+
+export interface LayerTreeState {
+  layers: Layer[];
+  activeLayerId: string;
+}
+
+/** Create a new pixel layer with sensible defaults. */
+export function createPixelLayer(name: string, id?: string): Layer {
+  return {
+    id: id ?? crypto.randomUUID(),
+    name,
+    type: 'pixel',
+    visible: true,
+    opacity: 100,
+    blendMode: 'normal',
+    locked: false,
+  };
+}
+
+/** Create a new group layer with sensible defaults. */
+export function createGroupLayer(name: string, id?: string): Layer {
+  return {
+    id: id ?? crypto.randomUUID(),
+    name,
+    type: 'group',
+    visible: true,
+    opacity: 100,
+    blendMode: 'normal',
+    locked: false,
+    children: [],
+    expanded: true,
+  };
+}