@remotion/studio 4.0.527 → 4.0.529

package/dist/components/SelectedOutlineOverlay.js

@@ -35,13 +35,13 @@ 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.getSelectedOutline3DRotationDragValues = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = exports.orderOutlinesForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_1 = require("@remotion/canvas");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../helpers/client-id");
 const interactivity_enabled_1 = require("../helpers/interactivity-enabled");
-const timeline_node_path_key_1 = require("../helpers/timeline-node-path-key");
 const use_is_fullscreen_1 = require("../helpers/use-is-fullscreen");
 const use_runtime_values_1 = require("../helpers/use-runtime-values");
 const editor_outlines_1 = require("../state/editor-outlines");
@@ -58,6 +58,7 @@ const SelectedOutlineRenderer_1 = require("./SelectedOutlineRenderer");
 const get_timeline_keyframes_1 = require("./Timeline/get-timeline-keyframes");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 const transform_3d_mode_2 = require("./Timeline/transform-3d-mode");
+const { calculateTimeline, getCanvasSelectableOutlines, getCanvasVisibleOutlineTargets, getCanvasActiveOutlineTargets, getCanvasOutlineActivity, getCanvasOutlineLayoutTargets, } = canvas_1.CanvasInternals;
 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; } });
@@ -150,44 +151,29 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
         return [];
     }
     const previewInteractive = connectedClientId !== null && studioInteractivityEnabled;
-    const firstNodePathInfoBySourceNode = new Map();
-    const selectedSourceNodeKeys = new Set();
-    for (const { key, nodePathInfo } of selectableOutlines) {
-        const sourceNodeKey = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(nodePathInfo.sequenceSubscriptionKey);
-        if (selectedSequenceKeys.has(key)) {
-            selectedSourceNodeKeys.add(sourceNodeKey);
-        }
-        const currentFirst = firstNodePathInfoBySourceNode.get(sourceNodeKey);
-        if (currentFirst === undefined || nodePathInfo.index < currentFirst.index) {
-            firstNodePathInfoBySourceNode.set(sourceNodeKey, nodePathInfo);
-        }
-    }
-    return selectableOutlines.flatMap((selectableOutline) => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const { key, keyframeDisplayOffset, nodePathInfo, sequence } = selectableOutline;
-        if (targetKey !== null && targetKey !== key) {
-            return [];
-        }
-        if (sequence.refForOutline === null) {
-            throw new Error('Expected sequence to have a ref for outline');
-        }
-        const selected = selectedSequenceKeys.has(key);
-        const containsSelection = sequenceKeysContainingSelection.has(key);
+    return getCanvasOutlineLayoutTargets({
+        selectableOutlines,
+        selectedSequenceKeys,
+        sequenceKeysContainingSelection,
+        targetKey,
+    }).flatMap((canvasLayoutTarget) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const { key, keyframeDisplayOffset, keyframePlaybackRate, nodePathInfo, sequence, } = canvasLayoutTarget;
         const nodePath = nodePathInfo.sequenceSubscriptionKey;
-        const sourceNodeKey = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(nodePath);
-        const showSelectedOutline = containsSelection || selectedSourceNodeKeys.has(sourceNodeKey);
-        const selectionNodePathInfo = firstNodePathInfoBySourceNode.get(sourceNodeKey);
-        if (selectionNodePathInfo === undefined) {
-            throw new Error('Expected a first sequence for the source node');
-        }
         const { controls } = sequence;
         const nodePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
         const firstKeyframedStatus = Object.values(nodePropStatuses !== null && nodePropStatuses !== void 0 ? nodePropStatuses : {}).find((status) => status.status === 'keyframed');
         const nodeKeyframeDisplayOffset = (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
-            propStatus: firstKeyframedStatus,
+            propStatus: firstKeyframedStatus !== null && firstKeyframedStatus !== void 0 ? firstKeyframedStatus : null,
             keyframeDisplayOffset,
+            keyframePlaybackRate,
+        });
+        const sourceFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame: targetTimelinePosition,
+            keyframeDisplayOffset: nodeKeyframeDisplayOffset,
+            keyframePlaybackRate,
+            propStatus: firstKeyframedStatus !== null && firstKeyframedStatus !== void 0 ? firstKeyframedStatus : null,
         });
