@hyperframes/studio 0.7.54 → 0.7.56

package/src/player/components/useTimelineClipGroupDrag.ts

@@ -1,417 +0,0 @@
-import { useCallback, useRef, type RefObject } from "react";
-import type {
-  TimelineGroupMoveChange,
-  TimelineGroupResizeChange,
-} from "../../hooks/useTimelineGroupEditing";
-import type { TimelineElement } from "../store/playerStore";
-import {
-  getTimelineEditCapabilities,
-  resolveTimelineGroupMove,
-  resolveTimelineGroupResize,
-  type TimelineGroupResizeEdge,
-  type TimelineGroupTimingMember,
-} from "./timelineEditing";
-
-type TimelineResizeUpdates = Pick<TimelineElement, "start" | "duration" | "playbackStart">;
-
-type UpdateTimelineElement = (
-  elementId: string,
-  updates: Partial<Pick<TimelineElement, "start" | "duration" | "playbackStart">>,
-) => void;
-
-interface GroupTimingMember extends TimelineGroupTimingMember {
-  element: TimelineElement;
-  key: string;
-}
-
-interface MoveSession {
-  grabbedKey: string;
-  members: GroupTimingMember[];
-  changes: TimelineGroupMoveChange[];
-  hasChanged: boolean;
-}
-
-interface ResizeSession {
-  grabbedKey: string;
-  edge: TimelineGroupResizeEdge;
-  members: GroupTimingMember[];
-  changes: TimelineGroupResizeChange[];
-  hasChanged: boolean;
-}
-
-interface UseTimelineClipGroupDragInput {
-  timelineElementsRef: RefObject<TimelineElement[]>;
-  updateElement: UpdateTimelineElement;
-  onMoveElementsRef: RefObject<
-    ((changes: TimelineGroupMoveChange[]) => Promise<void> | void) | undefined
-  >;
-  onResizeElementsRef: RefObject<
-    ((changes: TimelineGroupResizeChange[]) => Promise<void> | void) | undefined
-  >;
-  onPreviewMoveElementsRef: RefObject<((changes: TimelineGroupMoveChange[]) => void) | undefined>;
-  onPreviewResizeElementsRef: RefObject<
-    ((changes: TimelineGroupResizeChange[]) => void) | undefined
-  >;
-}
-
-interface PreviewGroupMoveResult {
-  active: boolean;
-  previewStart: number;
-}
-
-interface PreviewGroupResizeResult {
-  active: boolean;
-  updates: TimelineResizeUpdates;
-}
-
-function elementKey(element: TimelineElement): string {
-  return element.key ?? element.id;
-}
-
-function isMediaElement(element: TimelineElement): boolean {
-  const normalizedTag = element.tag.toLowerCase();
-  return normalizedTag === "audio" || normalizedTag === "video";
-}
-
-function selectedElementSet(selectedElementIdsInput: Set<string>): Set<string> {
-  return selectedElementIdsInput instanceof Set ? selectedElementIdsInput : new Set<string>();
-}
-
-function selectedMembers(
-  grabbedElement: TimelineElement,
-  selectedElementIdsInput: Set<string>,
-  timelineElements: readonly TimelineElement[],
-  mapMember: (element: TimelineElement) => GroupTimingMember,
-  canEdit: (element: TimelineElement) => boolean,
-): GroupTimingMember[] | null {
-  const selectedElementIds = selectedElementSet(selectedElementIdsInput);
-  const grabbedKey = elementKey(grabbedElement);
-  if (selectedElementIds.size <= 1 || !selectedElementIds.has(grabbedKey)) return null;
-
-  const elements = timelineElements.filter((element) =>
-    selectedElementIds.has(elementKey(element)),
-  );
-  // A group edit must not touch a member that individually forbids this operation
-  // (e.g. a locked or implicitly-timed clip). If any member can't take it, don't form
-  // a group; the gesture degrades to a normal single-clip edit of the grabbed clip.
-  if (!elements.every(canEdit)) return null;
-  const members = elements.map(mapMember);
-  return members.length > 1 ? members : null;
-}
-
-function moveMember(element: TimelineElement): GroupTimingMember {
-  return {
-    element,
-    key: elementKey(element),
-    start: element.start,
-    duration: element.duration,
-  };
-}
-
-function resizeMember(edge: TimelineGroupResizeEdge, element: TimelineElement): GroupTimingMember {
-  const shouldSeedPlaybackStart = edge === "start" && isMediaElement(element);
-  return {
-    element,
-    key: elementKey(element),
-    start: element.start,
-    duration: element.duration,
-    playbackStart: shouldSeedPlaybackStart ? (element.playbackStart ?? 0) : element.playbackStart,
-    playbackRate: element.playbackRate,
-  };
-}
-
-function sameGesture(sessionKey: string, element: TimelineElement): boolean {
-  return sessionKey === elementKey(element);
-}
-
-function createMoveSession(
-  element: TimelineElement,
-  selectedElementIds: Set<string>,
-  timelineElements: readonly TimelineElement[],
-): MoveSession | null {
-  const members = selectedMembers(
-    element,
-    selectedElementIds,
-    timelineElements,
-    moveMember,
-    (candidate) => getTimelineEditCapabilities(candidate).canMove,
-  );
-  if (!members) return null;
-  return {
-    grabbedKey: elementKey(element),
-    members,
-    changes: [],
-    hasChanged: false,
-  };
-}
-
-function createResizeSession(
-  element: TimelineElement,
-  selectedElementIds: Set<string>,
-  timelineElements: readonly TimelineElement[],
-  edge: TimelineGroupResizeEdge,
-): ResizeSession | null {
-  const members = selectedMembers(
-    element,
-    selectedElementIds,
-    timelineElements,
-    (member) => resizeMember(edge, member),
-    (candidate) => {
-      const caps = getTimelineEditCapabilities(candidate);
-      return edge === "start" ? caps.canTrimStart : caps.canTrimEnd;
-    },
-  );
-  if (!members) return null;
-  return {
-    grabbedKey: elementKey(element),
-    edge,
-    members,
-    changes: [],
-    hasChanged: false,
-  };
-}
-
-function resolveMoveChanges(
-  session: MoveSession,
-  previewStart: number,
-): TimelineGroupMoveChange[] | null {
-  const grabbed = session.members.find((member) => member.key === session.grabbedKey);
-  if (!grabbed) return null;
-  const result = resolveTimelineGroupMove(session.members, previewStart - grabbed.start);
-  return result.members.map((member, index) => ({
-    element: session.members[index]!.element,
-    start: member.start,
-  }));
-}
-
-function resizeRawDelta(session: ResizeSession, updates: TimelineResizeUpdates): number | null {
-  const grabbed = session.members.find((member) => member.key === session.grabbedKey);
-  if (!grabbed) return null;
-  return session.edge === "start"
-    ? updates.start - grabbed.start
-    : updates.duration - grabbed.duration;
-}
-
-function resolveResizeChanges(
-  session: ResizeSession,
-  updates: TimelineResizeUpdates,
-): TimelineGroupResizeChange[] | null {
-  const rawDelta = resizeRawDelta(session, updates);
-  if (rawDelta == null) return null;
-  const result = resolveTimelineGroupResize(session.members, session.edge, rawDelta);
-  return result.members.map((member, index) => ({
-    element: session.members[index]!.element,
-    start: member.start,
-    duration: member.duration,
-    playbackStart: member.playbackStart,
-  }));
-}
-
-function moveSessionHasChanged(
-  session: MoveSession,
-  changes: readonly TimelineGroupMoveChange[],
-): boolean {
-  return changes.some((change, index) => change.start !== session.members[index]!.start);
-}
-
-function resizeSessionHasChanged(
-  session: ResizeSession,
-  changes: readonly TimelineGroupResizeChange[],
-): boolean {
-  return changes.some((change, index) => {
-    const member = session.members[index]!;
-    return (
-      change.start !== member.start ||
-      change.duration !== member.duration ||
-      change.playbackStart !== member.playbackStart
-    );
-  });
-}
-
-function previewStartForGrabbed(
-  session: MoveSession,
-  changes: readonly TimelineGroupMoveChange[],
-  fallback: number,
-): number {
-  const change = changes.find((candidate) => elementKey(candidate.element) === session.grabbedKey);
-  return change?.start ?? fallback;
-}
-
-function resizeUpdatesForGrabbed(
-  session: ResizeSession,
-  changes: readonly TimelineGroupResizeChange[],
-  fallback: TimelineResizeUpdates,
-): TimelineResizeUpdates {
-  const change = changes.find((candidate) => elementKey(candidate.element) === session.grabbedKey);
-  if (!change) return fallback;
-  return {
-    start: change.start,
-    duration: change.duration,
-    playbackStart: change.playbackStart,
-  };
-}
-
-export function useTimelineClipGroupDrag({
-  timelineElementsRef,
-  updateElement,
-  onMoveElementsRef,
-  onResizeElementsRef,
-  onPreviewMoveElementsRef,
-  onPreviewResizeElementsRef,
-}: UseTimelineClipGroupDragInput) {
-  const moveSessionRef = useRef<MoveSession | null>(null);
-  const resizeSessionRef = useRef<ResizeSession | null>(null);
-
-  const rollbackMove = useCallback(
-    (session: MoveSession) => {
-      const changes = session.members.map((member) => ({
-        element: member.element,
-        start: member.start,
-      }));
-      for (const change of changes) {
-        updateElement(elementKey(change.element), { start: change.start });
-      }
-      onPreviewMoveElementsRef.current?.(changes);
-    },
-    [onPreviewMoveElementsRef, updateElement],
-  );
-
-  const rollbackResize = useCallback(
-    (session: ResizeSession) => {
-      const changes = session.members.map((member) => ({
-        element: member.element,
-        start: member.start,
-        duration: member.duration,
-        playbackStart: member.playbackStart,
-      }));
-      for (const change of changes) {
-        updateElement(elementKey(change.element), {
-          start: change.start,
-          duration: change.duration,
-          playbackStart: change.playbackStart,
-        });
-      }
-      onPreviewResizeElementsRef.current?.(changes);
-    },
-    [onPreviewResizeElementsRef, updateElement],
-  );
-
-  const previewGroupMove = useCallback(
-    (
-      element: TimelineElement,
-      selectedElementIds: Set<string>,
-      previewStart: number,
-    ): PreviewGroupMoveResult => {
-      let session = moveSessionRef.current;
-      if (!session || !sameGesture(session.grabbedKey, element)) {
-        if (!onMoveElementsRef.current) return { active: false, previewStart };
-        session = createMoveSession(element, selectedElementIds, timelineElementsRef.current);
-        if (!session) return { active: false, previewStart };
-        moveSessionRef.current = session;
-      }
-
-      const changes = resolveMoveChanges(session, previewStart);
-      if (!changes) return { active: false, previewStart };
-      session.changes = changes;
-      session.hasChanged = moveSessionHasChanged(session, changes);
-
-      for (const change of changes) {
-        updateElement(elementKey(change.element), { start: change.start });
-      }
-      onPreviewMoveElementsRef.current?.(changes);
-
-      return {
-        active: true,
-        previewStart: previewStartForGrabbed(session, changes, previewStart),
-      };
-    },
-    [onMoveElementsRef, onPreviewMoveElementsRef, timelineElementsRef, updateElement],
-  );
-
-  const previewGroupResize = useCallback(
-    (
-      element: TimelineElement,
-      selectedElementIds: Set<string>,
-      edge: TimelineGroupResizeEdge,
-      updates: TimelineResizeUpdates,
-    ): PreviewGroupResizeResult => {
-      let session = resizeSessionRef.current;
-      if (!session || !sameGesture(session.grabbedKey, element) || session.edge !== edge) {
-        if (!onResizeElementsRef.current) return { active: false, updates };
-        session = createResizeSession(
-          element,
-          selectedElementIds,
-          timelineElementsRef.current,
-          edge,
-        );
-        if (!session) return { active: false, updates };
-        resizeSessionRef.current = session;
-      }
-
-      const changes = resolveResizeChanges(session, updates);
-      if (!changes) return { active: false, updates };
-      session.changes = changes;
-      session.hasChanged = resizeSessionHasChanged(session, changes);
-
-      for (const change of changes) {
-        updateElement(elementKey(change.element), {
-          start: change.start,
-          duration: change.duration,
-          playbackStart: change.playbackStart,
-        });
-      }
-      onPreviewResizeElementsRef.current?.(changes);
-
-      return {
-        active: true,
-        updates: resizeUpdatesForGrabbed(session, changes, updates),
-      };
-    },
-    [onPreviewResizeElementsRef, onResizeElementsRef, timelineElementsRef, updateElement],
-  );
-
-  const commitGroupMove = useCallback(
-    (element: TimelineElement): boolean => {
-      const session = moveSessionRef.current;
-      if (!session || !sameGesture(session.grabbedKey, element)) return false;
-      moveSessionRef.current = null;
-      if (!session.hasChanged) return true;
-
-      Promise.resolve(onMoveElementsRef.current?.(session.changes)).catch((error) => {
-        rollbackMove(session);
-        console.error("[Timeline] Failed to persist group clip move", error);
-      });
-      return true;
-    },
-    [onMoveElementsRef, rollbackMove],
-  );
-
-  const commitGroupResize = useCallback(
-    (element: TimelineElement): boolean => {
-      const session = resizeSessionRef.current;
-      if (!session || !sameGesture(session.grabbedKey, element)) return false;
-      resizeSessionRef.current = null;
-      if (!session.hasChanged) return true;
-
-      Promise.resolve(onResizeElementsRef.current?.(session.changes)).catch((error) => {
-        rollbackResize(session);
-        console.error("[Timeline] Failed to persist group clip resize", error);
-      });
-      return true;
-    },
-    [onResizeElementsRef, rollbackResize],
-  );
-
-  const clearGroupDragSessions = useCallback(() => {
-    moveSessionRef.current = null;
-    resizeSessionRef.current = null;
-  }, []);
-
-  return {
-    previewGroupMove,
-    previewGroupResize,
-    commitGroupMove,
-    commitGroupResize,
-    clearGroupDragSessions,
-  };
-}

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

