@hyperframes/studio 0.7.90 → 0.7.92

package/src/player/components/timelineMarquee.ts

@@ -1,5 +1,7 @@
-import { RULER_H, CLIP_Y, getTimelineRowHeight, getTimelineRowTop } from "./timelineLayout";
+import { RULER_H, CLIP_Y, TRACK_H, type TimelineRowGeometry } from "./timelineLayout";
 import { rectsOverlap, type Rect } from "../../utils/marqueeGeometry";
+import { queryTimelineClipIndex, type TimelineClipIndex } from "../lib/timelineClipIndex";
+import type { TimelineElement } from "../store/playerStore";
 
 /** Pointer must travel at least this far (either axis) before a pointerdown on
  *  the empty timeline body becomes a marquee drag instead of a plain click. */
@@ -62,23 +64,22 @@ export function getMarqueeRect(
 /**
  * A clip's rendered rect in canvas/content coordinates (the same space the
  * marquee rect lives in): x from the shared content origin + start * pps, y from the clip's row
- * index within the visible track order (cumulative row top + CLIP_Y).
+ * index within the canonical row geometry (cumulative row top + CLIP_Y).
  * Returns null when the clip's track is not currently displayed.
  */
 export function getTimelineClipRect(
   clip: Pick<MarqueeClipInput, "start" | "duration" | "track">,
-  trackOrder: number[],
+  rowGeometry: TimelineRowGeometry,
   pps: number,
   contentOrigin: number,
-  rowHeights: readonly number[] = [],
 ): Rect | null {
-  const row = trackOrder.indexOf(clip.track);
+  const row = rowGeometry.getRowIndex(clip.track);
   if (row < 0 || !Number.isFinite(pps) || pps <= 0) return null;
   return {
     left: contentOrigin + clip.start * pps,
-    top: getTimelineRowTop(row, rowHeights) + CLIP_Y,
+    top: rowGeometry.getRowTop(row) + CLIP_Y,
     width: Math.max(clip.duration * pps, MIN_CLIP_W),
-    height: getTimelineRowHeight(row, rowHeights) - CLIP_Y * 2,
+    height: TRACK_H - CLIP_Y * 2,
   };
 }
 
@@ -90,29 +91,56 @@ export interface MarqueeSelectionResult {
   primaryId: string | null;
 }
 
+/** Narrow a marquee hit test to the intersecting logical rows and time span. */
+export function getMarqueeClipCandidates(input: {
+  clipIndex: TimelineClipIndex;
+  rowGeometry: TimelineRowGeometry;
+  marquee: Rect;
+  pps: number;
+  contentOrigin: number;
+}): readonly TimelineElement[] {
+  if (!(input.pps > 0) || input.marquee.width <= 0 || input.marquee.height <= 0) return [];
+  const lastRow = input.rowGeometry.rowKeys.length - 1;
+  const first = Math.max(0, Math.floor(input.rowGeometry.getRowFromY(input.marquee.top)));
+  const last = Math.min(
+    lastRow,
+    Math.floor(input.rowGeometry.getRowFromY(input.marquee.top + input.marquee.height)),
+  );
+  if (first > last) return [];
+  const paddingSeconds = MIN_CLIP_W / input.pps;
+  const start = Math.max(
+    0,
+    (input.marquee.left - input.contentOrigin) / input.pps - paddingSeconds,
+  );
+  const end =
+    (input.marquee.left + input.marquee.width - input.contentOrigin) / input.pps + paddingSeconds;
+  if (end <= start) return [];
+
+  const candidates: TimelineElement[] = [];
+  for (let row = first; row <= last; row += 1) {
+    const rowKey = input.rowGeometry.rowKeys[row];
+    if (rowKey === undefined) continue;
+    candidates.push(...queryTimelineClipIndex(input.clipIndex, rowKey, { start, end }));
+  }
+  return candidates;
+}
+
 /**
  * Live marquee selection: every clip whose rendered rect intersects the marquee.
  * `baseSelection` (shift/cmd-additive) is unioned in but never affects primaryId.
  */
 export function computeMarqueeSelection(input: {
   clips: MarqueeClipInput[];
-  trackOrder: number[];
+  rowGeometry: TimelineRowGeometry;
   pps: number;
   contentOrigin: number;
   marquee: Rect;
   baseSelection?: Iterable<string>;
-  rowHeights?: readonly number[];
 }): MarqueeSelectionResult {
   const ids = new Set<string>(input.baseSelection ?? []);
   let primaryId: string | null = null;
   for (const clip of input.clips) {
-    const rect = getTimelineClipRect(
-      clip,
-      input.trackOrder,
-      input.pps,
-      input.contentOrigin,
-      input.rowHeights,
-    );
+    const rect = getTimelineClipRect(clip, input.rowGeometry, input.pps, input.contentOrigin);
     if (rect && rectsOverlap(rect, input.marquee)) {
       ids.add(clip.id);
       primaryId = clip.id;

package/src/player/components/timelineTestViewport.ts

@@ -0,0 +1,13 @@
+/** Configure the shared viewport geometry used by timeline gesture hook tests. */
+export function configureTimelineTestViewport(scroll: HTMLElement, scrollHeight: number): void {
+  scroll.getBoundingClientRect = () =>
+    ({ left: 0, top: 0, right: 800, bottom: 240, width: 800, height: 240 }) as DOMRect;
+  Object.defineProperties(scroll, {
+    scrollLeft: { configurable: true, writable: true, value: 0 },
+    scrollTop: { configurable: true, writable: true, value: 0 },
+    scrollWidth: { configurable: true, value: 10_000 },
+    scrollHeight: { configurable: true, value: scrollHeight },
+    clientWidth: { configurable: true, value: 800 },
+    clientHeight: { configurable: true, value: 240 },
+  });
+}

package/src/player/components/timelineViewModel.ts

@@ -29,10 +29,10 @@ export function getTimelinePreviewElement(
   element: TimelineElement,
   resizingClip: ResizingClipState | null,
 ): TimelineElement {
-  if (
-    resizingClip &&
-    getTimelineElementIdentity(resizingClip.element) === getTimelineElementIdentity(element)
-  ) {
+  const elementIdentity = getTimelineElementIdentity(element);
+  const groupPreview = resizingClip?.groupPreview?.find((change) => change.key === elementIdentity);
+  if (groupPreview) return { ...element, ...groupPreview };
+  if (resizingClip && getTimelineElementIdentity(resizingClip.element) === elementIdentity) {
     return {
       ...element,
       start: resizingClip.previewStart,

package/src/player/components/useTimelineClipDrag.resize.test.tsx

@@ -4,7 +4,7 @@ import React, { act } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
 import { usePlayerStore } from "../store/playerStore";
-import type { ResizingClipState } from "./useTimelineClipDrag";
+import type { BlockedClipState, DraggedClipState, ResizingClipState } from "./useTimelineClipDrag";
 import { useTimelineClipDrag } from "./useTimelineClipDrag";
 import { mountReactHarness } from "../../hooks/domSelectionTestHarness";
 
@@ -38,38 +38,77 @@ function renderResizeHarness(
   usePlayerStore.getState().setSelectedElementIds(new Set(selected));
 
   const scroll = document.createElement("div");
+  const setPointerCapture = vi.fn();
+  scroll.setPointerCapture = setPointerCapture;
   document.body.append(scroll);
   const onResizeElement = vi.fn();
+  const onMoveElement = vi.fn();
+  const onBlockedEditAttempt = vi.fn();
   const onResizeElements = vi.fn().mockResolvedValue(undefined);
   let setResizingClip: ((s: ResizingClipState | null) => void) | null = null;
+  let setDraggedClip: ((s: DraggedClipState | null) => void) | null = null;
+  let resizingClip: ResizingClipState | null = null;
+  let blockedClipRef: React.RefObject<BlockedClipState | null> | null = null;
+  let epoch = 0;
 
-  function Harness() {
+  function Harness({ sessionEpoch }: { sessionEpoch: number }) {
     const hook = useTimelineClipDrag({
       scrollRef: { current: scroll },
       ppsRef: { current: 100 },
       durationRef: { current: 100 },
       trackOrderRef: { current: [0, 1] },
       onResizeElement,
+      onMoveElement,
+      onBlockedEditAttempt,
       onResizeElements: options.wireGroupResize === false ? undefined : onResizeElements,
       setShowPopover: vi.fn(),
       setRangeSelectionRef: { current: vi.fn() },
+      sessionEpoch,
     });
     setResizingClip = hook.setResizingClip;
+    setDraggedClip = hook.setDraggedClip;
+    resizingClip = hook.resizingClip;
+    blockedClipRef = hook.blockedClipRef;
     return null;
   }
 
-  const root = mountReactHarness(<Harness />);
+  const root = mountReactHarness(<Harness sessionEpoch={epoch} />);
   const apply = setResizingClip!;
+  const dispatchPointer = (type: string, clientX: number, pointerId = 0) => {
+    const event = new MouseEvent(type, { bubbles: true, clientX, clientY: 0 });
+    Object.defineProperty(event, "pointerId", { value: pointerId });
+    window.dispatchEvent(event);
+  };
 
   return {
     onResizeElement,
+    onMoveElement,
+    onBlockedEditAttempt,
     onResizeElements,
+    setPointerCapture,
     storeById(id: string) {
       return usePlayerStore.getState().elements.find((e) => e.id === id)!;
     },
-    startResize(element: TimelineElement, edge: "start" | "end") {
+    getResizeProjection() {
+      return resizingClip?.groupPreview ?? [];
+    },
+    getBlockedClip() {
+      return blockedClipRef?.current ?? null;
+    },
+    startBlocked(element: TimelineElement, pointerId = 0) {
+      blockedClipRef!.current = {
+        pointerId,
+        element,
+        intent: "move",
+        originClientX: 0,
+        originClientY: 0,
+        started: false,
+      };
+    },
+    startResize(element: TimelineElement, edge: "start" | "end", pointerId = 0) {
       act(() => {
         apply({
+          pointerId,
           element,
           edge,
           originClientX: 0,
@@ -80,19 +119,57 @@ function renderResizeHarness(
         });
       });
     },
-    movePointer(clientX: number) {
+    startDrag(element: TimelineElement, pointerId = 0) {
+      act(() =>
+        setDraggedClip?.({
+          pointerId,
+          element,
+          originClientX: 0,
+          originClientY: 0,
+          originScrollLeft: 0,
+          originScrollTop: 0,
+          pointerClientX: 0,
+          pointerClientY: 0,
+          pointerOffsetX: 0,
+          pointerOffsetY: 0,
+          previewStart: element.start,
+          previewTrack: element.track,
+          insertRow: null,
+          snapTime: null,
+          snapType: null,
+          started: false,
+        }),
+      );
+    },
+    movePointer(clientX: number, pointerId = 0) {
       act(() => {
-        window.dispatchEvent(new MouseEvent("pointermove", { bubbles: true, clientX, clientY: 0 }));
+        dispatchPointer("pointermove", clientX, pointerId);
+      });
+    },
+    async dropPointer(pointerId = 0) {
+      await act(async () => {
+        dispatchPointer("pointerup", 0, pointerId);
       });
     },
-    async dropPointer() {
+    async moveAndDropPointer(clientX: number, pointerId = 0) {
       await act(async () => {
-        window.dispatchEvent(new MouseEvent("pointerup", { bubbles: true }));
+        dispatchPointer("pointermove", clientX, pointerId);
+        dispatchPointer("pointerup", clientX, pointerId);
       });
     },
+    cancelPointer(pointerId = 0) {
+      act(() => dispatchPointer("pointercancel", 0, pointerId));
+    },
+    losePointerCapture(pointerId = 0) {
+      act(() => dispatchPointer("lostpointercapture", 0, pointerId));
+    },
+    setSessionEpoch(next: number) {
+      epoch = next;
+      act(() => root.render(<Harness sessionEpoch={epoch} />));
+    },
     pressEscape() {
       act(() => {
-        window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+        scroll.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
       });
     },
     unmount() {
@@ -161,14 +238,131 @@ describe("useTimelineClipDrag — single-clip resize (unchanged path)", () => {
   });
 });
 
+describe("useTimelineClipDrag — gesture lifecycle", () => {
+  it("does not capture a stationary click before the drag threshold", () => {
+    const a = el("a", { duration: 2 });
+    const h = renderResizeHarness([a], []);
+    h.startDrag(a, 7);
+    expect(h.setPointerCapture).not.toHaveBeenCalled();
+
+    h.movePointer(3, 7);
+    expect(h.setPointerCapture).not.toHaveBeenCalled();
+
+    h.movePointer(5, 7);
+    expect(h.setPointerCapture).toHaveBeenCalledOnce();
+    expect(h.setPointerCapture).toHaveBeenCalledWith(7);
+    h.unmount();
+  });
+
+  it("commits the final drag position exactly once", async () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const a = el("a", { duration: 2 });
+    const h = renderResizeHarness([a], []);
+    h.startDrag(a, 7);
+    await h.moveAndDropPointer(50, 7);
+    await h.dropPointer(7);
+    expect(h.onMoveElement).toHaveBeenCalledTimes(1);
+    expect(h.onMoveElement).toHaveBeenCalledWith(a, expect.objectContaining({ start: 0.5 }));
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining("only single-clip onMoveElement wired"),
+    );
+    warnSpy.mockRestore();
+    h.unmount();
+  });
+
+  it("ignores a foreign pointer cancellation during a blocked gesture", async () => {
+    const a = el("a", { duration: 2 });
+    const h = renderResizeHarness([a], []);
+    h.startBlocked(a, 7);
+    h.movePointer(5, 7);
+    expect(h.onBlockedEditAttempt).toHaveBeenCalledOnce();
+
+    h.cancelPointer(8);
+    expect(h.getBlockedClip()?.pointerId).toBe(7);
+
+    await h.dropPointer(7);
+    expect(h.getBlockedClip()).toBeNull();
+    h.unmount();
+  });
+
+  it("commits the final same-turn pointer move exactly once", async () => {
+    const a = el("a", { duration: 2 });
+    const h = renderResizeHarness([a], []);
+    h.startResize(a, "end", 7);
+    await h.moveAndDropPointer(75, 7);
+    await h.dropPointer(7);
+    expect(h.onResizeElement).toHaveBeenCalledTimes(1);
+    expect(h.onResizeElement).toHaveBeenCalledWith(a, expect.objectContaining({ duration: 2.75 }));
+    h.unmount();
+  });
+
+  it("ignores another pointer and cancels without committing", async () => {
+    const a = el("a", { duration: 2 });
+    const h = renderResizeHarness([a], []);
+    h.startResize(a, "end", 7);
+    h.movePointer(50, 8);
+    await h.dropPointer(8);
+    expect(h.onResizeElement).not.toHaveBeenCalled();
+    h.cancelPointer(7);
+    await h.dropPointer(7);
+    expect(h.onResizeElement).not.toHaveBeenCalled();
+    expect(h.storeById("a").duration).toBe(2);
+    h.unmount();
+  });
+
+  it("cancels an active projection when the project epoch changes", () => {
+    const a = el("a", { duration: 2 });
+    const h = renderResizeHarness([a], []);
+    h.startResize(a, "end", 7);
+    h.movePointer(50, 7);
+    h.setSessionEpoch(1);
+    expect(h.getResizeProjection()).toHaveLength(0);
+    expect(h.onResizeElement).not.toHaveBeenCalled();
+    expect(h.storeById("a").duration).toBe(2);
+    h.unmount();
+  });
+
+  it("does not commit a stale clip deleted during the gesture", async () => {
+    const a = el("a", { duration: 2 });
+    const h = renderResizeHarness([a], []);
+    h.startResize(a, "end", 7);
+    h.movePointer(50, 7);
+    act(() => usePlayerStore.getState().setElements([]));
+    await h.dropPointer(7);
+    expect(h.onResizeElement).not.toHaveBeenCalled();
+    expect(usePlayerStore.getState().elements).toEqual([]);
+    h.unmount();
+  });
+
+  it("treats lost capture and unmount as cancellation", async () => {
+    const a = el("a", { duration: 2 });
+    const lost = renderResizeHarness([a], []);
+    lost.startResize(a, "end", 7);
+    lost.movePointer(50, 7);
+    lost.losePointerCapture(7);
+    await lost.dropPointer(7);
+    expect(lost.onResizeElement).not.toHaveBeenCalled();
+    lost.unmount();
+
+    const unmounted = renderResizeHarness([a], []);
+    unmounted.startResize(a, "end", 9);
+    unmounted.movePointer(50, 9);
+    unmounted.unmount();
+    expect(unmounted.onResizeElement).not.toHaveBeenCalled();
+    expect(usePlayerStore.getState().elements[0]?.duration).toBe(2);
+  });
+});
+
 describe("useTimelineClipDrag — multi-select group resize (restored)", () => {
-  it("previews the non-grabbed member through the store, grabbed stays out until commit", () => {
+  it("previews every member without mutating canonical elements", () => {
     const { h } = startGroupResize(); // grabbed asks +0.5
 
-    // Non-grabbed member is previewed in the store; the grabbed clip renders from
-    // resizingClip state, so its store value is still the original until commit.
-    expect(h.storeById("b").duration).toBe(3.5);
+    expect(h.getResizeProjection()).toEqual([
+      expect.objectContaining({ key: "a", duration: 2.5 }),
+      expect.objectContaining({ key: "b", duration: 3.5 }),
+    ]);
     expect(h.storeById("a").duration).toBe(2);
+    expect(h.storeById("b").duration).toBe(3);
     h.unmount();
   });
 
@@ -186,6 +380,7 @@ describe("useTimelineClipDrag — multi-select group resize (restored)", () => {
       { coalesceKey: expect.stringMatching(/^clip-group-resize:/) },
     );
     expect(h.storeById("a").duration).toBe(2.5);
+    expect(h.getResizeProjection()).toHaveLength(0);
     expect(h.storeById("b").duration).toBe(3.5);
     h.unmount();
   });
@@ -213,7 +408,10 @@ describe("useTimelineClipDrag — multi-select group resize (restored)", () => {
     });
     h.startResize(a, "end");
     h.movePointer(50);
-    expect(h.storeById("b").duration).toBe(3.5);
+    expect(h.getResizeProjection()).toEqual(
+      expect.arrayContaining([expect.objectContaining({ key: "b", duration: 3.5 })]),
+    );
+    expect(h.storeById("b").duration).toBe(3);
 
     await h.dropPointer();
     expect(h.storeById("a").duration).toBe(2);
@@ -229,12 +427,16 @@ describe("useTimelineClipDrag — multi-select group resize (restored)", () => {
     h.unmount();
   });
 
-  it("Escape rolls back the previewed non-grabbed member and persists nothing", () => {
+  it("Escape discards the projection and persists nothing", () => {
     const { h } = startGroupResize();
-    expect(h.storeById("b").duration).toBe(3.5); // previewed
+    expect(h.getResizeProjection()).toHaveLength(2);
+    const sawEscape = vi.fn();
+    document.addEventListener("keydown", sawEscape, { once: true });
 
     h.pressEscape();
-    expect(h.storeById("b").duration).toBe(3); // restored
+    expect(sawEscape).toHaveBeenCalledOnce();
+    expect(h.getResizeProjection()).toHaveLength(0);
+    expect(h.storeById("b").duration).toBe(3);
     expect(h.onResizeElement).not.toHaveBeenCalled();
     h.unmount();
   });