@remotion/studio 4.0.472 → 4.0.474

package/dist/components/SelectedOutlineOverlay.js

@@ -33,7 +33,8 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineDragValues = exports.getSequencesWithSelectableOutlines = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getUvCoordinateForPoint = exports.getUvHandlePosition = void 0;
+exports.SelectedOutlineOverlay = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineDragValues = exports.getSequencesWithSelectableOutlines = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.getSelectedSequenceKeys = exports.getUvCoordinateForPoint = exports.getUvHandleConnectionLines = exports.getUvHandlePosition = void 0;
+exports.constrainUv = constrainUv;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -41,16 +42,20 @@ const no_react_1 = require("remotion/no-react");
 const calculate_timeline_1 = require("../helpers/calculate-timeline");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const format_file_location_1 = require("../helpers/format-file-location");
 const get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
+const open_in_editor_1 = require("../helpers/open-in-editor");
+const editor_outlines_1 = require("../state/editor-outlines");
 const scale_lock_1 = require("../state/scale-lock");
+const ContextMenu_1 = require("./ContextMenu");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
 const save_effect_prop_1 = require("./Timeline/save-effect-prop");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
-const timeline_field_utils_1 = require("./Timeline/timeline-field-utils");
 const timeline_translate_utils_1 = require("./Timeline/timeline-translate-utils");
 const TimelineScaleField_1 = require("./Timeline/TimelineScaleField");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
