@remotion/studio 4.0.477 → 4.0.478

package/dist/components/CanvasIfSizeIsAvailable.js

@@ -4,7 +4,7 @@ exports.CanvasIfSizeIsAvailable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const editor_rulers_1 = require("../state/editor-rulers");
+const ruler_canvas_size_1 = require("../helpers/ruler-canvas-size");
 const CanvasOrLoading_1 = require("./CanvasOrLoading");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const CanvasIfSizeIsAvailable = () => {
@@ -18,11 +18,7 @@ const CanvasIfSizeIsAvailable = () => {
         if (!size) {
             return null;
         }
-        return {
-            ...size,
-            width: size.width - editor_rulers_1.RULER_WIDTH,
-            height: size.height - editor_rulers_1.RULER_WIDTH,
-        };
+        return (0, ruler_canvas_size_1.applyRulerInsetsToCanvasSize)({ rulersAreVisible, size });
     }, [context, rulersAreVisible]);
     if (!sizeWithRulersApplied) {
         return null;

package/dist/components/EditorGuides/Guide.js

@@ -73,8 +73,7 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             clientX: e.clientX,
             clientY: e.clientY,
         };
-        shouldCreateGuideRef.current = true;
-        (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
+        shouldCreateGuideRef.current = false;
         setDraggingGuideId(() => guide.id);
     }, [guide.id, setDraggingGuideId, shouldCreateGuideRef]);
     const onMouseDown = (0, react_1.useCallback)((e) => {
@@ -89,8 +88,7 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
             clientX: e.clientX,
             clientY: e.clientY,
         };
-        shouldCreateGuideRef.current = true;
-        (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
+        shouldCreateGuideRef.current = false;
         setDraggingGuideId(() => guide.id);
     }, [guide.id, setDraggingGuideId, shouldCreateGuideRef]);
     const updateHasMovedGuide = (0, react_1.useCallback)((clientX, clientY) => {
@@ -113,13 +111,40 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
     const onMouseMove = (0, react_1.useCallback)((e) => {
         updateHasMovedGuide(e.clientX, e.clientY);
     }, [updateHasMovedGuide]);
+    const finishGuideInteraction = (0, react_1.useCallback)(() => {
+        const shouldDeleteGuide = shouldDeleteGuideRef.current;
+        setGuidesList((prevState) => {
+            const newGuides = shouldDeleteGuide
+                ? prevState.filter((candidate) => candidate.id !== guide.id)
+                : prevState;
+            (0, editor_guides_1.persistGuidesList)(newGuides);
+            return newGuides;
+        });
+        if (shouldDeleteGuide && selected) {
+            clearSelection();
+        }
+        shouldDeleteGuideRef.current = false;
+        shouldCreateGuideRef.current = false;
+        (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+        setDraggingGuideId(() => null);
+    }, [
+        clearSelection,
+        guide.id,
+        selected,
+        setDraggingGuideId,
+        setGuidesList,
+        shouldCreateGuideRef,
+        shouldDeleteGuideRef,
+    ]);
     const onPointerUp = (0, react_1.useCallback)((e) => {
         if (e.currentTarget.hasPointerCapture(e.pointerId)) {
             e.currentTarget.releasePointerCapture(e.pointerId);
         }
         const pointerDownPosition = pointerDownPositionRef.current;
         pointerDownPositionRef.current = null;
-        if (shouldDeleteGuideRef.current) {
+        const shouldDeleteGuide = shouldDeleteGuideRef.current;
+        finishGuideInteraction();
+        if (shouldDeleteGuide) {
             return;
         }
         if ((0, editor_guide_selection_1.isGuidePointerUpAClick)({
@@ -130,11 +155,13 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
         })) {
             onSelect();
         }
-    }, [guide.id, onSelect, shouldDeleteGuideRef]);
+    }, [finishGuideInteraction, guide.id, onSelect, shouldDeleteGuideRef]);
     const onMouseUp = (0, react_1.useCallback)((e) => {
         const pointerDownPosition = pointerDownPositionRef.current;
         pointerDownPositionRef.current = null;
-        if (shouldDeleteGuideRef.current) {
+        const shouldDeleteGuide = shouldDeleteGuideRef.current;
+        finishGuideInteraction();
+        if (shouldDeleteGuide) {
             return;
         }
         if ((0, editor_guide_selection_1.isGuidePointerUpAClick)({
@@ -145,7 +172,7 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
         })) {
             onSelect();
         }
-    }, [guide.id, onSelect, shouldDeleteGuideRef]);
+    }, [finishGuideInteraction, guide.id, onSelect, shouldDeleteGuideRef]);
     const onClick = (0, react_1.useCallback)((e) => {
         if (e.button !== 0) {
             return;
@@ -155,7 +182,8 @@ const GuideComp = ({ guide, canvasDimensions, scale }) => {
     }, []);
     const onPointerCancel = (0, react_1.useCallback)(() => {
         pointerDownPositionRef.current = null;
-    }, []);
+        finishGuideInteraction();
+    }, [finishGuideInteraction]);
     const isActive = selected || hoveredGuideId === guide.id;
     const activeClassName = isActive ? '__remotion_editor_guide_selected' : null;
     const guideClassName = (0, react_1.useMemo)(() => {

package/dist/components/EditorRuler/Ruler.js

@@ -23,7 +23,7 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
     if (!unsafeVideoConfig) {
         throw new Error('Video config not set');
     }
-    const [cursor, setCursor] = (0, react_1.useState)(isVerticalRuler ? 'ew-resize' : 'ns-resize');
+    const cursor = isVerticalRuler ? 'ew-resize' : 'ns-resize';
     const guideHighlight = (0, react_1.useMemo)(() => (0, editor_guide_selection_1.getRulerGuideHighlight)({
         guidesList,
         selectedItems,
@@ -76,7 +76,7 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         // Prevent deselection of currently selected items
         e.stopPropagation();
         shouldCreateGuideRef.current = true;
-        (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
+        (0, ForceSpecificCursor_1.forceSpecificCursor)(cursor);
         const guideId = makeGuideId();
         setEditorShowGuides(() => true);
         setDraggingGuideId(() => guideId);
@@ -100,18 +100,8 @@ const Ruler = ({ scale, points, originOffset, startMarking, size, markingGaps, o
         orientation,
         originOffset,
         unsafeVideoConfig.id,
+        cursor,
     ]);
-    const changeCursor = (0, react_1.useCallback)((e) => {
-        e.preventDefault();
-        if (draggingGuideId !== null) {
-            setCursor('no-drop');
-        }
-    }, [setCursor, draggingGuideId]);
-    (0, react_1.useEffect)(() => {
-        if (draggingGuideId === null) {
-            setCursor(isVerticalRuler ? 'ew-resize' : 'ns-resize');
-        }
-    }, [draggingGuideId, isVerticalRuler]);
-    return (jsx_runtime_1.jsx("canvas", { ref: rulerCanvasRef, width: rulerWidth * window.devicePixelRatio, height: rulerHeight * window.devicePixelRatio, style: rulerStyle, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerDown: onPointerDown, onPointerEnter: changeCursor, onPointerLeave: changeCursor }));
+    return (jsx_runtime_1.jsx("canvas", { ref: rulerCanvasRef, width: rulerWidth * window.devicePixelRatio, height: rulerHeight * window.devicePixelRatio, style: rulerStyle, [should_clear_selection_on_pointer_down_1.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR]: 'true', onPointerDown: onPointerDown }));
 };
 exports.default = Ruler;

package/dist/components/EditorRuler/index.js

@@ -73,12 +73,13 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
                 if (!shouldDeleteGuideRef.current) {
                     shouldDeleteGuideRef.current = true;
                 }
-                (0, ForceSpecificCursor_1.forceSpecificCursor)('no-drop');
                 setGuidesList((prevState) => {
                     const newGuides = prevState.map((guide) => {
                         if (guide.id !== draggingGuideId) {
                             return guide;
                         }
+                        const desiredCursor = guide.orientation === 'vertical' ? 'ew-resize' : 'ns-resize';
+                        (0, ForceSpecificCursor_1.forceSpecificCursor)(desiredCursor);
                         return {
                             ...guide,
                             show: false,
@@ -124,9 +125,10 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         canvasPosition.top,
     ]);
     const onMouseUp = (0, react_1.useCallback)(() => {
+        const shouldDeleteGuide = shouldDeleteGuideRef.current;
         setGuidesList((prevState) => {
             const newGuides = prevState.filter((selected) => {
-                if (!shouldDeleteGuideRef.current) {
+                if (!shouldDeleteGuide) {
                     return true;
                 }
                 return selected.id !== draggingGuideId;
@@ -135,7 +137,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
             return newGuides;
         });
         const deletedGuideWasSelected = selectedItems.some((item) => item.type === 'guide' && item.guideId === draggingGuideId);
-        if (shouldDeleteGuideRef.current && deletedGuideWasSelected) {
+        if (shouldDeleteGuide && deletedGuideWasSelected) {
             clearSelection();
         }
         shouldDeleteGuideRef.current = false;
@@ -143,6 +145,7 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         shouldCreateGuideRef.current = false;
         setDraggingGuideId(() => null);
         document.removeEventListener('pointerup', onMouseUp);
+        document.removeEventListener('pointercancel', onMouseUp);
         document.removeEventListener('pointermove', onMouseMove);
     }, [
         clearSelection,
@@ -154,14 +157,16 @@ const EditorRulers = ({ contentDimensions, canvasSize, assetMetadata, containerR
         onMouseMove,
         selectedItems,
     ]);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         if (draggingGuideId !== null) {
             document.addEventListener('pointermove', onMouseMove);
             document.addEventListener('pointerup', onMouseUp);
+            document.addEventListener('pointercancel', onMouseUp);
         }
         return () => {
             document.removeEventListener('pointermove', onMouseMove);
             document.removeEventListener('pointerup', onMouseUp);
+            document.removeEventListener('pointercancel', onMouseUp);
             if (requestAnimationFrameRef.current) {
                 cancelAnimationFrame(requestAnimationFrameRef.current);
             }

package/dist/components/InlineAction.js

@@ -22,6 +22,7 @@ const InlineAction = ({ renderAction, onClick, disabled, title, }) => {
                 : (0, colors_1.getBackgroundFromHoverState)({ hovered, selected: false }),
             height: 24,
             width: 24,
+            padding: 0,
             display: 'inline-flex',
             justifyContent: 'center',
             alignItems: 'center',

package/dist/components/MenuToolbar.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+export declare const MENU_TOOLBAR_HEIGHT = 30;
 export declare const MenuToolbar: React.FC<{
     readonly readOnlyStudio: boolean;
 }>;

package/dist/components/MenuToolbar.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuToolbar = void 0;
+exports.MenuToolbar = exports.MENU_TOOLBAR_HEIGHT = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
@@ -12,13 +12,16 @@ const MenuBuildIndicator_1 = require("./MenuBuildIndicator");
 const SidebarCollapserControls_1 = require("./SidebarCollapserControls");
 const UndoRedoButtons_1 = require("./UndoRedoButtons");
 const UpdateCheck_1 = require("./UpdateCheck");
+exports.MENU_TOOLBAR_HEIGHT = 30;
 const row = {
     alignItems: 'center',
     flexDirection: 'row',
     display: 'flex',
     color: 'white',
     borderBottom: '1px solid black',
+    boxSizing: 'border-box',
     fontSize: 13,
+    height: exports.MENU_TOOLBAR_HEIGHT,
     paddingLeft: 6,
     paddingRight: 10,
     backgroundColor: colors_1.BACKGROUND,

package/dist/components/SelectedOutlineElement.js

@@ -113,14 +113,41 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
             ? JSON.stringify(transformOriginDrag.translateDefault)
             : null;
         let last = null;
+        let currentPointerX = event.clientX;
+        let currentPointerY = event.clientY;
+        let axisLocked = event.shiftKey;
         onDraggingChange(true);
         (0, ForceSpecificCursor_1.forceSpecificCursor)('crosshair');
-        const updateFromPointerEvent = (pointerEvent) => {
+        const updateFromPointerPosition = () => {
             const point = {
-                x: pointerEvent.clientX - svgRect.left,
-                y: pointerEvent.clientY - svgRect.top,
+                x: currentPointerX - svgRect.left,
+                y: currentPointerY - svgRect.top,
             };
-            const nextUv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(outline.points, point);
+            const rawUv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(outline.points, point);
+            const lockedAxis = (0, selected_outline_drag_1.getSelectedOutlineTransformOriginLockedAxis)({
+                axisLocked,
+                dimensions,
+                startUv: uv,
+                uv: rawUv,
+            });
+            const axisLockedUv = (0, selected_outline_drag_1.applySelectedOutlineTransformOriginAxisLock)({
+                lockedAxis,
+                startUv: uv,
+                uv: rawUv,
+            });
+            const snapPoint = lockedAxis === null
+                ? point
+                : (0, selected_outline_uv_1.getUvHandlePosition)(outline.points, axisLockedUv);
+            const snappedUv = (0, selected_outline_drag_1.snapSelectedOutlineTransformOriginUv)({
+                point: snapPoint,
+                points: outline.points,
+                uv: axisLockedUv,
+            });
+            const nextUv = (0, selected_outline_drag_1.applySelectedOutlineTransformOriginAxisLock)({
+                lockedAxis,
+                startUv: uv,
+                uv: snappedUv,
+            });
             const deltaOrigin = [
                 (nextUv[0] - uv[0]) * dimensions.width,
                 (nextUv[1] - uv[1]) * dimensions.height,
@@ -152,15 +179,31 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
                 })
                 : remotion_1.Internals.makeStaticDragOverride(translate));
         };
-        updateFromPointerEvent(event);
+        updateFromPointerPosition();
         const onPointerMove = (moveEvent) => {
             moveEvent.preventDefault();
-            updateFromPointerEvent(moveEvent);
+            currentPointerX = moveEvent.clientX;
+            currentPointerY = moveEvent.clientY;
+            axisLocked = moveEvent.shiftKey;
+            updateFromPointerPosition();
+        };
+        const onKeyChange = (keyEvent) => {
+            if (keyEvent.key !== 'Shift') {
+                return;
+            }
+            const nextAxisLocked = keyEvent.type === 'keydown';
+            if (nextAxisLocked === axisLocked) {
+                return;
+            }
+            axisLocked = nextAxisLocked;
+            updateFromPointerPosition();
         };
         const onPointerUp = () => {
             window.removeEventListener('pointermove', onPointerMove);
             window.removeEventListener('pointerup', onPointerUp);
             window.removeEventListener('pointercancel', onPointerUp);
+            window.removeEventListener('keydown', onKeyChange);
+            window.removeEventListener('keyup', onKeyChange);
             (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
             onDraggingChange(false);
             if (last === null || (0, selected_outline_drag_1.uvsEqual)(last.uv, uv)) {
@@ -242,6 +285,8 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         window.addEventListener('pointermove', onPointerMove);
         window.addEventListener('pointerup', onPointerUp);
         window.addEventListener('pointercancel', onPointerUp);
+        window.addEventListener('keydown', onKeyChange);
+        window.addEventListener('keyup', onKeyChange);
     }, [
         clearDragOverrides,
         onDraggingChange,
@@ -506,8 +551,6 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
         if (interaction.shiftKey || interaction.toggleKey) {
             return;
         }
-        onDraggingChange(true);
-        (0, ForceSpecificCursor_1.forceSpecificCursor)(edgeInfo.cursor);
         const startPointer = { x: event.clientX, y: event.clientY };
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineScaleDragStates)({
             dragTargets: selected ? allScaleDragTargets : [scaleDrag],
@@ -515,12 +558,24 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
             timelinePosition: timelinePositionRef.current,
         });
         let lastValues = new Map();
+        let dragStarted = false;
         const onPointerMove = (moveEvent) => {
             moveEvent.preventDefault();
             const delta = {
                 x: moveEvent.clientX - startPointer.x,
                 y: moveEvent.clientY - startPointer.y,
             };
+            if (!dragStarted) {
+                if (!(0, selected_outline_drag_1.isSelectedOutlineDragPastThreshold)({
+                    deltaX: delta.x,
+                    deltaY: delta.y,
+                })) {
+                    return;
+                }
+                dragStarted = true;
+                onDraggingChange(true);
+                (0, ForceSpecificCursor_1.forceSpecificCursor)(edgeInfo.cursor);
+            }
             const projectedDelta = (0, selected_outline_measurement_1.dot)(delta, edgeInfo.normal);
             const scaleFactor = Math.max(0.001, 1 + projectedDelta / edgeInfo.extent);
             lastValues = (0, selected_outline_drag_1.getSelectedOutlineScaleDragValues)({
@@ -549,8 +604,10 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
             window.removeEventListener('pointermove', onPointerMove);
             window.removeEventListener('pointerup', onPointerUp);
             window.removeEventListener('pointercancel', onPointerUp);
-            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-            onDraggingChange(false);
+            if (dragStarted) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                onDraggingChange(false);
+            }
             const changes = (0, selected_outline_drag_1.getSelectedOutlineScaleDragChanges)({
                 dragStates,
                 lastValues,
@@ -665,8 +722,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         if (interaction.shiftKey || interaction.toggleKey) {
             return;
         }
-        onDraggingChange(true);
-        (0, ForceSpecificCursor_1.forceSpecificCursor)(cornerInfo.cursor);
+        const startPointer = { x: event.clientX, y: event.clientY };
         const svgRect = svg.getBoundingClientRect();
         const center = svgPointToClientPoint((0, selected_outline_measurement_1.getSelectedOutlineRotationPivot)({
             dimensions: outline.dimensions,
@@ -684,8 +740,21 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         });
         let accumulatedDelta = 0;
         let lastValues = new Map();
+        let dragStarted = false;
         const onPointerMove = (moveEvent) => {
             moveEvent.preventDefault();
+            const screenDeltaX = moveEvent.clientX - startPointer.x;
+            const screenDeltaY = moveEvent.clientY - startPointer.y;
+            if (!dragStarted) {
+                if (!(0, selected_outline_drag_1.isSelectedOutlineDragPastThreshold)({
+                    deltaX: screenDeltaX,
+                    deltaY: screenDeltaY,
+                })) {
+                    return;
+                }
+                dragStarted = true;
+                onDraggingChange(true);
+            }
             const nextAngle = (0, selected_outline_measurement_1.getAngleDegrees)(center, {
                 x: moveEvent.clientX,
                 y: moveEvent.clientY,
@@ -721,8 +790,10 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
             window.removeEventListener('pointermove', onPointerMove);
             window.removeEventListener('pointerup', onPointerUp);
             window.removeEventListener('pointercancel', onPointerUp);
-            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-            onDraggingChange(false);
+            if (dragStarted) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                onDraggingChange(false);
+            }
             const changes = (0, selected_outline_drag_1.getSelectedOutlineRotationDragChanges)({
                 dragStates,
                 lastValues,

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export { applySelectedOutlineDragAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, isSelectedOutlineDragPastThreshold, } from './selected-outline-drag';
+export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, snapSelectedOutlineTransformOriginUv, } from './selected-outline-drag';
 export { getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
 export { selectedOutlineDragThresholdPx } from './selected-outline-types';
 export type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineScaleDragState, } from './selected-outline-types';

package/dist/components/SelectedOutlineOverlay.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineDragAxisLock = void 0;
+exports.SelectedOutlineOverlay = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineTransformOriginUv = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -57,6 +57,7 @@ const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const selected_outline_drag_2 = require("./selected-outline-drag");
 Object.defineProperty(exports, "applySelectedOutlineDragAxisLock", { enumerable: true, get: function () { return selected_outline_drag_2.applySelectedOutlineDragAxisLock; } });
+Object.defineProperty(exports, "applySelectedOutlineTransformOriginAxisLock", { enumerable: true, get: function () { return selected_outline_drag_2.applySelectedOutlineTransformOriginAxisLock; } });
 Object.defineProperty(exports, "compensateTranslateForTransformOrigin", { enumerable: true, get: function () { return selected_outline_drag_2.compensateTranslateForTransformOrigin; } });
 Object.defineProperty(exports, "getSelectedOutlineDragChanges", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineDragChanges; } });
 Object.defineProperty(exports, "getSelectedOutlineDragValues", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineDragValues; } });
@@ -69,7 +70,10 @@ Object.defineProperty(exports, "getSelectedOutlineScaleDragChanges", { enumerabl
 Object.defineProperty(exports, "getSelectedOutlineScaleDragStates", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineScaleDragStates; } });
 Object.defineProperty(exports, "getSelectedOutlineScaleDragValues", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineScaleDragValues; } });
 Object.defineProperty(exports, "getSelectedOutlineScaleEdgeInfo", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineScaleEdgeInfo; } });
+Object.defineProperty(exports, "getSelectedOutlineTransformOriginLockedAxis", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineTransformOriginLockedAxis; } });
 Object.defineProperty(exports, "isSelectedOutlineDragPastThreshold", { enumerable: true, get: function () { return selected_outline_drag_2.isSelectedOutlineDragPastThreshold; } });
+Object.defineProperty(exports, "selectedOutlineTransformOriginSnapThresholdPx", { enumerable: true, get: function () { return selected_outline_drag_2.selectedOutlineTransformOriginSnapThresholdPx; } });
+Object.defineProperty(exports, "snapSelectedOutlineTransformOriginUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineTransformOriginUv; } });
 const selected_outline_measurement_2 = require("./selected-outline-measurement");
 Object.defineProperty(exports, "getOutlineSelectionInteraction", { enumerable: true, get: function () { return selected_outline_measurement_2.getOutlineSelectionInteraction; } });
 Object.defineProperty(exports, "getSelectedEffectFieldsBySequenceKey", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedEffectFieldsBySequenceKey; } });

package/dist/components/Timeline/TimelineSequence.js

@@ -153,10 +153,10 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
-    var _a, _b, _c;
-    var _d, _e, _f, _g;
+    var _a, _b;
+    var _c, _d, _e, _f;
     const video = remotion_1.Internals.useVideo();
-    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_d = video === null || video === void 0 ? void 0 : video.fps) !== null && _d !== void 0 ? _d : 30);
+    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_c = video === null || video === void 0 ? void 0 : video.fps) !== null && _c !== void 0 ? _c : 30);
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
     const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(s.getStack);
     const validatedLocation = (0, react_1.useMemo)(() => {
@@ -173,7 +173,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         };
     }, [originalLocation]);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    const nodePath = (_e = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _e !== void 0 ? _e : null;
+    const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
     const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
             ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
@@ -320,19 +320,11 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             onSelect({ shiftKey: false, toggleKey: false });
         }
     }, [onSelect, selectable]);
-    const freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
-    const runtimeFreezeFrame = typeof ((_c = s.controls) === null || _c === void 0 ? void 0 : _c.currentRuntimeValueDotNotation.freeze) === 'number'
-        ? s.controls.currentRuntimeValueDotNotation.freeze
-        : null;
-    const frozenFrame = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static'
-        ? typeof freezeStatus.codeValue === 'number'
-            ? freezeStatus.codeValue
-            : null
-        : runtimeFreezeFrame;
+    const { frozenFrame } = s;
     const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
         nodePathInfo,
         windowWidth,
-        timelineDurationInFrames: (_f = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _f !== void 0 ? _f : 1,
+        timelineDurationInFrames: (_e = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _e !== void 0 ? _e : 1,
     });
     if (!video) {
         throw new TypeError('Expected video config');
@@ -386,7 +378,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     if (maxMediaDuration === null && !s.loopDisplay) {
         return null;
     }
-    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_g = video.durationInFrames) !== null && _g !== void 0 ? _g : 1 })) : null] }));
+    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes })), showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_f = video.durationInFrames) !== null && _f !== void 0 ? _f : 1 })) : null] }));
     return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: onContextMenuOpen, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

package/dist/components/Timeline/TimelineVideoInfo.d.ts

@@ -12,4 +12,5 @@ export declare const TimelineVideoInfo: React.FC<{
     readonly premountWidth: number;
     readonly postmountWidth: number;
     readonly loopDisplay: LoopDisplay | undefined;
+    readonly frozenMediaFrame: number | null;
 }>;