@hyperframes/studio 0.7.75 → 0.7.77

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

@@ -3,7 +3,8 @@
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { TimelineClipDiamonds } from "./TimelineClipDiamonds";
+import { TimelineClipDiamonds, TimelineDiamondLane } from "./TimelineClipDiamonds";
+import { timelineKeyframeSelectionKey } from "./timelineKeyframeIdentity";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -45,6 +46,45 @@ function renderDiamonds(onClickKeyframe = vi.fn()) {
 }
 
 describe("TimelineClipDiamonds", () => {
+  // Dense rows narrow the DIAMOND so neighbours stay individually readable, but
+  // the hit box floors at KF_MIN_HIT_W — a gap-sized target gets unusable
+  // (~7px) at the zoom floor.
+  it("narrows dense keyframe visuals while flooring their hit regions", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <TimelineDiamondLane
+          keyframesData={{
+            format: "percentage",
+            keyframes: [30, 60, 90].map((percentage) => ({
+              percentage,
+              propertyGroup: "position",
+              properties: { x: percentage },
+            })),
+          }}
+          clipWidthPx={36}
+          clipHeightPx={48}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={0}
+          elementId="clip-1"
+          selectedKeyframes={new Set()}
+          groupAware
+        />,
+      );
+    });
+
+    const diamonds = Array.from(host.querySelectorAll<HTMLButtonElement>("button[title]"));
+    expect(diamonds).toHaveLength(3);
+    for (const diamond of diamonds) {
+      expect(Number.parseFloat(diamond.style.width)).toBeCloseTo(12);
+      expect(Number(diamond.querySelector("svg")?.getAttribute("width"))).toBeCloseTo(8.8);
+    }
+    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%"]');
@@ -54,7 +94,57 @@ describe("TimelineClipDiamonds", () => {
       diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0 }));
     });
 
-    expect(onClickKeyframe).toHaveBeenCalledWith(50);
+    expect(onClickKeyframe).toHaveBeenCalledWith(
+      "clip-1",
+      expect.objectContaining({ percentage: 50 }),
+    );
+    act(() => root.unmount());
+  });
+
+  // The collapsed clip row and the expanded property lanes read the same cache,
+  // so a keyframe that carries a property group has to hash to the same key in
+  // both — otherwise collapsing a track silently drops the selection.
+  it("keys a grouped keyframe the same way collapsed as expanded", () => {
+    const groupedKeyframe = {
+      percentage: 50,
+      tweenPercentage: 25,
+      propertyGroup: "position",
+      animationId: "anim-1",
+      properties: { x: 100 },
+    };
+    const sharedKey = timelineKeyframeSelectionKey("clip-1", groupedKeyframe);
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const onClickKeyframe = vi.fn();
+    act(() => {
+      root.render(
+        <TimelineClipDiamonds
+          keyframesData={{ format: "percentage", keyframes: [groupedKeyframe] }}
+          clipWidthPx={200}
+          clipHeightPx={48}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={-10}
+          elementId="clip-1"
+          selectedKeyframes={new Set([sharedKey])}
+          onClickKeyframe={onClickKeyframe}
+        />,
+      );
+    });
+    const diamond = host.querySelector<HTMLButtonElement>('button[title="50%"]');
+    // Highlighted from the shared key alone (the playhead is off-clip here).
+    expect(diamond?.querySelector("path:last-child")?.getAttribute("fill")).toBe("#4ba3d2");
+
+    act(() => {
+      diamond?.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0 }));
+    });
+    expect(onClickKeyframe).toHaveBeenCalledWith("clip-1", {
+      percentage: 50,
+      tweenPercentage: 25,
+      propertyGroup: "position",
+      animationId: "anim-1",
+    });
     act(() => root.unmount());
   });
 