+const get_stack_1 = require("./Timeline/TimelineStack/get-stack");
 const translateFieldKey = 'style.translate';
 const scaleFieldKey = 'style.scale';
 const outlineContainer = {
@@ -59,6 +64,7 @@ const outlineContainer = {
     pointerEvents: 'none',
     overflow: 'visible',
 };
+const emptyContextMenuValues = [];
 const pointToString = (point) => `${point.x},${point.y}`;
 const parseUvCoordinate = (value) => {
     if (Array.isArray(value) &&
@@ -142,6 +148,39 @@ const getUvHandlePosition = (points, uv) => {
         : applyProjectiveTransform(transform, uv);
 };
 exports.getUvHandlePosition = getUvHandlePosition;
+const getUvHandleConnectionLines = ({ handles, points, }) => {
+    const handlesByField = new Map(handles.map((handle) => [
+        `${handle.effectIndex}\u0000${handle.fieldKey}`,
+        handle,
+    ]));
+    const seenPairs = new Set();
+    const lines = [];
+    for (const handle of handles) {
+        const targetFieldKey = handle.fieldSchema.lineTo;
+        if (targetFieldKey === undefined || targetFieldKey === handle.fieldKey) {
+            continue;
+        }
+        const target = handlesByField.get(`${handle.effectIndex}\u0000${targetFieldKey}`);
+        if (target === undefined) {
+            continue;
+        }
+        const pairKey = [
+            handle.effectIndex,
+            ...[handle.fieldKey, targetFieldKey].sort(),
+        ].join('\u0000');
+        if (seenPairs.has(pairKey)) {
+            continue;
+        }
+        seenPairs.add(pairKey);
+        lines.push({
+            key: `${handle.effectIndex}-${handle.fieldKey}-${targetFieldKey}`,
+            from: (0, exports.getUvHandlePosition)(points, handle.value),
+            to: (0, exports.getUvHandlePosition)(points, target.value),
+        });
+    }
+    return lines;
+};
+exports.getUvHandleConnectionLines = getUvHandleConnectionLines;
 const vectorBetween = (from, to) => {
     return { x: to.x - from.x, y: to.y - from.y };
 };
@@ -203,22 +242,12 @@ exports.getUvCoordinateForPoint = getUvCoordinateForPoint;
 const clamp = (value, min, max) => {
     return Math.min(max, Math.max(min, value));
 };
-const roundToStep = (value, step) => {
-    if (step === undefined || !Number.isFinite(step) || step <= 0) {
-        return value;
-    }
-    const decimals = (0, timeline_field_utils_1.getDecimalPlaces)(step);
-    return Number((Math.round(value / step) * step).toFixed(decimals));
-};
-const constrainUv = (value, schema) => {
+function constrainUv(value, schema) {
     var _a, _b;
     const min = (_a = schema.min) !== null && _a !== void 0 ? _a : -Infinity;
     const max = (_b = schema.max) !== null && _b !== void 0 ? _b : Infinity;
-    return [
-        clamp(roundToStep(value[0], schema.step), min, max),
-        clamp(roundToStep(value[1], schema.step), min, max),
-    ];
-};
+    return [clamp(value[0], min, max), clamp(value[1], min, max)];
+}
 const rectToPoints = (elementRect, containerRect) => {
     const left = elementRect.left - containerRect.left;
     const top = elementRect.top - containerRect.top;
@@ -261,6 +290,12 @@ const getElementOutlinePoints = (element, containerRect) => {
     return quadToPoints(quad, containerRect);
 };
 const getSelectedSequenceKeys = (selectedItems) => {
+    return new Set(selectedItems
+        .filter((item) => item.type === 'sequence')
+        .map((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo)));
+};
+exports.getSelectedSequenceKeys = getSelectedSequenceKeys;
+const getSequenceKeysContainingSelection = (selectedItems) => {
     return new Set(selectedItems.map((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo)));
 };
 const getOutlineSelectionInteraction = ({ shiftKey, metaKey, ctrlKey, }) => ({
@@ -282,7 +317,12 @@ const getSelectedEffectFieldsBySequenceKey = (selectedItems) => {
             allFields: false,
             fieldKeys: new Set(),
         };
-        selectedFields.allFields = true;
+        if (item.type === 'sequence-effect') {
+            selectedFields.allFields = true;
+        }
+        else {
+            selectedFields.fieldKeys.add(item.key);
+        }
         effectsForSequence.set(item.i, selectedFields);
         selectedEffects.set(sequenceKey, effectsForSequence);
     }
@@ -316,7 +356,7 @@ const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths,
     });
 };
 exports.getSequencesWithSelectableOutlines = getSequencesWithSelectableOutlines;
-const getSelectedUvHandles = ({ codeValues, clientId, getEffectDragOverrides, nodePath, selectedEffects, sequence, }) => {
+const getSelectedUvHandles = ({ propStatuses, clientId, getEffectDragOverrides, nodePath, selectedEffects, sequence, }) => {
     if (clientId === null || selectedEffects === undefined) {
         return [];
     }
@@ -326,8 +366,8 @@ const getSelectedUvHandles = ({ codeValues, clientId, getEffectDragOverrides, no
         if (!effect) {
             continue;
         }
-        const effectStatus = remotion_1.Internals.getEffectCodeValuesCtx({
-            codeValues,
+        const effectStatus = remotion_1.Internals.getEffectPropStatusesCtx({
+            propStatuses,
             nodePath,
             effectIndex,
         });
@@ -357,7 +397,7 @@ const getSelectedUvHandles = ({ codeValues, clientId, getEffectDragOverrides, no
             }
             const dragOverrideValue = dragOverrides[fieldKey];
             const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
-                codeValue: propStatus,
+                propStatus,
                 dragOverrideValue,
                 defaultValue: fieldSchema.default,
                 shouldResortToDefaultValueIfUndefined: true,
@@ -368,7 +408,7 @@ const getSelectedUvHandles = ({ codeValues, clientId, getEffectDragOverrides, no
             }
             handles.push({
                 clientId,
-                codeValue: propStatus,
+                propStatus,
                 effectIndex,
                 fieldDefault: fieldSchema.default,
                 fieldKey,
@@ -420,7 +460,7 @@ const getSelectedOutlineDragStates = ({ dragTargets, getDragOverrides, timelineP
         const dragOverrideValue = ((_a = getDragOverrides(target.nodePath)) !== null && _a !== void 0 ? _a : {})[translateFieldKey];
         const sourceFrame = timelinePosition - target.keyframeDisplayOffset;
         const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
-            codeValue: target.codeValue,
+            propStatus: target.propStatus,
             dragOverrideValue,
             defaultValue: target.fieldDefault,
             frame: sourceFrame,
@@ -453,7 +493,7 @@ const getSelectedOutlineDragChanges = ({ dragStates, lastValues, }) => {
         if (value === undefined) {
             continue;
         }
-        if (dragState.target.codeValue.status === 'keyframed') {
+        if (dragState.target.propStatus.status === 'keyframed') {
             const startValue = (0, timeline_translate_utils_1.serializeTranslate)(dragState.startX, dragState.startY);
             if (value === startValue) {
                 continue;
@@ -471,9 +511,9 @@ const getSelectedOutlineDragChanges = ({ dragStates, lastValues, }) => {
             continue;
         }
         const stringifiedValue = JSON.stringify(value);
-        const shouldSave = value !== dragState.target.codeValue.codeValue &&
+        const shouldSave = value !== dragState.target.propStatus.codeValue &&
             !(dragState.defaultValue === stringifiedValue &&
-                dragState.target.codeValue.codeValue === undefined);
+                dragState.target.propStatus.codeValue === undefined);
         if (!shouldSave) {
             continue;
         }
@@ -520,7 +560,7 @@ const getSelectedOutlineScaleDragStates = ({ dragTargets, getDragOverrides, }) =
         var _a;
         const dragOverrideValue = ((_a = getDragOverrides(target.nodePath)) !== null && _a !== void 0 ? _a : {})[scaleFieldKey];
         const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
-            codeValue: target.codeValue,
+            propStatus: target.propStatus,
             dragOverrideValue,
             defaultValue: target.fieldDefault,
             shouldResortToDefaultValueIfUndefined: true,
@@ -574,9 +614,9 @@ const getSelectedOutlineScaleDragChanges = ({ dragStates, lastValues, }) => {
         }
         const stringifiedValue = JSON.stringify(value);
         const shouldSave = stringifiedValue !==
-            JSON.stringify(dragState.target.codeValue.codeValue) &&
+            JSON.stringify(dragState.target.propStatus.codeValue) &&
             !(dragState.defaultValue === stringifiedValue &&
-                dragState.target.codeValue.codeValue === undefined);
+                dragState.target.propStatus.codeValue === undefined);
         if (!shouldSave) {
             return [];
         }
@@ -603,17 +643,19 @@ const clearSelectedOutlineScaleDragOverrides = ({ clearDragOverrides, dragStates
         clearDragOverrides(dragState.target.nodePath);
     }
 };
-const SelectedOutlinePolygon = ({ allDragTargets, hovered, outline, onHoverChange, onSelect, scale, target, }) => {
-    var _a, _b;
+const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSelect, scale, target, }) => {
+    var _a, _b, _c;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const { setCodeValues, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
     timelinePositionRef.current = timelinePosition;
+    const polygonRef = (0, react_1.useRef)(null);
     const points = (0, react_1.useMemo)(() => outline.points.map(pointToString).join(' '), [outline.points]);
     const drag = (_a = target === null || target === void 0 ? void 0 : target.drag) !== null && _a !== void 0 ? _a : null;
     const selected = (_b = target === null || target === void 0 ? void 0 : target.selected) !== null && _b !== void 0 ? _b : false;
-    const visible = selected || hovered;
+    const containsSelection = (_c = target === null || target === void 0 ? void 0 : target.containsSelection) !== null && _c !== void 0 ? _c : false;
+    const visible = containsSelection || hovered;
     const onPointerDown = react_1.default.useCallback((event) => {
         if (event.button !== 0 || target === undefined) {
             return;
@@ -628,6 +670,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, hovered, outline, onHoverChang
         if (drag === null || interaction.shiftKey || interaction.toggleKey) {
             return;
         }
+        onDraggingChange(true);
         const startPointerX = event.clientX;
         const startPointerY = event.clientY;
         const dragStates = getSelectedOutlineDragStates({
@@ -648,9 +691,9 @@ const SelectedOutlinePolygon = ({ allDragTargets, hovered, outline, onHoverChang
                 if (value === undefined) {
                     throw new Error('Expected drag value to be available');
                 }
-                if (dragState.target.codeValue.status === 'keyframed') {
+                if (dragState.target.propStatus.status === 'keyframed') {
                     setDragOverrides(dragState.target.nodePath, translateFieldKey, remotion_1.Internals.makeKeyframedDragOverride({
-                        status: dragState.target.codeValue,
+                        status: dragState.target.propStatus,
                         frame: dragState.sourceFrame,
                         value,
                     }));
@@ -664,6 +707,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, hovered, outline, onHoverChang
             window.removeEventListener('pointermove', onPointerMove);
             window.removeEventListener('pointerup', onPointerUp);
             window.removeEventListener('pointercancel', onPointerUp);
+            onDraggingChange(false);
             const changes = (0, exports.getSelectedOutlineDragChanges)({
                 dragStates,
                 lastValues,
@@ -678,10 +722,14 @@ const SelectedOutlinePolygon = ({ allDragTargets, hovered, outline, onHoverChang
                 staticChanges.length > 0
                     ? (0, save_sequence_prop_1.saveSequenceProps)({
                         changes: staticChanges,
-                        setCodeValues,
+                        setPropStatuses,
                         clientId: drag.clientId,
-                        undoLabel: changes.length > 1 ? 'Move selected sequences' : null,
-                        redoLabel: changes.length > 1 ? 'Move selected sequences back' : null,
+                        undoLabel: changes.length > 1
+                            ? 'Move selected sequences'
+                            : 'Move sequence',
+                        redoLabel: changes.length > 1
+                            ? 'Move selected sequences back'
+                            : 'Move sequence back',
                     })
                     : Promise.resolve(),
                 ...keyframedChanges.map((change) => (0, call_add_keyframe_1.callAddSequenceKeyframe)({
@@ -691,7 +739,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, hovered, outline, onHoverChang
                     sourceFrame: change.sourceFrame,
                     value: change.value,
                     schema: change.schema,
-                    setCodeValues,
+                    setPropStatuses,
                     clientId: change.clientId,
                 })),
             ])
@@ -710,21 +758,33 @@ const SelectedOutlinePolygon = ({ allDragTargets, hovered, outline, onHoverChang
         clearDragOverrides,
         drag,
         getDragOverrides,
+        onDraggingChange,
         onSelect,
         scale,
         selected,
-        setCodeValues,
+        setPropStatuses,
         setDragOverrides,
         target,
     ]);
-    return (jsx_runtime_1.jsx("polygon", { points: points, fill: "transparent", stroke: colors_1.BLUE, strokeOpacity: visible ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: target === undefined ? undefined : 'all', onPointerEnter: () => onHoverChange(outline.key), onPointerLeave: () => onHoverChange(null), onPointerDown: onPointerDown }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("polygon", { ref: polygonRef, points: points, fill: "transparent", stroke: colors_1.BLUE, strokeOpacity: visible ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: target === undefined ? undefined : 'all', onPointerEnter: () => {
+                    if (!dragging) {
+                        onHoverChange(outline.key);
+                    }
+                }, onPointerLeave: () => {
+                    if (!dragging) {
+                        onHoverChange(null);
+                    }
+                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
+        ] }));
 };
-const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, edge, outline, onHoverChange, onSelect, target, }) => {
+const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues, dragging, edge, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
     var _a, _b;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
-    const { setCodeValues, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const scaleDrag = (_a = target === null || target === void 0 ? void 0 : target.scaleDrag) !== null && _a !== void 0 ? _a : null;
     const selected = (_b = target === null || target === void 0 ? void 0 : target.selected) !== null && _b !== void 0 ? _b : false;
+    const lineRef = (0, react_1.useRef)(null);
     const edgeInfo = (0, react_1.useMemo)(() => (0, exports.getSelectedOutlineScaleEdgeInfo)(outline.points, edge), [edge, outline.points]);
     const onPointerDown = react_1.default.useCallback((event) => {
         if (event.button !== 0 || scaleDrag === null || edgeInfo === null) {
@@ -740,6 +800,7 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, edge, outline, onHo
         if (interaction.shiftKey || interaction.toggleKey) {
             return;
         }
+        onDraggingChange(true);
         const startPointer = { x: event.clientX, y: event.clientY };
         const dragStates = (0, exports.getSelectedOutlineScaleDragStates)({
             dragTargets: selected ? allScaleDragTargets : [scaleDrag],
@@ -771,6 +832,7 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, edge, outline, onHo
             window.removeEventListener('pointermove', onPointerMove);
             window.removeEventListener('pointerup', onPointerUp);
             window.removeEventListener('pointercancel', onPointerUp);
+            onDraggingChange(false);
             const changes = (0, exports.getSelectedOutlineScaleDragChanges)({
                 dragStates,
                 lastValues,
@@ -784,10 +846,12 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, edge, outline, onHo
             }
             (0, save_sequence_prop_1.saveSequenceProps)({
                 changes,
-                setCodeValues,
+                setPropStatuses,
                 clientId: scaleDrag.clientId,
-                undoLabel: changes.length > 1 ? 'Scale selected sequences' : null,
-                redoLabel: changes.length > 1 ? 'Scale selected sequences back' : null,
+                undoLabel: changes.length > 1 ? 'Scale selected sequences' : 'Scale sequence',
+                redoLabel: changes.length > 1
+                    ? 'Scale selected sequences back'
+                    : 'Scale sequence back',
             })
                 .catch((err) => {
                 (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);
@@ -807,17 +871,28 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, edge, outline, onHo
         clearDragOverrides,
         edgeInfo,
         getDragOverrides,
+        onDraggingChange,
         onSelect,
         scaleDrag,
         selected,
-        setCodeValues,
+        setPropStatuses,
         setDragOverrides,
         target,
     ]);
     if (scaleDrag === null || edgeInfo === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx("line", { x1: edgeInfo.start.x, y1: edgeInfo.start.y, x2: edgeInfo.end.x, y2: edgeInfo.end.y, stroke: "transparent", strokeWidth: 12, vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: edgeInfo.cursor, onPointerEnter: () => onHoverChange(outline.key), onPointerLeave: () => onHoverChange(null), onPointerDown: onPointerDown }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("line", { ref: lineRef, x1: edgeInfo.start.x, y1: edgeInfo.start.y, x2: edgeInfo.end.x, y2: edgeInfo.end.y, stroke: "transparent", strokeWidth: 12, vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: edgeInfo.cursor, onPointerEnter: () => {
+                    if (!dragging) {
+                        onHoverChange(outline.key);
+                    }
+                }, onPointerLeave: () => {
+                    if (!dragging) {
+                        onHoverChange(null);
+                    }
+                }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: lineRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
+        ] }));
 };
 const getSvgPointFromPointerEvent = ({ event, rect, }) => {
     return {
@@ -825,8 +900,12 @@ const getSvgPointFromPointerEvent = ({ event, rect, }) => {
         y: event.clientY - rect.top,
     };
 };
-const SelectedUvHandleCircle = ({ handle, outline }) => {
-    const { setEffectDragOverrides, clearEffectDragOverrides, setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+const SelectedUvHandleConnectionLines = ({ handles, outline }) => {
+    const lines = (0, react_1.useMemo)(() => (0, exports.getUvHandleConnectionLines)({ handles, points: outline.points }), [handles, outline.points]);
+    return (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: lines.map((line) => (jsx_runtime_1.jsx("line", { x1: line.from.x, y1: line.from.y, x2: line.to.x, y2: line.to.y, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: "none" }, line.key))) }));
+};
+const SelectedUvHandleCircle = ({ handle, onDraggingChange, outline }) => {
+    const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const position = (0, react_1.useMemo)(() => (0, exports.getUvHandlePosition)(outline.points, handle.value), [handle.value, outline.points]);
     const onPointerDown = react_1.default.useCallback((event) => {
         if (event.button !== 0) {
@@ -840,6 +919,7 @@ const SelectedUvHandleCircle = ({ handle, outline }) => {
         }
         const svgRect = svg.getBoundingClientRect();
         let lastValue = null;
+        onDraggingChange(true);
         const defaultValue = handle.fieldDefault !== undefined
             ? JSON.stringify(handle.fieldDefault)
             : null;
@@ -861,16 +941,18 @@ const SelectedUvHandleCircle = ({ handle, outline }) => {
             window.removeEventListener('pointermove', onPointerMove);
             window.removeEventListener('pointerup', onPointerUp);
             window.removeEventListener('pointercancel', onPointerUp);
+            onDraggingChange(false);
             const stringifiedValue = lastValue === null ? null : JSON.stringify(lastValue);
             const shouldSave = lastValue !== null &&
-                !tuplesEqual(handle.codeValue.codeValue, lastValue) &&
+                !tuplesEqual(handle.propStatus.codeValue, lastValue) &&
                 !(defaultValue === stringifiedValue &&
-                    handle.codeValue.codeValue === undefined);
+                    handle.propStatus.codeValue === undefined);
             if (!shouldSave) {
                 clearEffectDragOverrides(handle.nodePath, handle.effectIndex);
                 return;
             }
             (0, save_effect_prop_1.saveEffectProp)({
+                type: 'value',
                 fileName: handle.nodePath.absolutePath,
                 nodePath: handle.nodePath,
                 effectIndex: handle.effectIndex,
@@ -878,7 +960,7 @@ const SelectedUvHandleCircle = ({ handle, outline }) => {
                 value: lastValue,
                 defaultValue,
                 schema: handle.schema,
-                setCodeValues,
+                setPropStatuses,
                 clientId: handle.clientId,
             }).finally(() => {
                 clearEffectDragOverrides(handle.nodePath, handle.effectIndex);
@@ -890,28 +972,131 @@ const SelectedUvHandleCircle = ({ handle, outline }) => {
     }, [
         clearEffectDragOverrides,
         handle,
+        onDraggingChange,
         outline.points,
-        setCodeValues,
+        setPropStatuses,
         setEffectDragOverrides,
     ]);
-    return (jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: 6, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: "move", onPointerDown: onPointerDown }));
+    return (jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: 6, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: "default", onPointerDown: onPointerDown }));
+};
+const SelectedOutlineElement = ({ allDragTargets, allScaleDragTargets, dragging, hovered, outline, onDraggingChange, onHoverChange, onSelect, scale, target, }) => {
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
+    const onContextMenuOpen = react_1.default.useCallback(async () => {
+        if (target === undefined || previewServerState.type !== 'connected') {
+            return false;
+        }
+        if (!target.selected) {
+            onSelect(target.selection, { shiftKey: false, toggleKey: false });
+        }
+        const stack = target.sequence.getStack();
+        let originalLocation = null;
+        if (stack) {
+            try {
+                originalLocation = await (0, get_stack_1.getOriginalLocationFromStack)(stack, 'sequence');
+            }
+            catch (err) {
+                (0, NotificationCenter_1.showNotification)(err.message, 2000);
+            }
+        }
+        if (stack) {
+            updateResolvedStackTrace(stack, originalLocation);
+        }
+        const fileLocation = (0, format_file_location_1.formatFileLocation)({
+            location: originalLocation,
+            root: window.remotion_cwd,
+        });
+        const editorName = window.remotion_editorName;
+        return [
+            editorName
+                ? {
+                    type: 'item',
+                    id: 'show-outline-in-editor',
+                    keyHint: null,
+                    label: `Show in ${editorName}`,
+                    leftItem: null,
+                    disabled: !originalLocation,
+                    onClick: () => {
+                        if (!originalLocation) {
+                            return;
+                        }
+                        (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation).catch((err) => {
+                            (0, NotificationCenter_1.showNotification)(err.message, 2000);
+                        });
+                    },
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    value: 'show-outline-in-editor',
+                }
+                : null,
+            {
+                type: 'item',
+                id: 'copy-outline-file-location',
+                keyHint: null,
+                label: 'Copy file location',
+                leftItem: null,
+                disabled: !fileLocation,
+                onClick: () => {
+                    if (!fileLocation) {
+                        return;
+                    }
+                    navigator.clipboard
+                        .writeText(fileLocation)
+                        .then(() => {
+                        (0, NotificationCenter_1.showNotification)('Copied file location to clipboard', 1000);
+                    })
+                        .catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                    });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'copy-outline-file-location',
+            },
+        ].filter(no_react_1.NoReactInternals.truthy);
+    }, [onSelect, previewServerState.type, target, updateResolvedStackTrace]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, scale: scale, target: target }), (target === null || target === void 0 ? void 0 : 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] }));
+};
+const SelectedOutlineUvHandleConnectionLayer = ({ outline, target }) => {
+    if (!(target === null || target === void 0 ? void 0 : target.containsSelection) || target.uvHandles.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(SelectedUvHandleConnectionLines, { handles: target.uvHandles, outline: outline }));
+};
+const SelectedOutlineUvHandleCircleLayer = ({ onDraggingChange, outline, target }) => {
+    if (!(target === null || target === void 0 ? void 0 : target.containsSelection) || target.uvHandles.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: target.uvHandles.map((handle) => (jsx_runtime_1.jsx(SelectedUvHandleCircle, { handle: handle, onDraggingChange: onDraggingChange, outline: outline }, `${handle.effectIndex}-${handle.fieldKey}`))) }));
 };
 const SelectedOutlineOverlay = ({ scale }) => {
     const { selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineSelection)();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { getScaleLockState } = (0, react_1.useContext)(scale_lock_1.ScaleLockContext);
+    const { editorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
     const [outlines, setOutlines] = (0, react_1.useState)([]);
     const [hoveredOutlineKey, setHoveredOutlineKey] = (0, react_1.useState)(null);
+    const [draggingOutline, setDraggingOutline] = (0, react_1.useState)(false);
     const overlayRef = (0, react_1.useRef)(null);
+    const onDraggingChange = react_1.default.useCallback((dragging) => {
+        setDraggingOutline(dragging);
+        if (dragging) {
+            setHoveredOutlineKey(null);
+        }
+    }, []);
     const outlineTargets = (0, react_1.useMemo)(() => {
-        if (!TimelineSelection_1.ENABLE_OUTLINES) {
+        if (!TimelineSelection_1.ENABLE_OUTLINES || !editorShowOutlines) {
             return [];
         }
-        const selectedSequenceKeys = getSelectedSequenceKeys(selectedItems);
+        const selectedSequenceKeys = (0, exports.getSelectedSequenceKeys)(selectedItems);
+        const sequenceKeysContainingSelection = getSequenceKeysContainingSelection(selectedItems);
         const selectedEffectsBySequenceKey = (0, exports.getSelectedEffectFieldsBySequenceKey)(selectedItems);
         const clientId = previewServerState.type === 'connected'
             ? previewServerState.clientId
@@ -925,15 +1110,16 @@ const SelectedOutlineOverlay = ({ scale }) => {
                 throw new Error('Expected sequence to have a ref for outline');
             }
             const selected = selectedSequenceKeys.has(key);
+            const containsSelection = sequenceKeysContainingSelection.has(key);
             const nodePath = nodePathInfo.sequenceSubscriptionKey;
             const { controls } = sequence;
             const fieldSchema = controls === null || controls === void 0 ? void 0 : controls.schema[translateFieldKey];
-            const codeValue = (_a = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _a === void 0 ? void 0 : _a[translateFieldKey];
+            const propStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[translateFieldKey];
             const scaleFieldSchema = controls === null || controls === void 0 ? void 0 : controls.schema[scaleFieldKey];
-            const scaleCodeValue = (_b = remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)) === null || _b === void 0 ? void 0 : _b[scaleFieldKey];
-            const canDragStatus = (codeValue === null || codeValue === void 0 ? void 0 : codeValue.status) === 'static' ||
-                ((codeValue === null || codeValue === void 0 ? void 0 : codeValue.status) === 'keyframed' &&
-                    codeValue.interpolationFunction === 'interpolate');
+            const scalePropStatus = (_b = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _b === void 0 ? void 0 : _b[scaleFieldKey];
+            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');
             const canDrag = previewServerState.type === 'connected' &&
                 controls !== null &&
                 (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) === 'translate' &&
@@ -941,16 +1127,18 @@ const SelectedOutlineOverlay = ({ scale }) => {
             const canScaleDrag = previewServerState.type === 'connected' &&
                 controls !== null &&
                 (scaleFieldSchema === null || scaleFieldSchema === void 0 ? void 0 : scaleFieldSchema.type) === 'scale' &&
-                (scaleCodeValue === null || scaleCodeValue === void 0 ? void 0 : scaleCodeValue.status) === 'static';
+                (scalePropStatus === null || scalePropStatus === void 0 ? void 0 : scalePropStatus.status) === 'static';
             return {
                 key,
+                containsSelection,
                 nodePathInfo,
                 ref: sequence.refForOutline,
                 selected,
                 selection: { type: 'sequence', nodePathInfo },
+                sequence,
                 drag: canDrag
                     ? {
-                        codeValue,
+                        propStatus,
                         clientId: previewServerState.clientId,
                         fieldDefault: fieldSchema.default,
                         keyframeDisplayOffset,
@@ -960,7 +1148,7 @@ const SelectedOutlineOverlay = ({ scale }) => {
                     : null,
                 scaleDrag: canScaleDrag
                     ? {
-                        codeValue: scaleCodeValue,
+                        propStatus: scalePropStatus,
                         clientId: previewServerState.clientId,
                         fieldDefault: scaleFieldSchema.default,
                         fieldSchema: scaleFieldSchema,
@@ -971,7 +1159,7 @@ const SelectedOutlineOverlay = ({ scale }) => {
                                 var _a;
                                 const dragOverrideValue = ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[scaleFieldKey];
                                 const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
-                                    codeValue: scaleCodeValue,
+                                    propStatus: scalePropStatus,
                                     dragOverrideValue,
                                     defaultValue: scaleFieldSchema.default,
                                     shouldResortToDefaultValueIfUndefined: true,
@@ -984,9 +1172,9 @@ const SelectedOutlineOverlay = ({ scale }) => {
                         schema: controls.schema,
                     }
                     : null,
-                uvHandles: selected
+                uvHandles: containsSelection
                     ? getSelectedUvHandles({
-                        codeValues,
+                        propStatuses,
                         clientId,
                         getEffectDragOverrides,
                         nodePath,
@@ -997,10 +1185,11 @@ const SelectedOutlineOverlay = ({ scale }) => {
             };
         });
     }, [
-        codeValues,
+        propStatuses,
         getDragOverrides,
         getEffectDragOverrides,
         getScaleLockState,
+        editorShowOutlines,
         overrideIdToNodePathMappings,
         previewServerState,
         selectedItems,
@@ -1046,16 +1235,6 @@ const SelectedOutlineOverlay = ({ scale }) => {
     if (outlineTargets.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: outlines.map((outline) => {
-            var _a, _b, _c;
-            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
-                    jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, hovered: hoveredOutlineKey === outline.key, outline: outline, onHoverChange: setHoveredOutlineKey, onSelect: selectItem, scale: scale, target: targetsByKey.get(outline.key) }), ((_a = targetsByKey.get(outline.key)) === null || _a === void 0 ? void 0 : _a.selected) ||
-                        hoveredOutlineKey === outline.key
-                        ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, edge: edge, outline: outline, onHoverChange: setHoveredOutlineKey, onSelect: selectItem, target: targetsByKey.get(outline.key) }, edge)))
-                        : null, ((_b = targetsByKey.get(outline.key)) === null || _b === void 0 ? void 0 : _b.selected)
-                        ? (_c = targetsByKey
-                            .get(outline.key)) === null || _c === void 0 ? void 0 : _c.uvHandles.map((handle) => (jsx_runtime_1.jsx(SelectedUvHandleCircle, { handle: handle, outline: outline }, `${handle.effectIndex}-${handle.fieldKey}`)))
-                        : null] }, outline.key));
-        }) }));
+    return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [outlines.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement, { allDragTargets: allDragTargets, allScaleDragTargets: allScaleDragTargets, dragging: draggingOutline, hovered: hoveredOutlineKey === outline.key, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: setHoveredOutlineKey, onSelect: selectItem, scale: scale, target: targetsByKey.get(outline.key) }, outline.key))), outlines.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvHandleConnectionLayer, { outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlines.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
 };
 exports.SelectedOutlineOverlay = SelectedOutlineOverlay;