Merge pull request #935 from heygen-com/worktree-fix+canvas-zoom-improvements

fix(studio): canvas zoom improvements — zoom to cursor, reset button, border fix

Author: miguel-heygen

packages/player/src/iframe-dom.ts

@@ -64,9 +64,10 @@ export function scaleIframeToFit(
   compositionWidth: number,
   compositionHeight: number,
 ): void {
-  const rect = playerElement.getBoundingClientRect();
-  if (rect.width === 0 || rect.height === 0) return;
-  const scale = Math.min(rect.width / compositionWidth, rect.height / compositionHeight);
+  const w = playerElement.offsetWidth;
+  const h = playerElement.offsetHeight;
+  if (w === 0 || h === 0) return;
+  const scale = Math.min(w / compositionWidth, h / compositionHeight);
   iframe.style.width = `${compositionWidth}px`;
   iframe.style.height = `${compositionHeight}px`;
   iframe.style.transform = `translate(-50%, -50%) scale(${scale})`;

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

@@ -36,8 +36,18 @@ vi.mock("../../utils/studioUiPreferences", () => ({
   writeStudioUiPreferences: () => {},
 }));
 
+let resizeCallbacks: Array<() => void> = [];
+
 class MockResizeObserver {
-  observe() {}
+  private cb: ResizeObserverCallback;
+  constructor(cb: ResizeObserverCallback) {
+    this.cb = cb;
+  }
+  observe() {
+    const fire = () => this.cb([], this as unknown as ResizeObserver);
+    resizeCallbacks.push(fire);
+    fire();
+  }
   disconnect() {}
 }
 
@@ -61,6 +71,7 @@ function setRect(node: Element, rect: { width: number; height: number }) {
 }
 
 function renderPreview() {
+  resizeCallbacks = [];
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
@@ -82,6 +93,9 @@ function renderPreview() {
   expect(stage).toBeTruthy();
 
   setRect(viewport, { width: 800, height: 600 });
+  act(() => {
+    for (const fire of resizeCallbacks) fire();
+  });
 
   return {
     host,
@@ -167,7 +181,7 @@ describe("NLEPreview", () => {
       );
     });
 
-    expect(view.stage.style.transform).toContain("translate(48px, 40px)");
+    expect(view.stage.style.transform).toContain("translate3d(48px, 40px, 0)");
     view.cleanup();
   });
 
@@ -189,7 +203,7 @@ describe("NLEPreview", () => {
       );
     });
 
-    expect(view.stage.style.transform).toContain("translate(30px, -24px)");
+    expect(view.stage.style.transform).toContain("translate3d(30px, -24px, 0)");
     view.cleanup();
   });
 });

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