@@ -84,12 +174,24 @@ describe("TimelineClipDiamonds", () => {
     const root = createRoot(host);
     act(() => {
       root.render(
-        <TimelineClipDiamonds
+        <TimelineDiamondLane
           keyframesData={{
             format: "percentage",
             keyframes: [
-              { percentage: 0, properties: { x: 0 } },
-              { percentage: 50, properties: { x: 100 } },
+              {
+                percentage: 0,
+                tweenPercentage: 0,
+                propertyGroup: "position",
+                animationId: "anim-1",
+                properties: { x: 0 },
+              },
+              {
+                percentage: 50,
+                tweenPercentage: 100,
+                propertyGroup: "position",
+                animationId: "anim-1",
+                properties: { x: 100 },
+              },
             ],
           }}
           clipWidthPx={5000}
@@ -101,6 +203,7 @@ describe("TimelineClipDiamonds", () => {
           selectedKeyframes={new Set()}
           onClickKeyframe={onClickKeyframe}
           onMoveKeyframe={onMoveKeyframe}
+          groupAware
         />,
       );
     });
@@ -117,7 +220,12 @@ describe("TimelineClipDiamonds", () => {
       diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 104 }));
     });
 
-    expect(onClickKeyframe).toHaveBeenCalledWith(50);
+    expect(onClickKeyframe).toHaveBeenCalledWith({
+      percentage: 50,
+      tweenPercentage: 100,
+      propertyGroup: "position",
+      animationId: "anim-1",
+    });
     expect(onMoveKeyframe).not.toHaveBeenCalled();
     act(() => root.unmount());
   });
@@ -126,20 +234,39 @@ describe("TimelineClipDiamonds", () => {
   // keyframe) committed the move but never selected/parked on the result —
   // the diamond it was just dragged looked exactly like one nothing happened
   // to. Select it at its NEW position too.
-  it("selects the keyframe at its new position after a real drag-retime", () => {
+  it("reselects a retimed keyframe with its post-move tween percentage", () => {
     const onClickKeyframe = vi.fn();
-    const onMoveKeyframe = vi.fn();
+    const onMoveKeyframe = vi.fn().mockResolvedValue(true);
     const host = document.createElement("div");
     document.body.append(host);
     const root = createRoot(host);
     act(() => {
       root.render(
-        <TimelineClipDiamonds
+        <TimelineDiamondLane
           keyframesData={{
             format: "percentage",
             keyframes: [
-              { percentage: 0, properties: { x: 0 } },
-              { percentage: 50, properties: { x: 100 } },
+              {
+                percentage: 20,
+                tweenPercentage: 0,
+                propertyGroup: "position",
+                animationId: "anim-1",
+                properties: { x: 0 },
+              },
+              {
+                percentage: 40,
+                tweenPercentage: 50,
+                propertyGroup: "position",
+                animationId: "anim-1",
+                properties: { x: 100 },
+              },
+              {
+                percentage: 60,
+                tweenPercentage: 100,
+                propertyGroup: "position",
+                animationId: "anim-1",
+                properties: { x: 200 },
+              },
             ],
           }}
           clipWidthPx={200}
@@ -151,6 +278,164 @@ describe("TimelineClipDiamonds", () => {
           selectedKeyframes={new Set()}
           onClickKeyframe={onClickKeyframe}
           onMoveKeyframe={onMoveKeyframe}
+          groupAware
+        />,
+      );
+    });
+    const diamond = host.querySelector<HTMLButtonElement>('button[title="40%"]');
+    expect(diamond).not.toBeNull();
+
+    act(() => {
+      diamond!.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 80 }),
+      );
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 100 }));
+    });
+
+    expect(onMoveKeyframe).toHaveBeenCalledWith(
+      {
+        percentage: 40,
+        tweenPercentage: 50,
+        propertyGroup: "position",
+        animationId: "anim-1",
+      },
+      50,
+    );
+    expect(onClickKeyframe).toHaveBeenCalledWith({
+      percentage: 50,
+      tweenPercentage: 75,
+      propertyGroup: "position",
+      animationId: "anim-1",
+    });
+    act(() => root.unmount());
+  });
+
+  it("leaves the selection alone when a stale retime fails after a newer drag", async () => {
+    const onClickKeyframe = vi.fn();
+    let failFirstDrag: (() => void) | undefined;
+    const onMoveKeyframe = vi
+      .fn()
+      .mockImplementationOnce(
+        () =>
+          new Promise<boolean>((resolve) => {
+            failFirstDrag = () => resolve(false);
+          }),
+      )
+      .mockResolvedValue(true);
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <TimelineDiamondLane
+          keyframesData={{
+            format: "percentage",
+            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 },
+              },
+            ],
+          }}
+          clipWidthPx={200}
+          clipHeightPx={48}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={0}
+          elementId="clip-1"
+          selectedKeyframes={new Set()}
+          onClickKeyframe={onClickKeyframe}
+          onMoveKeyframe={onMoveKeyframe}
+          groupAware
+        />,
+      );
+    });
+    const diamond = host.querySelector<HTMLButtonElement>('button[title="50%"]');
+
+    // Two drags back to back; the first one's commit is still in flight.
+    act(() => {
+      diamond!.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100 }),
+      );
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 150 }));
+      diamond!.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 150 }),
+      );
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 170 }));
+    });
+    onClickKeyframe.mockClear();
+
+    await act(async () => {
+      failFirstDrag?.();
+      await Promise.resolve();
+    });
+
+    // The stale failure must not drag the selection back to the first drag's
+    // source: the second retime, which the user can see, owns it now.
+    expect(onClickKeyframe).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
+  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 root = createRoot(host);
+    act(() => {
+      root.render(
+        <TimelineDiamondLane
+          keyframesData={{
+            format: "percentage",
+            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 },
+              },
+            ],
+          }}
+          clipWidthPx={200}
+          clipHeightPx={48}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={0}
+          elementId="clip-1"
+          selectedKeyframes={new Set()}
+          onMoveKeyframe={onMoveKeyframe}
+          groupAware
         />,
       );
     });