-        const sourceFrame = targetTimelinePosition - nodeKeyframeDisplayOffset;
         const dragOverrides = (_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {};
         const runtimeValues = controls
             ? ((_b = runtimeValuesByStore.get(controls.runtimeValues)) !== null && _b !== void 0 ? _b : controls.runtimeValues.getSnapshot())
@@ -241,6 +227,8 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
         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 pathFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema.d;
+        const pathPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses.d;
         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];
@@ -252,7 +240,7 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
             ((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,
+                propStatus: transformOriginPropStatus !== null && transformOriginPropStatus !== void 0 ? transformOriginPropStatus : null,
                 dragOverrideValue: dragOverrides[selected_outline_types_1.transformOriginFieldKey],
                 defaultValue: transformOriginFieldSchema.default,
                 frame: sourceFrame,
@@ -260,24 +248,14 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
             })) !== null && _c !== void 0 ? _c : transformOriginFieldSchema.default)
             : '50% 50%';
         const layoutTarget = {
-            key,
-            containsSelection,
+            ...canvasLayoutTarget,
             crop,
             keyframeDisplayOffset: nodeKeyframeDisplayOffset,
-            nodePathInfo,
-            ref: sequence.refForOutline,
-            selected,
             selectedForCrop,
             selectedForRotation,
             selectedForTransformOrigin,
             selectedForUvHandles,
-            showSelectedOutline,
             transformOriginValue: transformOriginValueForRotation,
-            selection: {
-                type: 'sequence',
-                nodePathInfo: selectionNodePathInfo,
-            },
-            sequence,
         };
         if (mode === 'layout') {
             return [layoutTarget];
@@ -322,11 +300,16 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
         const transformOriginSourceFrame = (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.displayFrame) === null ||
             (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.displayFrame) === undefined
             ? sourceFrame
-            : selectedTransformOriginInfo.displayFrame -
-                (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
-                    propStatus: transformOriginPropStatus,
+            : (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+                displayFrame: selectedTransformOriginInfo.displayFrame,
+                propStatus: transformOriginPropStatus !== null && transformOriginPropStatus !== void 0 ? transformOriginPropStatus : null,
+                keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                    propStatus: transformOriginPropStatus !== null && transformOriginPropStatus !== void 0 ? transformOriginPropStatus : null,
                     keyframeDisplayOffset,
-                });
+                    keyframePlaybackRate,
+                }),
+                keyframePlaybackRate,
+            });
         const canTransformOriginStatus = (transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'static' ||
             ((transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'keyframed' &&
                 transformOriginPropStatus.interpolationFunction === 'interpolate');
@@ -340,10 +323,11 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
             (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) === 'translate' &&
             canTransformOriginStatus &&
             canTransformOriginTranslateStatus;
-        const cropSourceFrame = (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.displayFrame) === null ||
-            (selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.displayFrame) === undefined
-            ? sourceFrame
-            : selectedCropInfo.displayFrame - nodeKeyframeDisplayOffset;
+        const cropSourceFrame = {
+            displayFrame: (_d = selectedCropInfo === null || selectedCropInfo === void 0 ? void 0 : selectedCropInfo.displayFrame) !== null && _d !== void 0 ? _d : targetTimelinePosition,
+            keyframeDisplayOffset: nodeKeyframeDisplayOffset,
+            keyframePlaybackRate,
+        };
         const canCropDrag = previewInteractive &&
             selectedForCrop &&
             controls !== null &&
@@ -351,6 +335,30 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
         return [
             {
                 ...layoutTarget,
+                pathDrag: previewInteractive &&
+                    controls !== null &&
+                    (pathFieldSchema === null || pathFieldSchema === void 0 ? void 0 : pathFieldSchema.type) === 'svg-path' &&
+                    (((pathPropStatus === null || pathPropStatus === void 0 ? void 0 : pathPropStatus.status) === 'static' &&
+                        typeof pathPropStatus.codeValue === 'string') ||
+                        ((pathPropStatus === null || pathPropStatus === void 0 ? void 0 : pathPropStatus.status) === 'keyframed' &&
+                            pathFieldSchema.keyframable !== false &&
+                            pathPropStatus.interpolationFunction === 'interpolatePaths'))
+                    ? {
+                        clientId: connectedClientId,
+                        nodePath,
+                        propStatus: pathPropStatus,
+                        schema: controls.schema,
+                        sourceFrame: {
+                            displayFrame: targetTimelinePosition,
+                            keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                                propStatus: pathPropStatus,
+                                keyframeDisplayOffset,
+                                keyframePlaybackRate,
+                            }),
+                            keyframePlaybackRate,
+                        },
+                    }
+                    : null,
                 canCrop: previewInteractive && controls !== null && cropFields !== null,
                 cropDrag: canCropDrag
                     ? {
@@ -363,7 +371,7 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                             transformOriginPropStatus !== undefined
                             ? {
                                 defaultValue: transformOriginFieldSchema.default,
-                                propStatus: transformOriginPropStatus,
+                                propStatus: transformOriginPropStatus !== null && transformOriginPropStatus !== void 0 ? transformOriginPropStatus : null,
                                 value: transformOriginValueForRotation,
                             }
                             : null,
@@ -374,9 +382,11 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                         propStatus,
                         clientId: connectedClientId,
                         fieldDefault: fieldSchema.default,
+                        keyframePlaybackRate,
                         keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                             propStatus,
                             keyframeDisplayOffset,
+                            keyframePlaybackRate,
                         }),
                         nodePath,
                         schema: controls.schema,
@@ -388,9 +398,11 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                         clientId: connectedClientId,
                         fieldDefault: scaleFieldSchema.default,
                         fieldSchema: scaleFieldSchema,
+                        keyframePlaybackRate,
                         keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                             propStatus: scalePropStatus,
                             keyframeDisplayOffset,
+                            keyframePlaybackRate,
                         }),
                         linked: getScaleLockState({
                             nodePath,
@@ -417,9 +429,11 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                         clientId: connectedClientId,
                         fieldDefault: rotationFieldSchema.default,
                         fieldSchema: rotationFieldSchema,
+                        keyframePlaybackRate,
                         keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                             propStatus: rotationPropStatus,
                             keyframeDisplayOffset,
+                            keyframePlaybackRate,
                         }),
                         nodePath,
                         schema: controls.schema,
