@hyperframes/studio 0.7.89 → 0.7.92

package/src/player/components/TimelineClipDiamonds.test.tsx

@@ -3,23 +3,51 @@
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { TimelineClipDiamonds, TimelineDiamondLane } from "./TimelineClipDiamonds";
+import type { TimelineElement } from "../store/playerStore";
+import { usePlayerStore } from "../store/playerStore";
+import {
+  TimelineClipDiamonds,
+  TimelineDiamondLane,
+  type TimelineDiamondKeyframe,
+} from "./TimelineClipDiamonds";
 import { timelineKeyframeSelectionKey } from "./timelineKeyframeIdentity";
+import { configureTimelineTestViewport } from "./timelineTestViewport";
+import { readPendingTimelineKeyframeRetimes } from "./useTimelineKeyframeHandlers";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {
   document.body.innerHTML = "";
+  usePlayerStore.setState({ elements: [], timelineSessionEpoch: 0 });
 });
 
+const RETIME_ELEMENT: TimelineElement = {
+  id: "clip-1",
+  label: "Clip",
+  tag: "div",
+  start: 0,
+  duration: 10,
+  track: 0,
+};
+
 function pointerEvent(type: string, init: PointerEventInit): Event {
-  if (typeof PointerEvent === "function") return new PointerEvent(type, init);
-  return new MouseEvent(type, init);
+  const event =
+    typeof PointerEvent === "function" ? new PointerEvent(type, init) : new MouseEvent(type, init);
+  if (!("pointerId" in event)) {
+    Object.defineProperty(event, "pointerId", { value: init.pointerId ?? 0 });
+  }
+  return event;
 }
 