@@ -161,13 +446,156 @@ describe("TimelineClipDiamonds", () => {
       diamond!.dispatchEvent(
         pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100 }),
       );
-      // 4px at a 200px clip width is 2 clip-% — well past the no-op epsilon,
-      // a real retime.
-      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 104 }));
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 150 }));
+
+      // The cache still exposes 50%, but this second +10% drag starts at the
+      // pending 75% destination and must therefore land at 85%, not 60%.
+      diamond!.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 150 }),
+      );
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 170 }));
+    });
+
+    // The second move must identify the FROM keyframe by the pending (already-
+    // moved) position 75%, not the stale rendered 50%; otherwise the serialized
+    // mutation can't locate the keyframe the first move relocated.
+    expect(onMoveKeyframe).toHaveBeenNthCalledWith(
+      2,
+      {
+        percentage: 75,
+        tweenPercentage: 75,
+        propertyGroup: "position",
+        animationId: "anim-1",
+      },
+      85,
+    );
+    act(() => 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 root = createRoot(host);
+    act(() => {
+      root.render(
+        <TimelineDiamondLane
+          keyframesData={{
+            format: "percentage",
+            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 },
+              },
+            ],
+          }}
+          clipWidthPx={200}
+          clipHeightPx={48}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={0}
+          elementId="clip-1"
+          selectedKeyframes={new Set()}
+          onMoveKeyframe={onMoveKeyframe}
+          groupAware
+        />,
+      );
+    });
+    const diamond = host.querySelector<HTMLButtonElement>('button[title="50%"]');
+    expect(diamond).not.toBeNull();
+
+    await act(async () => {
+      diamond!.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100 }),
+      );
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 150 }));
+      await Promise.resolve();
     });
 
-    expect(onMoveKeyframe).toHaveBeenCalledWith("clip-1", 50, 52);
-    expect(onClickKeyframe).toHaveBeenCalledWith(52);
+    act(() => {
+      diamond!.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100 }),
+      );
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120 }));
+    });
+
+    expect(onMoveKeyframe).toHaveBeenNthCalledWith(
+      2,
+      {
+        percentage: 50,
+        tweenPercentage: 50,
+        propertyGroup: "position",
+        animationId: "anim-1",
+      },
+      60,
+    );
+    act(() => root.unmount());
+  });
+
+  it("cancels an in-flight retime on Escape without committing or selecting", () => {
+    const onClickKeyframe = vi.fn();
+    const onMoveKeyframe = vi.fn().mockResolvedValue(true);
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <TimelineDiamondLane
+          keyframesData={{
+            format: "percentage",
+            keyframes: [
+              { percentage: 20, tweenPercentage: 0, properties: { x: 0 } },
+              { percentage: 40, tweenPercentage: 50, properties: { x: 100 } },
+              { percentage: 60, tweenPercentage: 100, properties: { x: 200 } },
+            ],
+          }}
+          clipWidthPx={200}
+          clipHeightPx={48}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={0}
+          elementId="clip-1"
+          selectedKeyframes={new Set()}
+          onClickKeyframe={onClickKeyframe}
+          onMoveKeyframe={onMoveKeyframe}
+        />,
+      );
+    });
+    const diamond = host.querySelector<HTMLButtonElement>('button[title="40%"]');
+    expect(diamond).not.toBeNull();
+
+    act(() => {
+      diamond!.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 80 }),
+      );
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 100 }));
+    });
+
+    // Escape ends the gesture: no retime is written, and the release is not
+    // reinterpreted as a click that would park the playhead on the keyframe.
+    expect(onMoveKeyframe).not.toHaveBeenCalled();
+    expect(onClickKeyframe).not.toHaveBeenCalled();
     act(() => root.unmount());
   });
 
