@remotion/studio 4.0.499 → 4.0.501

package/dist/components/SelectedOutlineCropControls.js

@@ -0,0 +1,299 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedOutlineCropControls = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const remotion_1 = require("remotion");
+const colors_1 = require("../helpers/colors");
+const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const selected_outline_drag_1 = require("./selected-outline-drag");
+const selected_outline_measurement_1 = require("./selected-outline-measurement");
+const selected_outline_types_1 = require("./selected-outline-types");
+const selected_outline_uv_1 = require("./selected-outline-uv");
+const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
+const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
+const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
+const CROP_HANDLE_THICKNESS = 5;
+const CROP_HANDLE_LENGTH = 20;
+const CROP_HANDLE_HIT_WIDTH = 14;
+const CROPPED_AWAY_OPACITY = 0.35;
+const cropHandles = [
+    'top-left',
+    'top-right',
+    'bottom-left',
+    'bottom-right',
+    'top',
+    'right',
+    'bottom',
+    'left',
+];
+const cursorForHandle = (handle) => {
+    if (handle === 'top' || handle === 'bottom') {
+        return 'ns-resize';
+    }
+    if (handle === 'left' || handle === 'right') {
+        return 'ew-resize';
+    }
+    return handle === 'top-left' || handle === 'bottom-right'
+        ? 'nwse-resize'
+        : 'nesw-resize';
+};
+const moveTowards = (from, to, distance) => {
+    const vector = (0, selected_outline_measurement_1.vectorBetween)(from, to);
+    const length = (0, selected_outline_measurement_1.vectorLength)(vector);
+    if (length === 0) {
+        return from;
+    }
+    const progress = Math.min(1, distance / length);
+    return {
+        x: from.x + vector.x * progress,
+        y: from.y + vector.y * progress,
+    };
+};
+const pointString = (point) => `${point.x} ${point.y}`;
+const getCropHandlePath = ({ handle, points, }) => {
+    const [topLeft, topRight, bottomRight, bottomLeft] = points;
+    const cornerInfo = {
+        'top-left': { corner: topLeft, first: topRight, second: bottomLeft },
+        'top-right': { corner: topRight, first: topLeft, second: bottomRight },
+        'bottom-left': { corner: bottomLeft, first: topLeft, second: bottomRight },
+        'bottom-right': { corner: bottomRight, first: topRight, second: bottomLeft },
+    };
+    if (handle in cornerInfo) {
+        const info = cornerInfo[handle];
+        const length = Math.min(CROP_HANDLE_LENGTH, (0, selected_outline_measurement_1.vectorLength)((0, selected_outline_measurement_1.vectorBetween)(info.corner, info.first)) / 4, (0, selected_outline_measurement_1.vectorLength)((0, selected_outline_measurement_1.vectorBetween)(info.corner, info.second)) / 4);
+        const first = moveTowards(info.corner, info.first, length);
+        const second = moveTowards(info.corner, info.second, length);
+        return `M ${pointString(first)} L ${pointString(info.corner)} L ${pointString(second)}`;
+    }
+    const edgeInfo = {
+        top: [topLeft, topRight],
+        right: [topRight, bottomRight],
+        bottom: [bottomLeft, bottomRight],
+        left: [topLeft, bottomLeft],
+    };
+    const [start, end] = edgeInfo[handle];
+    const center = (0, selected_outline_measurement_1.midpoint)(start, end);
+    const halfLength = Math.min(CROP_HANDLE_LENGTH / 2, (0, selected_outline_measurement_1.vectorLength)((0, selected_outline_measurement_1.vectorBetween)(start, end)) / 8);
+    const pathStart = moveTowards(center, start, halfLength);
+    const pathEnd = moveTowards(center, end, halfLength);
+    return `M ${pointString(pathStart)} L ${pointString(pathEnd)}`;
+};
+const getCropValues = (target) => ({
+    cropLeft: target.fields.cropLeft.value,
+    cropRight: target.fields.cropRight.value,
+    cropTop: target.fields.cropTop.value,
+    cropBottom: target.fields.cropBottom.value,
+});
+const makeCropPreviewMask = (crop) => {
+    const x = crop.left * 100;
+    const y = crop.top * 100;
+    const width = Math.max(0, 1 - crop.left - crop.right) * 100;
+    const height = Math.max(0, 1 - crop.top - crop.bottom) * 100;
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none"><rect width="100" height="100" fill="white" fill-opacity="${CROPPED_AWAY_OPACITY}"/><rect x="${x}" y="${y}" width="${width}" height="${height}" fill="white"/></svg>`;
+    return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+};
+const cropPreviewAttribute = 'data-remotion-studio-crop-preview';
+let cropPreviewId = 0;
+const useCropPreview = (target) => {
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        if (target === undefined || target.cropDrag === null) {
+            return;
+        }
+        const element = target.ref.current;
+        if (!(element instanceof HTMLElement || element instanceof SVGElement)) {
+            return;
+        }
+        const mask = makeCropPreviewMask(target.crop);
+        const previewId = String(++cropPreviewId);
+        const styleElement = element.ownerDocument.createElement('style');
+        styleElement.textContent = `
+[${cropPreviewAttribute}="${previewId}"] {
+	clip-path: none !important;
+	mask-image: ${mask} !important;
+	-webkit-mask-image: ${mask} !important;
+	mask-position: 0 0 !important;
+	-webkit-mask-position: 0 0 !important;
+	mask-repeat: no-repeat !important;
+	-webkit-mask-repeat: no-repeat !important;
+	mask-size: 100% 100% !important;
+	-webkit-mask-size: 100% 100% !important;
+}`;
+        // Do not mutate the inline crop style: React would still consider its
+        // clipPath prop applied and may not restore it when crop mode is closed.
+        element.setAttribute(cropPreviewAttribute, previewId);
+        ((_a = element.ownerDocument.head) !== null && _a !== void 0 ? _a : element.ownerDocument.documentElement).append(styleElement);
+        return () => {
+            if (element.getAttribute(cropPreviewAttribute) === previewId) {
+                element.removeAttribute(cropPreviewAttribute);
+            }
+            styleElement.remove();
+        };
+    }, [target]);
+};
+const CropHandle = ({ handle, outline, onDraggingChange, target }) => {
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { cropDrag } = target;
+    const cursor = cursorForHandle(handle);
+    const path = (0, react_1.useMemo)(() => getCropHandlePath({ handle, points: outline.points }), [handle, outline.points]);
+    const onPointerDown = react_1.default.useCallback((event) => {
+        var _a;
+        if (event.button !== 0 || cropDrag === null) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
+            return;
+        }
+        const svg = event.currentTarget.ownerSVGElement;
+        if (svg === null) {
+            return;
+        }
+        const svgRect = svg.getBoundingClientRect();
+        const uncroppedPoints = (_a = outline.uncroppedPoints) !== null && _a !== void 0 ? _a : outline.points;
+        const initialValues = getCropValues(cropDrag);
+        let lastValues = initialValues;
+        let dragStarted = false;
+        const onPointerMove = (moveEvent) => {
+            moveEvent.preventDefault();
+            if (!dragStarted) {
+                dragStarted = true;
+                onDraggingChange(true);
+                (0, ForceSpecificCursor_1.forceSpecificCursor)(cursor !== null && cursor !== void 0 ? cursor : 'default');
+            }
+            const uv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(uncroppedPoints, {
+                x: moveEvent.clientX - svgRect.left,
+                y: moveEvent.clientY - svgRect.top,
+            });
+            lastValues = (0, selected_outline_drag_1.getSelectedOutlineCropDragValues)({
+                crop: initialValues,
+                dimensions: outline.dimensions,
+                handle,
+                uv,
+            });
+            const transformOrigin = (0, selected_outline_drag_1.getSelectedOutlineCropFollowingTransformOrigin)({
+                dimensions: outline.dimensions,
+                initialCrop: initialValues,
+                nextCrop: lastValues,
+                transformOrigin: cropDrag.transformOrigin,
+            });
+            for (const fieldKey of Object.values(selected_outline_types_1.cropFieldKeys)) {
+                const field = cropDrag.fields[fieldKey];
+                const value = lastValues[fieldKey];
+                if (value === field.value) {
+                    continue;
+                }
+                setDragOverrides(cropDrag.nodePath, fieldKey, field.propStatus.status === 'keyframed'
+                    ? remotion_1.Internals.makeKeyframedDragOverride({
+                        status: field.propStatus,
+                        frame: cropDrag.sourceFrame,
+                        value,
+                    })
+                    : remotion_1.Internals.makeStaticDragOverride(value));
+            }
+            if (transformOrigin !== null) {
+                setDragOverrides(cropDrag.nodePath, selected_outline_types_1.transformOriginFieldKey, remotion_1.Internals.makeStaticDragOverride(transformOrigin));
+            }
+        };
+        const onPointerUp = () => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerUp);
+            if (dragStarted) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                onDraggingChange(false);
+            }
+            const changes = (0, selected_outline_drag_1.getSelectedOutlineCropDragChanges)({
+                dimensions: outline.dimensions,
+                target: cropDrag,
+                values: lastValues,
+            });
+            const staticChanges = changes.filter((change) => change.type === 'static');
+            const keyframedChanges = changes.filter((change) => change.type === 'keyframed');
+            const promise = staticChanges.length === 0
+                ? (0, call_add_keyframe_1.callAddKeyframes)({
+                    sequenceKeyframes: keyframedChanges,
+                    effectKeyframes: [],
+                    setPropStatuses,
+                    clientId: cropDrag.clientId,
+                })
+                : (0, save_sequence_prop_1.saveSequenceProps)({
+                    changes: staticChanges,
+                    addedKeyframes: keyframedChanges,
+                    movedKeyframes: null,
+                    setPropStatuses,
+                    clientId: cropDrag.clientId,
+                    undoLabel: 'Crop sequence',
+                    redoLabel: 'Crop sequence back',
+                });
+            promise
+                .catch((err) => {
+                (0, NotificationCenter_1.showNotification)(`Could not save crop: ${err instanceof Error ? err.message : String(err)}`, 4000);
+            })
+                .finally(() => {
+                clearDragOverrides(cropDrag.nodePath);
+            });
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerUp);
+    }, [
+        clearDragOverrides,
+        cropDrag,
+        cursor,
+        handle,
+        onDraggingChange,
+        outline.dimensions,
+        outline.points,
+        outline.uncroppedPoints,
+        setDragOverrides,
+        setPropStatuses,
+    ]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.TRANSPARENT, strokeWidth: CROP_HANDLE_HIT_WIDTH, strokeLinejoin: "miter", vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: cursor, onPointerDown: onPointerDown }), jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.BLUE, strokeWidth: CROP_HANDLE_THICKNESS, strokeLinejoin: "miter", strokeLinecap: "butt", vectorEffect: "non-scaling-stroke", pointerEvents: "none", style: { filter: colors_1.SELECTED_OUTLINE_DROP_SHADOW } })
+        ] }));
+};
+const SelectedOutlineCropControls = ({ outline, onDraggingChange, target }) => {
+    useCropPreview(target);
+    if ((target === null || target === void 0 ? void 0 : target.cropDrag) === null || (target === null || target === void 0 ? void 0 : target.cropDrag) === undefined) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("g", { "aria-hidden": "true", children: cropHandles.map((handle) => (jsx_runtime_1.jsx(CropHandle, { handle: handle, outline: outline, onDraggingChange: onDraggingChange, target: target }, handle))) }));
+};
+exports.SelectedOutlineCropControls = SelectedOutlineCropControls;

