@hyperframes/studio 0.7.89 → 0.7.92

package/src/player/components/TimelineOverlays.test.ts

@@ -0,0 +1,161 @@
+// @vitest-environment happy-dom
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { TimelineElement } from "../store/playerStore";
+import { usePlayerStore } from "../store/playerStore";
+import { type KeyframeDiamondContextMenuState } from "./KeyframeDiamondContextMenu";
+import { TimelineOverlays, resolveTimelineContextElement } from "./TimelineOverlays";
+import { defaultTimelineTheme } from "./timelineTheme";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const roots: Root[] = [];
+afterEach(() => {
+  for (const root of roots.splice(0)) act(() => root.unmount());
+  document.body.innerHTML = "";
+  usePlayerStore.setState({ selectedElementId: null, timelineSessionEpoch: 0 });
+});
+
+const captured: TimelineElement = {
+  id: "child",
+  key: "parent::child",
+  tag: "div",
+  start: 1,
+  duration: 2,
+  track: 3,
+};
+
+describe("resolveTimelineContextElement", () => {
+  it("returns the current expanded model instead of the captured snapshot", () => {
+    const current = { ...captured, start: 4, track: 7 };
+
+    expect(
+      resolveTimelineContextElement({
+        capturedElement: captured,
+        targetSessionEpoch: 2,
+        sessionEpoch: 2,
+        selectedElementId: "parent::child",
+        elements: [current],
+      }),
+    ).toBe(current);
+  });
+
+  it("resolves synthetic expanded children that are absent from raw store elements", () => {
+    expect(
+      resolveTimelineContextElement({
+        capturedElement: captured,
+        targetSessionEpoch: 2,
+        sessionEpoch: 2,
+        selectedElementId: "parent::child",
+        elements: [captured],
+      }),
+    ).toBe(captured);
+  });
+
+  it("rejects stale sessions, changed selection, and removed elements", () => {
+    const input = {
+      capturedElement: captured,
+      targetSessionEpoch: 2,
+      sessionEpoch: 2,
+      selectedElementId: "parent::child",
+      elements: [captured],
+    };
+
+    expect(resolveTimelineContextElement({ ...input, sessionEpoch: 3 })).toBeNull();
+    expect(resolveTimelineContextElement({ ...input, selectedElementId: "other" })).toBeNull();
+    expect(resolveTimelineContextElement({ ...input, elements: [] })).toBeNull();
+  });
+});
+
+function renderKeyframeOverlay(options: {
+  capturedElement: TimelineElement;
+  currentElement: TimelineElement;
+  setKfContextMenu?: ReturnType<typeof vi.fn>;
+  onDeleteAllKeyframes?: ReturnType<typeof vi.fn>;
+}) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  roots.push(root);
+  const elements = [options.currentElement];
+  const setKfContextMenu = options.setKfContextMenu ?? vi.fn();
+  const onDeleteAllKeyframes = options.onDeleteAllKeyframes ?? vi.fn();
+  const menu: KeyframeDiamondContextMenuState = {
+    x: 10,
+    y: 10,
+    sessionEpoch: 2,
+    element: options.capturedElement,
+    elementId: options.capturedElement.key ?? options.capturedElement.id,
+    percentage: 50,
+    animationId: "child-position",
+  };
+
+  act(() => {
+    usePlayerStore.setState({
+      selectedElementId: options.capturedElement.key ?? options.capturedElement.id,
+      timelineSessionEpoch: 2,
+    });
+    root.render(
+      createElement(TimelineOverlays, {
+        elements,
+        elementsRef: { current: elements },
+        theme: defaultTimelineTheme,
+        showShortcutHint: false,
+        showPopover: false,
+        rangeSelection: null,
+        setShowPopover: vi.fn(),
+        setRangeSelection: vi.fn(),
+        kfContextMenu: menu,
+        setKfContextMenu,
+        onDeleteKeyframe: vi.fn(),
+        onDeleteAllKeyframes,
+        onMoveKeyframeToPlayhead: vi.fn(),
+        clipContextMenu: null,
+        setClipContextMenu: vi.fn(),
+        currentTime: 0,
+        onSplitElement: vi.fn(),
+        pinZoomBeforeEdit: vi.fn(),
+        onDeleteElement: vi.fn(),
+        gapContextMenu: null,
+        onDismissGapContextMenu: vi.fn(),
+        onCloseTrackGap: vi.fn(),
+        onCloseAllTrackGaps: vi.fn(),
+        onHoverGapAction: vi.fn(),
+      }),
+    );
+  });
+  return { setKfContextMenu, onDeleteAllKeyframes };
+}
+
+describe("TimelineOverlays context lifecycle", () => {
+  it("dismisses a keyframe menu when its selected target becomes stale", () => {
+    const setKfContextMenu = vi.fn();
+    renderKeyframeOverlay({
+      capturedElement: captured,
+      currentElement: captured,
+      setKfContextMenu,
+    });
+
+    act(() => usePlayerStore.setState({ selectedElementId: "other" }));
+
+    expect(setKfContextMenu).toHaveBeenCalledExactlyOnceWith(null);
+  });
+
+  it("dispatches a menu action with the current model element", () => {
+    const current = { ...captured, start: 4, track: 7 };
+    const onDeleteAllKeyframes = vi.fn();
+    renderKeyframeOverlay({
+      capturedElement: captured,
+      currentElement: current,
+      onDeleteAllKeyframes,
+    });
+    const button = Array.from(document.body.querySelectorAll("button")).find(
+      (candidate) => candidate.textContent === "Delete All Keyframes",
+    );
+
+    act(() => button?.click());
+
+    expect(onDeleteAllKeyframes).toHaveBeenCalledExactlyOnceWith(current, "child-position");
+  });
+});