@@ -1,231 +0,0 @@
-// @vitest-environment happy-dom
-
-import React, { act } from "react";
-import { createRoot } from "react-dom/client";
-import { afterEach, describe, expect, it } from "vitest";
-import type { TimelineElement } from "../store/playerStore";
-import { usePlayerStore } from "../store/playerStore";
-import { GUTTER, RULER_H, TRACK_H } from "./timelineLayout";
-import type { StackingTimelineLayer } from "./timelineTrackOrder";
-import { useTimelineMarqueeSelection } from "./useTimelineMarqueeSelection";
-
-(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
-
-function element(id: string, start: number, duration: number, track: number): TimelineElement {
-  return { id, tag: "div", start, duration, track };
-}
-
-function layer(id: string, elements: TimelineElement[]): StackingTimelineLayer {
-  return {
-    id,
-    kind: "visual",
-    contextKey: "",
-    zIndex: 0,
-    placementTrack: elements[0]?.track ?? 0,
-    elements,
-  };
-}
-
-function pointerEvent(type: string, init: MouseEventInit & { pointerId?: number }) {
-  const event = new MouseEvent(type, { bubbles: true, cancelable: true, ...init });
-  Object.defineProperty(event, "pointerId", { value: init.pointerId ?? 1 });
-  return event;
-}
-
-function dispatchPointer(
-  target: HTMLElement,
-  type: "pointerdown" | "pointermove" | "pointerup",
-  point: { x: number; y: number },
-) {
-  target.dispatchEvent(pointerEvent(type, { button: 0, clientX: point.x, clientY: point.y }));
-}
-
-function dragMarquee(
-  harness: ReturnType<typeof renderMarqueeHarness>,
-  start: { x: number; y: number },
-  end: { x: number; y: number },
-  downTarget: HTMLElement = harness.scroll,
-) {
-  dispatchPointer(downTarget, "pointerdown", start);
-  dispatchPointer(harness.scroll, "pointermove", end);
-  dispatchPointer(harness.scroll, "pointerup", end);
-}
-
-function renderMarqueeHarness(layers: StackingTimelineLayer[]) {
-  const host = document.createElement("div");
-  document.body.append(host);
-  const layerOrder = layers.map((item) => item.id);
-  const setShowPopover = () => {};
-  const setRangeSelection = () => {};
-  const seekedX: number[] = [];
-
-  function Harness() {
-    const scrollRef = React.useRef<HTMLDivElement | null>(null);
-    const hook = useTimelineMarqueeSelection({
-      scrollRef,
-      ppsRef: { current: 100 },
-      trackOrderRef: { current: layerOrder },
-      timelineLayersRef: { current: layers },
-      setShowPopover,
-      setRangeSelectionRef: { current: setRangeSelection },
-      seekFromX: (clientX: number) => seekedX.push(clientX),
-    });
-    return (
-      <div
-        ref={scrollRef}
-        data-scroll="true"
-        onPointerDown={(event) => {
-          hook.handlePointerDown(event);
-        }}
-        onPointerMove={(event) => {
-          hook.handlePointerMove(event);
-        }}
-        onPointerUp={(event) => {
-          hook.handlePointerUp(event);
-        }}
-      >
-        <button data-clip="true">clip</button>
-        {hook.marqueeRect && <span data-marquee="true" />}
-      </div>
-    );
-  }
-
-  const root = createRoot(host);
-  act(() => {
-    root.render(<Harness />);
-  });
-  const scroll = host.querySelector<HTMLElement>("[data-scroll]");
-  if (!scroll) throw new Error("Expected scroll host");
-  Object.defineProperty(scroll, "clientWidth", { configurable: true, value: 160 });
-  Object.defineProperty(scroll, "clientHeight", { configurable: true, value: 160 });
-  Object.defineProperty(scroll, "scrollWidth", { configurable: true, value: 600 });
-  Object.defineProperty(scroll, "scrollHeight", { configurable: true, value: 260 });
-  scroll.getBoundingClientRect = () =>
-    ({
-      left: 0,
-      top: 0,
-      right: 160,
-      bottom: 160,
-      width: 160,
-      height: 160,
-      x: 0,
-      y: 0,
-      toJSON: () => ({}),
-    }) as DOMRect;
-
-  return {
-    host,
-    scroll,
-    root,
-    seekedX,
-    clip: host.querySelector<HTMLElement>("[data-clip]")!,
-    unmount() {
-      act(() => root.unmount());
-    },
-  };
-}
-
-afterEach(() => {
-  document.body.innerHTML = "";
-  usePlayerStore.getState().reset();
-});
-
-describe("useTimelineMarqueeSelection", () => {
-  it("selects clips intersecting an empty-lane drag rectangle", () => {
-    const layers = [
-      layer("lane-0", [element("first", 0.5, 0.5, 0)]),
-      layer("lane-1", [element("second", 2, 0.5, 1)]),
-      layer("lane-2", [element("third", 0.5, 0.5, 2)]),
-    ];
-    const harness = renderMarqueeHarness(layers);
-    const start = { x: GUTTER + 10, y: RULER_H + 4 };
-    const end = { x: GUTTER + 260, y: RULER_H + TRACK_H * 2 - 2 };
-
-    act(() => {
-      dispatchPointer(harness.scroll, "pointerdown", start);
-      dispatchPointer(harness.scroll, "pointermove", end);
-    });
-    expect(harness.host.querySelector("[data-marquee]")).not.toBeNull();
-
-    act(() => {
-      dispatchPointer(harness.scroll, "pointerup", end);
-    });
-
-    expect([...usePlayerStore.getState().selectedElementIds]).toEqual(["first", "second"]);
-    harness.unmount();
-  });
-
-  it("treats a sub-threshold empty-lane drag as a clear click that also seeks", () => {
-    usePlayerStore.getState().setSelection(["selected"]);
-    const harness = renderMarqueeHarness([layer("lane-0", [element("selected", 0, 1, 0)])]);
-
-    act(() => {
-      dragMarquee(harness, { x: GUTTER + 20, y: RULER_H + 4 }, { x: GUTTER + 21, y: RULER_H + 5 });
-    });
-
-    expect(usePlayerStore.getState().selectedElementIds.size).toBe(0);
-    expect(harness.host.querySelector("[data-marquee]")).toBeNull();
-    // A sub-threshold press still scrubs the playhead to the click, like a plain lane click.
-    expect(harness.seekedX).toEqual([GUTTER + 20]);
-    harness.unmount();
-  });
-
-  it("does not start from clips or the ruler", () => {
-    usePlayerStore.getState().setSelection(["kept"]);
-    const harness = renderMarqueeHarness([layer("lane-0", [element("kept", 0, 1, 0)])]);
-
-    act(() => {
-      dragMarquee(
-        harness,
-        { x: GUTTER + 20, y: RULER_H + 4 },
-        { x: GUTTER + 80, y: RULER_H + 40 },
-        harness.clip,
-      );
-      dragMarquee(harness, { x: GUTTER + 20, y: RULER_H - 2 }, { x: GUTTER + 80, y: RULER_H + 40 });
-    });
-
-    expect([...usePlayerStore.getState().selectedElementIds]).toEqual(["kept"]);
-    expect(harness.host.querySelector("[data-marquee]")).toBeNull();
-    harness.unmount();
-  });
-
-  it("clears selection when the released marquee hits no clips", () => {
-    usePlayerStore.getState().setSelection(["selected"]);
-    const harness = renderMarqueeHarness([layer("lane-0", [element("selected", 4, 1, 0)])]);
-
-    act(() => {
-      dragMarquee(harness, { x: GUTTER + 10, y: RULER_H + 4 }, { x: GUTTER + 80, y: RULER_H + 40 });
-    });
-
-    expect(usePlayerStore.getState().selectedElementIds.size).toBe(0);
-    harness.unmount();
-  });
-
-  it("uses autoscroll position when resolving the released marquee", () => {
-    const originalRaf = window.requestAnimationFrame;
-    const originalCancel = window.cancelAnimationFrame;
-    const callbacks: FrameRequestCallback[] = [];
-    window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
-      callbacks.push(callback);
-      return callbacks.length;
-    }) as typeof window.requestAnimationFrame;
-    window.cancelAnimationFrame = (() => {}) as typeof window.cancelAnimationFrame;
-    const harness = renderMarqueeHarness([layer("lane-0", [element("reachable", 1.28, 0.2, 0)])]);
-
-    try {
-      act(() => {
-        dispatchPointer(harness.scroll, "pointerdown", { x: GUTTER + 10, y: RULER_H + 4 });
-        dispatchPointer(harness.scroll, "pointermove", { x: 155, y: RULER_H + 40 });
-        callbacks.shift()?.(0);
-        dispatchPointer(harness.scroll, "pointerup", { x: 155, y: RULER_H + 40 });
-      });
-
-      expect(harness.scroll.scrollLeft).toBeGreaterThan(0);
-      expect([...usePlayerStore.getState().selectedElementIds]).toEqual(["reachable"]);
-      harness.unmount();
-    } finally {
-      window.requestAnimationFrame = originalRaf;
-      window.cancelAnimationFrame = originalCancel;
-    }
-  });
-});