pixelweaver 0.1.0

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

@@ -0,0 +1,516 @@
+/**
+ * Layer Tree -- the single source of truth for layer structure.
+ *
+ * Reactive Svelte 5 module using $state runes. All layer queries and mutations
+ * go through this module. Mutations are designed to be easily wrapped as
+ * command execute/undo pairs (but this module does not wire to the dispatcher).
+ *
+ * Ordering convention: first element = bottom of the stack (drawn first).
+ */
+
+import type { Layer, BlendMode, LayerTreeState } from './layer-types.js';
+import { createPixelLayer, createGroupLayer } from './layer-types.js';
+
+// --- Reactive state ---
+
+let layers = $state<Layer[]>([]);
+let activeLayerId = $state<string>('');
+
+// --- Internal helpers ---
+
+/**
+ * Find a layer and its parent array by ID, searching the entire tree.
+ * Returns { layer, siblings, index, parentId } or undefined if not found.
+ * parentId is the ID of the parent group, or null for root-level layers.
+ */
+function findLayerContext(
+  id: string,
+  searchIn: Layer[] = layers,
+  parentId: string | null = null,
+): { layer: Layer; siblings: Layer[]; index: number; parentId: string | null } | undefined {
+  for (let i = 0; i < searchIn.length; i++) {
+    const current = searchIn[i];
+    if (!current) continue;
+    if (current.id === id) {
+      return { layer: current, siblings: searchIn, index: i, parentId };
+    }
+    if (current.type === 'group' && current.children) {
+      const found = findLayerContext(id, current.children, current.id);
+      if (found) return found;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Collect all layers in depth-first order (bottom-to-top within each level).
+ */
+function flattenTree(tree: Layer[]): Layer[] {
+  const result: Layer[] = [];
+  for (const layer of tree) {
+    result.push(layer);
+    if (layer.type === 'group' && layer.children) {
+      result.push(...flattenTree(layer.children));
+    }
+  }
+  return result;
+}
+
+/**
+ * Find the nearest pixel layer to a given position in the flat list.
+ * Used when the active layer is removed.
+ */
+function findNearestPixelLayer(removedFlatIndex: number): Layer | undefined {
+  const flat = flattenTree(layers).filter((l) => l.type === 'pixel');
+  if (flat.length === 0) return undefined;
+  // Prefer the layer at the same index, then look backward, then forward
+  const idx = Math.min(removedFlatIndex, flat.length - 1);
+  return flat[idx];
+}
+
+/** Deep clone a layer (and its children if a group). Assigns new IDs throughout. */
+function deepCloneLayer(layer: Layer): Layer {
+  const clone: Layer = {
+    ...layer,
+    id: crypto.randomUUID(),
+  };
+  if (layer.type === 'group' && layer.children) {
+    clone.children = layer.children.map(deepCloneLayer);
+  }
+  return clone;
+}
+
+/** Deep clone a layer preserving its original IDs (for serialization snapshots). */
+function deepSnapshotLayer(layer: Layer): Layer {
+  const snapshot: Layer = { ...layer };
+  if (layer.type === 'group' && layer.children) {
+    snapshot.children = layer.children.map(deepSnapshotLayer);
+  }
+  return snapshot;
+}
+
+// --- Queries ---
+
+export function getLayers(): Layer[] {
+  return layers;
+}
+
+export function getActiveLayerId(): string {
+  return activeLayerId;
+}
+
+export function getLayer(id: string): Layer | undefined {
+  return findLayerContext(id)?.layer;
+}
+
+export function getActiveLayer(): Layer | undefined {
+  if (!activeLayerId) return undefined;
+  return getLayer(activeLayerId);
+}
+
+/** Get the parent group of a layer, or undefined if it's at the root. */
+export function getParent(id: string): Layer | undefined {
+  const ctx = findLayerContext(id);
+  if (!ctx || ctx.parentId === null) return undefined;
+  return findLayerContext(ctx.parentId)?.layer;
+}
+
+/** Get the path from the root to a layer (inclusive). */
+export function getPath(id: string): Layer[] {
+  function search(tree: Layer[], path: Layer[]): Layer[] | undefined {
+    for (const layer of tree) {
+      const currentPath = [...path, layer];
+      if (layer.id === id) return currentPath;
+      if (layer.type === 'group' && layer.children) {
+        const found = search(layer.children, currentPath);
+        if (found) return found;
+      }
+    }
+    return undefined;
+  }
+  return search(layers, []) ?? [];
+}
+
+/** Flatten the entire tree in depth-first order. */
+export function getFlatList(): Layer[] {
+  return flattenTree(layers);
+}
+
+/** Get all pixel layers (not groups) in depth-first order. */
+export function getAllPixelLayers(): Layer[] {
+  return flattenTree(layers).filter((l) => l.type === 'pixel');
+}
+
+/** Get visible pixel layers: pixel layers where visible=true AND all ancestor groups are visible. */
+export function getVisiblePixelLayers(): Layer[] {
+  const result: Layer[] = [];
+
+  function walk(tree: Layer[]): void {
+    for (const layer of tree) {
+      if (!layer.visible) continue;
+      if (layer.type === 'pixel') {
+        result.push(layer);
+      } else if (layer.children) {
+        walk(layer.children);
+      }
+    }
+  }
+
+  walk(layers);
+  return result;
+}
+
+// --- Mutations ---
+
+/**
+ * Add a new pixel layer.
+ * By default, inserts above the active layer (or at the top if no active layer).
+ */
+export function addLayer(
+  name: string,
+  options?: { parentId?: string; index?: number; id?: string },
+): Layer {
+  const layer = createPixelLayer(name, options?.id);
+
+  if (options?.parentId) {
+    // Insert into a specific group
+    const parentCtx = findLayerContext(options.parentId);
+    if (!parentCtx || parentCtx.layer.type !== 'group') {
+      throw new Error(`Parent "${options.parentId}" is not a group or does not exist.`);
+    }
+    // Group layers always have a children array (see createGroupLayer).
+    // Initialize if somehow missing so callers can push into the live array.
+    parentCtx.layer.children ??= [];
+    const children = parentCtx.layer.children;
+    const idx = options.index ?? children.length;
+    children.splice(idx, 0, layer);
+  } else if (options?.index !== undefined) {
+    layers.splice(options.index, 0, layer);
+  } else {
+    // Insert above the active layer
+    const activeCtx = activeLayerId ? findLayerContext(activeLayerId) : undefined;
+    if (activeCtx) {
+      activeCtx.siblings.splice(activeCtx.index + 1, 0, layer);
+    } else {
+      layers.push(layer);
+    }
+  }
+
+  activeLayerId = layer.id;
+  // Return the proxy version from the tree so callers get reactive references.
+  // The layer was just inserted above, so findLayerContext cannot miss it.
+  const inserted = findLayerContext(layer.id);
+  if (!inserted) throw new Error(`addLayer: inserted layer "${layer.id}" not found`);
+  return inserted.layer;
+}
+
+/**
+ * Add a new group layer.
+ * By default, inserts above the active layer (or at the top if no active layer).
+ */
+export function addGroup(
+  name: string,
+  options?: { parentId?: string; index?: number; id?: string },
+): Layer {
+  const group = createGroupLayer(name, options?.id);
+
+  if (options?.parentId) {
+    const parentCtx = findLayerContext(options.parentId);
+    if (!parentCtx || parentCtx.layer.type !== 'group') {
+      throw new Error(`Parent "${options.parentId}" is not a group or does not exist.`);
+    }
+    // Group layers always have a children array (see createGroupLayer).
+    // Initialize if somehow missing so callers can push into the live array.
+    parentCtx.layer.children ??= [];
+    const children = parentCtx.layer.children;
+    const idx = options.index ?? children.length;
+    children.splice(idx, 0, group);
+  } else if (options?.index !== undefined) {
+    layers.splice(options.index, 0, group);
+  } else {
+    const activeCtx = activeLayerId ? findLayerContext(activeLayerId) : undefined;
+    if (activeCtx) {
+      activeCtx.siblings.splice(activeCtx.index + 1, 0, group);
+    } else {
+      layers.push(group);
+    }
+  }
+
+  // Active layer stays on a pixel layer (don't switch to the group)
+  // Return the proxy version from the tree so callers get reactive references.
+  // The group was just inserted above, so findLayerContext cannot miss it.
+  const inserted = findLayerContext(group.id);
+  if (!inserted) throw new Error(`addGroup: inserted group "${group.id}" not found`);
+  return inserted.layer;
+}
+
+/** Remove a layer (or group) by ID. Adjusts active layer if necessary. */
+export function removeLayer(id: string): void {
+  const ctx = findLayerContext(id);
+  if (!ctx) return;
+
+  // Record position of the removed layer in the pixel-only flat list,
+  // so findNearestPixelLayer can select the closest remaining pixel layer.
+  const pixelFlat = flattenTree(layers).filter((l) => l.type === 'pixel');
+  const flatIndex = pixelFlat.findIndex((l) => l.id === id);
+
+  ctx.siblings.splice(ctx.index, 1);
+
+  // If we removed the active layer, select the nearest remaining pixel layer
+  if (activeLayerId === id || (ctx.layer.type === 'group' && containsLayer(ctx.layer, activeLayerId))) {
+    const nearest = findNearestPixelLayer(flatIndex >= 0 ? flatIndex : 0);
+    activeLayerId = nearest?.id ?? '';
+  }
+}
+
+/** Check if a group (recursively) contains a layer with the given ID. */
+function containsLayer(group: Layer, targetId: string): boolean {
+  if (!group.children) return false;
+  for (const child of group.children) {
+    if (child.id === targetId) return true;
+    if (child.type === 'group' && containsLayer(child, targetId)) return true;
+  }
+  return false;
+}
+
+/** Duplicate a layer (deep clone with new IDs). Inserts the copy directly above the original. */
+export function duplicateLayer(id: string): Layer {
+  const ctx = findLayerContext(id);
+  if (!ctx) throw new Error(`Layer "${id}" not found.`);
+
+  const clone = deepCloneLayer(ctx.layer);
+  clone.name = `${ctx.layer.name} copy`;
+  ctx.siblings.splice(ctx.index + 1, 0, clone);
+
+  // If the duplicated layer is a pixel layer, select it
+  if (clone.type === 'pixel') {
+    activeLayerId = clone.id;
+  }
+
+  // Return the proxy version from the tree. The clone was just spliced in above.
+  const inserted = findLayerContext(clone.id);
+  if (!inserted) throw new Error(`duplicateLayer: cloned layer "${clone.id}" not found`);
+  return inserted.layer;
+}
+
+/** Move a layer to a new position. newParentId=null means root level. */
+export function moveLayer(id: string, newParentId: string | null, newIndex: number): void {
+  const ctx = findLayerContext(id);
+  if (!ctx) throw new Error(`Layer "${id}" not found.`);
+
+  // Remove from current position
+  const [removed] = ctx.siblings.splice(ctx.index, 1) as [Layer];
+
+  // Insert at new position
+  if (newParentId) {
+    const parentCtx = findLayerContext(newParentId);
+    if (!parentCtx || parentCtx.layer.type !== 'group') {
+      throw new Error(`Target parent "${newParentId}" is not a group or does not exist.`);
+    }
+    // Group layers always have a children array (see createGroupLayer).
+    // Initialize if somehow missing so callers can push into the live array.
+    parentCtx.layer.children ??= [];
+    const children = parentCtx.layer.children;
+    const clampedIndex = Math.min(newIndex, children.length);
+    children.splice(clampedIndex, 0, removed);
+  } else {
+    const clampedIndex = Math.min(newIndex, layers.length);
+    layers.splice(clampedIndex, 0, removed);
+  }
+}
+
+export function renameLayer(id: string, name: string): void {
+  const ctx = findLayerContext(id);
+  if (!ctx) throw new Error(`Layer "${id}" not found.`);
+  ctx.layer.name = name;
+}
+
+export function setVisibility(id: string, visible: boolean): void {
+  const ctx = findLayerContext(id);
+  if (!ctx) throw new Error(`Layer "${id}" not found.`);
+  ctx.layer.visible = visible;
+}
+
+export function setOpacity(id: string, opacity: number): void {
+  const ctx = findLayerContext(id);
+  if (!ctx) throw new Error(`Layer "${id}" not found.`);
+  ctx.layer.opacity = Math.max(0, Math.min(100, opacity));
+}
+
+export function setBlendMode(id: string, mode: BlendMode): void {
+  const ctx = findLayerContext(id);
+  if (!ctx) throw new Error(`Layer "${id}" not found.`);
+  ctx.layer.blendMode = mode;
+}
+
+export function setLocked(id: string, locked: boolean): void {
+  const ctx = findLayerContext(id);
+  if (!ctx) throw new Error(`Layer "${id}" not found.`);
+  ctx.layer.locked = locked;
+}
+
+export function setActiveLayer(id: string): void {
+  const layer = getLayer(id);
+  if (!layer) throw new Error(`Layer "${id}" not found.`);
+  // Active layer should be a pixel layer
+  if (layer.type !== 'pixel') {
+    throw new Error(`Cannot set active layer to group "${id}". Active layer must be a pixel layer.`);
+  }
+  activeLayerId = id;
+}
+
+export function toggleExpanded(id: string): void {
+  const ctx = findLayerContext(id);
+  if (!ctx) throw new Error(`Layer "${id}" not found.`);
+  if (ctx.layer.type !== 'group') return; // no-op for non-groups
+  ctx.layer.expanded = !ctx.layer.expanded;
+}
+
+/**
+ * Merge a pixel layer into the one below it (placeholder logic).
+ * The top layer is removed; the bottom layer keeps its position.
+ */
+export function mergeDown(id: string): void {
+  const ctx = findLayerContext(id);
+  if (!ctx) throw new Error(`Layer "${id}" not found.`);
+  if (ctx.layer.type !== 'pixel') throw new Error('Can only merge pixel layers.');
+  if (ctx.index === 0) throw new Error('No layer below to merge into.');
+
+  const below = ctx.siblings[ctx.index - 1];
+  if (!below || below.type !== 'pixel') throw new Error('Layer below is not a pixel layer.');
+
+  // Placeholder: actual pixel merging would happen in the compositor.
+  // For now, just remove the top layer (the pixels would be merged externally).
+  ctx.siblings.splice(ctx.index, 1);
+
+  if (activeLayerId === id) {
+    activeLayerId = below.id;
+  }
+}
+
+/**
+ * Flatten a group into a single pixel layer.
+ * Replaces the group with a pixel layer at the same position.
+ * Returns the replacement pixel layer so callers can store composited
+ * pixel data under its ID.
+ */
+export function flattenGroup(id: string): Layer {
+  const ctx = findLayerContext(id);
+  if (!ctx) throw new Error(`Layer "${id}" not found.`);
+  if (ctx.layer.type !== 'group') throw new Error('Can only flatten groups.');
+
+  const replacement = createPixelLayer(ctx.layer.name);
+  replacement.visible = ctx.layer.visible;
+  replacement.opacity = ctx.layer.opacity;
+  replacement.blendMode = ctx.layer.blendMode;
+
+  ctx.siblings[ctx.index] = replacement;
+
+  // If the active layer was inside the group, select the replacement
+  if (activeLayerId === id || containsLayer(ctx.layer, activeLayerId)) {
+    activeLayerId = replacement.id;
+  }
+
+  return replacement;
+}
+
+/**
+ * Wrap selected layers in a new group.
+ * The layers must all be siblings (same parent). The group takes their position.
+ */
+export function groupLayers(ids: string[], groupName: string): Layer {
+  if (ids.length === 0) throw new Error('No layers to group.');
+
+  // All layers must be siblings
+  const contexts = ids.map((id) => {
+    const ctx = findLayerContext(id);
+    if (!ctx) throw new Error(`Layer "${id}" not found.`);
+    return ctx;
+  });
+
+  // ids.length > 0 is checked above, so contexts[0] exists.
+  const firstCtx = contexts[0];
+  if (!firstCtx) throw new Error('groupLayers: empty context list');
+  // Verify they share the same parent (compare by parentId, not array reference,
+  // because Svelte 5 $state proxies may return different proxy instances)
+  const sharedParentId = firstCtx.parentId;
+  for (const ctx of contexts) {
+    if (ctx.parentId !== sharedParentId) {
+      throw new Error('All layers must be siblings (same parent) to group.');
+    }
+  }
+  // Get the actual sibling array from the first context
+  const parentArray = firstCtx.siblings;
+
+  // Sort by index (ascending) to preserve order
+  contexts.sort((a, b) => a.index - b.index);
+
+  // Create the group
+  const group = createGroupLayer(groupName);
+
+  // Remove layers from parent (in reverse order to preserve indices)
+  const removedLayers: Layer[] = [];
+  for (let i = contexts.length - 1; i >= 0; i--) {
+    const ctxI = contexts[i];
+    if (!ctxI) continue;
+    // Re-find the index by ID since previous removals shift indices,
+    // and Svelte proxies make reference-based indexOf unreliable
+    const currentIndex = parentArray.findIndex((l) => l.id === ctxI.layer.id);
+    if (currentIndex !== -1) {
+      const removed = parentArray.splice(currentIndex, 1)[0];
+      if (removed) removedLayers.unshift(removed);
+    }
+  }
+
+  group.children = removedLayers;
+
+  // Insert the group at the position of the first (lowest) removed layer
+  const insertIndex = Math.min(firstCtx.index, parentArray.length);
+  parentArray.splice(insertIndex, 0, group);
+
+  // Return the proxy version from the tree (just inserted above).
+  const inserted = findLayerContext(group.id);
+  if (!inserted) throw new Error(`groupLayers: group "${group.id}" not found after insert`);
+  return inserted.layer;
+}
+
+/**
+ * Dissolve a group, moving its children to the group's parent at its position.
+ */
+export function ungroupLayer(id: string): void {
+  const ctx = findLayerContext(id);
+  if (!ctx) throw new Error(`Layer "${id}" not found.`);
+  if (ctx.layer.type !== 'group') throw new Error('Can only ungroup groups.');
+
+  const children = ctx.layer.children ?? [];
+
+  // Remove the group from its parent
+  ctx.siblings.splice(ctx.index, 1);
+
+  // Insert all children at the group's former position
+  ctx.siblings.splice(ctx.index, 0, ...children);
+}
+
+// --- Serialization ---
+
+/** Export the tree as a plain JSON-safe object. */
+export function serialize(): LayerTreeState {
+  return {
+    layers: layers.map(deepSnapshotLayer),
+    activeLayerId,
+  };
+}
+
+/** Restore the tree from a serialized state. */
+export function deserialize(state: LayerTreeState): void {
+  layers = state.layers.map(deepSnapshotLayer);
+  activeLayerId = state.activeLayerId;
+}
+
+/**
+ * Reset all layer state. Intended for tests only.
+ */
+export function _resetForTesting(): void {
+  layers = [];
+  activeLayerId = '';
+}