@remotion/studio 4.0.499 → 4.0.500

package/dist/components/Timeline/timeline-asset-link.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.openTimelineAssetLink = exports.getTimelineAssetLinkInfo = exports.getTimelineAssetSrcFromSchema = exports.splitRemoteSourceForMiddleEllipsis = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const no_react_1 = require("remotion/no-react");
 const url_state_1 = require("../../helpers/url-state");
 const splitRemoteSourceForMiddleEllipsis = (src) => {
     const protocolEnd = src.indexOf('://');
@@ -29,6 +30,21 @@ const getTimelineAssetSrcFromSchema = (controls) => {
 };
 exports.getTimelineAssetSrcFromSchema = getTimelineAssetSrcFromSchema;
 const getTimelineAssetLinkInfo = (src) => {
+    if (src.startsWith(no_react_1.NoReactInternals.FILE_TOKEN)) {
+        const encodedAssetPath = src.slice(no_react_1.NoReactInternals.FILE_TOKEN.length);
+        let assetPath = encodedAssetPath;
+        try {
+            assetPath = encodedAssetPath.split('/').map(decodeURIComponent).join('/');
+        }
+        catch (_a) {
+            // Keep the encoded path if it contains an invalid escape sequence.
+        }
+        return {
+            kind: 'local',
+            assetPath,
+            title: assetPath,
+        };
+    }
     const staticBase = typeof window === 'undefined' ? null : window.remotion_staticBase;
     if (staticBase && src.startsWith(staticBase + '/')) {
         const assetPath = src.slice(staticBase.length + 1);
@@ -45,7 +61,7 @@ const getTimelineAssetLinkInfo = (src) => {
             const url = new URL(src.startsWith('//') ? 'https:' + src : src);
             return { kind: 'remote', href: src, title: url.hostname };
         }
-        catch (_a) {
+        catch (_b) {
             return { kind: 'remote', href: src, title: src };
         }
     }

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.d.ts

@@ -2,6 +2,10 @@ import type { CanUpdateSequencePropStatus, SequencePropsSubscriptionKey, TSequen
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 import { type SetPropStatuses } from './save-sequence-prop';
 export declare const shouldShowFreezeFrameMenuItem: (sequence: TSequence) => boolean;
+export declare const isSequenceVisibleAtTimelinePosition: ({ sequence, timelinePosition, }: {
+    readonly sequence: TSequence;
+    readonly timelinePosition: number;
+}) => boolean;
 export declare const calculateSequenceFreezeFrame: ({ sequence, sequenceFrameOffset, timelinePosition, }: {
     readonly sequence: TSequence;
     readonly sequenceFrameOffset: number;

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.js

@@ -1,12 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSequenceFreezeFrameMenuItem = exports.calculateSequenceFreezeFrame = exports.shouldShowFreezeFrameMenuItem = void 0;
+exports.useSequenceFreezeFrameMenuItem = exports.calculateSequenceFreezeFrame = exports.isSequenceVisibleAtTimelinePosition = exports.shouldShowFreezeFrameMenuItem = void 0;
 const react_1 = require("react");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const shouldShowFreezeFrameMenuItem = (sequence) => {
     return sequence.type !== 'audio';
 };
 exports.shouldShowFreezeFrameMenuItem = shouldShowFreezeFrameMenuItem;
+const isSequenceVisibleAtTimelinePosition = ({ sequence, timelinePosition, }) => {
+    return (timelinePosition >= sequence.from &&
+        timelinePosition < sequence.from + sequence.duration);
+};
+exports.isSequenceVisibleAtTimelinePosition = isSequenceVisibleAtTimelinePosition;
 const calculateSequenceFreezeFrame = ({ sequence, sequenceFrameOffset, timelinePosition, }) => {
     const rawFreezeFrame = Math.round(timelinePosition - sequence.from + sequenceFrameOffset);
     const minFrame = sequenceFrameOffset;
@@ -20,7 +25,8 @@ const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOve
     const freezeStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.freeze;
     const isFrozen = (freezeStatus === null || freezeStatus === void 0 ? void 0 : freezeStatus.status) === 'static' &&
         typeof freezeStatus.codeValue === 'number';
-    const canToggleFreeze = clientId !== null &&
+    const canToggleFreeze = (0, exports.isSequenceVisibleAtTimelinePosition)({ sequence, timelinePosition }) &&
+        clientId !== null &&
         Boolean(sequence.controls) &&
         nodePath !== null &&
         validatedSource !== null &&
@@ -49,7 +55,7 @@ const useSequenceFreezeFrameMenuItem = ({ clientId, nodePath, propStatusesForOve
                     fileName: validatedSource,
                     nodePath,
                     fieldKey: 'freeze',
-                    value: remove ? null : freezeFrame,
+                    value: remove ? undefined : freezeFrame,
                     defaultValue: null,
                     schema: sequence.controls.schema,
                 },

package/dist/components/Timeline/use-timeline-height.d.ts

@@ -1,5 +1,5 @@
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const useTimelineHeight: ({ shown, hasBeenCut, }: {
-    shown: TrackWithHash[];
+    shown: TimelineTrackData[];
     hasBeenCut: boolean;
 }) => number;

package/dist/components/TopPanel.js

@@ -114,8 +114,8 @@ const TopPanelInner = ({ readOnlyStudio, onMounted, drawRef, bufferStateDelayInM
     return (jsx_runtime_1.jsx(ObserveDefaultPropsContext_1.ObserveDefaultProps, { compositionId: (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
             ? canvasContent.compositionId
             : null, readOnlyStudio: readOnlyStudio, children: jsx_runtime_1.jsxs("div", { style: container, children: [
-                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, maxAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
-                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
+                jsx_runtime_1.jsx("div", { style: row, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.15, maxFlex: 0.4, defaultFlex: 0.2, maxFlexerSize: MAX_SIDEBAR_WIDTH, maxAntiFlexerSize: null, id: "sidebar-to-preview", orientation: "vertical", children: [actualStateLeft === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseLeft, side: "left", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx(ExplorerPanel_1.ExplorerPanel, { readOnlyStudio: readOnlyStudio }) }))) : null, actualStateLeft === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "left", onCollapse: onCollapseLeft })) : null, jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { minFlex: 0.5, maxFlex: 0.8, defaultFlex: 0.7, maxFlexerSize: null, maxAntiFlexerSize: MAX_SIDEBAR_WIDTH, id: "canvas-to-right-sidebar", orientation: "vertical", children: [
+                                        jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: jsx_runtime_1.jsx("div", { ref: drawRef, style: canvasContainerStyle, children: jsx_runtime_1.jsx(CanvasIfSizeIsAvailable_1.CanvasIfSizeIsAvailable, {}) }) }), actualStateRight === 'expanded' && !isMobileLayout ? (jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "right", onCollapse: onCollapseRight })) : null, actualStateRight === 'expanded' ? (isMobileLayout ? (jsx_runtime_1.jsx(MobilePanel_1.default, { onClose: onCollapseRight, side: "right", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) })) : (jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: jsx_runtime_1.jsx(OptionsPanel_1.OptionsPanel, { readOnlyStudio: readOnlyStudio }) }))) : null] }) })
                         ] }) }), jsx_runtime_1.jsx(PreviewToolbar_1.PreviewToolbar, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsx(CurrentCompositionSideEffects_1.TitleUpdater, {})
             ] }) }));
 };