@@ -430,23 +444,25 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                 transformOriginDrag: canTransformOriginDrag
                     ? {
                         clientId: connectedClientId,
+                        keyframePlaybackRate,
                         keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
-                            propStatus: transformOriginPropStatus,
+                            propStatus: transformOriginPropStatus !== null && transformOriginPropStatus !== void 0 ? transformOriginPropStatus : null,
                             keyframeDisplayOffset,
+                            keyframePlaybackRate,
                         }),
                         nodePath,
                         originDefault: transformOriginFieldSchema.default,
                         originPropStatus: transformOriginPropStatus,
-                        originValue: String((_d = remotion_1.Internals.getEffectiveVisualModeValue({
-                            propStatus: transformOriginPropStatus,
+                        originValue: String((_e = remotion_1.Internals.getEffectiveVisualModeValue({
+                            propStatus: transformOriginPropStatus !== null && transformOriginPropStatus !== void 0 ? transformOriginPropStatus : null,
                             dragOverrideValue: dragOverrides[selected_outline_types_1.transformOriginFieldKey],
                             defaultValue: transformOriginFieldSchema.default,
                             frame: transformOriginSourceFrame,
                             shouldResortToDefaultValueIfUndefined: true,
-                        })) !== null && _d !== void 0 ? _d : transformOriginFieldSchema.default),
+                        })) !== null && _e !== void 0 ? _e : transformOriginFieldSchema.default),
                         rotateValue: String((rotationPropStatus === null || rotationPropStatus === void 0 ? void 0 : rotationPropStatus.status) === 'static' ||
                             (rotationPropStatus === null || rotationPropStatus === void 0 ? void 0 : rotationPropStatus.status) === 'keyframed'
-                            ? ((_e = remotion_1.Internals.getEffectiveVisualModeValue({
+                            ? ((_f = remotion_1.Internals.getEffectiveVisualModeValue({
                                 propStatus: rotationPropStatus,
                                 dragOverrideValue: dragOverrides[selected_outline_types_1.rotateFieldKey],
                                 defaultValue: (rotationFieldSchema === null || rotationFieldSchema === void 0 ? void 0 : rotationFieldSchema.type) === 'rotation-css'
@@ -454,11 +470,11 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                                     : '0deg',
                                 frame: transformOriginSourceFrame,
                                 shouldResortToDefaultValueIfUndefined: true,
-                            })) !== null && _e !== void 0 ? _e : '0deg')
+                            })) !== null && _f !== void 0 ? _f : '0deg')
                             : '0deg'),
                         scaleValue: (scalePropStatus === null || scalePropStatus === void 0 ? void 0 : scalePropStatus.status) === 'static' ||
                             (scalePropStatus === null || scalePropStatus === void 0 ? void 0 : scalePropStatus.status) === 'keyframed'
