pixelweaver 0.1.0

package/src/lib/animation/animation-commands.ts

@@ -0,0 +1,540 @@
+/**
+ * Animation Commands Plugin -- registers animation operations as undoable commands.
+ *
+ * All structural frame/tag operations are tier: 'project'.
+ * Drawing on a frame is tier: 'frame' (handled by existing drawing tools).
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import type { Frame } from './frame-model.svelte.js';
+import { PixelBuffer } from '../canvas/pixel-buffer.js';
+import * as frameModel from './frame-model.svelte.js';
+import * as frameTags from './frame-tags.svelte.js';
+import { notificationState } from '../core/notification-state.svelte.js';
+import { frameSelection } from './frame-selection.svelte.js';
+
+// --- Frame clipboard ---
+
+/**
+ * Module-level clipboard for frame copy-paste. Stores a deep-copied map of
+ * layerId -> PixelBuffer from the copied frame. Separate from the pixel-level
+ * clipboard in edit/clipboard-state.js.
+ */
+let copiedFrames: Array<Map<string, PixelBuffer>> | null = null;
+
+/** Whether the frame clipboard has content. Used by UI to conditionally enable paste. */
+export function hasFrameClipboard(): boolean {
+  return copiedFrames !== null && copiedFrames.length > 0;
+}
+
+// --- Snapshot helpers ---
+
+/** Snapshot a frame for undo restore (deep copy pixel data). */
+function snapshotFrame(frame: Frame): {
+  id: string;
+  index: number;
+  durationMs: number | null;
+  pixelDataEntries: { layerId: string; width: number; height: number; data: Uint8ClampedArray }[];
+} {
+  const pixelDataEntries: { layerId: string; width: number; height: number; data: Uint8ClampedArray }[] = [];
+  for (const [layerId, buffer] of frame.pixelData) {
+    pixelDataEntries.push({
+      layerId,
+      width: buffer.width,
+      height: buffer.height,
+      data: new Uint8ClampedArray(buffer.data),
+    });
+  }
+  return {
+    id: frame.id,
+    index: frame.index,
+    durationMs: frame.durationMs,
+    pixelDataEntries,
+  };
+}
+
+/** Restore a frame from a snapshot. */
+function restoreFrameFromSnapshot(snapshot: ReturnType<typeof snapshotFrame>): void {
+  const pixelData = new Map<string, PixelBuffer>();
+  for (const entry of snapshot.pixelDataEntries) {
+    pixelData.set(entry.layerId, new PixelBuffer(entry.width, entry.height, entry.data));
+  }
+  const frame: Frame = {
+    id: snapshot.id,
+    index: snapshot.index,
+    durationMs: snapshot.durationMs,
+    pixelData,
+  };
+  frameModel._insertFrameAt(snapshot.index, frame);
+}
+
+// --- Snapshot types for each command ---
+
+type AddFrameSnapshot = { frameIndex: number; previousFrameIndex: number };
+type RemoveFrameSnapshot = {
+  frame: ReturnType<typeof snapshotFrame>;
+  previousFrameIndex: number;
+};
+type DuplicateFrameSnapshot = { newFrameIndex: number };
+type SetFrameDurationSnapshot = { oldDurationMs: number | null };
+type SetGlobalFpsSnapshot = { oldFps: number };
+type AddTagSnapshot = { tagId: string };
+type RemoveTagSnapshot = {
+  name: string;
+  color: string;
+  startFrame: number;
+  endFrame: number;
+  parentId: string | null;
+};
+type SetOriginSnapshot = { oldX: number; oldY: number };
+type PasteFrameSnapshot = { pastedFrameIndices: number[] };
+type ReorderFramesSnapshot = {
+  previousOrder: string[];
+};
+type DeleteSelectedFramesSnapshot = {
+  removedFrames: ReturnType<typeof snapshotFrame>[];
+  previousFrameIndex: number;
+};
+
+export const animationCommandsPlugin: PluginModule = {
+  name: 'builtin/animation',
+  version: '1.0.0',
+  description: 'Animation frame and tag management commands',
+  dependencies: ['builtin/layers'],
+
+  register(api) {
+    // --- add_frame ---
+    api.addCommand('add_frame', {
+      tier: 'project',
+      execute(params) {
+        const afterIndex = params["afterIndex"];
+        const duplicate = params["duplicate"];
+        const previousFrameIndex = frameModel.getCurrentFrameIndex();
+        // Build options object without undefined values (exactOptionalPropertyTypes)
+        const addFrameOptions: { afterIndex?: number; duplicate?: boolean } = {};
+        if (afterIndex !== undefined) addFrameOptions.afterIndex = afterIndex;
+        if (duplicate !== undefined) addFrameOptions.duplicate = duplicate;
+        const frame = frameModel.addFrame(addFrameOptions);
+        const snapshot: AddFrameSnapshot = {
+          frameIndex: frame.index,
+          previousFrameIndex,
+        };
+        return snapshot;
+      },
+      undo(_params, _ctx, snapshot) {
+        const typed = snapshot as AddFrameSnapshot | undefined;
+        if (!typed) return;
+        frameModel._removeFrameAt(typed.frameIndex);
+        // Restore previous current frame
+        const frames = frameModel.getFrames();
+        if (frames.length > 0 && typed.previousFrameIndex < frames.length) {
+          frameModel.setCurrentFrame(typed.previousFrameIndex);
+        }
+      },
+      describe(params) {
+        return params["duplicate"] ? 'Duplicated frame' : 'Added frame';
+      },
+    });
+
+    // --- remove_frame ---
+    api.addCommand('remove_frame', {
+      tier: 'project',
+      execute(params) {
+        const index = params["index"];
+        const frames = frameModel.getFrames();
+        const target = frames[index];
+        if (!target) return;
+        // Snapshot for undo
+        const snapshot: RemoveFrameSnapshot = {
+          frame: snapshotFrame(target),
+          previousFrameIndex: frameModel.getCurrentFrameIndex(),
+        };
+        frameModel.removeFrame(index);
+        return snapshot;
+      },
+      undo(_params, _ctx, snapshot) {
+        const typed = snapshot as RemoveFrameSnapshot | undefined;
+        if (!typed) return;
+        restoreFrameFromSnapshot(typed.frame);
+        const frames = frameModel.getFrames();
+        if (frames.length > 0 && typed.previousFrameIndex < frames.length) {
+          frameModel.setCurrentFrame(typed.previousFrameIndex);
+        }
+      },
+      describe() {
+        return 'Removed frame';
+      },
+    });
+
+    // --- duplicate_frame ---
+    api.addCommand('duplicate_frame', {
+      tier: 'project',
+      execute(params) {
+        const index = params["index"];
+        const frame = frameModel.duplicateFrame(index);
+        const snapshot: DuplicateFrameSnapshot = { newFrameIndex: frame.index };
+        return snapshot;
+      },
+      undo(_params, _ctx, snapshot) {
+        const typed = snapshot as DuplicateFrameSnapshot | undefined;
+        if (!typed) return;
+        frameModel._removeFrameAt(typed.newFrameIndex);
+      },
+      describe() {
+        return 'Duplicated frame';
+      },
+    });
+
+    // --- reorder_frame ---
+    api.addCommand('reorder_frame', {
+      tier: 'project',
+      execute(params) {
+        const fromIndex = params["fromIndex"];
+        const toIndex = params["toIndex"];
+        frameModel.reorderFrame(fromIndex, toIndex);
+      },
+      undo(params) {
+        // Reverse the reorder
+        const fromIndex = params["fromIndex"];
+        const toIndex = params["toIndex"];
+        frameModel.reorderFrame(toIndex, fromIndex);
+      },
+      describe(params) {
+        return `Reordered frame ${String(params["fromIndex"])} to ${String(params["toIndex"])}`;
+      },
+    });
+
+    // --- reorder_frames (bulk) ---
+    api.addCommand('reorder_frames', {
+      tier: 'project',
+      execute(params) {
+        const fromIndices: number[] = params["fromIndices"];
+        const toIndex: number = params["toIndex"];
+        // Snapshot the full frame ID order before reordering so undo can restore it
+        const previousOrder = frameModel.getFrames().map((f) => f.id);
+        frameModel.reorderFrames(fromIndices, toIndex);
+        return { previousOrder } as ReorderFramesSnapshot;
+      },
+      undo(_params, _ctx, snapshot) {
+        const typed = snapshot as ReorderFramesSnapshot | undefined;
+        if (!typed) return;
+        // Restore frames to their original order by ID
+        const currentFrames = frameModel.getFrames();
+        const byId = new Map(currentFrames.map((f) => [f.id, f]));
+        const restored = typed.previousOrder.map((id) => byId.get(id)).filter(Boolean) as Frame[];
+        // Replace in-place: splice everything out and back in
+        currentFrames.splice(0, currentFrames.length, ...restored);
+        // Re-index to fix .index fields
+        for (let i = 0; i < currentFrames.length; i++) {
+          const f = currentFrames[i];
+          if (f) f.index = i;
+        }
+      },
+      describe(params) {
+        const count = (params["fromIndices"] as number[]).length;
+        return `Reordered ${String(count)} frames`;
+      },
+    });
+
+    // --- set_frame_duration ---
+    api.addCommand('set_frame_duration', {
+      tier: 'project',
+      execute(params) {
+        const index = params["index"];
+        const durationMs = params["durationMs"];
+        const frames = frameModel.getFrames();
+        const target = frames[index];
+        if (!target) return;
+        const snapshot: SetFrameDurationSnapshot = {
+          oldDurationMs: target.durationMs,
+        };
+        frameModel.setFrameDuration(index, durationMs);
+        return snapshot;
+      },
+      undo(params, _ctx, snapshot) {
+        const typed = snapshot as SetFrameDurationSnapshot | undefined;
+        if (!typed) return;
+        const index = params["index"];
+        frameModel.setFrameDuration(index, typed.oldDurationMs);
+      },
+      describe(params) {
+        const ms = params["durationMs"];
+        return ms !== null ? `Set frame duration to ${String(ms)}ms` : 'Reset frame duration to global FPS';
+      },
+    });
+
+    // --- set_global_fps ---
+    api.addCommand('set_global_fps', {
+      tier: 'project',
+      execute(params) {
+        const snapshot: SetGlobalFpsSnapshot = { oldFps: frameModel.getGlobalFps() };
+        frameModel.setGlobalFps(params["fps"]);
+        return snapshot;
+      },
+      undo(_params, _ctx, snapshot) {
+        const typed = snapshot as SetGlobalFpsSnapshot | undefined;
+        if (!typed) return;
+        frameModel.setGlobalFps(typed.oldFps);
+      },
+      describe(params) {
+        return `Set global FPS to ${String(params["fps"])}`;
+      },
+    });
+
+    // --- add_tag ---
+    api.addCommand('add_tag', {
+      tier: 'project',
+      execute(params) {
+        // Build options object without undefined values (exactOptionalPropertyTypes)
+        const tagOptions: { color?: string; parentId?: string } = {};
+        if (params["color"] !== undefined) tagOptions.color = params["color"];
+        if (params["parentId"] !== undefined) tagOptions.parentId = params["parentId"];
+        const tag = frameTags.addTag(
+          params["name"],
+          params["startFrame"],
+          params["endFrame"],
+          tagOptions,
+        );
+        const snapshot: AddTagSnapshot = { tagId: tag.id };
+        return snapshot;
+      },
+      undo(_params, _ctx, snapshot) {
+        const typed = snapshot as AddTagSnapshot | undefined;
+        if (!typed) return;
+        frameTags.removeTag(typed.tagId);
+      },
+      describe(params) {
+        return `Added tag "${String(params["name"])}"`;
+      },
+    });
+
+    // --- remove_tag ---
+    api.addCommand('remove_tag', {
+      tier: 'project',
+      execute(params) {
+        const tag = frameTags.getTag(params["id"]);
+        if (!tag) return;
+        // Stash the name on params so describe() can use it (describe only gets params)
+        params["_removedName"] = tag.name;
+        // Snapshot for undo
+        const snapshot: RemoveTagSnapshot = {
+          name: tag.name,
+          color: tag.color,
+          startFrame: tag.startFrame,
+          endFrame: tag.endFrame,
+          parentId: tag.parentId,
+        };
+        frameTags.removeTag(params["id"]);
+        return snapshot;
+      },
+      undo(_params, _ctx, snapshot) {
+        const typed = snapshot as RemoveTagSnapshot | undefined;
+        if (typed) {
+          // Build options object without undefined values (exactOptionalPropertyTypes)
+          const restoreOptions: { color?: string; parentId?: string } = { color: typed.color };
+          if (typed.parentId !== null) restoreOptions.parentId = typed.parentId;
+          frameTags.addTag(typed.name, typed.startFrame, typed.endFrame, restoreOptions);
+        }
+      },
+      describe(params) {
+        return `Removed tag "${String(params["_removedName"] ?? params["id"])}"`;
+      },
+    });
+
+    // --- set_origin ---
+    api.addCommand('set_origin', {
+      tier: 'project',
+      execute(params) {
+        const snapshot: SetOriginSnapshot = {
+          oldX: frameModel.getOriginX(),
+          oldY: frameModel.getOriginY(),
+        };
+        frameModel.setOrigin(params["x"], params["y"]);
+        return snapshot;
+      },
+      undo(_params, _ctx, snapshot) {
+        const typed = snapshot as SetOriginSnapshot | undefined;
+        if (!typed) return;
+        frameModel.setOrigin(typed.oldX, typed.oldY);
+      },
+      describe(params) {
+        return `Set origin to (${String(params["x"])}, ${String(params["y"])})`;
+      },
+    });
+
+    // --- copy_frame ---
+    api.addCommand('copy_frame', {
+      tier: 'project',
+      execute() {
+        const allFrames = frameModel.getFrames();
+
+        // If multiple frames selected, copy them all (sorted by index);
+        // otherwise fall back to copying the current frame.
+        const indicesToCopy =
+          frameSelection.count > 1
+            ? frameSelection.sortedIndices
+            : [frameModel.getCurrentFrameIndex()];
+
+        copiedFrames = indicesToCopy.map((idx) => {
+          const cloned = new Map<string, PixelBuffer>();
+          const frame = allFrames[idx];
+          if (!frame) return cloned;
+          for (const [layerId, buffer] of frame.pixelData) {
+            cloned.set(layerId, buffer.clone());
+          }
+          return cloned;
+        });
+
+        notificationState.push({
+          id: 'frame-copied',
+          message: `Copied ${String(copiedFrames.length)} frame(s)`,
+          type: 'info',
+          autoDismissMs: 1500,
+        });
+      },
+      undo() {},
+      describe() {
+        return 'Copied frame(s)';
+      },
+      label: 'Copy Frame',
+      category: 'Animation',
+    });
+
+    // --- paste_frame ---
+    api.addCommand('paste_frame', {
+      tier: 'project',
+      undoable: true,
+      execute() {
+        if (!copiedFrames || copiedFrames.length === 0) {
+          notificationState.push({
+            id: 'no-frame-copied',
+            message: 'No frame copied',
+            type: 'warning',
+            autoDismissMs: 3000,
+          });
+          return;
+        }
+
+        const currentIdx = frameModel.getCurrentFrameIndex();
+        const pastedIndices: number[] = [];
+
+        // Insert each copied frame sequentially after the current frame
+        for (let i = 0; i < copiedFrames.length; i++) {
+          const insertAfter = currentIdx + i;
+          const newFrame = frameModel.addFrame({ afterIndex: insertAfter });
+          // Copy clipboard pixel data into the new frame
+          const src = copiedFrames[i];
+          if (src) {
+            for (const [layerId, buffer] of src) {
+              newFrame.pixelData.set(layerId, buffer.clone());
+            }
+          }
+          pastedIndices.push(newFrame.index);
+        }
+
+        notificationState.push({
+          id: 'frame-pasted',
+          message: `Pasted ${String(pastedIndices.length)} frame(s)`,
+          type: 'info',
+          autoDismissMs: 1500,
+        });
+
+        const snapshot: PasteFrameSnapshot = { pastedFrameIndices: pastedIndices };
+        return snapshot;
+      },
+      undo(_params, _ctx, snapshot) {
+        const typed = snapshot as PasteFrameSnapshot | undefined;
+        if (!typed) return;
+        // Remove pasted frames in reverse order to preserve indices
+        const sorted = [...typed.pastedFrameIndices].sort((a, b) => b - a);
+        for (const idx of sorted) {
+          frameModel._removeFrameAt(idx);
+        }
+      },
+      describe() {
+        return 'Pasted frame(s)';
+      },
+      label: 'Paste Frame',
+      category: 'Animation',
+    });
+
+    // --- delete_selected_frames ---
+    api.addCommand('delete_selected_frames', {
+      tier: 'project',
+      undoable: true,
+      execute() {
+        const allFrames = frameModel.getFrames();
+
+        // Use multi-selection if available, otherwise fall back to current frame
+        const indicesToDelete =
+          frameSelection.count > 1
+            ? frameSelection.sortedIndices
+            : [frameModel.getCurrentFrameIndex()];
+
+        if (allFrames.length <= 1) {
+          notificationState.push({
+            id: 'cannot-delete-last-frame',
+            message: 'Cannot delete the last frame',
+            type: 'warning',
+            autoDismissMs: 3000,
+          });
+          return;
+        }
+
+        const previousFrameIndex = frameModel.getCurrentFrameIndex();
+        // Snapshot frames before removal (sorted ascending)
+        const snapshots = indicesToDelete.flatMap((idx) => {
+          const f = allFrames[idx];
+          return f ? [snapshotFrame(f)] : [];
+        });
+
+        frameModel.removeFrames(indicesToDelete);
+        frameSelection.reset();
+
+        const count = snapshots.length;
+        notificationState.push({
+          id: 'frames-deleted',
+          message: `Deleted ${String(count)} frame(s)`,
+          type: 'info',
+          autoDismissMs: 1500,
+        });
+
+        const snapshot: DeleteSelectedFramesSnapshot = {
+          removedFrames: snapshots,
+          previousFrameIndex,
+        };
+        return snapshot;
+      },
+      undo(_params, _ctx, snapshot) {
+        const typed = snapshot as DeleteSelectedFramesSnapshot | undefined;
+        if (!typed) return;
+        // Rebuild Frame objects from snapshots and insert each at its
+        // original position (ascending order so each insertion correctly
+        // shifts subsequent indices)
+        for (const snap of typed.removedFrames) {
+          const pixelData = new Map<string, PixelBuffer>();
+          for (const entry of snap.pixelDataEntries) {
+            pixelData.set(entry.layerId, new PixelBuffer(entry.width, entry.height, entry.data));
+          }
+          const frame: Frame = {
+            id: snap.id,
+            index: snap.index,
+            durationMs: snap.durationMs,
+            pixelData,
+          };
+          frameModel._insertFrameAt(snap.index, frame);
+        }
+        // Restore previous current frame if valid
+        const allFrames = frameModel.getFrames();
+        if (typed.previousFrameIndex < allFrames.length) {
+          frameModel.setCurrentFrame(typed.previousFrameIndex);
+        }
+      },
+      describe() {
+        return 'Deleted frame(s)';
+      },
+      label: 'Delete Selected Frames',
+      category: 'Animation',
+    });
+  },
+};

package/src/lib/animation/animation-preview-panel-plugin.ts

@@ -0,0 +1,25 @@
+/**
+ * Animation Preview Panel Plugin -- registers AnimationPreviewPanel
+ * as a dockable panel. The panel plays back the current animation using
+ * the animation-preview state machine and composites frames on demand.
+ *
+ * Discovered by bootstrap via the `*-plugin.ts` glob.
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import AnimationPreviewPanel from './AnimationPreviewPanel.svelte';
+
+export const animationPreviewPanelPlugin: PluginModule = {
+  name: 'ui/animation-preview-panel',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    api.addPanel('animation-preview', {
+      title: 'Animation Preview',
+      component: AnimationPreviewPanel,
+      position: 'right',
+      minWidth: 180,
+      maxWidth: 400,
+    });
+  },
+};