@remotion/studio 4.0.473 → 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.getUvHandleConnectionLines = 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");
@@ -51,7 +52,6 @@ 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");
@@ -242,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;
@@ -300,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, }) => ({
@@ -321,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);
     }
@@ -355,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 [];
     }
@@ -365,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,
         });
@@ -396,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,
@@ -407,7 +408,7 @@ const getSelectedUvHandles = ({ codeValues, clientId, getEffectDragOverrides, no
             }
             handles.push({
                 clientId,
-                codeValue: propStatus,
+                propStatus,
                 effectIndex,
                 fieldDefault: fieldSchema.default,
                 fieldKey,
@@ -459,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,
@@ -492,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;
@@ -510,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;
         }
@@ -559,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,
@@ -613,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 [];
         }
@@ -643,9 +644,9 @@ const clearSelectedOutlineScaleDragOverrides = ({ clearDragOverrides, dragStates
     }
 };
 const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSelect, scale, target, }) => {
-    var _a, _b;
+    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;
@@ -653,7 +654,8 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
     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;
@@ -689,9 +691,9 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
                 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,
                     }));
@@ -720,7 +722,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
                 staticChanges.length > 0
                     ? (0, save_sequence_prop_1.saveSequenceProps)({
                         changes: staticChanges,
-                        setCodeValues,
+                        setPropStatuses,
                         clientId: drag.clientId,
                         undoLabel: changes.length > 1
                             ? 'Move selected sequences'
@@ -737,7 +739,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
                     sourceFrame: change.sourceFrame,
                     value: change.value,
                     schema: change.schema,
-                    setCodeValues,
+                    setPropStatuses,
                     clientId: change.clientId,
                 })),
             ])
@@ -760,7 +762,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
         onSelect,
         scale,
         selected,
-        setCodeValues,
+        setPropStatuses,
         setDragOverrides,
         target,
     ]);
@@ -779,7 +781,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
 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);
@@ -844,7 +846,7 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
             }
             (0, save_sequence_prop_1.saveSequenceProps)({
                 changes,
-                setCodeValues,
+                setPropStatuses,
                 clientId: scaleDrag.clientId,
                 undoLabel: changes.length > 1 ? 'Scale selected sequences' : 'Scale sequence',
                 redoLabel: changes.length > 1
@@ -873,7 +875,7 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
         onSelect,
         scaleDrag,
         selected,
-        setCodeValues,
+        setPropStatuses,
         setDragOverrides,
         target,
     ]);
@@ -903,7 +905,7 @@ const SelectedUvHandleConnectionLines = ({ handles, outline }) => {
     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, setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    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) {
@@ -942,9 +944,9 @@ const SelectedUvHandleCircle = ({ handle, onDraggingChange, outline }) => {
             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;
@@ -958,7 +960,7 @@ const SelectedUvHandleCircle = ({ handle, onDraggingChange, outline }) => {
                 value: lastValue,
                 defaultValue,
                 schema: handle.schema,
-                setCodeValues,
+                setPropStatuses,
                 clientId: handle.clientId,
             }).finally(() => {
                 clearEffectDragOverrides(handle.nodePath, handle.effectIndex);
@@ -972,10 +974,10 @@ const SelectedUvHandleCircle = ({ handle, onDraggingChange, outline }) => {
         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);
@@ -1054,20 +1056,26 @@ const SelectedOutlineElement = ({ allDragTargets, allScaleDragTargets, dragging,
         ].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.selected) || hovered
+            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, (target === null || target === void 0 ? void 0 : target.selected)
-                ? (() => {
-                    const { uvHandles } = target;
-                    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(SelectedUvHandleConnectionLines, { handles: uvHandles, outline: outline }), uvHandles.map((handle) => (jsx_runtime_1.jsx(SelectedUvHandleCircle, { handle: handle, onDraggingChange: onDraggingChange, outline: outline }, `${handle.effectIndex}-${handle.fieldKey}`)))] }));
-                })()
                 : 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);