package/dist/components/SelectedOutlineElement.js

@@ -43,6 +43,7 @@ const colors_1 = require("../helpers/colors");
 const format_file_location_1 = require("../helpers/format-file-location");
 const get_connected_compositions_1 = require("../helpers/get-connected-compositions");
 const get_sequence_double_click_action_1 = require("../helpers/get-sequence-double-click-action");
+const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const editor_snapping_1 = require("../state/editor-snapping");
 const modals_1 = require("../state/modals");
@@ -58,6 +59,7 @@ const selected_outline_measurement_1 = require("./selected-outline-measurement")
 const selected_outline_snap_1 = require("./selected-outline-snap");
 const selected_outline_types_1 = require("./selected-outline-types");
 const selected_outline_uv_1 = require("./selected-outline-uv");
+const SelectedOutlineCropControls_1 = require("./SelectedOutlineCropControls");
 const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
 const disable_sequence_interactivity_1 = require("./Timeline/disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./Timeline/duplicate-selected-timeline-item");
@@ -71,10 +73,12 @@ const transform_origin_utils_1 = require("./Timeline/transform-origin-utils");
 const use_select_asset_1 = require("./use-select-asset");
 const emptyContextMenuValues = [];
 const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, target }) => {
-    var _a;
+    var _a, _b;
     const { setDragOverrides, clearDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const transformOriginDrag = (_a = target === null || target === void 0 ? void 0 : target.transformOriginDrag) !== null && _a !== void 0 ? _a : null;
+    const crop = target === null || target === void 0 ? void 0 : target.crop;
+    const transformOriginPoints = (_b = outline.uncroppedPoints) !== null && _b !== void 0 ? _b : outline.points;
     const parsed = (0, react_1.useMemo)(() => transformOriginDrag === null
         ? null
         : (0, transform_origin_utils_1.parseTransformOrigin)(transformOriginDrag.originValue), [transformOriginDrag]);
@@ -88,7 +92,7 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
             height: outline.dimensions.height,
         });
     }, [outline.dimensions, parsed]);