-                            ? String((_f = remotion_1.Internals.getEffectiveVisualModeValue({
+                            ? String((_g = remotion_1.Internals.getEffectiveVisualModeValue({
                                 propStatus: scalePropStatus,
                                 dragOverrideValue: dragOverrides[selected_outline_types_1.scaleFieldKey],
                                 defaultValue: (scaleFieldSchema === null || scaleFieldSchema === void 0 ? void 0 : scaleFieldSchema.type) === 'scale'
@@ -466,49 +482,46 @@ const calculateOutlineTargets = ({ connectedClientId, editorShowOutlines, getDra
                                     : 1,
                                 frame: transformOriginSourceFrame,
                                 shouldResortToDefaultValueIfUndefined: true,
-                            })) !== null && _f !== void 0 ? _f : 1)
+                            })) !== null && _g !== void 0 ? _g : 1)
                             : '1',
                         schema: controls.schema,
-                        sourceFrame: transformOriginSourceFrame,
+                        sourceFrame: {
+                            displayFrame: (_h = selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.displayFrame) !== null && _h !== void 0 ? _h : targetTimelinePosition,
+                            keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+                                propStatus: transformOriginPropStatus,
+                                keyframeDisplayOffset,
+                                keyframePlaybackRate,
+                            }),
+                            keyframePlaybackRate,
+                        },
                         translateDefault: fieldSchema.default,
                         translatePropStatus: propStatus,
-                        translateValue: String((_g = remotion_1.Internals.getEffectiveVisualModeValue({
+                        translateValue: String((_j = remotion_1.Internals.getEffectiveVisualModeValue({
                             propStatus,
                             dragOverrideValue: dragOverrides[selected_outline_types_1.translateFieldKey],
                             defaultValue: fieldSchema.default,
                             frame: transformOriginSourceFrame,
                             shouldResortToDefaultValueIfUndefined: true,
-                        })) !== null && _g !== void 0 ? _g : fieldSchema.default),
+                        })) !== null && _j !== void 0 ? _j : fieldSchema.default),
                     }
                     : null,
             },
         ];
     });
 };
-const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurrentState, compositionHeight, compositionWidth, draggingOutline, getLatestOutlineTargetByKey, getSelectableOutlines, hoveredTimelineNodePathKey, measureAllOutlines, onDraggingChange, onContextMenuOpenChange, onSelect, scale, selectedSequenceKeys, sequenceKeysContainingSelection, sequences, translationX, translationY, }) => {
+const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurrentState, compositionHeight, compositionWidth, draggingOutline, getAllDragTargets, getLatestOutlineTargetByKey, getSelectableOutlines, hoveredTimelineNodePathKey, measureAllOutlines, 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)(() => {
         return getSelectableOutlines(timelinePosition);
     }, [getSelectableOutlines, timelinePosition]);
