pixelweaver 0.1.0

package/src/lib/ui/layer-menu-commands.ts

@@ -0,0 +1,420 @@
+/**
+ * Layer Menu Commands -- Merge Down, Move Up/Down, plus menu items
+ * pointing at the add/duplicate/delete commands registered by the
+ * layer-commands plugin in src/lib/layers/.
+ *
+ * This file is the "menu glue" for the Layer top-level menu; it does not
+ * own the core layer lifecycle commands.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import * as layerTree from '../layers/layer-tree.svelte.js';
+import type { Layer, LayerTreeState } from '../layers/layer-types.js';
+import { composite } from '../layers/compositor.js';
+import { PixelBuffer } from '../canvas/pixel-buffer.js';
+import { canvasState } from '../canvas/canvas-state.svelte.js';
+import { getFrames } from '../animation/frame-model.svelte.js';
+import ArrowDownToLine from '~icons/lucide/arrow-down-to-line';
+import Layers from '~icons/lucide/layers';
+import ArrowUp from '~icons/lucide/arrow-up';
+import ArrowDown from '~icons/lucide/arrow-down';
+
+// Snapshot of per-frame pixel data for two layers (used for merge-down undo).
+interface MergeDownPixelSnapshot {
+  topLayerId: string;
+  bottomLayerId: string;
+  // Per-frame: [frameId, topBuffer | undefined, bottomBuffer | undefined]
+  frameData: Array<{
+    frameId: string;
+    topBuffer: PixelBuffer | undefined;
+    bottomBuffer: PixelBuffer | undefined;
+  }>;
+}
+
+interface MergeDownSnapshot {
+  tree: LayerTreeState;
+  pixels: MergeDownPixelSnapshot;
+}
+
+// Snapshot for flatten_group undo: tree structure + all children's pixel data
+// across all frames, so we can fully restore both structure and pixels.
+interface FlattenGroupSnapshot {
+  tree: LayerTreeState;
+  // Per-frame pixel data for every descendant pixel layer (and the new replacement).
+  // Map<frameId, Map<layerId, PixelBuffer>>
+  framePixelSnapshots: Array<{
+    frameId: string;
+    entries: Array<{ layerId: string; buffer: PixelBuffer }>;
+  }>;
+  // The replacement layer ID, so undo can remove its pixel data entries
+  replacementId: string;
+}
+
+/** Collect all descendant pixel layer IDs from a group (depth-first). */
+function collectDescendantPixelIds(layer: Layer): string[] {
+  const ids: string[] = [];
+  if (layer.type === 'pixel') {
+    ids.push(layer.id);
+  } else if (layer.children) {
+    for (const child of layer.children) {
+      ids.push(...collectDescendantPixelIds(child));
+    }
+  }
+  return ids;
+}
+
+/**
+ * Composite a top layer's pixels onto a bottom buffer using the compositor's
+ * public API. Constructs a minimal two-layer tree so the existing blend-mode
+ * and opacity logic in `composite()` handles the math.
+ */
+function compositeTopOntoBottom(
+  bottomBuf: PixelBuffer,
+  topBuf: PixelBuffer,
+  topLayer: Layer,
+): PixelBuffer {
+  // Build a fake two-layer tree: bottom (identity: 100% normal) then top
+  // (with its real opacity and blend mode). composite() walks bottom-to-top.
+  const fakeBottom: Layer = {
+    id: '__merge_bottom__',
+    name: '',
+    type: 'pixel',
+    visible: true,
+    opacity: 100,
+    blendMode: 'normal',
+    locked: false,
+  };
+  const fakeTop: Layer = {
+    id: '__merge_top__',
+    name: '',
+    type: 'pixel',
+    visible: true,
+    opacity: topLayer.opacity,
+    blendMode: topLayer.blendMode,
+    locked: false,
+  };
+  const fakePixelData = new Map<string, PixelBuffer>();
+  fakePixelData.set(fakeBottom.id, bottomBuf);
+  fakePixelData.set(fakeTop.id, topBuf);
+  return composite([fakeBottom, fakeTop], fakePixelData, bottomBuf.width, bottomBuf.height);
+}
+
+export const layerMenuCommandsPlugin: PluginModule = {
+  name: 'ui/layer-menu-commands',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    // add_layer, duplicate_layer, remove_layer are registered by layer-commands plugin;
+    // we only add menu items pointing to those existing commands.
+
+    api.addMenuItem('menu:layer:add', {
+      commandId: 'add_layer',
+      menuPath: 'layer',
+      group: 'create',
+      order: 10,
+      label: 'Add Layer',
+    });
+
+    api.addMenuItem('menu:layer:duplicate', {
+      commandId: 'duplicate_layer',
+      menuPath: 'layer',
+      group: 'create',
+      order: 20,
+      label: 'Duplicate Layer',
+    });
+
+    api.addMenuItem('menu:layer:delete', {
+      commandId: 'remove_layer',
+      menuPath: 'layer',
+      group: 'create',
+      order: 30,
+      label: 'Delete Layer',
+    });
+
+    api.addCommand('merge_down', {
+      tier: 'project',
+      undoable: true,
+      execute(): MergeDownSnapshot | undefined {
+        const activeId = layerTree.getActiveLayerId();
+        if (!activeId) return;
+
+        // Find the top layer and the layer below it BEFORE any mutation.
+        const topLayer = layerTree.getLayer(activeId);
+        if (!topLayer || topLayer.type !== 'pixel') return;
+
+        // Locate the sibling directly below in the same parent array,
+        // mirroring the check in layerTree.mergeDown().
+        const parent = layerTree.getParent(activeId);
+        const siblings = parent?.children ?? layerTree.getLayers();
+        const sibIdx = siblings.findIndex((l) => l.id === activeId);
+        if (sibIdx <= 0) return;
+        const bottomLayer = siblings[sibIdx - 1];
+        if (!bottomLayer || bottomLayer.type !== 'pixel') return;
+
+        const { canvasWidth, canvasHeight } = canvasState;
+        const frames = getFrames();
+
+        // Snapshot tree and per-frame pixel data for both layers (for undo).
+        const pixelSnapshot: MergeDownPixelSnapshot = {
+          topLayerId: activeId,
+          bottomLayerId: bottomLayer.id,
+          frameData: frames.map((frame) => ({
+            frameId: frame.id,
+            topBuffer: frame.pixelData.get(activeId)?.clone(),
+            bottomBuffer: frame.pixelData.get(bottomLayer.id)?.clone(),
+          })),
+        };
+        const treeSnapshot = layerTree.serialize();
+
+        // Composite top layer pixels onto bottom layer for each frame.
+        for (const frame of frames) {
+          const topBuf = frame.pixelData.get(activeId);
+          if (!topBuf) {
+            // Top has no pixels in this frame -- nothing to merge, just clean up
+            frame.pixelData.delete(activeId);
+            continue;
+          }
+
+          const bottomBuf =
+            frame.pixelData.get(bottomLayer.id) ??
+            new PixelBuffer(canvasWidth, canvasHeight);
+
+          const merged = compositeTopOntoBottom(bottomBuf, topBuf, topLayer);
+          frame.pixelData.set(bottomLayer.id, merged);
+          frame.pixelData.delete(activeId);
+        }
+
+        // Structural merge: remove top layer from the tree, activate bottom.
+        try {
+          layerTree.mergeDown(activeId);
+        } catch {
+          // Should not happen since we pre-validated, but guard anyway.
+          return;
+        }
+
+        return { tree: treeSnapshot, pixels: pixelSnapshot };
+      },
+      undo(_params, _ctx, snapshot) {
+        const snap = snapshot as MergeDownSnapshot | undefined;
+        if (!snap) return;
+
+        // Restore the layer tree structure first.
+        layerTree.deserialize(snap.tree);
+
+        // Restore per-frame pixel data for both layers.
+        const { topLayerId, bottomLayerId, frameData } = snap.pixels;
+        const frames = getFrames();
+        for (const saved of frameData) {
+          const frame = frames.find((f) => f.id === saved.frameId);
+          if (!frame) continue;
+
+          if (saved.topBuffer) {
+            frame.pixelData.set(topLayerId, saved.topBuffer);
+          } else {
+            frame.pixelData.delete(topLayerId);
+          }
+
+          if (saved.bottomBuffer) {
+            frame.pixelData.set(bottomLayerId, saved.bottomBuffer);
+          } else {
+            frame.pixelData.delete(bottomLayerId);
+          }
+        }
+      },
+      describe() { return 'Merged layer down'; },
+      label: 'Merge Down',
+      category: 'Layer',
+      icon: ArrowDownToLine,
+    });
+    api.addMenuItem('menu:layer:merge-down', {
+      commandId: 'merge_down',
+      menuPath: 'layer',
+      group: 'merge',
+      order: 40,
+      label: 'Merge Down',
+    });
+
+    api.addCommand('flatten_group', {
+      tier: 'project',
+      undoable: true,
+      execute(params): FlattenGroupSnapshot | undefined {
+        const groupId = params["id"];
+        if (!groupId) return;
+        const group = layerTree.getLayer(groupId);
+        if (!group || group.type !== 'group') return;
+
+        // Snapshot tree structure before mutation
+        const treeSnapshot = layerTree.serialize();
+
+        // Collect all descendant pixel layer IDs whose data we need to
+        // snapshot (for undo) and remove (after compositing).
+        const descendantPixelIds = collectDescendantPixelIds(group);
+
+        const { canvasWidth, canvasHeight } = canvasState;
+        const frames = getFrames();
+
+        // Snapshot per-frame pixel data for all descendants, then composite
+        // and store the result under the replacement layer ID.
+        const framePixelSnapshots: FlattenGroupSnapshot['framePixelSnapshots'] = [];
+
+        // Perform the structural flatten first to get the replacement layer ID.
+        // We need the group's children (still in the tree) for compositing,
+        // so we snapshot the children list before flattenGroup removes them.
+        const childrenSnapshot = group.children ? [...group.children] : [];
+        const replacement = layerTree.flattenGroup(groupId);
+
+        // Now composite pixels per frame and manage pixelData maps
+        for (const frame of frames) {
+          // Snapshot all descendant pixel data entries for undo
+          const entries: FlattenGroupSnapshot['framePixelSnapshots'][number]['entries'] = [];
+          for (const layerId of descendantPixelIds) {
+            const buf = frame.pixelData.get(layerId);
+            if (buf) {
+              entries.push({ layerId, buffer: buf.clone() });
+            }
+          }
+          framePixelSnapshots.push({ frameId: frame.id, entries });
+
+          // Composite the group's children into a single buffer.
+          // Use the snapshotted children list since flattenGroup already
+          // removed them from the tree.
+          const composited = composite(
+            childrenSnapshot,
+            frame.pixelData,
+            canvasWidth,
+            canvasHeight,
+          );
+
+          // Store composited result under the replacement layer's ID
+          frame.pixelData.set(replacement.id, composited);
+
+          // Remove all descendant pixel data entries (they're now merged)
+          for (const layerId of descendantPixelIds) {
+            frame.pixelData.delete(layerId);
+          }
+        }
+
+        // Stash the group name on params so describe() can use it
+        params["_groupName"] = group.name;
+
+        return {
+          tree: treeSnapshot,
+          framePixelSnapshots,
+          replacementId: replacement.id,
+        };
+      },
+      undo(_params, _ctx, snapshot) {
+        const snap = snapshot as FlattenGroupSnapshot | undefined;
+        if (!snap) return;
+
+        // Restore tree structure (brings back the group and its children)
+        layerTree.deserialize(snap.tree);
+
+        // Restore per-frame pixel data: remove replacement entries, restore
+        // descendant entries.
+        const frames = getFrames();
+        for (const framePxSnap of snap.framePixelSnapshots) {
+          const frame = frames.find((f) => f.id === framePxSnap.frameId);
+          if (!frame) continue;
+
+          // Remove the composited replacement entry
+          frame.pixelData.delete(snap.replacementId);
+
+          // Restore all descendant pixel data
+          for (const entry of framePxSnap.entries) {
+            frame.pixelData.set(entry.layerId, entry.buffer.clone());
+          }
+        }
+      },
+      describe(params) {
+        return `Flattened group "${String(params["_groupName"] ?? params["id"])}"`;
+      },
+      label: 'Flatten Group',
+      category: 'Layer',
+      icon: Layers,
+    });
+    api.addMenuItem('menu:layer:flatten-group', {
+      commandId: 'flatten_group',
+      menuPath: 'layer',
+      group: 'merge',
+      order: 45,
+      label: 'Flatten Group',
+    });
+
+    api.addCommand('move_layer_up', {
+      tier: 'project',
+      execute() {
+        const activeId = layerTree.getActiveLayerId();
+        if (!activeId) return;
+        const parent = layerTree.getParent(activeId);
+        const siblings = parent?.children ?? layerTree.getLayers();
+        const idx = siblings.findIndex((l) => l.id === activeId);
+        // "Up" in the visual stack means higher index (layers are bottom-first)
+        if (idx < 0 || idx >= siblings.length - 1) return;
+        layerTree.moveLayer(activeId, parent?.id ?? null, idx + 1);
+      },
+      undo() {},
+      describe() { return 'Moved layer up'; },
+      label: 'Move Layer Up',
+      category: 'Layer',
+      icon: ArrowUp,
+    });
+    api.addMenuItem('menu:layer:move-up', {
+      commandId: 'move_layer_up',
+      menuPath: 'layer',
+      group: 'order',
+      order: 50,
+      label: 'Move Layer Up',
+    });
+
+    api.addCommand('move_layer_down', {
+      tier: 'project',
+      execute() {
+        const activeId = layerTree.getActiveLayerId();
+        if (!activeId) return;
+        const parent = layerTree.getParent(activeId);
+        const siblings = parent?.children ?? layerTree.getLayers();
+        const idx = siblings.findIndex((l) => l.id === activeId);
+        // "Down" in the visual stack means lower index (layers are bottom-first)
+        if (idx <= 0) return;
+        layerTree.moveLayer(activeId, parent?.id ?? null, idx - 1);
+      },
+      undo() {},
+      describe() { return 'Moved layer down'; },
+      label: 'Move Layer Down',
+      category: 'Layer',
+      icon: ArrowDown,
+    });
+    api.addMenuItem('menu:layer:move-down', {
+      commandId: 'move_layer_down',
+      menuPath: 'layer',
+      group: 'order',
+      order: 60,
+      label: 'Move Layer Down',
+    });
+
+    // --- Context menu: layer ---
+
+    api.addMenuItem('ctx:layer:add', {
+      commandId: 'add_layer',
+      menuPath: 'context/layer',
+      group: 'create',
+      order: 10,
+      label: 'Add Layer',
+    });
+    api.addMenuItem('ctx:layer:duplicate', {
+      commandId: 'duplicate_layer',
+      menuPath: 'context/layer',
+      group: 'create',
+      order: 20,
+      label: 'Duplicate Layer',
+    });
+    api.addMenuItem('ctx:layer:delete', {
+      commandId: 'remove_layer',
+      menuPath: 'context/layer',
+      group: 'manage',
+      order: 10,
+      label: 'Delete Layer',
+    });
+  },
+};