-    const position = (0, react_1.useMemo)(() => (uv === null ? null : (0, selected_outline_uv_1.getUvHandlePosition)(outline.points, uv)), [outline.points, uv]);
+    const position = (0, react_1.useMemo)(() => (uv === null ? null : (0, selected_outline_uv_1.getUvHandlePosition)(transformOriginPoints, uv)), [transformOriginPoints, uv]);
     const onPointerDown = react_1.default.useCallback((event) => {
         if (event.button !== 0 ||
             transformOriginDrag === null ||
@@ -125,7 +129,7 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
                 x: currentPointerX - svgRect.left,
                 y: currentPointerY - svgRect.top,
             };
-            const rawUv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(outline.points, point);
+            const rawUv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(transformOriginPoints, point);
             const lockedAxis = (0, selected_outline_drag_1.getSelectedOutlineTransformOriginLockedAxis)({
                 axisLocked,
                 dimensions,
@@ -139,11 +143,13 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
             });
             const snapPoint = lockedAxis === null
                 ? point
-                : (0, selected_outline_uv_1.getUvHandlePosition)(outline.points, axisLockedUv);
+                : (0, selected_outline_uv_1.getUvHandlePosition)(transformOriginPoints, axisLockedUv);
             const snappedUv = editorSnapping
                 ? (0, selected_outline_drag_1.snapSelectedOutlineTransformOriginUv)({
+                    crop: crop !== null && crop !== void 0 ? crop : null,
                     point: snapPoint,
-                    points: outline.points,
+                    points: transformOriginPoints,
+                    thresholdPx: null,
                     uv: axisLockedUv,
                 })
                 : axisLockedUv;
@@ -273,6 +279,7 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         window.addEventListener('keyup', onKeyChange);
     }, [
         clearDragOverrides,
+        crop,
         editorSnapping,
         onDraggingChange,
         outline,
@@ -280,6 +287,7 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         setDragOverrides,
         setPropStatuses,
         transformOriginDrag,
+        transformOriginPoints,
         uv,
     ]);
     if (transformOriginDrag === null ||
@@ -743,6 +751,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
     const circleRef = (0, react_1.useRef)(null);
     const cornerInfo = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSelectedOutlineRotationCornerInfo)(outline.points, corner), [corner, outline.points]);
     const onPointerDown = react_1.default.useCallback((event) => {
+        var _a;
         if (event.button !== 0 || rotationDrag === null) {
             return;
         }
@@ -770,7 +779,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         const svgRect = svg.getBoundingClientRect();
         const center = svgPointToClientPoint((0, selected_outline_measurement_1.getSelectedOutlineRotationPivot)({
             dimensions: outline.dimensions,
-            points: outline.points,
+            points: (_a = outline.uncroppedPoints) !== null && _a !== void 0 ? _a : outline.points,
             transformOriginValue: rotationDrag.transformOriginValue,
         }), svgRect);
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineRotationDragStates)({
@@ -924,6 +933,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         onDraggingChange,
         outline.dimensions,
         outline.points,
+        outline.uncroppedPoints,
         onSelect,
         rotationDrag,
         selected,
@@ -1006,7 +1016,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
         selectComposition,
     ]);
     const onContextMenuOpen = react_1.default.useCallback(async () => {
-        if (target === undefined || previewServerState.type !== 'connected') {
+        if (target === undefined) {
             return false;
         }
         if (!target.selected) {
@@ -1025,11 +1035,15 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
             : null;
         const assetLinkInfo = mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null;
         const canOpenInEditor = Boolean(window.remotion_editorName && originalLocation);
-        const disableInteractivityDisabled = !target.sequence.showInTimeline;
-        const sourceEditDisabled = !target.sequence.controls || !nodePath.absolutePath;
+        const sourceEditingEnabled = (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+        const disableInteractivityDisabled = !sourceEditingEnabled || !target.sequence.showInTimeline;
+        const sourceEditDisabled = !sourceEditingEnabled ||
+            !target.sequence.controls ||
+            !nodePath.absolutePath;
         const canAddEffect = target.nodePathInfo.supportsEffects &&
             !sourceEditDisabled &&
             previewServerState.type === 'connected';
+        const canCrop = target.canCrop && !sourceEditDisabled;
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo,
             canOpenInEditor,
@@ -1037,7 +1051,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
             disableInteractivityDisabled,
             duplicateDisabled: sourceEditDisabled,
             fileLocation,
-            includeSourceEditItems: true,
+            includeSourceEditItems: sourceEditingEnabled,
             onDeleteSequenceFromSource: async () => {
                 if (sourceEditDisabled || previewServerState.type !== 'connected') {
                     return;
@@ -1063,10 +1077,7 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
                             },
                         ],
                     });
-                    if (result.success) {
-                        (0, NotificationCenter_1.showNotification)('Removed sequence from source file', 2000);
-                    }
-                    else {
+                    if (!result.success) {
                         (0, NotificationCenter_1.showNotification)(result.reason, 4000);
                     }
                 }
@@ -1103,39 +1114,65 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
             originalLocation,
             selectAsset,
             sequence: target.sequence,
-            sourceActions: [
-                ...(target.nodePathInfo.supportsEffects
-                    ? [
-                        {
-                            type: 'item',
-                            id: 'add-effect',
-                            keyHint: null,
-                            label: 'Add effect...',
-                            leftItem: null,
-                            disabled: !canAddEffect,
-                            onClick: () => {
-                                if (!canAddEffect ||
-                                    previewServerState.type !== 'connected') {
-                                    return;
-                                }
-                                setSelectedModal({
-                                    type: 'add-effect',
-                                    clientId: previewServerState.clientId,
-                                    fileName: nodePath.absolutePath,
-                                    nodePath,
-                                });
+            sourceActions: sourceEditingEnabled
+                ? [
+                    ...(target.nodePathInfo.supportsEffects
+                        ? [
+                            {
+                                type: 'item',
+                                id: 'add-effect',
+                                keyHint: null,
+                                label: 'Add effect...',
+                                leftItem: null,
+                                disabled: !canAddEffect,
+                                onClick: () => {
+                                    if (!canAddEffect ||
+                                        previewServerState.type !== 'connected') {
+                                        return;
+                                    }
+                                    setSelectedModal({
+                                        type: 'add-effect',
+                                        clientId: previewServerState.clientId,
+                                        fileName: nodePath.absolutePath,
+                                        nodePath,
+                                    });
+                                },
+                                quickSwitcherLabel: null,
+                                subMenu: null,
+                                value: 'add-effect',
                             },
-                            quickSwitcherLabel: null,
-                            subMenu: null,
-                            value: 'add-effect',
-                        },
-                        {
-                            type: 'divider',
-                            id: 'add-effect-divider',
+                        ]
+                        : []),
+                    {
+                        type: 'item',
+                        id: 'crop',
+                        keyHint: null,
+                        label: 'Crop',
+                        leftItem: null,
+                        disabled: !canCrop,
+                        onClick: () => {
+                            if (!canCrop) {
+                                return;
+                            }
+                            onSelect({
+                                type: 'sequence-prop',
+                                nodePathInfo: {
+                                    ...target.nodePathInfo,
+                                    auxiliaryKeys: ['controls', selected_outline_types_1.cropFieldKeys.left],
+                                },
+                                key: selected_outline_types_1.cropFieldKeys.left,
+                            }, { shiftKey: false, toggleKey: false });
                         },
-                    ]
-                    : []),
-            ],
+                        quickSwitcherLabel: null,
+                        subMenu: null,
+                        value: 'crop',
+                    },
+                    {
+                        type: 'divider',
+                        id: 'crop-divider',
+                    },
+                ]
+                : [],
         });
     }, [
         confirm,
@@ -1148,9 +1185,9 @@ const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDr
         target,
     ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, snapTargets: snapTargets, target: target }), (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
+            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, snapTargets: snapTargets, target: target }), jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: target }), (target === null || target === void 0 ? void 0 : target.cropDrag) === null && (target.containsSelection || hovered)
                 ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, edge)))
-                : null, (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
+                : null, (target === null || target === void 0 ? void 0 : target.cropDrag) === null && (target.containsSelection || hovered)
                 ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle, { allRotationDragTargets: allRotationDragTargets, contextMenuValues: emptyContextMenuValues, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, corner)))
                 : null] }));
 };

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { type SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineTarget } from './selected-outline-types';
-export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginDragChanges, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
-export { getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
+export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineCropDragChanges, getSelectedOutlineCropDragValues, getSelectedOutlineCropFollowingTransformOrigin, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginDragChanges, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
+export { getOutlineSelectionInteraction, getSelectedCropInfo, 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';
 type OutlineSequenceParent = {