package/src/player/components/TimelineOverlays.tsx

@@ -1,4 +1,6 @@
+import { useEffect, type MutableRefObject } from "react";
 import type { TimelineElement } from "../store/playerStore";
+import { usePlayerStore } from "../store/playerStore";
 import type { TimelineTheme } from "./timelineTheme";
 import type { TimelineRangeSelection } from "./timelineEditing";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
@@ -11,10 +13,11 @@ import { ClipContextMenu } from "./ClipContextMenu";
 import { TrackGapContextMenu } from "./TrackGapContextMenu";
 import { TimelineShortcutHint } from "./TimelineShortcutHint";
 
-interface ClipContextMenuState {
+export interface ClipContextMenuState {
   x: number;
   y: number;
   element: TimelineElement;
+  sessionEpoch: number;
 }
 
 /** Resolved model for the empty-lane-space (track gap) context menu. */
@@ -28,6 +31,8 @@ interface TrackGapContextMenuState {
 }
 
 interface TimelineOverlaysProps {
+  elements: readonly TimelineElement[];
+  elementsRef: MutableRefObject<readonly TimelineElement[]>;
   theme: TimelineTheme;
   showShortcutHint: boolean;
   showPopover: boolean;
@@ -52,10 +57,49 @@ interface TimelineOverlaysProps {
   onHoverGapAction: (action: "close-gap" | "close-all" | null) => void;
 }
 
+interface TimelineContextTargetInput {
+  capturedElement: TimelineElement;
+  targetSessionEpoch: number | undefined;
+  sessionEpoch: number;
+  selectedElementId: string | null;
+  elements: readonly TimelineElement[];
+}
+
+/** The captured project session and current selection jointly own a context target. */
+export function resolveTimelineContextElement({
+  capturedElement,
+  targetSessionEpoch,
+  sessionEpoch,
+  selectedElementId,
+  elements,
+}: TimelineContextTargetInput): TimelineElement | null {
+  const identity = capturedElement.key ?? capturedElement.id;
+  if (targetSessionEpoch !== sessionEpoch) return null;
+  if (selectedElementId !== identity) return null;
+  return elements.find((element) => (element.key ?? element.id) === identity) ?? null;
+}
+
+function readTimelineContextElement(
+  capturedElement: TimelineElement,
+  targetSessionEpoch: number | undefined,
+  elements: readonly TimelineElement[],
+): TimelineElement | null {
+  const state = usePlayerStore.getState();
+  return resolveTimelineContextElement({
+    capturedElement,
+    targetSessionEpoch,
+    sessionEpoch: state.timelineSessionEpoch,
+    selectedElementId: state.selectedElementId,
+    elements,
+  });
+}
+
 // The timeline's floating overlays, rendered as siblings above the scroll area:
 // the shortcut hint, the range-edit popover, the keyframe-diamond context menu,
 // and the clip context menu.
 export function TimelineOverlays({
+  elements,
+  elementsRef,
   theme,
   showShortcutHint,
   showPopover,
@@ -79,6 +123,39 @@ export function TimelineOverlays({
   onCloseAllTrackGaps,
   onHoverGapAction,
 }: TimelineOverlaysProps) {
+  const selectedElementId = usePlayerStore((state) => state.selectedElementId);
+  const sessionEpoch = usePlayerStore((state) => state.timelineSessionEpoch);
+  const kfTargetSessionEpoch = kfContextMenu?.sessionEpoch;
+  const clipTargetSessionEpoch = clipContextMenu?.sessionEpoch;
+  const keyframeElement = kfContextMenu
+    ? resolveTimelineContextElement({
+        capturedElement: kfContextMenu.element,
+        targetSessionEpoch: kfTargetSessionEpoch,
+        sessionEpoch,
+        selectedElementId,
+        elements,
+      })
+    : null;
+  const clipElement = clipContextMenu
+    ? resolveTimelineContextElement({
+        capturedElement: clipContextMenu.element,
+        targetSessionEpoch: clipTargetSessionEpoch,
+        sessionEpoch,
+        selectedElementId,
+        elements,
+      })
+    : null;
+  const readCurrentElement = (element: TimelineElement, targetSessionEpoch: number | undefined) =>
+    readTimelineContextElement(element, targetSessionEpoch, elementsRef.current);
+
+  useEffect(() => {
+    if (kfContextMenu && !keyframeElement) setKfContextMenu(null);
+  }, [keyframeElement, kfContextMenu, setKfContextMenu]);
+
+  useEffect(() => {
+    if (clipContextMenu && !clipElement) setClipContextMenu(null);
+  }, [clipContextMenu, clipElement, setClipContextMenu]);
+
   return (
     <>
       {showShortcutHint && !showPopover && !rangeSelection && (
@@ -98,29 +175,45 @@ export function TimelineOverlays({
         />
       )}
 
-      {kfContextMenu && (
+      {kfContextMenu && keyframeElement && (
         <KeyframeDiamondContextMenu
-          state={kfContextMenu}
+          state={{ ...kfContextMenu, element: keyframeElement }}
           onClose={() => setKfContextMenu(null)}
-          onDelete={(elId, keyframe) => onDeleteKeyframe?.(elId, keyframe)}
-          onDeleteAll={(element) => onDeleteAllKeyframes?.(element)}
+          onDelete={(...args) => {
+            if (!readCurrentElement(keyframeElement, kfTargetSessionEpoch)) return;
+            onDeleteKeyframe?.(...args);
+          }}
+          onDeleteAll={(_element, animationId) => {
+            const element = readCurrentElement(keyframeElement, kfTargetSessionEpoch);
+            if (element) onDeleteAllKeyframes?.(element, animationId);
+          }}
           onMoveToPlayhead={
-            onMoveKeyframeToPlayhead ? (...args) => onMoveKeyframeToPlayhead(...args) : undefined
+            onMoveKeyframeToPlayhead
+              ? (_element, ...args) => {
+                  const element = readCurrentElement(keyframeElement, kfTargetSessionEpoch);
+                  if (element) onMoveKeyframeToPlayhead(element, ...args);
+                }
+              : undefined
           }
         />
       )}
 
-      {clipContextMenu && (
+      {clipContextMenu && clipElement && (
         <ClipContextMenu
           x={clipContextMenu.x}
           y={clipContextMenu.y}
-          element={clipContextMenu.element}
+          element={clipElement}
           currentTime={currentTime}
           onClose={() => setClipContextMenu(null)}
-          onSplit={(el, time) => onSplitElement?.(el, time)}
-          onDelete={(el) => {
+          onSplit={(_element, time) => {
+            const element = readCurrentElement(clipElement, clipTargetSessionEpoch);
+            if (element) onSplitElement?.(element, time);
+          }}
+          onDelete={() => {
+            const element = readCurrentElement(clipElement, clipTargetSessionEpoch);
+            if (!element) return;
             pinZoomBeforeEdit();
-            onDeleteElement?.(el);
+            onDeleteElement?.(element);
           }}
         />
       )}

package/src/player/components/timelineCallbacks.ts

@@ -73,7 +73,7 @@ export interface TimelineEditCallbacks {
   onRazorSplit?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   onRazorSplitAll?: (splitTime: number) => Promise<void> | void;
   onDeleteKeyframe?: (elementId: string, keyframe: TimelineKeyframeTarget) => void;
-  onDeleteAllKeyframes?: (element: TimelineElement) => void;
+  onDeleteAllKeyframes?: (element: TimelineElement, animationId?: string) => void;
   onMoveKeyframeToPlayhead?: (element: TimelineElement, keyframe: TimelineKeyframeTarget) => void;
   /** Drag-to-retime: `keyframe` identifies the dragged keyframe (its percentage
    *  is clip-relative), `toClipPercentage` is the neighbour-clamped drop. */

package/src/player/components/timelineClipDragGestureLifecycle.test.ts

@@ -21,6 +21,7 @@ describe("timeline clip drag gesture lifecycle", () => {
       track: 0,
     };
     const drag: DraggedClipState = {
+      pointerId: 0,
       element,
       originClientX: 0,
       originClientY: 0,
@@ -49,23 +50,36 @@ describe("timeline clip drag gesture lifecycle", () => {
     }));
     const onMoveElement = vi.fn();
     const stopAutoScroll = vi.fn();
+    const cancelGestureRef = { current: () => false };
     const dispose = mountTimelineClipDragGestureLifecycle({
+      lifecycleRef: {
+        current: {
+          kind: "drag",
+          phase: "active",
+          pointerId: null,
+          sessionEpoch: 0,
+        },
+      },
+      sessionEpochRef: { current: 0 },
+      cancelGestureRef,
+      scrollRef: { current: null },
       draggedClipRef,
       resizingClipRef,
       blockedClipRef: { current: null },
       groupResizeRef: { current: null },
       suppressClickRef: { current: false },
+      gestureSelectedKeysRef: { current: new Set() },
       elementsRef: { current: [element] },
       trackOrderRef: { current: [0] },
-      setDraggedClip,
-      setResizingClip: () => {},
+      setDraggedClipState: setDraggedClip,
+      setResizingClipState: () => {},
       setShowPopover: () => {},
       setRangeSelectionRef: { current: null },
       applyResizePointerRef: { current: () => {} },
       syncClipDragAutoScrollRef: { current: () => {} },
       stopClipDragAutoScrollRef: { current: stopAutoScroll },
       updateDraggedClipPreviewRef: { current: updateDraggedClipPreview },
-      restoreGroupResizeMembers: () => {},
+      publishDraggedClip: setDraggedClip,
       updateElement: vi.fn(),
       onMoveElementRef: { current: onMoveElement },
       onMoveElementsRef: { current: undefined },
@@ -93,5 +107,6 @@ describe("timeline clip drag gesture lifecycle", () => {
     expect(stopAutoScroll).toHaveBeenCalledTimes(1);
 
     dispose();
+    expect(cancelGestureRef.current()).toBe(false);
   });
 });