@@ -1087,7 +1095,8 @@ const SelectedOutlineOverlay = ({ scale }) => {
         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
@@ -1101,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' &&
@@ -1117,9 +1127,10 @@ 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,
@@ -1127,7 +1138,7 @@ const SelectedOutlineOverlay = ({ scale }) => {
                 sequence,
                 drag: canDrag
                     ? {
-                        codeValue,
+                        propStatus,
                         clientId: previewServerState.clientId,
                         fieldDefault: fieldSchema.default,
                         keyframeDisplayOffset,
@@ -1137,7 +1148,7 @@ const SelectedOutlineOverlay = ({ scale }) => {
                     : null,
                 scaleDrag: canScaleDrag
                     ? {
-                        codeValue: scaleCodeValue,
+                        propStatus: scalePropStatus,
                         clientId: previewServerState.clientId,
                         fieldDefault: scaleFieldSchema.default,
                         fieldSchema: scaleFieldSchema,
@@ -1148,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,
@@ -1161,9 +1172,9 @@ const SelectedOutlineOverlay = ({ scale }) => {
                         schema: controls.schema,
                     }
                     : null,
-                uvHandles: selected
+                uvHandles: containsSelection
                     ? getSelectedUvHandles({
-                        codeValues,
+                        propStatuses,
                         clientId,
                         getEffectDragOverrides,
                         nodePath,
@@ -1174,7 +1185,7 @@ const SelectedOutlineOverlay = ({ scale }) => {
             };
         });
     }, [
-        codeValues,
+        propStatuses,
         getDragOverrides,
         getEffectDragOverrides,
         getScaleLockState,
@@ -1224,6 +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) => (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))) }));
+    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;

package/dist/components/Timeline/KeyframeSettingsModal.js

