feat(studio): support trackpad panning in preview

Author: func25

packages/core/src/compositionRoot.ts

@@ -0,0 +1,15 @@
+export const AUTHORED_ROOT_ID_ATTR = "data-hf-authored-id";
+export const INNER_ROOT_MARKER_ATTR = "data-hf-inner-root";
+
+export const FLATTENED_INNER_ROOT_STRIP_ATTRS = [
+  "data-composition-id",
+  "data-composition-file",
+  "data-start",
+  "data-duration",
+  "data-end",
+  "data-track-index",
+  "data-track",
+  "data-composition-src",
+  "data-hf-authored-duration",
+  "data-hf-authored-end",
+] as const;

packages/studio/src/components/nle/NLEPreview.test.ts

@@ -1,5 +1,101 @@
-import { describe, expect, it } from "vitest";
-import { getPreviewPlayerKey } from "./NLEPreview";
+// @vitest-environment happy-dom
+
+import React, { act, createRef } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { NLEPreview, getPreviewPlayerKey } from "./NLEPreview";
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock("../../player", async () => {
+  const React = await import("react");
+
+  return {
+    Player: React.forwardRef(function MockPlayer(
+      props: {
+        onLoad?: () => void;
+        style?: React.CSSProperties;
+      },
+      ref: React.ForwardedRef<HTMLIFrameElement>,
+    ) {
+      React.useEffect(() => {
+        props.onLoad?.();
+      }, [props]);
+
+      return React.createElement("div", {
+        ref: ref as React.ForwardedRef<HTMLDivElement>,
+        "data-testid": "mock-player",
+        style: props.style,
+      });
+    }),
+  };
+});
+
+vi.mock("../../utils/studioUiPreferences", () => ({
+  readStudioUiPreferences: () => ({}),
+  writeStudioUiPreferences: () => {},
+}));
+
+class MockResizeObserver {
+  observe() {}
+  disconnect() {}
+}
+
+const originalResizeObserver = globalThis.ResizeObserver;
+
+function setRect(node: Element, rect: { width: number; height: number }) {
+  Object.defineProperty(node, "getBoundingClientRect", {
+    configurable: true,
+    value: () => ({
+      x: 0,
+      y: 0,
+      left: 0,
+      top: 0,
+      right: rect.width,
+      bottom: rect.height,
+      width: rect.width,
+      height: rect.height,
+      toJSON: () => ({}),
+    }),
+  });
+}
+
+function renderPreview() {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const iframeRef = createRef<HTMLIFrameElement>();
+
+  act(() => {
+    root.render(
+      React.createElement(NLEPreview, {
+        projectId: "timeline-edit-playground",
+        iframeRef,
+        onIframeLoad: () => {},
+      }),
+    );
+  });
+
+  const viewport = host.querySelector('[aria-label="Composition preview"]') as HTMLDivElement;
+  const stage = host.querySelector('[data-testid="preview-zoom-stage"]') as HTMLDivElement;
+  expect(viewport).toBeTruthy();
+  expect(stage).toBeTruthy();
+
+  setRect(viewport, { width: 800, height: 600 });
+
+  return {
+    host,
+    root,
+    viewport,
+    stage,
+    cleanup() {
+      act(() => {
+        root.unmount();
+      });
+      host.remove();
+    },
+  };
+}
 
 describe("getPreviewPlayerKey", () => {
   it("keeps the same player identity when only refreshKey changes", () => {
@@ -30,3 +126,70 @@ describe("getPreviewPlayerKey", () => {
     );
   });
 });
+
+describe("NLEPreview", () => {
+  beforeEach(() => {
+    globalThis.ResizeObserver = MockResizeObserver as typeof ResizeObserver;
+  });
+
+  afterEach(() => {
+    globalThis.ResizeObserver = originalResizeObserver;
+  });
+
+  it("pans the preview with middle mouse drag", () => {
+    const view = renderPreview();
+    const target = document.createElement("div");
+    view.stage.appendChild(target);
+
+    act(() => {
+      target.dispatchEvent(
+        new PointerEvent("pointerdown", {
+          bubbles: true,
+          pointerId: 1,
+          button: 1,
+          clientX: 240,
+          clientY: 180,
+        }),
+      );
+      document.dispatchEvent(
+        new PointerEvent("pointermove", {
+          bubbles: true,
+          pointerId: 1,
+          clientX: 300,
+          clientY: 220,
+        }),
+      );
+      document.dispatchEvent(
+        new PointerEvent("pointerup", {
+          bubbles: true,
+          pointerId: 1,
+        }),
+      );
+    });
+
+    expect(view.stage.style.transform).toContain("translate(48px, 40px)");
+    view.cleanup();
+  });
+
+  it("pans the preview with a two-finger wheel gesture", () => {
+    const view = renderPreview();
+    const target = document.createElement("div");
+    view.stage.appendChild(target);
+
+    act(() => {
+      target.dispatchEvent(
+        new WheelEvent("wheel", {
+          bubbles: true,
+          cancelable: true,
+          clientX: 240,
+          clientY: 180,
+          deltaX: -30,
+          deltaY: 24,
+        }),
+      );
+    });
+
+    expect(view.stage.style.transform).toContain("translate(30px, -24px)");
+    view.cleanup();
+  });
+});

packages/studio/src/components/nle/NLEPreview.tsx

@@ -6,6 +6,7 @@ import {
   clampPreviewPan,
   clampPreviewZoomPercent,
   ownsPreviewPanTarget,
+  resolvePreviewWheelPan,
   resolvePreviewWheelZoom,
   toDomPrecision,
   type PreviewZoomState,
@@ -210,8 +211,6 @@ export const NLEPreview = memo(function NLEPreview({
     const viewport = viewportRef.current;
     if (!viewport) return;
 
-    let lastZoomTime = 0;
-
     const handleWheel = (event: WheelEvent) => {
       const rect = viewport.getBoundingClientRect();
       if (
@@ -226,7 +225,6 @@ export const NLEPreview = memo(function NLEPreview({
       const isZoomGesture = event.ctrlKey || event.metaKey;
 
       if (isZoomGesture) {
-        lastZoomTime = Date.now();
         event.preventDefault();
         event.stopPropagation();
 
@@ -242,10 +240,21 @@ export const NLEPreview = memo(function NLEPreview({
         return;
       }
 
-      if (Date.now() - lastZoomTime < 400) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
+      if (!ownsPreviewPanTarget(event.target, stageRef.current)) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const next = resolvePreviewWheelPan({
+        state: zoomRef.current,
+        deltaX: event.deltaX,
+        deltaY: event.deltaY,
+        viewportWidth: rect.width,
+        viewportHeight: rect.height,
+        contentWidth: stageSize.width,
+        contentHeight: stageSize.height,
+      });
+      applyZoom(next);
     };
 
     document.addEventListener("wheel", handleWheel, { passive: false, capture: true });

packages/studio/src/components/nle/previewZoom.test.ts

@@ -13,6 +13,7 @@ import {
   ownsPreviewPanTarget,
   PREVIEW_PAN_OVERSCROLL_PX,
   PREVIEW_PAN_SURFACE_SELECTOR,
+  resolvePreviewWheelPan,
   resolvePreviewWheelZoom,
   toDomPrecision,
 } from "./previewZoom";
@@ -187,3 +188,32 @@ describe("resolvePreviewWheelZoom", () => {
     expect(next.panY).toBe(20);
   });
 });
+
+describe("resolvePreviewWheelPan", () => {
+  it("moves preview pan from wheel deltas", () => {
+    const next = resolvePreviewWheelPan({
+      state: DEFAULT_PREVIEW_ZOOM,
+      deltaX: 18,
+      deltaY: -12,
+      viewportWidth: 800,
+      viewportHeight: 600,
+    });
+
+    expect(next.zoomPercent).toBe(100);
+    expect(next.panX).toBe(-18);
+    expect(next.panY).toBe(12);
+  });
+
+  it("keeps wheel pan inside overscroll bounds", () => {
+    const next = resolvePreviewWheelPan({
+      state: DEFAULT_PREVIEW_ZOOM,
+      deltaX: -900,
+      deltaY: 900,
+      viewportWidth: 800,
+      viewportHeight: 600,
+    });
+
+    expect(next.panX).toBe(PREVIEW_PAN_OVERSCROLL_PX);
+    expect(next.panY).toBe(-PREVIEW_PAN_OVERSCROLL_PX);
+  });
+});

packages/studio/src/components/nle/previewZoom.ts

@@ -105,3 +105,28 @@ export function resolvePreviewWheelZoom(input: {
     ...pan,
   };
 }
+
+export function resolvePreviewWheelPan(input: {
+  state: PreviewZoomState;
+  deltaX: number;
+  deltaY: number;
+  viewportWidth: number;
+  viewportHeight: number;
+  contentWidth?: number;
+  contentHeight?: number;
+}): PreviewZoomState {
+  const pan = clampPreviewPan({
+    panX: input.state.panX - input.deltaX,
+    panY: input.state.panY - input.deltaY,
+    zoomPercent: input.state.zoomPercent,
+    viewportWidth: input.viewportWidth,
+    viewportHeight: input.viewportHeight,
+    contentWidth: input.contentWidth,
+    contentHeight: input.contentHeight,
+  });
+
+  return {
+    zoomPercent: clampPreviewZoomPercent(input.state.zoomPercent),
+    ...pan,
+  };
+}