package/src/lib/ui/menu-builder.ts

@@ -0,0 +1,224 @@
+/**
+ * Menu tree builder -- transforms flat MenuContribution entries from the
+ * menuRegistry into a hierarchical menu tree suitable for rendering.
+ *
+ * The menuRegistry stores one MenuContribution per item (keyed by name).
+ * This module groups them by menuPath, sorts by group/order, and builds
+ * nested submenus when a menuPath has more than one segment.
+ */
+
+import { menuRegistry, commandRegistry } from '../core/registries.svelte.js';
+import { executeOrDispatch, getCommandForDispatch } from '../core/command-runner.js';
+import type { MenuContribution } from '../core/plugin-types.js';
+
+// --- Public types ---
+
+export interface MenuItem {
+  id: string;            // contribution name (registry key)
+  label: string;         // display label
+  shortcut?: string;     // keyboard shortcut display string
+  action?: () => void;   // command execute handler
+  disabled?: boolean;    // grayed out when true
+  separator?: boolean;   // group separator (not a real item)
+  children?: MenuItem[]; // submenu items (present when this is a submenu parent)
+}
+
+export interface MenuDefinition {
+  label: string;         // top-level menu label (e.g. "File", "Edit")
+  items: MenuItem[];     // grouped and sorted items
+}
+
+// --- Internal constants ---
+
+/**
+ * Well-known top-level menu order.
+ * Menus not in this list appear at the end in alphabetical order.
+ */
+const MENU_ORDER = ['file', 'edit', 'view', 'image', 'layer', 'animation', 'select', 'effects', 'context', 'help'];
+
+// --- Helpers ---
+
+/** Capitalize a menu path segment to a display label */
+function segmentToLabel(segment: string): string {
+  return segment.charAt(0).toUpperCase() + segment.slice(1);
+}
+
+/** Resolve the display label for a menu contribution */
+function resolveLabel(contrib: MenuContribution, _name: string): string {
+  if (contrib.label) return contrib.label;
+  const cmd = commandRegistry.get(contrib.commandId);
+  if (cmd?.label) return cmd.label;
+  // Fallback: humanize the commandId
+  return contrib.commandId.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+}
+
+/** Build a single MenuItem from a contribution */
+function buildMenuItem(contrib: MenuContribution, name: string): MenuItem {
+  const cmd = getCommandForDispatch(contrib.commandId);
+  const label = resolveLabel(contrib, name);
+  const disabled = contrib.enabled ? !contrib.enabled() : false;
+
+  // Omit shortcut/action when absent (exactOptionalPropertyTypes)
+  const item: MenuItem = {
+    id: name,
+    label,
+    disabled,
+  };
+  if (cmd?.defaultShortcut !== undefined) item.shortcut = cmd.defaultShortcut;
+  if (cmd) item.action = () => { executeOrDispatch(contrib.commandId, cmd); };
+  return item;
+}
+
+// --- Internal entry type used during tree construction ---
+
+interface MenuEntry {
+  path: string[];
+  contribution: MenuContribution;
+  name: string;
+}
+
+/**
+ * Build menu items from a list of entries, handling submenus and grouping.
+ * Direct items (single remaining path segment) are grouped by `group` field
+ * with separators between groups. Submenu items (multiple segments) recurse.
+ */
+function buildMenuItems(entries: MenuEntry[]): MenuItem[] {
+  // Separate direct items (path length <= 1) from submenu items (path length > 1)
+  const directItems: { contribution: MenuContribution; name: string }[] = [];
+  const submenuMap = new Map<string, MenuEntry[]>();
+
+  for (const entry of entries) {
+    if (entry.path.length <= 1) {
+      directItems.push(entry);
+    } else {
+      const submenuKey = entry.path[1];
+      if (submenuKey === undefined) continue;
+      let bucket = submenuMap.get(submenuKey);
+      if (!bucket) {
+        bucket = [];
+        submenuMap.set(submenuKey, bucket);
+      }
+      // Shift the path down by one level for recursive processing
+      bucket.push({
+        ...entry,
+        path: entry.path.slice(1),
+      });
+    }
+  }
+
+  // Group direct items by their group field
+  const groups = new Map<string, { contribution: MenuContribution; name: string }[]>();
+  for (const item of directItems) {
+    const g = item.contribution.group;
+    let bucket = groups.get(g);
+    if (!bucket) {
+      bucket = [];
+      groups.set(g, bucket);
+    }
+    bucket.push(item);
+  }
+
+  // Sort groups: "navigation" first, then alphabetically
+  const sortedGroups = [...groups.keys()].sort((a, b) => {
+    if (a === 'navigation') return -1;
+    if (b === 'navigation') return 1;
+    return a.localeCompare(b);
+  });
+
+  const result: MenuItem[] = [];
+
+  for (let gi = 0; gi < sortedGroups.length; gi++) {
+    const groupName = sortedGroups[gi];
+    if (groupName === undefined) continue;
+    const groupItems = groups.get(groupName);
+    if (!groupItems) continue;
+
+    // Sort items within group by order, then by label
+    groupItems.sort((a, b) => {
+      const orderDiff = a.contribution.order - b.contribution.order;
+      if (orderDiff !== 0) return orderDiff;
+      return resolveLabel(a.contribution, a.name).localeCompare(
+        resolveLabel(b.contribution, b.name),
+      );
+    });
+
+    // Separator between groups (not before the first)
+    if (gi > 0) {
+      result.push({ id: `sep-${groupName}`, label: '', separator: true });
+    }
+
+    for (const item of groupItems) {
+      result.push(buildMenuItem(item.contribution, item.name));
+    }
+  }
+
+  // Append submenus after direct items
+  for (const [submenuKey, subEntries] of submenuMap) {
+    const last = result[result.length - 1];
+    if (result.length > 0 && last && !last.separator) {
+      result.push({ id: `sep-sub-${submenuKey}`, label: '', separator: true });
+    }
+    result.push({
+      id: `submenu-${submenuKey}`,
+      label: segmentToLabel(submenuKey),
+      children: buildMenuItems(subEntries),
+    });
+  }
+
+  return result;
+}
+
+// --- Public API ---
+
+/**
+ * Build the full menu bar from the menuRegistry.
+ * Returns an ordered list of top-level menus, each with grouped/sorted items.
+ *
+ * Because menuRegistry is backed by SvelteMap, calling this inside a $derived
+ * expression will automatically re-evaluate when contributions change.
+ */
+export function buildMenuBar(): MenuDefinition[] {
+  const contributions = [...menuRegistry.getAll().entries()];
+
+  // Group contributions by top-level menu (first segment of menuPath)
+  const menuMap = new Map<string, MenuEntry[]>();
+
+  for (const [name, contrib] of contributions) {
+    // Evaluate conditional visibility
+    if (contrib.when && !contrib.when()) continue;
+
+    const segments = contrib.menuPath.split('/');
+    const topLevel = segments[0];
+    if (topLevel === undefined) continue;
+
+    let bucket = menuMap.get(topLevel);
+    if (!bucket) {
+      bucket = [];
+      menuMap.set(topLevel, bucket);
+    }
+    bucket.push({ path: segments, contribution: contrib, name });
+  }
+
+  // Sort top-level menus by MENU_ORDER, then alphabetically for unknowns
+  const sortedKeys = [...menuMap.keys()].sort((a, b) => {
+    const ai = MENU_ORDER.indexOf(a);
+    const bi = MENU_ORDER.indexOf(b);
+    if (ai !== -1 && bi !== -1) return ai - bi;
+    if (ai !== -1) return -1;
+    if (bi !== -1) return 1;
+    return a.localeCompare(b);
+  });
+
+  const menus: MenuDefinition[] = [];
+
+  for (const key of sortedKeys) {
+    const entries = menuMap.get(key);
+    if (!entries) continue;
+    menus.push({
+      label: segmentToLabel(key),
+      items: buildMenuItems(entries),
+    });
+  }
+
+  return menus;
+}