@remotion/studio 4.0.444 → 4.0.445

package/dist/esm/renderEntry.mjs

@@ -208,7 +208,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-1zvzzrkf.js").then(({ StudioInternals }) => {
+    import("./chunk-bqd9dhnk.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/get-effective-translation.d.ts

@@ -1,5 +1,5 @@
 import type { Size } from '@remotion/player';
-import type { Translation } from 'remotion';
+import { type PreviewSize, type Translation } from 'remotion';
 export declare const getEffectiveTranslation: ({ canvasSize, scale, compositionHeight, compositionWidth, translation, }: {
     canvasSize: Size;
     scale: number;
@@ -25,3 +25,15 @@ export declare const getCenterPointWhileScrolling: ({ size, clientX, clientY, co
     centerX: number;
     centerY: number;
 };
+export declare const applyZoomAroundFocalPoint: ({ canvasSize, contentDimensions, previewSizeBefore, oldNumericSize, newNumericSize, clientX, clientY, }: {
+    readonly canvasSize: Size;
+    readonly contentDimensions: {
+        width: number;
+        height: number;
+    };
+    readonly previewSizeBefore: PreviewSize;
+    readonly oldNumericSize: number;
+    readonly newNumericSize: number;
+    readonly clientX: number;
+    readonly clientY: number;
+}) => PreviewSize;

package/dist/helpers/get-effective-translation.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
+exports.applyZoomAroundFocalPoint = exports.getCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
+const remotion_1 = require("remotion");
+const smooth_zoom_1 = require("./smooth-zoom");
 const getEffectiveXTranslation = ({ canvasSize, scale, compositionWidth, translation, }) => {
     const maxTranslation = Math.abs(canvasSize.width / 2 +
         (scale * compositionWidth) / 2 -
@@ -43,3 +45,45 @@ const getCenterPointWhileScrolling = ({ size, clientX, clientY, compositionWidth
     };
 };
 exports.getCenterPointWhileScrolling = getCenterPointWhileScrolling;
+const applyZoomAroundFocalPoint = ({ canvasSize, contentDimensions, previewSizeBefore, oldNumericSize, newNumericSize, clientX, clientY, }) => {
+    const scale = remotion_1.Internals.calculateScale({
+        canvasSize,
+        compositionHeight: contentDimensions.height,
+        compositionWidth: contentDimensions.width,
+        previewSize: previewSizeBefore.size,
+    });
+    const clampedNew = Math.min(smooth_zoom_1.MAX_ZOOM, Math.max(smooth_zoom_1.MIN_ZOOM, newNumericSize));
+    if (clampedNew === oldNumericSize) {
+        return previewSizeBefore;
+    }
+    const { centerX, centerY } = (0, exports.getCenterPointWhileScrolling)({
+        size: canvasSize,
+        clientX,
+        clientY,
+        compositionWidth: contentDimensions.width,
+        compositionHeight: contentDimensions.height,
+        scale,
+        translation: previewSizeBefore.translation,
+    });
+    const zoomDifference = clampedNew - oldNumericSize;
+    const uvCoordinatesX = centerX / contentDimensions.width;
+    const uvCoordinatesY = centerY / contentDimensions.height;
+    const correctionLeft = -uvCoordinatesX * (zoomDifference * contentDimensions.width) +
+        (1 - uvCoordinatesX) * zoomDifference * contentDimensions.width;
+    const correctionTop = -uvCoordinatesY * (zoomDifference * contentDimensions.height) +
+        (1 - uvCoordinatesY) * zoomDifference * contentDimensions.height;
+    return {
+        size: clampedNew,
+        translation: (0, exports.getEffectiveTranslation)({
+            translation: {
+                x: previewSizeBefore.translation.x - correctionLeft / 2,
+                y: previewSizeBefore.translation.y - correctionTop / 2,
+            },
+            canvasSize,
+            compositionHeight: contentDimensions.height,
+            compositionWidth: contentDimensions.width,
+            scale,
+        }),
+    };
+};
+exports.applyZoomAroundFocalPoint = applyZoomAroundFocalPoint;

package/dist/state/timeline-zoom.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
 export declare const TIMELINE_MIN_ZOOM = 1;
 export declare const TIMELINE_MAX_ZOOM = 5;
+export type TimelineSetZoomOptions = {
+    anchorFrame: number | null;
+    anchorContentX: number | null;
+};
 export declare const TimelineZoomCtx: React.Context<{
     zoom: Record<string, number>;
-    setZoom: (compositionId: string, prev: (prevZoom: number) => number) => void;
+    setZoom: (compositionId: string, prev: (prevZoom: number) => number, options?: TimelineSetZoomOptions | undefined) => void;
 }>;
 export declare const TimelineZoomContext: React.FC<{
     readonly children: React.ReactNode;

package/dist/state/timeline-zoom.js

@@ -15,26 +15,31 @@ exports.TimelineZoomCtx = (0, react_1.createContext)({
     },
 });
 const TimelineZoomContext = ({ children }) => {
-    const [zoom, setZoom] = (0, react_1.useState)(() => (0, ZoomPersistor_1.getZoomFromLocalStorage)());
+    const [zoom, setZoomState] = (0, react_1.useState)(() => (0, ZoomPersistor_1.getZoomFromLocalStorage)());
+    const setZoom = (0, react_1.useCallback)((compositionId, callback, options) => {
+        setZoomState((prevZoomMap) => {
+            var _a, _b, _c, _d;
+            const newZoomWithFloatingPointErrors = Math.min(exports.TIMELINE_MAX_ZOOM, Math.max(exports.TIMELINE_MIN_ZOOM, callback((_a = prevZoomMap[compositionId]) !== null && _a !== void 0 ? _a : exports.TIMELINE_MIN_ZOOM)));
+            const newZoom = Math.round(newZoomWithFloatingPointErrors * 10) / 10;
+            const anchorFrame = (_b = options === null || options === void 0 ? void 0 : options.anchorFrame) !== null && _b !== void 0 ? _b : null;
+            const anchorContentX = (_c = options === null || options === void 0 ? void 0 : options.anchorContentX) !== null && _c !== void 0 ? _c : null;
+            (0, timeline_scroll_logic_1.zoomAndPreserveCursor)({
+                oldZoom: (_d = prevZoomMap[compositionId]) !== null && _d !== void 0 ? _d : exports.TIMELINE_MIN_ZOOM,
+                newZoom,
+                currentDurationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                currentFrame: (0, imperative_state_1.getCurrentFrame)(),
+                anchorFrame,
+                anchorContentX,
+            });
+            return { ...prevZoomMap, [compositionId]: newZoom };
+        });
+    }, []);
     const value = (0, react_1.useMemo)(() => {
         return {
             zoom,
-            setZoom: (compositionId, callback) => {
-                setZoom((prevZoomMap) => {
-                    var _a, _b;
-                    const newZoomWithFloatingPointErrors = Math.min(exports.TIMELINE_MAX_ZOOM, Math.max(exports.TIMELINE_MIN_ZOOM, callback((_a = prevZoomMap[compositionId]) !== null && _a !== void 0 ? _a : exports.TIMELINE_MIN_ZOOM)));
-                    const newZoom = Math.round(newZoomWithFloatingPointErrors * 10) / 10;
-                    (0, timeline_scroll_logic_1.zoomAndPreserveCursor)({
-                        oldZoom: (_b = prevZoomMap[compositionId]) !== null && _b !== void 0 ? _b : exports.TIMELINE_MIN_ZOOM,
-                        newZoom,
-                        currentDurationInFrames: (0, imperative_state_1.getCurrentDuration)(),
-                        currentFrame: (0, imperative_state_1.getCurrentFrame)(),
-                    });
-                    return { ...prevZoomMap, [compositionId]: newZoom };
-                });
-            },
+            setZoom,
         };
-    }, [zoom]);
+    }, [zoom, setZoom]);
     return (jsx_runtime_1.jsx(exports.TimelineZoomCtx.Provider, { value: value, children: children }));
 };
 exports.TimelineZoomContext = TimelineZoomContext;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.444",
+	"version": "4.0.445",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"sideEffects": false,
@@ -26,13 +26,13 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.444",
-		"@remotion/player": "4.0.444",
-		"@remotion/media-utils": "4.0.444",
-		"@remotion/renderer": "4.0.444",
-		"@remotion/web-renderer": "4.0.444",
-		"@remotion/studio-shared": "4.0.444",
-		"@remotion/zod-types": "4.0.444",
+		"remotion": "4.0.445",
+		"@remotion/player": "4.0.445",
+		"@remotion/media-utils": "4.0.445",
+		"@remotion/renderer": "4.0.445",
+		"@remotion/web-renderer": "4.0.445",
+		"@remotion/studio-shared": "4.0.445",
+		"@remotion/zod-types": "4.0.445",
 		"mediabunny": "1.39.2",
 		"memfs": "3.4.3",
 		"source-map": "0.7.3",
@@ -43,7 +43,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "^7.3.4",
-		"@remotion/eslint-config-internal": "4.0.444",
+		"@remotion/eslint-config-internal": "4.0.445",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},