-function renderDiamonds(onClickKeyframe = vi.fn()) {
+function createTimelineHost() {
   const host = document.createElement("div");
+  host.setAttribute("data-timeline-scroll-viewport", "");
   document.body.append(host);
+  return host;
+}
+
+function renderDiamonds(onClickKeyframe = vi.fn()) {
+  const host = createTimelineHost();
   const root = createRoot(host);
   act(() => {
     root.render(
@@ -46,6 +74,78 @@ function renderDiamonds(onClickKeyframe = vi.fn()) {
   return { host, root, onClickKeyframe };
 }
 
+function renderRetimeLane(
+  onMoveKeyframe = vi.fn().mockResolvedValue(true),
+  strict = false,
+  options: {
+    elementId?: string;
+    host?: HTMLDivElement;
+    keyframes?: TimelineDiamondKeyframe[];
+  } = {},
+) {
+  const elementId = options.elementId ?? RETIME_ELEMENT.id;
+  if (!options.host) {
+    usePlayerStore.setState({ elements: [{ ...RETIME_ELEMENT, id: elementId, key: elementId }] });
+  }
+  const host = options.host ?? createTimelineHost();
+  const keyframes = options.keyframes ?? [
+    {
+      percentage: 0,
+      tweenPercentage: 0,
+      propertyGroup: "position",
+      animationId: "anim-1",
+      properties: { x: 0 },
+    },
+    {
+      percentage: 50,
+      tweenPercentage: 50,
+      propertyGroup: "position",
+      animationId: "anim-1",
+      properties: { x: 100 },
+    },
+    {
+      percentage: 100,
+      tweenPercentage: 100,
+      propertyGroup: "position",
+      animationId: "anim-1",
+      properties: { x: 200 },
+    },
+  ];
+  const onClickKeyframe = vi.fn();
+  const mountLane = () => {
+    const laneHost = document.createElement("div");
+    host.append(laneHost);
+    const root = createRoot(laneHost);
+    const lane = (
+      <TimelineDiamondLane
+        keyframesData={{
+          format: "percentage",
+          keyframes,
+        }}
+        clipWidthPx={200}
+        clipHeightPx={48}
+        accentColor="#4ba3d2"
+        isSelected
+        currentPercentage={0}
+        elementId={elementId}
+        selectedKeyframes={new Set()}
+        onClickKeyframe={onClickKeyframe}
+        onMoveKeyframe={onMoveKeyframe}
+        groupAware
+      />
+    );
+    act(() => {
+      root.render(strict ? <React.StrictMode>{lane}</React.StrictMode> : lane);
+    });
+    const diamond = laneHost.querySelector<HTMLButtonElement>(
+      `button[title="${keyframes[1]?.percentage}%"]`,
+    );
+    expect(diamond).not.toBeNull();
+    return { diamond: diamond!, root };
+  };
+  return { ...mountLane(), host, mountLane, onClickKeyframe, onMoveKeyframe };
+}
+
 describe("TimelineClipDiamonds", () => {
   it("marks only the nearest keyframe in a dense lane as under the playhead", () => {
     const host = document.createElement("div");
@@ -161,6 +261,23 @@ describe("TimelineClipDiamonds", () => {
     act(() => root.unmount());
   });
 
+  it("publishes retime previews after StrictMode effect replay", () => {
+    const { diamond, host, root } = renderRetimeLane(undefined, true);
+    const initialLeft = diamond.style.left;
+    act(() => {
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointermove", { bubbles: true, clientX: 120, pointerId: 7 }),
+      );
+    });
+    expect(host.querySelector<HTMLButtonElement>('button[title="50%"]')?.style.left).not.toBe(
+      initialLeft,
+    );
+    act(() => root.unmount());
+  });
+
   it("treats primary pointerup without drag as a keyframe click", () => {
     const { host, root, onClickKeyframe } = renderDiamonds();
     const diamond = host.querySelector<HTMLButtonElement>('button[title="50%"]');
@@ -246,8 +363,7 @@ describe("TimelineClipDiamonds", () => {
   it("treats a drag-armed press that resolves to a no-op move as a click", () => {
     const onClickKeyframe = vi.fn();
     const onMoveKeyframe = vi.fn();
-    const host = document.createElement("div");
-    document.body.append(host);
+    const host = createTimelineHost();
     const root = createRoot(host);
     act(() => {
       root.render(
@@ -314,8 +430,7 @@ describe("TimelineClipDiamonds", () => {
   it("reselects a retimed keyframe with its post-move tween percentage", () => {
     const onClickKeyframe = vi.fn();
     const onMoveKeyframe = vi.fn().mockResolvedValue(true);
-    const host = document.createElement("div");
-    document.body.append(host);
+    const host = createTimelineHost();
     const root = createRoot(host);
     act(() => {
       root.render(
@@ -474,8 +589,7 @@ describe("TimelineClipDiamonds", () => {
 
   it("composes a rapid second retime from the pending position", () => {
     const onMoveKeyframe = vi.fn().mockResolvedValue(true);
-    const host = document.createElement("div");
-    document.body.append(host);
+    const host = createTimelineHost();
     const root = createRoot(host);
     act(() => {
       root.render(
@@ -548,16 +662,120 @@ describe("TimelineClipDiamonds", () => {
       },
       85,
     );
+
+    act(() => {
+      usePlayerStore.setState({ timelineSessionEpoch: 1 });
+      diamond!.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100 }),
+      );
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120 }));
+    });
+    expect(onMoveKeyframe).toHaveBeenNthCalledWith(
+      3,
+      expect.objectContaining({ percentage: 50 }),
+      60,
+    );
     act(() => root.unmount());
   });
 
+  it("preserves another element's pending retime when the active source is removed", () => {
+    const host = createTimelineHost();
+    const elementA = { ...RETIME_ELEMENT, id: "clip-a", key: "clip-a" };
+    const elementB = { ...RETIME_ELEMENT, id: "clip-b", key: "clip-b" };
+    usePlayerStore.setState({ elements: [elementA, elementB] });
+    const laneA = renderRetimeLane(vi.fn().mockResolvedValue(true), false, {
+      elementId: "clip-a",
+      host,
+    });
+    const onMoveB = vi.fn().mockResolvedValue(true);
+    const laneB = renderRetimeLane(onMoveB, false, { elementId: "clip-b", host });
+
+    act(() => {
+      laneB.diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 150, pointerId: 7 }),
+      );
+
+      laneA.diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 9 }),
+      );
+      usePlayerStore.setState({ elements: [elementB] });
+
+      laneB.diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 150, pointerId: 11 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 170, pointerId: 11 }),
+      );
+    });
+
+    expect(onMoveB).toHaveBeenNthCalledWith(2, expect.objectContaining({ percentage: 75 }), 85);
+    act(() => {
+      laneA.root.unmount();
+      laneB.root.unmount();
+    });
+  });
+
+  it("retires a pending retime once the cache exposes its destination identity", () => {
+    const first = renderRetimeLane();
+    act(() => {
+      first.diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 150, pointerId: 7 }),
+      );
+    });
+    expect(readPendingTimelineKeyframeRetimes(first.host).size).toBe(1);
+    act(() => first.root.unmount());
+
+    const destination = renderRetimeLane(vi.fn().mockResolvedValue(true), false, {
+      host: first.host,
+      keyframes: [
+        {
+          percentage: 0,
+          tweenPercentage: 0,
+          propertyGroup: "position",
+          animationId: "anim-1",
+          properties: { x: 0 },
+        },
+        {
+          percentage: 75,
+          tweenPercentage: 75,
+          propertyGroup: "position",
+          animationId: "anim-1",
+          properties: { x: 100 },
+        },
+        {
+          percentage: 100,
+          tweenPercentage: 100,
+          propertyGroup: "position",
+          animationId: "anim-1",
+          properties: { x: 200 },
+        },
+      ],
+    });
+    act(() => {
+      destination.diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 150, pointerId: 9 }),
+      );
+    });
+    expect(readPendingTimelineKeyframeRetimes(first.host).size).toBe(0);
+
+    act(() => {
+      window.dispatchEvent(pointerEvent("pointercancel", { bubbles: true, pointerId: 9 }));
+      destination.root.unmount();
+    });
+  });
+
   it.each([
     ["returns false", () => Promise.resolve(false)],
     ["rejects", () => Promise.reject(new Error("retime failed"))],
   ])("clears a failed pending retime when the callback %s", async (_label, settle) => {
     const onMoveKeyframe = vi.fn().mockImplementationOnce(settle).mockResolvedValue(true);
-    const host = document.createElement("div");
-    document.body.append(host);
+    const host = createTimelineHost();
     const root = createRoot(host);
     act(() => {
       root.render(
@@ -678,6 +896,215 @@ describe("TimelineClipDiamonds", () => {
     act(() => root.unmount());
   });
 
+  it("commits once from the stable viewport after the source lane unmounts", () => {
+    const { diamond, onMoveKeyframe, root } = renderRetimeLane();
+
+    act(() => {
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      root.unmount();
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120, pointerId: 7 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 140, pointerId: 7 }),
+      );
+    });
+
+    expect(onMoveKeyframe).toHaveBeenCalledExactlyOnceWith(
+      {
+        percentage: 50,
+        tweenPercentage: 50,
+        propertyGroup: "position",
+        animationId: "anim-1",
+      },
+      60,
+    );
+  });
+
+  it("keeps the retime preview coherent when the source lane remounts", () => {
+    const { diamond, mountLane, onMoveKeyframe, root } = renderRetimeLane();
+
+    act(() => {
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointermove", { bubbles: true, button: 0, clientX: 120, pointerId: 7 }),
+      );
+    });
+    const beforeUnmountLeft = Number.parseFloat(diamond.style.left);
+
+    act(() => {
+      root.unmount();
+      window.dispatchEvent(
+        pointerEvent("pointermove", { bubbles: true, button: 0, clientX: 140, pointerId: 7 }),
+      );
+    });
+    const { diamond: remountedDiamond, root: remountedRoot } = mountLane();
+    const remountedLeft = Number.parseFloat(remountedDiamond.style.left);
+    expect(remountedLeft).toBeGreaterThan(beforeUnmountLeft);
+
+    act(() => {
+      window.dispatchEvent(
+        pointerEvent("pointermove", { bubbles: true, button: 0, clientX: 160, pointerId: 7 }),
+      );
+    });
+    expect(Number.parseFloat(remountedDiamond.style.left)).toBeGreaterThan(remountedLeft);
+
+    act(() => {
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 160, pointerId: 7 }),
+      );
+    });
+    expect(onMoveKeyframe).toHaveBeenCalledExactlyOnceWith(expect.any(Object), 80);
+    act(() => remountedRoot.unmount());
+  });
+
+  it("includes horizontal viewport scrolling in the retime destination", () => {
+    const { diamond, host, onMoveKeyframe, root } = renderRetimeLane();
+
+    act(() => {
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      host.scrollLeft = 20;
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+    });
+
+    expect(onMoveKeyframe).toHaveBeenCalledExactlyOnceWith(expect.any(Object), 60);
+    act(() => root.unmount());
+  });
+
+  it("auto-scrolls horizontally without virtualizing the source row away", () => {
+    let frame: FrameRequestCallback | null = null;
+    vi.spyOn(globalThis, "requestAnimationFrame").mockImplementation((callback) => {
+      frame = callback;
+      return 1;
+    });
+    vi.spyOn(globalThis, "cancelAnimationFrame").mockImplementation(() => undefined);
+    const { diamond, host, root } = renderRetimeLane();
+    configureTimelineTestViewport(host, 10_000);
+
+    act(() => {
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointermove", {
+          bubbles: true,
+          button: 0,
+          clientX: 790,
+          clientY: 239,
+          pointerId: 7,
+        }),
+      );
+    });
+    expect(frame).not.toBeNull();
+    act(() => frame?.(0));
+    expect(host.scrollLeft).toBeGreaterThan(0);
+    expect(host.scrollTop).toBe(0);
+
+    act(() => {
+      window.dispatchEvent(pointerEvent("pointercancel", { bubbles: true, pointerId: 7 }));
+      root.unmount();
+    });
+  });
+
+  it("ignores another pointer and lets the owning pointer finish", () => {
+    const { diamond, onMoveKeyframe, root } = renderRetimeLane();
+
+    act(() => {
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 140, pointerId: 8 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120, pointerId: 7 }),
+      );
+    });
+
+    expect(onMoveKeyframe).toHaveBeenCalledOnce();
+    act(() => root.unmount());
+  });
+
+  it("cancels without mutation on pointer cancel or Escape and allows the next retime", () => {
+    const { diamond, onMoveKeyframe, root } = renderRetimeLane();
+
+    act(() => {
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointercancel", {
+          bubbles: true,
+          button: 0,
+          clientX: 120,
+          pointerId: 7,
+        }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120, pointerId: 7 }),
+      );
+
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 9 }),
+      );
+      window.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, key: "Escape" }));
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120, pointerId: 9 }),
+      );
+
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 11 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120, pointerId: 11 }),
+      );
+    });
+
+    expect(onMoveKeyframe).toHaveBeenCalledOnce();
+    act(() => root.unmount());
+  });
+
+  it("cancels on project switch or source removal without poisoning the next gesture", () => {
+    const { diamond, onMoveKeyframe, root } = renderRetimeLane();
+
+    act(() => {
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 7 }),
+      );
+      usePlayerStore.setState({ timelineSessionEpoch: 1 });
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120, pointerId: 7 }),
+      );
+
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 9 }),
+      );
+      usePlayerStore.setState({ elements: [] });
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120, pointerId: 9 }),
+      );
+
+      usePlayerStore.setState({ elements: [RETIME_ELEMENT] });
+      diamond.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100, pointerId: 11 }),
+      );
+      window.dispatchEvent(
+        pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120, pointerId: 11 }),
+      );
+    });
+
+    expect(onMoveKeyframe).toHaveBeenCalledOnce();
+    act(() => root.unmount());
+  });
+
   // Regression: onClickKeyframe's state updates can re-render the diamond
   // button out from under the gesture before the browser auto-synthesizes the
   // "click" event that follows a button's pointerdown+pointerup. That orphaned