-    const selectableOutlinesForLayout = (0, react_1.useMemo)(() => {
-        if (measureAllOutlines) {
-            return selectableOutlines;
-        }
-        // A timeline item can represent multiple connected canvas instances.
-        // Keep every instance of an active source node without calculating targets
-        // for unrelated timeline items while the canvas itself is inactive.
-        const activeNodePathKeys = new Set();
-        for (const { key, nodePathInfo } of selectableOutlines) {
-            const nodePathKey = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(nodePathInfo.sequenceSubscriptionKey);
-            if (selectedSequenceKeys.has(key) ||
-                sequenceKeysContainingSelection.has(key) ||
-                nodePathKey === hoveredTimelineNodePathKey) {
-                activeNodePathKeys.add(nodePathKey);
-            }
-        }
-        return selectableOutlines.filter(({ nodePathInfo }) => activeNodePathKeys.has((0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(nodePathInfo.sequenceSubscriptionKey)));
-    }, [
+    const selectableOutlinesForLayout = (0, react_1.useMemo)(() => getCanvasActiveOutlineTargets({
+        targets: selectableOutlines,
+        selectedSequenceKeys,
+        sequenceKeysContainingSelection,
+        hoveredNodePathKey: hoveredTimelineNodePathKey,
+        measureAll: measureAllOutlines,
+    }), [
         hoveredTimelineNodePathKey,
         measureAllOutlines,
         selectableOutlines,
@@ -548,11 +561,12 @@ const ActiveSelectedOutlineOverlayUnmemoized = ({ calculateOutlineTargetsForCurr
     (0, react_1.useLayoutEffect)(() => {
         updateOutlinesRef.current();
     }, [scale, translationX, translationY]);
-    return (jsx_runtime_1.jsx(SelectedOutlineRenderer_1.SelectedOutlineRenderer, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: draggingOutline, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, outlineTargets: outlineTargets, onDraggingChange: onDraggingChange, onContextMenuOpenChange: onContextMenuOpenChange, onSelect: onSelect, scale: scale, sequences: sequences, updateOutlinesRef: updateOutlinesRef }));
+    return (jsx_runtime_1.jsx(SelectedOutlineRenderer_1.SelectedOutlineRenderer, { compositionHeight: compositionHeight, compositionWidth: compositionWidth, dragging: draggingOutline, getAllDragTargets: getAllDragTargets, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, outlineTargets: outlineTargets, 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, }) => {
     const { selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineSelection)();
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
@@ -575,19 +589,33 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
     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 ||
-            !(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
-            !previewSelectionAvailable ||
-            !editorShowOutlines) {
-            return [];
-        }
-        return (0, selected_outline_measurement_1.getSequencesWithSelectableOutlines)({
-            sequences,
-            overrideIdsToNodePaths: overrideIdToNodePathMappings,
-            compositions,
-            timelinePosition,
-        });
+    const getSelectableOutlines = (0, react_1.useMemo)(() => {
+        // Resolve source identities once per sequence snapshot, on first demand.
+        // Playback only filters the cached candidates by their visible range.
+        let selectableOutlines = null;
+        return (timelinePosition) => {
+            if (isFullscreen ||
+                !(0, interactivity_enabled_1.isStudioSelectionEnabled)() ||
+                !previewSelectionAvailable ||
+                !editorShowOutlines) {
+                return [];
+            }
+            selectableOutlines !== null && selectableOutlines !== void 0 ? selectableOutlines : (selectableOutlines = getCanvasSelectableOutlines({
+                tracks: calculateTimeline({
+                    sequences: [...sequences],
+                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    compositions,
+                }),
+                timelinePosition: null,
+                resolveSequenceNodePathInfo: null,
+            }));
+            return timelinePosition === null
+                ? selectableOutlines
+                : getCanvasVisibleOutlineTargets({
+                    targets: selectableOutlines,
+                    timelinePosition,
+                });
+        };
     }, [
         compositions,
         editorShowOutlines,
@@ -666,7 +694,38 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
         getCurrentFrame,
         getSelectableOutlinesAtFrame,
     ]);
-    const getCurrentSelectableOutlines = (0, react_1.useCallback)(() => getSelectableOutlinesAtFrame(getCurrentFrame()), [getCurrentFrame, getSelectableOutlinesAtFrame]);
+    const getAllDragTargets = (0, react_1.useCallback)(() => {
+        // Selected layers can be outside the current frame and have no mounted DOM.
+        // Only outline measurement and snapping need to be restricted to visible layers.
+        const selectedKeys = (0, selected_outline_measurement_1.getSequenceKeysContainingSelection)(currentSelection.current.selectedItems);
+        if (selectedKeys.size === 0) {
+            return [];
+        }
+        const selectableOutlines = getSelectableOutlines(null).filter(({ key }) => selectedKeys.has(key));
+        const targets = calculateOutlineTargetsForCurrentState({
+            mode: 'controls',
+            runtimeValuesByStore: new Map(),
+            selectableOutlines,
+            targetKey: null,
+            targetTimelinePosition: getCurrentFrame(),
+        });
+        const dragTargets = new Map();
+        for (const { drag } of targets) {
+            if (drag === null) {
+                continue;
+            }
+            const sourceNodeKey = remotion_1.Internals.makeSequencePropsSubscriptionKey(drag.nodePath);
+            if (!dragTargets.has(sourceNodeKey)) {
+                dragTargets.set(sourceNodeKey, drag);
+            }
+        }
+        return [...dragTargets.values()];
+    }, [
+        calculateOutlineTargetsForCurrentState,
+        currentSelection,
+        getCurrentFrame,
+        getSelectableOutlines,
+    ]);
     const onDraggingChange = (0, react_1.useCallback)((dragging) => {
         setDraggingOutline(dragging);
         if (dragging) {
@@ -676,13 +735,13 @@ const SelectedOutlineOverlayUnmemoized = ({ canvasHovered, compositionHeight, co
     const selectOutlineItem = (0, react_1.useCallback)((item, interaction) => {
         selectItem(item, interaction, undefined, { reveal: true });
     }, [selectItem]);
-    const measurementActive = canvasHovered ||
-        draggingOutline ||
-        canvasContextMenuOpen ||
-        sequenceKeysContainingSelection.size > 0 ||
-        (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'timeline';
-    const measureAllOutlines = canvasHovered || draggingOutline || canvasContextMenuOpen;
-    const hoveredTimelineNodePathKey = (hoveredSequence === null || hoveredSequence === void 0 ? void 0 : hoveredSequence.source) === 'timeline' ? hoveredSequence.nodePathKey : null;
+    const { measurementActive, measureAllOutlines, hoveredTimelineNodePathKey } = getCanvasOutlineActivity({
+        canvasHovered,
+        dragging: draggingOutline,
+        contextMenuOpen: canvasContextMenuOpen,
+        hasSelection: sequenceKeysContainingSelection.size > 0,
+        hoveredSequence,
+    });
     (0, react_1.useLayoutEffect)(() => {
         if (measurementActive) {
             return;
@@ -690,6 +749,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, hoveredTimelineNodePathKey: hoveredTimelineNodePathKey, measureAllOutlines: measureAllOutlines, onDraggingChange: onDraggingChange, onContextMenuOpenChange: setCanvasContextMenuOpen, onSelect: selectOutlineItem, scale: scale, selectedSequenceKeys: selectedSequenceKeys, sequenceKeysContainingSelection: sequenceKeysContainingSelection, sequences: sequences, translationX: translationX, translationY: translationY })) : null] }));
+            jsx_runtime_1.jsx(SelectedOutlineKeyboardControls_1.SelectedOutlineKeyboardControls, { getAllDragTargets: getAllDragTargets }), measurementActive ? (jsx_runtime_1.jsx(ActiveSelectedOutlineOverlay, { calculateOutlineTargetsForCurrentState: calculateOutlineTargetsForCurrentState, compositionHeight: compositionHeight, compositionWidth: compositionWidth, draggingOutline: draggingOutline, getAllDragTargets: getAllDragTargets, getLatestOutlineTargetByKey: getLatestOutlineTargetByKey, getSelectableOutlines: getSelectableOutlines, hoveredTimelineNodePathKey: hoveredTimelineNodePathKey, measureAllOutlines: measureAllOutlines, 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);

package/dist/components/SelectedOutlinePathPoints.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SelectedOutline } from './selected-outline-geometry';
+import type { SelectedOutlinePathDragTarget } from './selected-outline-types';
+export declare const SelectedOutlinePathPoints: React.FC<{
+    readonly outline: SelectedOutline;
+    readonly pathDrag: SelectedOutlinePathDragTarget;
+    readonly onDraggingChange: (dragging: boolean) => void;
+}>;