@@ -212,4 +640,100 @@ describe("TimelineClipDiamonds", () => {
     expect(suppressClickRef.current).toBe(true);
     act(() => root.unmount());
   });
+
+  const renderSegmentLane = (lastAmbiguous: boolean) => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const kf = (percentage: number, extra: Record<string, unknown> = {}) => ({
+      percentage,
+      tweenPercentage: percentage,
+      propertyGroup: "position",
+      animationId: "anim-1",
+      properties: { x: percentage },
+      ...extra,
+    });
+    act(() => {
+      root.render(
+        <TimelineDiamondLane
+          keyframesData={{
+            format: "percentage",
+            keyframes: [kf(0), kf(50), kf(100, { easeAmbiguous: lastAmbiguous })],
+          }}
+          clipWidthPx={200}
+          clipHeightPx={48}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={0}
+          elementId="clip-1"
+          selectedKeyframes={new Set()}
+          onSelectSegment={vi.fn()}
+          groupAware
+        />,
+      );
+    });
+    return { host, root };
+  };
+
+  it("hides the inline ease button on an ambiguous merged segment", () => {
+    // Segments 0->50 and 50->100; the 50->100 segment ends on the ambiguous
+    // keyframe, so its hover/ease-button area is not rendered.
+    const { host, root } = renderSegmentLane(true);
+    expect(host.querySelectorAll("[data-keyframe-ease-segment]").length).toBe(1);
+    act(() => root.unmount());
+  });
+
+  it("keeps the inline ease button on unambiguous merged segments", () => {
+    const { host, root } = renderSegmentLane(false);
+    expect(host.querySelectorAll("[data-keyframe-ease-segment]").length).toBe(2);
+    act(() => root.unmount());
+  });
+
+  it("keeps the ease button above nearby diamonds without blocking the segment", () => {
+    const { host, root } = renderSegmentLane(false);
+    const segment = host.querySelector<HTMLElement>("[data-keyframe-ease-segment]");
+    const ease = segment?.querySelector<HTMLButtonElement>("[data-keyframe-ease-button]");
+    const diamond = host.querySelector<HTMLButtonElement>('button[title="50%"]');
+
+    expect(segment?.style.pointerEvents).toBe("none");
+    expect(ease?.style.pointerEvents).toBe("auto");
+    expect(Number(segment?.style.zIndex)).toBeGreaterThan(Number(diamond?.style.zIndex));
+    act(() => root.unmount());
+  });
+
+  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 root = createRoot(host);
+    const kf = (percentage: number, animationId?: string) => ({
+      percentage,
+      tweenPercentage: percentage,
+      propertyGroup: "position",
+      ...(animationId ? { animationId } : {}),
+      properties: { x: percentage },
+    });
+    act(() => {
+      root.render(
+        <TimelineDiamondLane
+          keyframesData={{
+            format: "percentage",
+            keyframes: [kf(0, "anim-1"), kf(50, "anim-1"), kf(100)],
+          }}
+          clipWidthPx={200}
+          clipHeightPx={48}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={0}
+          elementId="clip-1"
+          selectedKeyframes={new Set()}
+          onSelectSegment={vi.fn()}
+          groupAware
+        />,
+      );
+    });
+    expect(host.querySelectorAll("[data-keyframe-ease-segment]").length).toBe(1);
+    act(() => root.unmount());
+  });
 });