@@ -687,8 +1114,7 @@ describe("TimelineClipDiamonds", () => {
   // own clip. suppressClickRef lets that ancestor ignore the stray click.
   it("arms suppressClickRef synchronously on a keyframe click", () => {
     const suppressClickRef = { current: false };
-    const host = document.createElement("div");
-    document.body.append(host);
+    const host = createTimelineHost();
     const root = createRoot(host);
     act(() => {
       root.render(
@@ -722,8 +1148,7 @@ describe("TimelineClipDiamonds", () => {
   });
 
   const renderSegmentLane = (lastAmbiguous: boolean, clipWidthPx = 200) => {
-    const host = document.createElement("div");
-    document.body.append(host);
+    const host = createTimelineHost();
     const root = createRoot(host);
     const kf = (percentage: number, extra: Record<string, unknown> = {}) => ({
       percentage,
@@ -811,8 +1236,7 @@ describe("TimelineClipDiamonds", () => {
   it("hides the inline ease button on a segment with no source animation id", () => {
     // A runtime-scanned keyframe has no animationId, so there is no tween to
     // target; the segment ending on it must not render a (dead) ease button.
-    const host = document.createElement("div");
-    document.body.append(host);
+    const host = createTimelineHost();
     const root = createRoot(host);
     const kf = (percentage: number, animationId?: string) => ({
       percentage,