@@ -68,7 +68,7 @@ const getExtrapolateValues = (onSelect) => {
 const KeyframeSettingsModal = ({ state }) => {
     var _a;
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const [left, setLeft] = (0, react_1.useState)(state.status.clamping.left);
     const [right, setRight] = (0, react_1.useState)(state.status.clamping.right);
@@ -103,7 +103,7 @@ const KeyframeSettingsModal = ({ state }) => {
                 fieldKey: state.fieldKey,
                 settings,
                 schema: state.schema,
-                setCodeValues,
+                setPropStatuses,
                 clientId: previewServerState.clientId,
             })
             : (0, call_update_keyframe_settings_1.callUpdateEffectKeyframeSettings)({
@@ -113,7 +113,7 @@ const KeyframeSettingsModal = ({ state }) => {
                 fieldKey: state.fieldKey,
                 settings,
                 schema: state.schema,
-                setCodeValues,
+                setPropStatuses,
                 clientId: previewServerState.clientId,
             });
         promise.then(close).finally(() => {
@@ -126,7 +126,7 @@ const KeyframeSettingsModal = ({ state }) => {
         posterize,
         previewServerState,
         right,
-        setCodeValues,
+        setPropStatuses,
         state,
     ]);
     const saveDisabled = saving || previewServerState.type !== 'connected';

package/dist/components/Timeline/SequencePropsObserver.js

@@ -6,19 +6,19 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const SequencePropsObserver = () => {
     const { subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     (0, react_1.useEffect)(() => {
         const handleEvent = (event) => {
             if (event.type !== 'sequence-props-updated') {
                 return;
             }
-            setCodeValues(event.nodePath, () => event.result);
+            setPropStatuses(event.nodePath, () => event.result);
         };
         const unsubscribe = subscribeToEvent('sequence-props-updated', handleEvent);
         return () => {
             unsubscribe();
         };
-    }, [setCodeValues, subscribeToEvent]);
+    }, [setPropStatuses, subscribeToEvent]);
     return null;
 };
 exports.SequencePropsObserver = SequencePropsObserver;

package/dist/components/Timeline/TimelineClipboardKeybindings.d.ts

@@ -1,6 +1,6 @@
 import { type EffectClipboardSnapshot, type EffectPropClipboardData } from '@remotion/studio-shared';
 import type React from 'react';
-import { type CodeValues, type OverrideIdToNodePaths, type SequencePropsSubscriptionKey, type SequenceSchema, type TSequence } from 'remotion';
+import { type OverrideIdToNodePaths, type PropStatuses, type SequencePropsSubscriptionKey, type SequenceSchema, type TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type TimelineSelection } from './TimelineSelection';
 export type PasteEffectsTarget = {
@@ -25,18 +25,18 @@ export type PasteEffectPropTarget = {
     readonly type: 'none' | 'multiple' | 'unsupported' | 'effect-type-mismatch' | 'prop-mismatch' | 'uncopyable';
 };
 export declare const getPasteEffectsTarget: (selectedItems: readonly TimelineSelection[]) => PasteEffectsTarget;
-export declare const getSnapshotsFromSelection: ({ selection, codeValues, }: {
+export declare const getSnapshotsFromSelection: ({ selection, propStatuses, }: {
     selection: TimelineSelection;
-    codeValues: CodeValues;
+    propStatuses: PropStatuses;
 }) => EffectClipboardSnapshot[] | null;
-export declare const getEffectPropClipboardDataFromSelection: ({ selection, codeValues, }: {
+export declare const getEffectPropClipboardDataFromSelection: ({ selection, propStatuses, }: {
     selection: TimelineSelection;
-    codeValues: CodeValues;
+    propStatuses: PropStatuses;
 }) => EffectPropClipboardData | null;
-export declare const getPasteEffectPropTarget: ({ selectedItems, payload, codeValues, sequences, overrideIdsToNodePaths, }: {
+export declare const getPasteEffectPropTarget: ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }: {
     readonly selectedItems: readonly TimelineSelection[];
     readonly payload: EffectPropClipboardData;
-    readonly codeValues: CodeValues;
+    readonly propStatuses: PropStatuses;
     readonly sequences: TSequence[];
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
 }) => PasteEffectPropTarget;

package/dist/components/Timeline/TimelineClipboardKeybindings.js

@@ -113,13 +113,13 @@ const effectStatusToSnapshot = (effect) => {
         params,
     };
 };
-const getSnapshotsFromSelection = ({ selection, codeValues, }) => {
+const getSnapshotsFromSelection = ({ selection, propStatuses, }) => {
     if (selection.type !== 'sequence-effect' &&
         selection.type !== 'sequence-all-effects') {
         return null;
     }
     const { sequenceSubscriptionKey } = selection.nodePathInfo;
-    const sequenceStatus = codeValues[remotion_1.Internals.makeSequencePropsSubscriptionKey(sequenceSubscriptionKey)];
+    const sequenceStatus = propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(sequenceSubscriptionKey)];
     if (!sequenceStatus || !sequenceStatus.canUpdate) {
         return null;
     }
@@ -143,11 +143,11 @@ const getSnapshotsFromSelection = ({ selection, codeValues, }) => {
     return snapshots;
 };
 exports.getSnapshotsFromSelection = getSnapshotsFromSelection;
-const getEffectPropClipboardDataFromSelection = ({ selection, codeValues, }) => {
+const getEffectPropClipboardDataFromSelection = ({ selection, propStatuses, }) => {
     if (selection.type !== 'sequence-effect-prop') {
         return null;
     }
-    const sequenceStatus = codeValues[remotion_1.Internals.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
+    const sequenceStatus = propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
     if (!sequenceStatus || !sequenceStatus.canUpdate) {
         return null;
     }
@@ -176,7 +176,7 @@ const getEffectPropClipboardDataFromSelection = ({ selection, codeValues, }) =>
     };
 };
 exports.getEffectPropClipboardDataFromSelection = getEffectPropClipboardDataFromSelection;
-const getPasteEffectPropTarget = ({ selectedItems, payload, codeValues, sequences, overrideIdsToNodePaths, }) => {
+const getPasteEffectPropTarget = ({ selectedItems, payload, propStatuses, sequences, overrideIdsToNodePaths, }) => {
     var _a;
     if (selectedItems.length === 0) {
         return { type: 'none' };
@@ -223,7 +223,7 @@ const getPasteEffectPropTarget = ({ selectedItems, payload, codeValues, sequence
     if (!effect || !isVisibleFieldSchema(fieldSchema)) {
         return { type: 'prop-mismatch' };
     }
-    const sequenceStatus = codeValues[remotion_1.Internals.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
+    const sequenceStatus = propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(selection.nodePathInfo.sequenceSubscriptionKey)];
     if (!(sequenceStatus === null || sequenceStatus === void 0 ? void 0 : sequenceStatus.canUpdate)) {
         return { type: 'uncopyable' };
     }
@@ -254,9 +254,9 @@ const TimelineClipboardKeybindings = () => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { canSelect } = (0, TimelineSelection_1.useTimelineSelection)();
     const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
-    const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
-    const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
     (0, react_1.useEffect)(() => {
         if (!canSelect || previewServerState.type !== 'connected') {
@@ -269,6 +269,7 @@ const TimelineClipboardKeybindings = () => {
             callback: (e) => {
                 var _a;
                 const { selectedItems } = currentSelection.current;
+                const propStatuses = propStatusesRef.current;
                 if (selectedItems.length === 0) {
                     return;
                 }
@@ -281,7 +282,7 @@ const TimelineClipboardKeybindings = () => {
                     }
                     const payload = (0, exports.getEffectPropClipboardDataFromSelection)({
                         selection: selectedItems[0],
-                        codeValues,
+                        propStatuses,
                     });
                     if (payload === null) {
                         (0, NotificationCenter_1.showNotification)('Cannot copy effect prop because its value cannot be copied', 3000);
@@ -310,7 +311,7 @@ const TimelineClipboardKeybindings = () => {
                 const snapshots = selectedItems.flatMap((selection) => {
                     const itemSnapshots = (0, exports.getSnapshotsFromSelection)({
                         selection,
-                        codeValues,
+                        propStatuses,
                     });
                     return itemSnapshots !== null && itemSnapshots !== void 0 ? itemSnapshots : [null];
                 });
@@ -352,6 +353,8 @@ const TimelineClipboardKeybindings = () => {
                 navigator.clipboard
                     .readText()
                     .then((text) => {
+                    const propStatuses = propStatusesRef.current;
+                    const sequences = sequencesRef.current;
                     const effectPropResult = (0, studio_shared_1.parseEffectPropClipboardDataResult)(text);
                     if (effectPropResult.status !== 'invalid') {
                         e.preventDefault();
@@ -362,7 +365,7 @@ const TimelineClipboardKeybindings = () => {
                         const effectPropTarget = (0, exports.getPasteEffectPropTarget)({
                             selectedItems,
                             payload: effectPropResult.data,
-                            codeValues,
+                            propStatuses,
                             sequences,
                             overrideIdsToNodePaths: overrideIdToNodePathMappings,
                         });
@@ -406,7 +409,7 @@ const TimelineClipboardKeybindings = () => {
                                 }),
                             defaultValue: effectPropTarget.defaultValue,
                             schema: effectPropTarget.schema,
-                            setCodeValues,
+                            setPropStatuses,
                             clientId,
                         }).then(() => {
                             (0, NotificationCenter_1.showNotification)('Pasted effect prop', 2000);
@@ -466,13 +469,13 @@ const TimelineClipboardKeybindings = () => {
         };
     }, [
         canSelect,
-        codeValues,
         currentSelection,
         keybindings,
         overrideIdToNodePathMappings,
+        propStatusesRef,
         previewServerState,
-        sequences,
-        setCodeValues,
+        sequencesRef,
+        setPropStatuses,
     ]);
     return null;
 };