@remotion/studio 4.0.507 → 4.0.509

package/dist/components/SelectedOutlineCanvasRotation.js

@@ -0,0 +1,239 @@
+"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.SelectedOutlineCanvasRotation = 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 pointer_session_1 = require("../helpers/pointer-session");
+const editor_snapping_1 = require("../state/editor-snapping");
+const canvas_rotation_cursor_1 = require("./canvas-rotation-cursor");
+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 svg_point_to_client_point_1 = require("./svg-point-to-client-point");
+const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
+const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
+const imperative_state_1 = require("./Timeline/imperative-state");
+const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
+const rotationDegreesPerPixel = 0.5;
+const SelectedOutlineCanvasRotation = ({ getLatestTargetByKey, layoutTarget, onDraggingChange, outline }) => {
+    const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
+    const onPointerDown = react_1.default.useCallback((event) => {
+        var _a, _b;
+        if (event.button !== 0) {
+            return;
+        }
+        const target = getLatestTargetByKey(layoutTarget.key);
+        const rotationDrag = (_a = target === null || target === void 0 ? void 0 : target.rotationDrag) !== null && _a !== void 0 ? _a : null;
+        if (rotationDrag === null || !(target === null || target === void 0 ? void 0 : target.selectedForRotation)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
+            return;
+        }
+        const svg = event.currentTarget.ownerSVGElement;
+        if (svg === null) {
+            return;
+        }
+        const previousSvgCursor = svg.style.cursor;
+        svg.style.cursor = canvas_rotation_cursor_1.canvasRotationCursor;
+        const startPointer = { x: event.clientX, y: event.clientY };
+        const center = (0, svg_point_to_client_point_1.svgPointToClientPoint)((0, selected_outline_measurement_1.getSelectedOutlineRotationPivot)({
+            dimensions: outline.dimensions,
+            points: (_b = outline.uncroppedPoints) !== null && _b !== void 0 ? _b : outline.points,
+            transformOriginValue: rotationDrag.transformOriginValue,
+        }), svg.getBoundingClientRect());
+        const dragStates = (0, selected_outline_drag_1.getSelectedOutlineRotationDragStates)({
+            dragTargets: [rotationDrag],
+            getDragOverrides,
+            timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
+        });
+        let previousAngle = (0, selected_outline_measurement_1.getAngleDegrees)(center, startPointer);
+        let accumulatedDelta = 0;
+        let lastValues = new Map();
+        let dragStarted = false;
+        const onPointerMove = (moveEvent) => {
+            var _a;
+            var _b;
+            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;
+                (0, ForceSpecificCursor_1.forceSpecificCursor)(canvas_rotation_cursor_1.canvasRotationCursor);
+                onDraggingChange(true);
+            }
+            if (rotationDrag.transform3DMode) {
+                const startRotation = (_b = (_a = dragStates[0]) === null || _a === void 0 ? void 0 : _a.startRotation) !== null && _b !== void 0 ? _b : [0, 0, 0];
+                let rotationXDeltaDegrees = -screenDeltaY * rotationDegreesPerPixel;
+                let rotationYDeltaDegrees = screenDeltaX * rotationDegreesPerPixel;
+                if (moveEvent.shiftKey && editorSnapping) {
+                    rotationXDeltaDegrees =
+                        Math.round((startRotation[0] + rotationXDeltaDegrees) / 15) * 15 -
+                            startRotation[0];
+                    rotationYDeltaDegrees =
+                        Math.round((startRotation[1] + rotationYDeltaDegrees) / 15) * 15 -
+                            startRotation[1];
+                }
+                lastValues = (0, selected_outline_drag_1.getSelectedOutline3DRotationDragValues)({
+                    dragStates,
+                    rotationXDeltaDegrees,
+                    rotationYDeltaDegrees,
+                });
+            }
+            else {
+                const nextAngle = (0, selected_outline_measurement_1.getAngleDegrees)(center, {
+                    x: moveEvent.clientX,
+                    y: moveEvent.clientY,
+                });
+                accumulatedDelta += (0, selected_outline_measurement_1.getSelectedOutlineRotationDeltaDegrees)({
+                    from: previousAngle,
+                    to: nextAngle,
+                });
+                previousAngle = nextAngle;
+                const rotationDeltaDegrees = moveEvent.shiftKey && editorSnapping
+                    ? (0, selected_outline_drag_1.snapSelectedOutlineRotationDeltaDegrees)({
+                        dragStates,
+                        rotationDeltaDegrees: accumulatedDelta,
+                    })
+                    : accumulatedDelta;
+                lastValues = (0, selected_outline_drag_1.getSelectedOutlineRotationDragValues)({
+                    dragStates,
+                    rotationDeltaDegrees,
+                });
+            }
+            for (const dragState of dragStates) {
+                const value = lastValues.get(dragState.key);
+                if (value === undefined) {
+                    throw new Error('Expected rotation drag value to be available');
+                }
+                if (dragState.target.propStatus.status === 'keyframed') {
+                    setDragOverrides(dragState.target.nodePath, selected_outline_types_1.rotateFieldKey, remotion_1.Internals.makeKeyframedDragOverride({
+                        status: dragState.target.propStatus,
+                        frame: dragState.sourceFrame,
+                        value,
+                    }));
+                }
+                else {
+                    setDragOverrides(dragState.target.nodePath, selected_outline_types_1.rotateFieldKey, remotion_1.Internals.makeStaticDragOverride(value));
+                }
+            }
+        };
+        const onPointerUp = () => {
+            svg.style.cursor = previousSvgCursor;
+            if (dragStarted) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                onDraggingChange(false);
+            }
+            const changes = (0, selected_outline_drag_1.getSelectedOutlineRotationDragChanges)({
+                dragStates,
+                lastValues,
+            });
+            if (changes.length === 0) {
+                (0, selected_outline_drag_1.clearSelectedOutlineRotationDragOverrides)({
+                    clearDragOverrides,
+                    dragStates,
+                });
+                return;
+            }
+            const staticChanges = changes.filter((change) => change.type === 'static');
+            const keyframedChanges = changes.filter((change) => change.type === 'keyframed');
+            Promise.all([
+                staticChanges.length > 0
+                    ? (0, save_sequence_prop_1.saveSequenceProps)({
+                        changes: staticChanges,
+                        addedKeyframes: null,
+                        movedKeyframes: null,
+                        setPropStatuses,
+                        clientId: rotationDrag.clientId,
+                        undoLabel: 'Rotate sequence',
+                        redoLabel: 'Rotate sequence back',
+                    })
+                    : Promise.resolve(),
+                (0, call_add_keyframe_1.callAddKeyframes)({
+                    sequenceKeyframes: keyframedChanges,
+                    effectKeyframes: [],
+                    setPropStatuses,
+                    clientId: rotationDrag.clientId,
+                }),
+            ])
+                .catch((error) => {
+                (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${error instanceof Error ? error.message : String(error)}`, 4000);
+            })
+                .finally(() => {
+                (0, selected_outline_drag_1.clearSelectedOutlineRotationDragOverrides)({
+                    clearDragOverrides,
+                    dragStates,
+                });
+            });
+        };
+        // The polygon gates pointer-down, while the stable overlay keeps the
+        // session alive after the pointer leaves the selected item.
+        (0, pointer_session_1.startCapturedPointerSession)({
+            event,
+            captureTarget: svg,
+            onMove: onPointerMove,
+            onEnd: onPointerUp,
+        });
+    }, [
+        clearDragOverrides,
+        editorSnapping,
+        getDragOverrides,
+        getLatestTargetByKey,
+        layoutTarget.key,
+        onDraggingChange,
+        outline.dimensions,
+        outline.points,
+        outline.uncroppedPoints,
+        setDragOverrides,
+        setPropStatuses,
+    ]);
+    return (jsx_runtime_1.jsx("polygon", { points: outline.points.map((point) => `${point.x},${point.y}`).join(' '), fill: colors_1.TRANSPARENT, pointerEvents: "all", cursor: canvas_rotation_cursor_1.canvasRotationCursor, onPointerDown: onPointerDown, "data-remotion-studio-canvas-rotation": true }));
+};
+exports.SelectedOutlineCanvasRotation = SelectedOutlineCanvasRotation;

package/dist/components/SelectedOutlineCropControls.js

@@ -268,9 +268,9 @@ const CropHandle = ({ handle, outline, onDraggingChange, target }) => {
                 clearDragOverrides(cropDrag.nodePath);
             });
         };
-        (0, pointer_session_1.startPointerSession)({
+        (0, pointer_session_1.startCapturedPointerSession)({
             event,
-            target: event.currentTarget,
+            captureTarget: event.currentTarget,
             onMove: onPointerMove,
             onEnd: onPointerUp,
         });

package/dist/components/SelectedOutlineElement.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineSnapPoint } from './selected-outline-snap';
 import { type SelectedOutlineDragTarget, type SelectedOutlineLayoutTarget, type SelectedOutlineRotationDragTarget, type SelectedOutlineScaleDragTarget, type SelectedOutlineTarget } from './selected-outline-types';
-import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
+import { type TimelineSelection, type TimelineSelectionInteraction } from './Timeline/TimelineSelection';
 type SelectedOutlineElementProps = {
     readonly compositionHeight: number;
     readonly compositionWidth: number;
@@ -15,6 +15,7 @@ type SelectedOutlineElementProps = {
     readonly layoutTarget: SelectedOutlineLayoutTarget | undefined;
     readonly outline: SelectedOutline;
     readonly onDraggingChange: (dragging: boolean) => void;
+    readonly onContextMenuOpenChange: (open: boolean) => void;
     readonly onSnapPointsChange: (snapPoints: readonly SelectedOutlineSnapPoint[]) => void;
     readonly onSelect: (item: TimelineSelection, interaction: TimelineSelectionInteraction) => void;
     readonly scale: number;

package/dist/components/SelectedOutlineElement.js

@@ -45,11 +45,14 @@ const open_in_editor_1 = require("../helpers/open-in-editor");
 const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const modals_1 = require("../state/modals");
 const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
+const transform_3d_mode_1 = require("../state/transform-3d-mode");
 const call_api_1 = require("./call-api");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const selected_outline_control_layout_1 = require("./selected-outline-control-layout");
 const selected_outline_types_1 = require("./selected-outline-types");
+const SelectedOutlineCanvasRotation_1 = require("./SelectedOutlineCanvasRotation");
 const SelectedOutlineCropControls_1 = require("./SelectedOutlineCropControls");
 const SelectedOutlinePolygon_1 = require("./SelectedOutlinePolygon");
 const SelectedOutlineRotationCornerHandle_1 = require("./SelectedOutlineRotationCornerHandle");
@@ -58,10 +61,11 @@ const disable_sequence_interactivity_1 = require("./Timeline/disable-sequence-in
 const duplicate_selected_timeline_item_1 = require("./Timeline/duplicate-selected-timeline-item");
 const get_sequence_context_menu_items_1 = require("./Timeline/get-sequence-context-menu-items");
 const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
+const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const get_stack_1 = require("./Timeline/TimelineStack/get-stack");
 const use_default_editor_info_1 = require("./use-default-editor-info");
 const use_select_asset_1 = require("./use-select-asset");
-const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth, dragging, getAllDragOutlines, getAllDragTargets, getAllRotationDragTargets, getAllScaleDragTargets, getLatestTargetByKey, layoutTarget, outline, onDraggingChange, onSnapPointsChange, onSelect, scale, }) => {
+const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth, dragging, getAllDragOutlines, getAllDragTargets, getAllRotationDragTargets, getAllScaleDragTargets, getLatestTargetByKey, layoutTarget, outline, onDraggingChange, onContextMenuOpenChange, onSnapPointsChange, onSelect, scale, }) => {
     var _a;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const canConfigureApps = (0, use_default_editor_info_1.canUseEditorPicker)(previewServerState.type === 'connected');
@@ -74,8 +78,10 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const { setManuallyEnabled } = (0, react_1.useContext)(transform_3d_mode_1.Transform3DModeStateContext);
     const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
     const targetRef = (0, react_1.useRef)(layoutTarget);
+    const controlLayout = (0, react_1.useMemo)(() => (0, selected_outline_control_layout_1.getSelectedOutlineControlLayout)(outline.points), [outline.points]);
     (0, react_1.useLayoutEffect)(() => {
         targetRef.current = layoutTarget;
     }, [layoutTarget]);
@@ -190,6 +196,7 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
             !sourceEditDisabled &&
             previewServerState.type === 'connected';
         const canCrop = contextMenuTarget.canCrop && !sourceEditDisabled;
+        const canRotate = !sourceEditDisabled;
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo,
             canOpenInEditor,
@@ -337,9 +344,34 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
                         subMenu: null,
                         value: 'crop',
                     },
+                    {
+                        type: 'item',
+                        id: 'rotate',
+                        keyHint: null,
+                        label: isProgrammaticallyDuplicated ? 'Rotate all' : 'Rotate',
+                        leftItem: null,
+                        disabled: !canRotate,
+                        onClick: () => {
+                            if (!canRotate) {
+                                return;
+                            }
+                            setManuallyEnabled((0, TimelineSelection_1.getTimelineSequenceSelectionKey)(contextMenuTarget.nodePathInfo), true);
+                            onSelect({
+                                type: 'sequence-prop',
+                                nodePathInfo: {
+                                    ...contextMenuTarget.nodePathInfo,
+                                    auxiliaryKeys: ['controls', selected_outline_types_1.rotateFieldKey],
+                                },
+                                key: selected_outline_types_1.rotateFieldKey,
+                            }, { shiftKey: false, toggleKey: false });
+                        },
+                        quickSwitcherLabel: null,
+                        subMenu: null,
+                        value: 'rotate',
+                    },
                     {
                         type: 'divider',
-                        id: 'crop-divider',
+                        id: 'rotate-divider',
                     },
                 ]
                 : [],
@@ -353,17 +385,20 @@ const SelectedOutlineElementUnmemoized = ({ compositionHeight, compositionWidth,
         onSelect,
         previewServerState,
         resolveOriginalLocation,
+        setManuallyEnabled,
         selectAsset,
         setSelectedModal,
         setPropStatuses,
     ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon_1.SelectedOutlinePolygon, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLayoutTarget: getLayoutTarget, getTarget: getTarget, hasTarget: layoutTarget !== undefined, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, showSelectedOutline: (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.showSelectedOutline) !== null && _a !== void 0 ? _a : false }), jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: controlTarget }), (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
+            jsx_runtime_1.jsx(SelectedOutlinePolygon_1.SelectedOutlinePolygon, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: dragging, getAllDragOutlines: getAllDragOutlines, getAllDragTargets: getAllDragTargets, getLayoutTarget: getLayoutTarget, getTarget: getTarget, hasTarget: layoutTarget !== undefined, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onDoubleClickTarget: onDoubleClickTarget, scale: scale, showSelectedOutline: (_a = layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.showSelectedOutline) !== null && _a !== void 0 ? _a : false }), (layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.selectedForRotation) && (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.rotationDrag) ? (jsx_runtime_1.jsx(SelectedOutlineCanvasRotation_1.SelectedOutlineCanvasRotation, { getLatestTargetByKey: getLatestTargetByKey, layoutTarget: layoutTarget, onDraggingChange: onDraggingChange, outline: outline })) : null, jsx_runtime_1.jsx(SelectedOutlineCropControls_1.SelectedOutlineCropControls, { outline: outline, onDraggingChange: onDraggingChange, target: controlTarget }), (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
                 ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
-                ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine_1.SelectedOutlineScaleEdgeLine, { getAllScaleDragTargets: getAllScaleDragTargets, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: controlTarget }, edge)))
+                ? controlLayout.scaleEdges.map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine_1.SelectedOutlineScaleEdgeLine, { getAllScaleDragTargets: getAllScaleDragTargets, dragging: dragging, edge: edge, hitWidth: edge === 'top' || edge === 'bottom'
+                        ? controlLayout.scaleHitWidth.horizontal
+                        : controlLayout.scaleHitWidth.vertical, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: controlTarget }, edge)))
                 : null, (controlTarget === null || controlTarget === void 0 ? void 0 : controlTarget.cropDrag) === null &&
                 ((layoutTarget === null || layoutTarget === void 0 ? void 0 : layoutTarget.containsSelection) || hovered)
-                ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle_1.SelectedOutlineRotationCornerHandle, { getAllRotationDragTargets: getAllRotationDragTargets, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: controlTarget }, corner)))
+                ? controlLayout.rotationCorners.map(({ corner, point }) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle_1.SelectedOutlineRotationCornerHandle, { getAllRotationDragTargets: getAllRotationDragTargets, corner: corner, dragging: dragging, handlePoint: point, outline: outline, onContextMenuOpen: onContextMenuOpen, onContextMenuOpenChange: onContextMenuOpenChange, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, radius: controlLayout.rotationHandleRadius, target: controlTarget }, corner)))
                 : null] }));
 };
 exports.SelectedOutlineElement = react_1.default.memo(SelectedOutlineElementUnmemoized);

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { orderOutlinesForRendering } from './selected-outline-order';
 export { orderOutlinesForRendering };
-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 { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutline3DRotationDragValues, 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';

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.getSelectedCropInfo = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineTransformOriginDragChanges = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = exports.orderOutlinesForRendering = void 0;
+exports.SelectedOutlineOverlay = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getSelectedCropInfo = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineTransformOriginDragChanges = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineCropFollowingTransformOrigin = exports.getSelectedOutlineCropDragValues = exports.getSelectedOutlineCropDragChanges = exports.getSelectedOutlineActiveSchema = exports.getSelectedOutline3DRotationDragValues = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = exports.orderOutlinesForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -47,6 +47,7 @@ const use_runtime_values_1 = require("../helpers/use-runtime-values");
 const editor_outlines_1 = require("../state/editor-outlines");
 const scale_lock_1 = require("../state/scale-lock");
 const timeline_sequence_hover_1 = require("../state/timeline-sequence-hover");
+const transform_3d_mode_1 = require("../state/transform-3d-mode");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
 const selected_outline_order_1 = require("./selected-outline-order");
@@ -55,10 +56,12 @@ const selected_outline_types_1 = require("./selected-outline-types");
 const SelectedOutlineKeyboardControls_1 = require("./SelectedOutlineKeyboardControls");
 const SelectedOutlineRenderer_1 = require("./SelectedOutlineRenderer");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
+const transform_3d_mode_2 = require("./Timeline/transform-3d-mode");
 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, "getSelectedOutline3DRotationDragValues", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutline3DRotationDragValues; } });
 Object.defineProperty(exports, "getSelectedOutlineActiveSchema", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineActiveSchema; } });
 Object.defineProperty(exports, "getSelectedOutlineCropDragChanges", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineCropDragChanges; } });
 Object.defineProperty(exports, "getSelectedOutlineCropDragValues", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineCropDragValues; } });
@@ -138,7 +141,7 @@ const getCropDragFields = ({ activeSchema, cropValues, propStatuses, }) => {
     }
     return fields;
 };
-const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDragOverrides, getScaleLockState, isFullscreen, mode, previewSelectionAvailable, propStatuses, runtimeValuesByStore, selectableOutlines, selectedCropInfo, selectedEffectsBySequenceKey, selectedSequenceKeys, selectedTransformOriginInfo, sequenceKeysContainingSelection, studioInteractivityEnabled, targetKey, targetTimelinePosition, }) => {
+const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDragOverrides, getScaleLockState, isFullscreen, manuallyEnabled3DTransformSequenceKeys, mode, previewSelectionAvailable, propStatuses, runtimeValuesByStore, selectableOutlines, selectedCropInfo, selectedEffectsBySequenceKey, selectedRotationInfo, selectedSequenceKeys, selectedTransformOriginInfo, sequenceKeysContainingSelection, studioInteractivityEnabled, targetKey, targetTimelinePosition, }) => {
     if (isFullscreen ||
         !(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
         !previewSelectionAvailable ||
@@ -229,7 +232,27 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
         const crop = remotion_1.Internals.resolveSequenceCrop(cropValues);
         const selectedForTransformOrigin = (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.sequenceKey) === key;
         const selectedForCrop = (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.sequenceKey) === key;
+        const selectedForRotation = (selectedRotationInfo === null || selectedRotationInfo === void 0 ? void 0 : selectedRotationInfo.sequenceKey) === key;
         const selectedForUvHandles = selectedEffectsBySequenceKey.has(key);
+        const fieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.translateFieldKey];
+        const propStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.translateFieldKey];
+        const scaleFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.scaleFieldKey];
+        const scalePropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.scaleFieldKey];
+        const rotationFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.rotateFieldKey];
+        const rotationPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.rotateFieldKey];
+        const transformOriginFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.transformOriginFieldKey];
+        const transformOriginPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.transformOriginFieldKey];
+        const transformOriginValueForRotation = (transformOriginFieldSchema === null || transformOriginFieldSchema === void 0 ? void 0 : transformOriginFieldSchema.type) === 'transform-origin' &&
+            ((transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'static' ||
+                (transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'keyframed')
+            ? String((_c = remotion_1.Internals.getEffectiveVisualModeValue({
+                propStatus: transformOriginPropStatus,
+                dragOverrideValue: dragOverrides[selected_outline_types_1.transformOriginFieldKey],
+                defaultValue: transformOriginFieldSchema.default,
+                frame: sourceFrame,
+                shouldResortToDefaultValueIfUndefined: true,
+            })) !== null && _c !== void 0 ? _c : transformOriginFieldSchema.default)
+            : '50% 50%';
         const layoutTarget = {
             key,
             containsSelection,
@@ -239,9 +262,11 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
             ref: sequence.refForOutline,
             selected,
             selectedForCrop,
+            selectedForRotation,
             selectedForTransformOrigin,
             selectedForUvHandles,
             showSelectedOutline,
+            transformOriginValue: transformOriginValueForRotation,
             selection: {
                 type: 'sequence',
                 nodePathInfo: selectionNodePathInfo,
@@ -256,25 +281,6 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
             cropValues,
             propStatuses: nodePropStatuses,
         });
-        const fieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.translateFieldKey];
-        const propStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.translateFieldKey];
-        const scaleFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.scaleFieldKey];
-        const scalePropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.scaleFieldKey];
-        const rotationFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.rotateFieldKey];
-        const rotationPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.rotateFieldKey];
-        const transformOriginFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.transformOriginFieldKey];
-        const transformOriginPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.transformOriginFieldKey];
-        const transformOriginValueForRotation = (transformOriginFieldSchema === null || transformOriginFieldSchema === void 0 ? void 0 : transformOriginFieldSchema.type) === 'transform-origin' &&
-            ((transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'static' ||
-                (transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'keyframed')
-            ? String((_c = remotion_1.Internals.getEffectiveVisualModeValue({
-                propStatus: transformOriginPropStatus,
-                dragOverrideValue: dragOverrides[selected_outline_types_1.transformOriginFieldKey],
-                defaultValue: transformOriginFieldSchema.default,
-                frame: sourceFrame,
-                shouldResortToDefaultValueIfUndefined: true,
-            })) !== null && _c !== void 0 ? _c : transformOriginFieldSchema.default)
-            : '50% 50%';
         const canDragStatus = (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static' ||
             ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed' &&
                 propStatus.interpolationFunction === 'interpolate');
@@ -296,6 +302,17 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
             controls !== null &&
             (rotationFieldSchema === null || rotationFieldSchema === void 0 ? void 0 : rotationFieldSchema.type) === 'rotation-css' &&
             canRotationDragStatus;
+        const transform3DMode = manuallyEnabled3DTransformSequenceKeys.has(key) ||
+            [
+                'style.translate',
+                'style.scale',
+                'style.rotate',
+                'style.transformOrigin',
+            ].some((fieldKey) => (0, transform_3d_mode_2.propStatusHas3DTransformValue)({
+                fieldKey,
+                propStatus: nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[fieldKey],
+                runtimeValue: runtimeValues[fieldKey],
+            }));
         const transformOriginSourceFrame = (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.displayFrame) === null ||
             (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.displayFrame) === undefined
             ? sourceFrame
@@ -307,7 +324,7 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
             ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed' &&
                 propStatus.interpolationFunction === 'interpolate');
         const canTransformOriginDrag = previewInteractive &&
-            selectedForTransformOrigin &&
+            (selectedForTransformOrigin || selectedForRotation) &&
             controls !== null &&
             (transformOriginFieldSchema === null || transformOriginFieldSchema === void 0 ? void 0 : transformOriginFieldSchema.type) === 'transform-origin' &&
             (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) === 'translate' &&
@@ -387,6 +404,7 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                         keyframeDisplayOffset,
                         nodePath,
                         schema: controls.schema,
+                        transform3DMode,
                         transformOriginValue: transformOriginValueForRotation,
                     }
                     : null,
@@ -445,7 +463,7 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
         ];
     });
 };
-const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurrentState, compositionHeight, compositionWidth, draggingOutline, getLatestOutlineTargetByKey, getSelectableOutlines, onDraggingChange, onSelect, scale, selectedSequenceKeys, sequenceKeysContainingSelection, sequences, translationX, translationY, }) => {
+const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurrentState, compositionHeight, compositionWidth, draggingOutline, getLatestOutlineTargetByKey, getSelectableOutlines, onDraggingChange, onContextMenuOpenChange, onSelect, scale, selectedSequenceKeys, sequenceKeysContainingSelection, sequences, translationX, translationY, }) => {
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const updateOutlinesRef = (0, react_1.useRef)(() => undefined);
     const selectableOutlines = (0, react_1.useMemo)(() => {
@@ -487,7 +505,7 @@ const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurr
         outlineTargetsRef.current = outlineTargets;
         updateOutlinesRef.current();
     }, [outlineTargets, scale, translationX, translationY]);
-    return (jsx_runtime_1.jsx(SelectedOutlineRenderer_1.SelectedOutlineRenderer, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: draggingOutline, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getOutlineTargets: getOutlineTargets, onDraggingChange: onDraggingChange, onSelect: onSelect, scale: scale, sequences: sequences, updateOutlinesRef: updateOutlinesRef }));
+    return (jsx_runtime_1.jsx(SelectedOutlineRenderer_1.SelectedOutlineRenderer, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: draggingOutline, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getOutlineTargets: getOutlineTargets, onDraggingChange: onDraggingChange, onContextMenuOpenChange: onContextMenuOpenChange, onSelect: onSelect, scale: scale, sequences: sequences, updateOutlinesRef: updateOutlinesRef }));
 };
 const ActiveSelectedOutlineOverlay = react_1.default.memo(ActiveSelectedOutlineOverlayUnmemoized);
 const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, compositionWidth, scale, translationX, translationY, }) => {
@@ -499,17 +517,20 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { getScaleLockState } = (0, react_1.useContext)(scale_lock_1.ScaleLockContext);
+    const { manuallyEnabledSequenceKeys } = (0, react_1.useContext)(transform_3d_mode_1.Transform3DModeStateContext);
     const { editorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
     const setHoveredSequence = (0, timeline_sequence_hover_1.useSetTimelineSequenceHover)();
     const hoveredSequence = (0, timeline_sequence_hover_1.useTimelineSequenceHoverState)();
     const isFullscreen = (0, use_is_fullscreen_1.useIsFullscreen)();
     const { getCurrentFrame } = player_1.PlayerInternals.usePlayerMethods();
     const [draggingOutline, setDraggingOutline] = (0, react_1.useState)(false);
+    const [canvasContextMenuOpen, setCanvasContextMenuOpen] = (0, react_1.useState)(false);
     const previewSelectionAvailable = previewServerState.type === 'connected' || window.remotion_isReadOnlyStudio;
     const selectedSequenceKeys = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSelectedSequenceKeys)(selectedItems), [selectedItems]);
     const sequenceKeysContainingSelection = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSequenceKeysContainingSelection)(selectedItems), [selectedItems]);
     const selectedEffectsBySequenceKey = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSelectedEffectFieldsBySequenceKey)(selectedItems), [selectedItems]);
     const selectedTransformOriginInfo = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSelectedTransformOriginInfo)(selectedItems), [selectedItems]);
+    const selectedRotationInfo = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSelectedRotationInfo)(selectedItems), [selectedItems]);
     const selectedCropInfo = (0, react_1.useMemo)(() => (0, selected_outline_measurement_1.getSelectedCropInfo)(selectedItems), [selectedItems]);
     const getSelectableOutlines = (0, react_1.useCallback)((timelinePosition) => {
         if (isFullscreen ||
@@ -541,10 +562,12 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
         getDragOverrides,
         getScaleLockState,
         isFullscreen,
+        manuallyEnabled3DTransformSequenceKeys: manuallyEnabledSequenceKeys,
         previewSelectionAvailable,
         propStatuses,
         selectedCropInfo,
         selectedEffectsBySequenceKey,
+        selectedRotationInfo,
         selectedSequenceKeys,
         selectedTransformOriginInfo,
         sequenceKeysContainingSelection,
@@ -554,11 +577,13 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
         getDragOverrides,
         getScaleLockState,
         isFullscreen,
+        manuallyEnabledSequenceKeys,
         previewSelectionAvailable,
         previewServerState,
         propStatuses,
         selectedCropInfo,
         selectedEffectsBySequenceKey,
+        selectedRotationInfo,
         selectedSequenceKeys,
         selectedTransformOriginInfo,
         sequenceKeysContainingSelection,
@@ -606,7 +631,11 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
     const selectOutlineItem = (0, react_1.useCallback)((item, interaction) => {
         selectItem(item, interaction, undefined, { reveal: true });
     }, [selectItem]);
-    const measurementActive = canvasHovered || draggingOutline || (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'timeline';
+    const measurementActive = canvasHovered ||
+        draggingOutline ||
+        canvasContextMenuOpen ||
+        sequenceKeysContainingSelection.size > 0 ||
+        (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'timeline';
     (0, react_1.useLayoutEffect)(() => {
         if (measurementActive) {
             return;
@@ -614,6 +643,6 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
         setHoveredSequence((currentHover) => (currentHover === null || currentHover === void 0 ? void 0 : currentHover.source) === 'canvas' ? null : currentHover);
     }, [measurementActive, setHoveredSequence]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlineKeyboardControls_1.SelectedOutlineKeyboardControls, { getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getSelectableOutlines: getCurrentSelectableOutlines }), measurementActive ? (jsx_runtime_1.jsx(ActiveSelectedOutlineOverlay, { calculateOutlineTargetsForCurrentState: calculateOutlineTargetsForCurrentState, compositionHeight: compositionHeight, compositionWidth: compositionWidth, draggingOutline: draggingOutline, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getSelectableOutlines: getSelectableOutlines, onDraggingChange: onDraggingChange, onSelect: selectOutlineItem, scale: scale, selectedSequenceKeys: selectedSequenceKeys, sequenceKeysContainingSelection: sequenceKeysContainingSelection, sequences: sequences, translationX: translationX, translationY: translationY })) : null] }));
+            jsx_runtime_1.jsx(SelectedOutlineKeyboardControls_1.SelectedOutlineKeyboardControls, { getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getSelectableOutlines: getCurrentSelectableOutlines }), measurementActive ? (jsx_runtime_1.jsx(ActiveSelectedOutlineOverlay, { calculateOutlineTargetsForCurrentState: calculateOutlineTargetsForCurrentState, compositionHeight: compositionHeight, compositionWidth: compositionWidth, draggingOutline: draggingOutline, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getSelectableOutlines: getSelectableOutlines, onDraggingChange: onDraggingChange, onContextMenuOpenChange: setCanvasContextMenuOpen, onSelect: selectOutlineItem, scale: scale, selectedSequenceKeys: selectedSequenceKeys, sequenceKeysContainingSelection: sequenceKeysContainingSelection, sequences: sequences, translationX: translationX, translationY: translationY })) : null] }));
 };
 exports.SelectedOutlineOverlay = react_1.default.memo(SelectedOutlineOverlayUnmemoized);