package/dist/components/UndoRedoButtons.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
 const client_id_1 = require("../helpers/client-id");
+const is_mac_1 = require("../helpers/is-mac");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const redo_1 = require("../icons/redo");
 const undo_1 = require("../icons/undo");
@@ -74,11 +75,14 @@ const UndoRedoButtons = () => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
-        const redo = keybindings.registerKeybinding({
+        const redoWithShiftZ = keybindings.registerKeybinding({
             event: 'keydown',
-            key: 'y',
+            key: 'z',
             commandCtrlKey: true,
-            callback: () => {
+            callback: (e) => {
+                if (!e.shiftKey) {
+                    return;
+                }
                 if (redoFile) {
                     onRedo();
                 }
@@ -87,9 +91,25 @@ const UndoRedoButtons = () => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
+        const redoWithY = is_mac_1.isMac
+            ? null
+            : keybindings.registerKeybinding({
+                event: 'keydown',
+                key: 'y',
+                commandCtrlKey: true,
+                callback: () => {
+                    if (redoFile) {
+                        onRedo();
+                    }
+                },
+                preventDefault: true,
+                triggerIfInputFieldFocused: false,
+                keepRegisteredWhenNotHighestContext: false,
+            });
         return () => {
             undo.unregister();
-            redo.unregister();
+            redoWithShiftZ.unregister();
+            redoWithY === null || redoWithY === void 0 ? void 0 : redoWithY.unregister();
         };
     }, [keybindings, onRedo, onUndo, redoFile, undoFile]);
     const undoTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
@@ -97,7 +117,9 @@ const UndoRedoButtons = () => {
         : `Undo (${ShortcutHint_1.cmdOrCtrlCharacter}+Z)`;
     const redoTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
         ? 'Redo'
-        : `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Y)`;
+        : is_mac_1.isMac
+            ? `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Shift+Z)`
+            : `Redo (${ShortcutHint_1.cmdOrCtrlCharacter}+Y)`;
     const renderUndo = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx(undo_1.UndoIcon, { style: { ...iconStyle, color, opacity: undoFile ? 1 : 0.5 } }));
     }, [undoFile]);

package/dist/components/composition-drop-preview.js

@@ -13,6 +13,7 @@ const snapCompositionDropPosition = ({ compositionDimensions, destinationDimensi
     const outline = {
         key: 'composition-drop-preview',
         dimensions: compositionDimensions,
+        uncroppedPoints: null,
         points: [
             { x: left * scale, y: top * scale },
             { x: right * scale, y: top * scale },

package/dist/components/menu-toolbar-height.d.ts

@@ -0,0 +1 @@
+export declare const MENU_TOOLBAR_HEIGHT = 30;

package/dist/components/menu-toolbar-height.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MENU_TOOLBAR_HEIGHT = void 0;
+exports.MENU_TOOLBAR_HEIGHT = 30;

package/dist/components/selected-outline-drag.d.ts

@@ -1,6 +1,6 @@
-import type { CanUpdateSequencePropStatus, DragOverrideValue, GetDragOverrides, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, DragOverrideValue, GetDragOverrides, InteractivitySchema, SequencePropsSubscriptionKey } from 'remotion';
 import { type OutlinePoint } from './selected-outline-geometry';
-import type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineRotationDragTarget, SelectedOutlineScaleDragState, SelectedOutlineScaleDragTarget, SelectedOutlineDragTarget, SelectedOutlineTransformOriginDragTarget } from './selected-outline-types';
+import type { SelectedOutlineCropDragTarget, SelectedOutlineCropFieldKey, SelectedOutlineCropHandle, SelectedOutlineDragState, SelectedOutlineDragTarget, SelectedOutlineRotationDragState, SelectedOutlineRotationDragTarget, SelectedOutlineScaleDragState, SelectedOutlineScaleDragTarget, SelectedOutlineTransformOriginDragTarget } from './selected-outline-types';
 import { type UvCoordinate } from './selected-outline-uv';
 import type { AddSequenceKeyframeChange } from './Timeline/call-add-keyframe';
 import type { SaveSequencePropChange } from './Timeline/save-sequence-prop';
@@ -51,6 +51,37 @@ export declare const getSelectedOutlineDragChanges: ({ dragStates, lastValues, }
     readonly dragStates: readonly SelectedOutlineDragState[];
     readonly lastValues: ReadonlyMap<string, string>;
 }) => SelectedOutlineDragChange[];
+export type SelectedOutlineCropValues = Record<SelectedOutlineCropFieldKey, number>;
+export declare const getSelectedOutlineCropFollowingTransformOrigin: ({ dimensions, initialCrop, nextCrop, transformOrigin, }: {
+    readonly dimensions: {
+        readonly width: number;
+        readonly height: number;
+    } | null;
+    readonly initialCrop: SelectedOutlineCropValues;
+    readonly nextCrop: SelectedOutlineCropValues;
+    readonly transformOrigin: {
+        readonly defaultValue: string | undefined;
+        readonly propStatus: CanUpdateSequencePropStatus;
+        readonly value: string;
+    } | null;
+}) => string | null;
+export declare const getSelectedOutlineCropDragValues: ({ crop, dimensions, handle, uv, }: {
+    readonly crop: SelectedOutlineCropValues;
+    readonly dimensions: {
+        readonly width: number;
+        readonly height: number;
+    } | null;
+    readonly handle: SelectedOutlineCropHandle;
+    readonly uv: readonly [number, number];
+}) => SelectedOutlineCropValues;
+export declare const getSelectedOutlineCropDragChanges: ({ dimensions, target, values, }: {
+    readonly dimensions: {
+        readonly width: number;
+        readonly height: number;
+    } | null;
+    readonly target: SelectedOutlineCropDragTarget;
+    readonly values: SelectedOutlineCropValues;
+}) => SelectedOutlineDragChange[];
 export type SelectedOutlineKeyboardNudgeDirection = 'left' | 'right' | 'up' | 'down';
 export declare const getSelectedOutlineKeyboardNudgeDelta: ({ direction, shiftKey, }: {
     readonly direction: SelectedOutlineKeyboardNudgeDirection;
@@ -160,10 +191,16 @@ export declare const snapSelectedOutlineUv: ({ point, points, thresholdPx, uv, }
     readonly uv: UvCoordinate;
 }) => UvCoordinate;
 export declare const selectedOutlineTransformOriginSnapThresholdPx = 10;
-export declare const snapSelectedOutlineTransformOriginUv: ({ point, points, thresholdPx, uv, }: {
+export declare const snapSelectedOutlineTransformOriginUv: ({ crop, point, points, thresholdPx, uv, }: {
+    readonly crop: {
+        readonly left: number;
+        readonly right: number;
+        readonly top: number;
+        readonly bottom: number;
+    } | null;
     readonly point: OutlinePoint;
     readonly points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
-    readonly thresholdPx?: number | undefined;
+    readonly thresholdPx: number | null;
     readonly uv: UvCoordinate;
 }) => UvCoordinate;
 export {};

package/dist/components/selected-outline-drag.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.snapSelectedOutlineTransformOriginUv = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.snapSelectedOutlineUv = exports.selectedOutlineUvSnapThresholdPx = exports.applySelectedOutlineTransformOriginAxisLock = exports.getSelectedOutlineTransformOriginLockedAxis = exports.uvsEqual = exports.getSelectedOutlineTransformOriginDragChanges = exports.compensateTranslateForTransformOrigin = exports.parseCssRotationToRadians = exports.clearSelectedOutlineRotationDragOverrides = exports.clearSelectedOutlineScaleDragOverrides = exports.getSelectedOutlineKeyboardNudgeDirection = exports.clearSelectedOutlineDragOverrides = exports.getSelectedOutlineRotationDragChanges = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineRotationSnapStepDegrees = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragChanges = exports.isSelectedOutlineDragPastThreshold = exports.applySelectedOutlineDragAxisLock = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragStates = exports.getSelectedOutlineActiveSchema = void 0;
+exports.snapSelectedOutlineTransformOriginUv = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.snapSelectedOutlineUv = exports.selectedOutlineUvSnapThresholdPx = exports.applySelectedOutlineTransformOriginAxisLock = exports.getSelectedOutlineTransformOriginLockedAxis = exports.uvsEqual = exports.getSelectedOutlineTransformOriginDragChanges = exports.compensateTranslateForTransformOrigin = exports.parseCssRotationToRadians = exports.clearSelectedOutlineRotationDragOverrides = exports.clearSelectedOutlineScaleDragOverrides = exports.getSelectedOutlineKeyboardNudgeDirection = exports.clearSelectedOutlineDragOverrides = exports.getSelectedOutlineRotationDragChanges = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineRotationSnapStepDegrees = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineDragChanges = exports.isSelectedOutlineDragPastThreshold = exports.applySelectedOutlineDragAxisLock = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragStates = exports.getSelectedOutlineActiveSchema = void 0;
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const selected_outline_geometry_1 = require("./selected-outline-geometry");
@@ -11,6 +11,7 @@ const timeline_field_utils_1 = require("./Timeline/timeline-field-utils");
 const timeline_rotation_utils_1 = require("./Timeline/timeline-rotation-utils");
 const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils");
 const TimelineScaleField_1 = require("./Timeline/TimelineScaleField");
+const transform_origin_utils_1 = require("./Timeline/transform-origin-utils");
 const getSelectedOutlineActiveSchema = ({ schema, currentRuntimeValueDotNotation, dragOverrides, propStatus, frame, }) => {
     const { merged: valuesDotNotation } = remotion_1.Internals.computeEffectiveSchemaValuesDotNotation({
         schema,
@@ -113,6 +114,141 @@ const getSelectedOutlineDragChanges = ({ dragStates, lastValues, }) => {
     return changes;
 };
 exports.getSelectedOutlineDragChanges = getSelectedOutlineDragChanges;
+const getSelectedOutlineCropCenter = (crop) => [
+    (crop.cropLeft + 1 - crop.cropRight) / 2,
+    (crop.cropTop + 1 - crop.cropBottom) / 2,
+];
+const getSelectedOutlineCropFollowingTransformOrigin = ({ dimensions, initialCrop, nextCrop, transformOrigin, }) => {
+    if (dimensions === null ||
+        transformOrigin === null ||
+        transformOrigin.propStatus.status !== 'static') {
+        return null;
+    }
+    const parsed = (0, transform_origin_utils_1.parseTransformOrigin)(transformOrigin.value);
+    if (parsed === null) {
+        return null;
+    }
+    const currentOrigin = (0, transform_origin_utils_1.parsedTransformOriginToUv)({
+        parsed,
+        width: dimensions.width,
+        height: dimensions.height,
+    });
+    if (currentOrigin === null) {
+        return null;
+    }
+    const initialCenter = getSelectedOutlineCropCenter(initialCrop);
+    const originIsAbsent = transformOrigin.propStatus.codeValue === undefined;
+    const originIsAtCropCenter = Math.abs(currentOrigin[0] - initialCenter[0]) <= 0.0001 &&
+        Math.abs(currentOrigin[1] - initialCenter[1]) <= 0.0001;
+    if (!originIsAbsent && !originIsAtCropCenter) {
+        return null;
+    }
+    return (0, transform_origin_utils_1.serializeTransformOrigin)({
+        uv: getSelectedOutlineCropCenter(nextCrop),
+        z: parsed.z,
+    });
+};
+exports.getSelectedOutlineCropFollowingTransformOrigin = getSelectedOutlineCropFollowingTransformOrigin;
+const cropHandleIncludes = (handle, edge) => handle === edge || handle.includes(edge);
+const getSelectedOutlineCropDragValues = ({ crop, dimensions, handle, uv, }) => {
+    const minimumVisibleX = dimensions === null ? 0.001 : 1 / dimensions.width;
+    const minimumVisibleY = dimensions === null ? 0.001 : 1 / dimensions.height;
+    const roundCrop = (value, max) => (0, selected_outline_geometry_1.clamp)((0, timeline_field_utils_1.roundToDecimalPlaces)(value, 4), 0, Math.max(0, max));
+    const next = { ...crop };
+    if (cropHandleIncludes(handle, 'left')) {
+        next.cropLeft = roundCrop(uv[0], 1 - crop.cropRight - minimumVisibleX);
+    }
+    if (cropHandleIncludes(handle, 'right')) {
+        next.cropRight = roundCrop(1 - uv[0], 1 - crop.cropLeft - minimumVisibleX);
+    }
+    if (cropHandleIncludes(handle, 'top')) {
+        next.cropTop = roundCrop(uv[1], 1 - crop.cropBottom - minimumVisibleY);
+    }
+    if (cropHandleIncludes(handle, 'bottom')) {
+        next.cropBottom = roundCrop(1 - uv[1], 1 - crop.cropTop - minimumVisibleY);
+    }
+    return next;
+};
+exports.getSelectedOutlineCropDragValues = getSelectedOutlineCropDragValues;
+const getSelectedOutlineCropDragChanges = ({ dimensions, target, values, }) => {
+    const changes = [];
+    for (const fieldKey of Object.values(selected_outline_types_1.cropFieldKeys)) {
+        const field = target.fields[fieldKey];
+        const value = values[fieldKey];
+        if (value === field.value) {
+            continue;
+        }
+        if (field.propStatus.status === 'keyframed') {
+            changes.push({
+                type: 'keyframed',
+                fileName: target.nodePath.absolutePath,
+                nodePath: target.nodePath,
+                fieldKey,
+                sourceFrame: target.sourceFrame,
+                value,
+                schema: target.schema,
+                clientId: target.clientId,
+            });
+            continue;
+        }
+        const defaultValue = field.defaultValue === undefined
+            ? null
+            : JSON.stringify(field.defaultValue);
+        const stringifiedValue = JSON.stringify(value);
+        const shouldSave = value !== field.propStatus.codeValue &&
+            !(defaultValue === stringifiedValue &&
+                field.propStatus.codeValue === undefined);
+        if (shouldSave) {
+            changes.push({
+                type: 'static',
+                fileName: target.nodePath.absolutePath,
+                nodePath: target.nodePath,
+                fieldKey,
+                value,
+                defaultValue,
+                schema: target.schema,
+            });
+        }
+    }
+    if (changes.length === 0 ||
+        target.transformOrigin === null ||
+        target.transformOrigin.propStatus.status !== 'static') {
+        return changes;
+    }
+    const transformOrigin = (0, exports.getSelectedOutlineCropFollowingTransformOrigin)({
+        dimensions,
+        initialCrop: {
+            cropLeft: target.fields.cropLeft.value,
+            cropRight: target.fields.cropRight.value,
+            cropTop: target.fields.cropTop.value,
+            cropBottom: target.fields.cropBottom.value,
+        },
+        nextCrop: values,
+        transformOrigin: target.transformOrigin,
+    });
+    if (transformOrigin === null) {
+        return changes;
+    }
+    const transformOriginDefaultValue = target.transformOrigin.defaultValue === undefined
+        ? null
+        : JSON.stringify(target.transformOrigin.defaultValue);
+    const shouldSaveTransformOrigin = transformOrigin !== target.transformOrigin.propStatus.codeValue &&
+        !(transformOriginDefaultValue === JSON.stringify(transformOrigin) &&
+            target.transformOrigin.propStatus.codeValue === undefined);
+    if (shouldSaveTransformOrigin) {
+        changes.push({
+            type: 'static',
+            fileName: target.nodePath.absolutePath,
+            nodePath: target.nodePath,
+            fieldKey: selected_outline_types_1.transformOriginFieldKey,
+            value: transformOrigin,
+            defaultValue: transformOriginDefaultValue,
+            schema: target.schema,
+        });
+    }
+    return changes;
+};
+exports.getSelectedOutlineCropDragChanges = getSelectedOutlineCropDragChanges;
 const getSelectedOutlineKeyboardNudgeDelta = ({ direction, shiftKey, }) => {
     const increment = shiftKey ? 10 : 1;
     return direction === 'left' || direction === 'up' ? -increment : increment;
@@ -570,4 +706,45 @@ const snapSelectedOutlineUv = ({ point, points, thresholdPx = exports.selectedOu
 };
 exports.snapSelectedOutlineUv = snapSelectedOutlineUv;
 exports.selectedOutlineTransformOriginSnapThresholdPx = exports.selectedOutlineUvSnapThresholdPx;
-exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineUv;
+const getCroppedOutlineUvSnapTargets = (crop) => {
+    const { left, top } = crop;
+    const right = 1 - crop.right;
+    const bottom = 1 - crop.bottom;
+    const centerX = (left + right) / 2;
+    const centerY = (top + bottom) / 2;
+    return [
+        [left, top],
+        [centerX, top],
+        [right, top],
+        [right, centerY],
+        [right, bottom],
+        [centerX, bottom],
+        [left, bottom],
+        [left, centerY],
+        [centerX, centerY],
+    ];
+};
+const snapSelectedOutlineTransformOriginUv = ({ crop, point, points, thresholdPx, uv, }) => {
+    var _a;
+    const threshold = thresholdPx !== null && thresholdPx !== void 0 ? thresholdPx : exports.selectedOutlineTransformOriginSnapThresholdPx;
+    if (crop === null) {
+        return (0, exports.snapSelectedOutlineUv)({ point, points, thresholdPx: threshold, uv });
+    }
+    let best = null;
+    const snapTargets = [
+        ...selectedOutlineUvSnapTargets,
+        ...getCroppedOutlineUvSnapTargets(crop),
+    ];
+    for (const snapUv of snapTargets) {
+        const snapPoint = (0, selected_outline_uv_1.getUvHandlePosition)(points, snapUv);
+        const distance = Math.hypot(point.x - snapPoint.x, point.y - snapPoint.y);
+        if (distance > threshold) {
+            continue;
+        }
+        if (best === null || distance < best.distance) {
+            best = { distance, uv: snapUv };
+        }
+    }
+    return (_a = best === null || best === void 0 ? void 0 : best.uv) !== null && _a !== void 0 ? _a : uv;
+};
+exports.snapSelectedOutlineTransformOriginUv = snapSelectedOutlineTransformOriginUv;

package/dist/components/selected-outline-geometry.d.ts

@@ -8,6 +8,7 @@ export type SelectedOutline = {
         readonly width: number;
         readonly height: number;
     } | null;
+    readonly uncroppedPoints: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint] | null;
     readonly points: readonly [
         OutlinePoint,
         OutlinePoint,

package/dist/components/selected-outline-measurement.d.ts

@@ -41,6 +41,12 @@ export declare const getTransformedSvgViewportPoints: ({ viewport, ctm, containe
     readonly ctm: SvgScreenCtm;
     readonly containerRect: Pick<DOMRect, "left" | "top">;
 }) => readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
+export declare const cropOutlinePoints: (points: readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint], crop: {
+    readonly left: number;
+    readonly right: number;
+    readonly top: number;
+    readonly bottom: number;
+}) => readonly [OutlinePoint, OutlinePoint, OutlinePoint, OutlinePoint];
 export declare const getSelectedSequenceKeys: (selectedItems: readonly TimelineSelection[]) => Set<string>;
 export declare const getSequenceKeysContainingSelection: (selectedItems: readonly TimelineSelection[]) => Set<string>;
 export declare const getOutlineSelectionInteraction: ({ shiftKey, metaKey, ctrlKey, }: {
@@ -57,6 +63,11 @@ type SelectedTransformOriginInfo = {
     readonly sequenceKey: string;
     readonly displayFrame: number | null;
 };
+export type SelectedCropInfo = {
+    readonly sequenceKey: string;
+    readonly displayFrame: number | null;
+};
+export declare const getSelectedCropInfo: (selectedItems: readonly TimelineSelection[]) => SelectedCropInfo | null;
 export declare const getSelectedTransformOriginInfo: (selectedItems: readonly TimelineSelection[]) => SelectedTransformOriginInfo | null;
 export declare const getSequencesWithSelectableOutlines: ({ sequences, overrideIdsToNodePaths, compositions, timelinePosition, }: {
     readonly sequences: readonly TSequence[];

package/dist/components/selected-outline-measurement.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedTransformOriginInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
+exports.outlinesAreEqual = exports.measureOutlines = exports.getSequencesWithSelectableOutlines = exports.getSelectedTransformOriginInfo = exports.getSelectedCropInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSequenceKeysContainingSelection = exports.getSelectedSequenceKeys = exports.cropOutlinePoints = exports.getTransformedSvgViewportPoints = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationCornerInfo = exports.getRotationCursor = exports.getSelectedOutlineRotationDeltaDegrees = exports.getAngleDegrees = exports.vectorBetween = exports.vectorLength = exports.dot = exports.getOutlineCenter = exports.midpoint = exports.pointToString = void 0;
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const colors_1 = require("../helpers/colors");
 const get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
@@ -203,6 +203,24 @@ const getElementOutlinePoints = (element, containerRect) => {
     }
     return quadToPoints(quad, containerRect);
 };
+const cropOutlinePoints = (points, crop) => {
+    if (crop.left === 0 &&
+        crop.right === 0 &&
+        crop.top === 0 &&
+        crop.bottom === 0) {
+        return points;
+    }
+    const { left, top } = crop;
+    const right = 1 - crop.right;
+    const bottom = 1 - crop.bottom;
+    return [
+        (0, selected_outline_uv_1.getUvHandlePosition)(points, [left, top]),
+        (0, selected_outline_uv_1.getUvHandlePosition)(points, [right, top]),
+        (0, selected_outline_uv_1.getUvHandlePosition)(points, [right, bottom]),
+        (0, selected_outline_uv_1.getUvHandlePosition)(points, [left, bottom]),
+    ];
+};
+exports.cropOutlinePoints = cropOutlinePoints;
 const getSelectedSequenceKeys = (selectedItems) => {
     return new Set(selectedItems
         .filter((item) => item.type === 'sequence')
@@ -278,6 +296,34 @@ const getSelectedEffectFieldsBySequenceKey = (selectedItems) => {
     return selectedEffects;
 };
 exports.getSelectedEffectFieldsBySequenceKey = getSelectedEffectFieldsBySequenceKey;
+const isCropFieldKey = (key) => Object.values(selected_outline_types_1.cropFieldKeys).some((cropFieldKey) => cropFieldKey === key);
+const getSelectedCropInfo = (selectedItems) => {
+    if (selectedItems.length !== 1) {
+        return null;
+    }
+    const [selectedItem] = selectedItems;
+    if (selectedItem.type === 'sequence-prop' &&
+        isCropFieldKey(selectedItem.key)) {
+        return {
+            sequenceKey: (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selectedItem.nodePathInfo),
+            displayFrame: null,
+        };
+    }
+    if (selectedItem.type !== 'keyframe' && selectedItem.type !== 'easing') {
+        return null;
+    }
+    const field = getKeyframeOrEasingField(selectedItem);
+    if ((field === null || field === void 0 ? void 0 : field.type) !== 'sequence' || !isCropFieldKey(field.fieldKey)) {
+        return null;
+    }
+    return {
+        sequenceKey: (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(selectedItem.nodePathInfo),
+        displayFrame: selectedItem.type === 'keyframe'
+            ? selectedItem.frame
+            : selectedItem.fromFrame,
+    };
+};
+exports.getSelectedCropInfo = getSelectedCropInfo;
 const getSelectedTransformOriginInfo = (selectedItems) => {
     if (selectedItems.length !== 1) {
         return null;
@@ -345,10 +391,11 @@ const measureOutlines = (container, targets) => {
         if (element === null) {
             continue;
         }
-        const points = getElementOutlinePoints(element, containerRect);
-        if (points === null) {
+        const uncroppedPoints = getElementOutlinePoints(element, containerRect);
+        if (uncroppedPoints === null) {
             continue;
         }
+        const points = (0, exports.cropOutlinePoints)(uncroppedPoints, target.crop);
         outlines.push({
             key: target.key,
             dimensions: element instanceof HTMLElement
@@ -362,6 +409,7 @@ const measureOutlines = (container, targets) => {
                         height: element.height.baseVal.value,
                     }
                     : null,
+            uncroppedPoints,
             points,
         });
     }
@@ -381,6 +429,19 @@ const outlinesAreEqual = (a, b) => {
             ((_c = a[i].dimensions) === null || _c === void 0 ? void 0 : _c.height) !== ((_d = b[i].dimensions) === null || _d === void 0 ? void 0 : _d.height)) {
             return false;
         }
+        const aUncropped = a[i].uncroppedPoints;
+        const bUncropped = b[i].uncroppedPoints;
+        if ((aUncropped === null) !== (bUncropped === null)) {
+            return false;
+        }
+        if (aUncropped !== null && bUncropped !== null) {
+            for (let j = 0; j < aUncropped.length; j++) {
+                if (Math.abs(aUncropped[j].x - bUncropped[j].x) > 0.01 ||
+                    Math.abs(aUncropped[j].y - bUncropped[j].y) > 0.01) {
+                    return false;
+                }
+            }
+        }
         for (let j = 0; j < a[i].points.length; j++) {
             if (Math.abs(a[i].points[j].x - b[i].points[j].x) > 0.01 ||
                 Math.abs(a[i].points[j].y - b[i].points[j].y) > 0.01) {