@@ -103,6 +103,7 @@ export const NLEPreview = memo(function NLEPreview({
   const retiringTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const zoomRef = useRef<PreviewZoomState>(loadInitialZoom());
+  const [settledZoom, setSettledZoom] = useState<PreviewZoomState>(() => zoomRef.current);
   const hudRef = useRef<HTMLDivElement>(null);
   const hudTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const settleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -138,25 +139,28 @@ export const NLEPreview = memo(function NLEPreview({
     return () => observer.disconnect();
   }, [portrait]);
 
+  const stageSizeRef = useRef(stageSize);
+  stageSizeRef.current = stageSize;
+
   const writeTransform = useCallback((state: PreviewZoomState) => {
     const stage = stageRef.current;
     if (!stage) return;
     const s = toDomPrecision(state.zoomPercent / 100);
     const px = toDomPrecision(state.panX);
     const py = toDomPrecision(state.panY);
-    stage.style.transform = `translate(${px}px, ${py}px) scale(${s})`;
+    stage.style.transform = `translate3d(${px}px, ${py}px, 0) scale(${s})`;
   }, []);
 
-  const applyZoom = useCallback(
-    (next: PreviewZoomState) => {
+  const applyTransform = useCallback(
+    (next: PreviewZoomState, showHud: boolean) => {
       const clamped: PreviewZoomState = {
         zoomPercent: clampPreviewZoomPercent(next.zoomPercent),
         panX: Number.isFinite(next.panX) ? next.panX : 0,
         panY: Number.isFinite(next.panY) ? next.panY : 0,
       };
       zoomRef.current = clamped;
 
-      if (!zoomingRef.current) {
+      if (showHud && !zoomingRef.current) {
         zoomingRef.current = true;
         const hud = hudRef.current;
         if (hud) hud.style.opacity = "1";
@@ -169,19 +173,38 @@ export const NLEPreview = memo(function NLEPreview({
         zoomingRef.current = false;
         const final = zoomRef.current;
         writeStudioUiPreferences({ previewZoom: final });
-        const hud = hudRef.current;
-        if (hud) {
-          hud.textContent = isPreviewAtFit(final) ? "Fit" : `${Math.round(final.zoomPercent)}%`;
-          if (hudTimerRef.current) clearTimeout(hudTimerRef.current);
-          hudTimerRef.current = setTimeout(() => {
-            if (hudRef.current) hudRef.current.style.opacity = "0";
-          }, ZOOM_HUD_TIMEOUT_MS);
+        setSettledZoom((prev) =>
+          prev.zoomPercent === final.zoomPercent &&
+          prev.panX === final.panX &&
+          prev.panY === final.panY
+            ? prev
+            : final,
+        );
+        if (showHud) {
+          const hud = hudRef.current;
+          if (hud) {
+            hud.textContent = isPreviewAtFit(final) ? "Fit" : `${Math.round(final.zoomPercent)}%`;
+            if (hudTimerRef.current) clearTimeout(hudTimerRef.current);
+            hudTimerRef.current = setTimeout(() => {
+              if (hudRef.current) hudRef.current.style.opacity = "0";
+            }, ZOOM_HUD_TIMEOUT_MS);
+          }
         }
       }, ZOOM_SETTLE_MS);
     },
     [writeTransform],
   );
 
+  const applyZoom = useCallback(
+    (next: PreviewZoomState) => applyTransform(next, true),
+    [applyTransform],
+  );
+
+  const applyPan = useCallback(
+    (next: PreviewZoomState) => applyTransform(next, false),
+    [applyTransform],
+  );
+
   if (refreshKey !== prevRefreshKeyRef.current) {
     const oldKey = `${baseKey}:${prevRefreshKeyRef.current ?? 0}`;
     prevRefreshKeyRef.current = refreshKey;
@@ -228,13 +251,18 @@ export const NLEPreview = memo(function NLEPreview({
         event.preventDefault();
         event.stopPropagation();
 
+        const sz = stageSizeRef.current;
+        const cursorX = event.clientX - (rect.left + rect.width / 2);
+        const cursorY = event.clientY - (rect.top + rect.height / 2);
         const next = resolvePreviewWheelZoom({
           state: zoomRef.current,
           deltaY: event.deltaY,
           viewportWidth: rect.width,
           viewportHeight: rect.height,
-          contentWidth: stageSize.width,
-          contentHeight: stageSize.height,
+          contentWidth: sz.width,
+          contentHeight: sz.height,
+          cursorX,
+          cursorY,
         });
         applyZoom(next);
         return;
@@ -245,21 +273,22 @@ export const NLEPreview = memo(function NLEPreview({
       event.preventDefault();
       event.stopPropagation();
 
+      const sz = stageSizeRef.current;
       const next = resolvePreviewWheelPan({
         state: zoomRef.current,
         deltaX: event.deltaX,
         deltaY: event.deltaY,
         viewportWidth: rect.width,
         viewportHeight: rect.height,
-        contentWidth: stageSize.width,
-        contentHeight: stageSize.height,
+        contentWidth: sz.width,
+        contentHeight: sz.height,
       });
-      applyZoom(next);
+      applyPan(next);
     };
 
     document.addEventListener("wheel", handleWheel, { passive: false, capture: true });
     return () => document.removeEventListener("wheel", handleWheel, { capture: true });
-  }, [applyZoom, stageSize.height, stageSize.width]);
+  }, [applyZoom, applyPan]);
 
   useEffect(() => {
     const viewport = viewportRef.current;
@@ -320,16 +349,17 @@ export const NLEPreview = memo(function NLEPreview({
       if (!drag || !viewport || drag.pointerId !== event.pointerId) return;
       event.preventDefault();
       const rect = viewport.getBoundingClientRect();
+      const sz = stageSizeRef.current;
       const pan = clampPreviewPan({
         panX: drag.originX + event.clientX - drag.startX,
         panY: drag.originY + event.clientY - drag.startY,
         zoomPercent: zoomRef.current.zoomPercent,
         viewportWidth: rect.width,
         viewportHeight: rect.height,
-        contentWidth: stageSize.width,
-        contentHeight: stageSize.height,
+        contentWidth: sz.width,
+        contentHeight: sz.height,
       });
-      applyZoom({ ...zoomRef.current, ...pan });
+      applyPan({ ...zoomRef.current, ...pan });
     };
 
     const finishDrag = (event: PointerEvent) => {
@@ -357,7 +387,7 @@ export const NLEPreview = memo(function NLEPreview({
       document.removeEventListener("pointercancel", finishDrag, { capture: true });
       document.removeEventListener("auxclick", handleAuxClick, { capture: true });
     };
-  }, [applyZoom, stageSize.height, stageSize.width]);
+  }, [applyPan]);
 
   const initial = zoomRef.current;
 
@@ -376,7 +406,8 @@ export const NLEPreview = memo(function NLEPreview({
             style={{
               width: `${stageSize.width}px`,
               height: `${stageSize.height}px`,
-              transform: `translate(${toDomPrecision(initial.panX)}px, ${toDomPrecision(initial.panY)}px) scale(${toDomPrecision(initial.zoomPercent / 100)})`,
+              transform: `translate3d(${toDomPrecision(initial.panX)}px, ${toDomPrecision(initial.panY)}px, 0) scale(${toDomPrecision(initial.zoomPercent / 100)})`,
+              // resolvePreviewWheelZoom cursor math assumes center-center pivot
               transformOrigin: "center center",
             }}
             data-testid="preview-zoom-stage"
@@ -417,6 +448,17 @@ export const NLEPreview = memo(function NLEPreview({
           style={{ opacity: 0, transition: "opacity 300ms ease-out" }}
           aria-live="polite"
         />
+        {!isPreviewAtFit(settledZoom) && (
+          <button
+            type="button"
+            className="absolute bottom-3 right-3 z-50 rounded-md px-2.5 py-1 text-xs font-medium text-white/80 bg-black/50 backdrop-blur-sm hover:bg-black/70 hover:text-white transition-colors"
+            onClick={() => applyZoom(DEFAULT_PREVIEW_ZOOM)}
+            aria-label="Reset zoom to fit"
+            data-testid="preview-reset-zoom"
+          >
+            {Math.round(settledZoom.zoomPercent)}% — Reset
+          </button>
+        )}
       </div>
     </div>
   );

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

@@ -187,6 +187,110 @@ describe("resolvePreviewWheelZoom", () => {
     expect(next.panX).toBe(20);
     expect(next.panY).toBe(20);
   });
+
+  it("zooms toward the cursor when cursorX/cursorY are provided", () => {
+    const next = resolvePreviewWheelZoom({
+      state: DEFAULT_PREVIEW_ZOOM,
+      deltaY: -5,
+      viewportWidth: 800,
+      viewportHeight: 600,
+      cursorX: 200,
+      cursorY: 100,
+    });
+
+    expect(next.zoomPercent).toBeGreaterThan(100);
+    expect(next.panX).toBeLessThan(0);
+    expect(next.panY).toBeLessThan(0);
+  });
+
+  it("keeps pan at zero when cursor is at viewport center", () => {
+    const next = resolvePreviewWheelZoom({
+      state: DEFAULT_PREVIEW_ZOOM,
+      deltaY: -5,
+      viewportWidth: 800,
+      viewportHeight: 600,
+      cursorX: 0,
+      cursorY: 0,
+    });
+
+    expect(next.zoomPercent).toBeGreaterThan(100);
+    expect(next.panX).toBe(0);
+    expect(next.panY).toBe(0);
+  });
+
+  it("scales pan proportionally when cursor is at center", () => {
+    const next = resolvePreviewWheelZoom({
+      state: { zoomPercent: 200, panX: 50, panY: 30 },
+      deltaY: -5,
+      viewportWidth: 800,
+      viewportHeight: 600,
+      contentWidth: 800,
+      contentHeight: 450,
+      cursorX: 0,
+      cursorY: 0,
+    });
+
+    const ratio = next.zoomPercent / 200;
+    expect(next.panX).toBeCloseTo(50 * ratio, 1);
+    expect(next.panY).toBeCloseTo(30 * ratio, 1);
+  });
+
+  it("keeps the content point under a non-center cursor fixed after zoom", () => {
+    const cursorX = 150;
+    const cursorY = -80;
+    const state: PreviewZoomState = { zoomPercent: 150, panX: 20, panY: -10 };
+    const oldScale = state.zoomPercent / 100;
+
+    const next = resolvePreviewWheelZoom({
+      state,
+      deltaY: -5,
+      viewportWidth: 800,
+      viewportHeight: 600,
+      contentWidth: 800,
+      contentHeight: 450,
+      cursorX,
+      cursorY,
+    });
+
+    const newScale = next.zoomPercent / 100;
+    const contentXBefore = (cursorX - state.panX) / oldScale;
+    const contentXAfter = (cursorX - next.panX) / newScale;
+    const contentYBefore = (cursorY - state.panY) / oldScale;
+    const contentYAfter = (cursorY - next.panY) / newScale;
+
+    expect(contentXAfter).toBeCloseTo(contentXBefore, 6);
+    expect(contentYAfter).toBeCloseTo(contentYBefore, 6);
+  });
+
+  it("uses wider pan range for cursor zoom than manual drag", () => {
+    let state: PreviewZoomState = { zoomPercent: 100, panX: 0, panY: 0 };
+    for (let i = 0; i < 40; i++) {
+      state = resolvePreviewWheelZoom({
+        state,
+        deltaY: 5,
+        viewportWidth: 800,
+        viewportHeight: 600,
+        contentWidth: 800,
+        contentHeight: 450,
+        cursorX: -300,
+        cursorY: 0,
+      });
+    }
+
+    expect(state.zoomPercent).toBeLessThan(100);
+
+    const dragClamped = clampPreviewPan({
+      panX: state.panX,
+      panY: state.panY,
+      zoomPercent: state.zoomPercent,
+      viewportWidth: 800,
+      viewportHeight: 600,
+      contentWidth: 800,
+      contentHeight: 450,
+    });
+
+    expect(Math.abs(state.panX)).toBeGreaterThan(Math.abs(dragClamped.panX));
+  });
 });
 
 describe("resolvePreviewWheelPan", () => {