@remotion/studio 4.0.444 → 4.0.445

package/dist/components/Timeline/timeline-scroll-logic.d.ts

@@ -35,9 +35,21 @@ export declare const getFrameFromX: ({ clientX, durationInFrames, width, extrapo
     width: number;
     extrapolate: "clamp" | "extend";
 }) => number;
-export declare const zoomAndPreserveCursor: ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, }: {
+/**
+ * Horizontal position inside the scrollable timeline content (0 … scrollWidth)
+ * for a viewport `clientX`, so pinch-anchoring matches the pointer (not a
+ * rounded frame index).
+ */
+export declare const viewportClientXToScrollContentX: ({ clientX, scrollEl, }: {
+    clientX: number;
+    scrollEl: HTMLDivElement;
+}) => number;
+export declare const zoomAndPreserveCursor: ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, anchorFrame, anchorContentX, }: {
     oldZoom: number;
     newZoom: number;
     currentFrame: number;
     currentDurationInFrames: number;
+    anchorFrame: number | null;
+    /** Prefer this over `anchorFrame` when not null (subpixel-accurate anchor). */
+    anchorContentX: number | null;
 }) => void;

package/dist/components/Timeline/timeline-scroll-logic.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.zoomAndPreserveCursor = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
+exports.zoomAndPreserveCursor = exports.viewportClientXToScrollContentX = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_refs_1 = require("./timeline-refs");
@@ -200,9 +200,18 @@ const getFrameFromX = ({ clientX, durationInFrames, width, extrapolate, }) => {
     return frame;
 };
 exports.getFrameFromX = getFrameFromX;
-const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, }) => {
-    var _a, _b;
-    var _c;
+/**
+ * Horizontal position inside the scrollable timeline content (0 … scrollWidth)
+ * for a viewport `clientX`, so pinch-anchoring matches the pointer (not a
+ * rounded frame index).
+ */
+const viewportClientXToScrollContentX = ({ clientX, scrollEl, }) => {
+    const rect = scrollEl.getBoundingClientRect();
+    const clampedClientX = Math.min(Math.max(clientX, rect.left), rect.right);
+    return clampedClientX + scrollEl.scrollLeft - rect.left;
+};
+exports.viewportClientXToScrollContentX = viewportClientXToScrollContentX;
+const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDurationInFrames, anchorFrame, anchorContentX, }) => {
     const ratio = newZoom / oldZoom;
     if (ratio === 1) {
         return;
@@ -212,9 +221,14 @@ const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDuration
         return;
     }
     const frameIncrement = getFrameIncrement(currentDurationInFrames);
-    const prevCursorPosition = frameIncrement * currentFrame + timeline_layout_1.TIMELINE_PADDING;
+    const frameForScroll = anchorFrame !== null && anchorFrame !== void 0 ? anchorFrame : currentFrame;
+    const prevCursorPosition = anchorContentX !== null
+        ? Math.min(Math.max(anchorContentX, 0), current.scrollWidth)
+        : frameIncrement * frameForScroll + timeline_layout_1.TIMELINE_PADDING;
     const newCursorPosition = ratio * (prevCursorPosition - timeline_layout_1.TIMELINE_PADDING) + timeline_layout_1.TIMELINE_PADDING;
     current.scrollLeft += newCursorPosition - prevCursorPosition;
-    (_a = TimelineSlider_1.redrawTimelineSliderFast.current) === null || _a === void 0 ? void 0 : _a.draw(currentFrame, ((_c = (_b = timeline_refs_1.scrollableRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0) * ratio);
+    // Playhead position is synced in `TimelineSlider` `useLayoutEffect` using
+    // measured `sliderAreaRef.clientWidth` so it matches layout after zoom
+    // (avoids fighting React `style` with stale `timelineWidth` during pinch).
 };
 exports.zoomAndPreserveCursor = zoomAndPreserveCursor;