reframe-video 0.1.2 → 0.2.0

package/preview/src/store.ts

@@ -8,10 +8,15 @@
 import {
   composeScene,
   compileScene,
+  motionOp,
+  motionOpLabel,
   SceneValidationError,
   type BehaviorIR,
   type CompiledScene,
   type ComposeReport,
+  type MotionOpName,
+  type MotionOpOpts,
+  type NodeIR,
   type OverlayDoc,
   type PropValue,
   type SceneIR,
@@ -21,6 +26,12 @@ import {
 export type ChangeKind = "value" | "structure";
 type Listener = (kind: ChangeKind) => void;
 
+interface AddedOp {
+  name: MotionOpName;
+  target: string;
+  opts: MotionOpOpts;
+}
+
 export class EditorStore {
   base: SceneIR;
   draft: OverlayDoc;
@@ -28,8 +39,20 @@ export class EditorStore {
   report: ComposeReport | null = null;
   /** Set when the last recompose threw (overlay defect); compiled stays last-good. */
   composeError: string | null = null;
-  selectedId: string | null = null;
+  /** The selection (ordered; the last is the "primary"). Source of truth. */
+  selectedIds: string[] = [];
+  /** Primary selection (last selected), or null — keeps single-select reads working. */
+  get selectedId(): string | null {
+    return this.selectedIds[this.selectedIds.length - 1] ?? null;
+  }
   overlayName: string;
+  /** Motion ops added in the editor, keyed by their beat label (the source of
+   *  truth that regenerates draft.addTimeline + the ops' setup base props). */
+  addedOps = new Map<string, AddedOp>();
+  /** Editor-authored motionPaths (a node with no motion gets one via "add move"),
+   *  keyed by label — the source of truth for their draggable waypoints. */
+  addedPaths = new Map<string, { target: string; points: [number, number][]; duration: number; autoRotate?: boolean }>();
+  private opSetupKeys = new Set<string>();
 
   private listeners = new Set<Listener>();
 
@@ -64,6 +87,12 @@ export class EditorStore {
     this.recompose("value");
   }
 
+  /** Apply many node-prop patches in one recompose (multi-drag / bulk edit). */
+  setNodeProps(patches: { id: string; prop: string; value: PropValue }[]) {
+    for (const p of patches) ((this.draft.nodes ??= {})[p.id] ??= {})[p.prop] = p.value;
+    this.recompose("value");
+  }
+
   unsetNodeProp(id: string, prop: string) {
     delete this.draft.nodes?.[id]?.[prop];
     this.prune();
@@ -94,7 +123,7 @@ export class EditorStore {
 
   setTimelineParam(
     label: string,
-    key: "duration" | "ease" | "stagger" | "at" | "gap" | "scale" | "order",
+    key: "duration" | "ease" | "stagger" | "at" | "gap" | "scale" | "order" | "curviness",
     value: number | string,
   ) {
     ((this.draft.timeline ??= {})[label] ??= {})[key] = value as never;
@@ -113,15 +142,274 @@ export class EditorStore {
     return out;
   }
 
-  /** A dragged waypoint writes the whole points array as a timeline patch. */
+  /** A dragged/added waypoint writes the whole points array. For an editor-added
+   *  path the points live in addedPaths (its source of truth); for a base
+   *  motionPath it's an overlay timeline patch on the stable label. */
   setMotionPathPoints(label: string, points: [number, number][]) {
+    const added = this.addedPaths.get(label);
+    if (added) {
+      added.points = points;
+      this.regenerateOps();
+      return;
+    }
     ((this.draft.timeline ??= {})[label] ??= {}).points = points;
     this.recompose("value");
   }
 
+  /** Toggle "rotate to face the direction of travel" on a motionPath. Routes to
+   *  the editor-added path's source, or an overlay patch on a base path. */
+  setAutoRotate(label: string, on: boolean) {
+    const added = this.addedPaths.get(label);
+    if (added) {
+      added.autoRotate = on;
+      this.regenerateOps();
+      return;
+    }
+    ((this.draft.timeline ??= {})[label] ??= {}).autoRotate = on;
+    this.recompose("structure");
+  }
+
+  /** Current autoRotate state of a motionPath (composed). */
+  motionPathAutoRotate(label: string): boolean {
+    let on = false;
+    const walk = (tl: TimelineIR) => {
+      if (tl.kind === "motionPath" && tl.label === label) on = tl.autoRotate ?? false;
+      if ("children" in tl) tl.children.forEach(walk);
+    };
+    if (this.compiled.ir.timeline) walk(this.compiled.ir.timeline);
+    return on;
+  }
+
+  /** Give a motionless node its first move: a 2-point path from where it sits
+   *  now to `to`. Further bends come from double-clicking the path (as usual). */
+  addMove(target: string, to: [number, number], duration = 1) {
+    const node = this.findNode(this.compiled.ir.nodes, target);
+    if (!node || !("x" in node.props)) return;
+    const from: [number, number] = [
+      Math.round((node.props as { x: number }).x),
+      Math.round((node.props as { y: number }).y),
+    ];
+    this.addedPaths.set(`move-${target}`, { target, points: [from, [Math.round(to[0]), Math.round(to[1])]], duration });
+    this.regenerateOps();
+  }
+
+  /** "Add move" arming: the node awaiting a destination click on the canvas. */
+  pendingMove: string | null = null;
+  armMove(id: string) {
+    this.pendingMove = id;
+    this.notify("structure");
+  }
+  disarmMove() {
+    if (this.pendingMove !== null) {
+      this.pendingMove = null;
+      this.notify("structure");
+    }
+  }
+
+  /** True if the node is a scene-root node (its x/y are scene coords, so a
+   *  canvas click maps to its move path 1:1). */
+  isTopLevel(id: string): boolean {
+    return this.compiled.ir.nodes.some((n) => n.id === id);
+  }
+
+  /** True if the node already has a motionPath (base or editor-added). */
+  hasMotionPath(target: string): boolean {
+    let found = false;
+    const walk = (tl: TimelineIR) => {
+      if (tl.kind === "motionPath" && tl.target === target) found = true;
+      if ("children" in tl) tl.children.forEach(walk);
+    };
+    if (this.compiled.ir.timeline) walk(this.compiled.ir.timeline);
+    return found;
+  }
+
+  /** A reshaped ease curve writes a cubic-bezier ease on a timeline step.
+   *  (setTimelineParam only takes number|string, so eases need their own setter.) */
+  setTimelineEase(label: string, bezier: [number, number, number, number]) {
+    ((this.draft.timeline ??= {})[label] ??= {}).ease = { cubicBezier: bezier };
+    this.recompose("value");
+  }
+
+  private findBaseNode(id: string): NodeIR | null {
+    const walk = (nodes: NodeIR[]): NodeIR | null => {
+      for (const n of nodes) {
+        if (n.id === id) return n;
+        if (n.type === "group") {
+          const hit = walk(n.children);
+          if (hit) return hit;
+        }
+      }
+      return null;
+    };
+    return walk(this.base.nodes);
+  }
+
+  /** Add a motion op to a node ("add motion ▸ <op>"). Captures the node's base
+   *  transform so scale/position ops are correct; appended via addTimeline. */
+  addMotionOp(name: MotionOpName, target: string, amount = 1) {
+    const p = (this.findBaseNode(target)?.props ?? {}) as { scale?: number; x?: number; y?: number; rotation?: number };
+    const opts: MotionOpOpts = { amount, base: { scale: p.scale ?? 1, x: p.x ?? 0, y: p.y ?? 0, rotation: p.rotation ?? 0 } };
+    this.addedOps.set(motionOpLabel(name, target), { name, target, opts });
+    this.regenerateOps();
+  }
+
+  setOpAmount(label: string, amount: number) {
+    const op = this.addedOps.get(label);
+    if (!op) return;
+    op.opts = { ...op.opts, amount };
+    this.regenerateOps();
+  }
+
+  removeMotionOp(label: string) {
+    if (this.addedOps.delete(label)) this.regenerateOps();
+  }
+
+  /** Rebuild draft.addTimeline + the ops' setup base props from addedOps. */
+  private regenerateOps() {
+    for (const k of this.opSetupKeys) {
+      const dot = k.lastIndexOf(".");
+      const id = k.slice(0, dot);
+      const prop = k.slice(dot + 1);
+      if (this.draft.nodes?.[id]) delete this.draft.nodes[id]![prop];
+    }
+    this.opSetupKeys.clear();
+    const frags: TimelineIR[] = [];
+    for (const op of this.addedOps.values()) {
+      const r = motionOp(op.name, op.target, op.opts);
+      frags.push(r.timeline);
+      for (const [id, props] of Object.entries(r.setup ?? {})) {
+        for (const [prop, val] of Object.entries(props)) {
+          ((this.draft.nodes ??= {})[id] ??= {})[prop] = val;
+          this.opSetupKeys.add(`${id}.${prop}`);
+        }
+      }
+    }
+    for (const [label, p] of this.addedPaths) {
+      frags.push({ kind: "motionPath", target: p.target, points: p.points, duration: p.duration, label, ...(p.autoRotate && { autoRotate: true }) });
+    }
+    if (frags.length > 0) this.draft.addTimeline = frags;
+    else delete this.draft.addTimeline;
+    this.recompose("structure");
+  }
+
+  // --- add / duplicate / remove nodes (overlay-owned) ---
+
+  /** Every node id currently in the composed scene (base + overlay-added). */
+  private allNodeIds(): Set<string> {
+    const ids = new Set<string>();
+    const walk = (nodes: NodeIR[]) => {
+      for (const n of nodes) {
+        ids.add(n.id);
+        if (n.type === "group") walk(n.children);
+      }
+    };
+    walk(this.compiled.ir.nodes);
+    for (const n of this.draft.addNodes ?? []) ids.add(n.id);
+    return ids;
+  }
+
+  private uniqueId(base: string): string {
+    const ids = this.allNodeIds();
+    if (!ids.has(base)) return base;
+    for (let i = 2; ; i++) if (!ids.has(`${base}-${i}`)) return `${base}-${i}`;
+  }
+
+  /** True for nodes this overlay added (the only ones removeNode can drop). */
+  isAddedNode(id: string): boolean {
+    return Boolean(this.draft.addNodes?.some((n) => n.id === id));
+  }
+
+  /** Append a fresh node of any type at scene centre; owned by the overlay.
+   *  `extra` carries type-specific inputs (image `src`, path `d`/`fill`). */
+  addNode(type: NodeIR["type"], extra: Record<string, unknown> = {}): string {
+    const x = extra.x !== undefined ? Math.round(Number(extra.x)) : Math.round(this.base.size.width / 2);
+    const y = extra.y !== undefined ? Math.round(Number(extra.y)) : Math.round(this.base.size.height / 2);
+    const id = this.uniqueId(type);
+    let node: NodeIR;
+    switch (type) {
+      case "text":
+        node = { type, id, props: { x, y, anchor: "center", content: "Text", fontFamily: "Inter", fontSize: 64, fontWeight: 700, fill: "#FFFFFF" } };
+        break;
+      case "rect":
+        node = { type, id, props: { x, y, anchor: "center", width: 220, height: 130, fill: "#FF4D00", radius: 10 } };
+        break;
+      case "ellipse":
+        node = { type, id, props: { x, y, anchor: "center", width: 160, height: 160, fill: "#00C2A8" } };
+        break;
+      case "line":
+        node = { type, id, props: { x1: x - 120, y1: y, x2: x + 120, y2: y, stroke: "#FFFFFF", strokeWidth: 4 } };
+        break;
+      case "image":
+        node = { type, id, props: { x, y, anchor: "center", src: String(extra.src ?? ""), width: Number(extra.width ?? 320), height: Number(extra.height ?? 200) } };
+        break;
+      case "path":
+        node = { type, id, props: { x, y, anchor: "center", d: String(extra.d ?? ""), ...(extra.fill !== undefined && { fill: String(extra.fill) }), ...(extra.stroke !== undefined && { stroke: String(extra.stroke) }), originX: Number(extra.originX ?? 0), originY: Number(extra.originY ?? 0), ...(extra.scale !== undefined && { scale: Number(extra.scale) }) } };
+        break;
+      default:
+        node = { type: "group", id, props: { x, y }, children: [] };
+    }
+    (this.draft.addNodes ??= []).push(node);
+    this.selectedIds = [id];
+    this.recompose("structure");
+    return id;
+  }
+
+  /** Clone a node to the scene root (overlay-owned), offset so it's visible. */
+  duplicateNode(id: string): string | null {
+    const src = this.findNode(this.compiled.ir.nodes, id);
+    if (!src) return null;
+    const clone = structuredClone(src) as NodeIR;
+    clone.id = this.uniqueId(`${id}-copy`);
+    const reId = (n: NodeIR) => {
+      if (n.id !== clone.id) n.id = this.uniqueId(n.id);
+      if (n.type === "group") n.children.forEach(reId);
+    };
+    if (clone.type === "group") clone.children.forEach(reId);
+    if ("x" in clone.props) {
+      (clone.props as { x: number; y: number }).x += 24;
+      (clone.props as { x: number; y: number }).y += 24;
+    }
+    (this.draft.addNodes ??= []).push(clone);
+    this.selectedIds = [clone.id];
+    this.recompose("structure");
+    return clone.id;
+  }
+
+  /** Remove an overlay-added node (base nodes can't be removed — hide instead).
+   *  Returns false if id is a base node so the caller can offer "hide". */
+  removeNode(id: string): boolean {
+    const list = this.draft.addNodes;
+    const index = list?.findIndex((n) => n.id === id) ?? -1;
+    if (!list || index < 0) return false;
+    list.splice(index, 1);
+    if (list.length === 0) delete this.draft.addNodes;
+    delete this.draft.nodes?.[id];
+    for (const [label, op] of this.addedOps) if (op.target === id) this.addedOps.delete(label);
+    this.selectedIds = this.selectedIds.filter((s) => s !== id);
+    this.prune();
+    this.regenerateOps(); // rebuilds addTimeline + recomposes
+    return true;
+  }
+
+  /** Non-destructive "delete" for a base node: hide it via opacity 0. */
+  hideNode(id: string) {
+    this.setNodeProp(id, "opacity", 0);
+  }
+
+  private findNode(nodes: NodeIR[], id: string): NodeIR | null {
+    for (const n of nodes) {
+      if (n.id === id) return n;
+      if (n.type === "group") {
+        const hit = this.findNode(n.children, id);
+        if (hit) return hit;
+      }
+    }
+    return null;
+  }
+
   unsetTimelineParam(
     label: string,
-    key: "duration" | "ease" | "stagger" | "at" | "gap" | "scale" | "order",
+    key: "duration" | "ease" | "stagger" | "at" | "gap" | "scale" | "order" | "curviness",
   ) {
     delete this.draft.timeline?.[label]?.[key];
     this.prune();
@@ -153,8 +441,30 @@ export class EditorStore {
     this.recompose("structure");
   }
 
-  select(id: string | null) {
-    this.selectedId = id;
+  /** Select a node: replace the selection, or (additive) toggle it in/out. null clears. */
+  select(id: string | null, additive = false) {
+    if (id === null) {
+      this.selectedIds = [];
+    } else if (additive) {
+      const i = this.selectedIds.indexOf(id);
+      if (i >= 0) this.selectedIds.splice(i, 1);
+      else this.selectedIds.push(id);
+    } else {
+      this.selectedIds = [id];
+    }
+    if (this.pendingMove !== null && !this.selectedIds.includes(this.pendingMove)) this.pendingMove = null;
+    this.notify("structure");
+  }
+
+  /** Set/merge a whole list of ids as the selection (marquee, select-all). */
+  selectMany(ids: string[], additive = false) {
+    if (additive) {
+      const set = new Set(this.selectedIds);
+      for (const id of ids) set.add(id);
+      this.selectedIds = [...set];
+    } else {
+      this.selectedIds = [...new Set(ids)];
+    }
     this.notify("structure");
   }
 
@@ -237,6 +547,13 @@ export class EditorStore {
       this.composeError =
         err instanceof SceneValidationError ? err.message : String(err);
     }
+    // drop any selected ids that no longer exist (a delete/import removed them)
+    if (this.selectedIds.length > 0) {
+      const live = this.allNodeIds();
+      if (this.selectedIds.some((id) => !live.has(id))) {
+        this.selectedIds = this.selectedIds.filter((id) => live.has(id));
+      }
+    }
     this.notify(kind);
   }