@remotion/studio 4.0.472 → 4.0.473

package/dist/components/SelectedOutlineOverlay.js

@@ -33,7 +33,7 @@ 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.getUvCoordinateForPoint = exports.getUvHandleConnectionLines = exports.getUvHandlePosition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
@@ -41,8 +41,12 @@ 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");
@@ -51,6 +55,7 @@ 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 };
 };
@@ -603,13 +642,14 @@ const clearSelectedOutlineScaleDragOverrides = ({ clearDragOverrides, dragStates
         clearDragOverrides(dragState.target.nodePath);
     }
 };
-const SelectedOutlinePolygon = ({ allDragTargets, hovered, outline, onHoverChange, onSelect, scale, target, }) => {
+const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSelect, scale, 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 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;
@@ -628,6 +668,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({
@@ -664,6 +705,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,
@@ -680,8 +722,12 @@ const SelectedOutlinePolygon = ({ allDragTargets, hovered, outline, onHoverChang
                         changes: staticChanges,
                         setCodeValues,
                         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)({
@@ -710,6 +756,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, hovered, outline, onHoverChang
         clearDragOverrides,
         drag,
         getDragOverrides,
+        onDraggingChange,
         onSelect,
         scale,
         selected,
@@ -717,14 +764,25 @@ const SelectedOutlinePolygon = ({ allDragTargets, hovered, outline, onHoverChang
         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 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 +798,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 +830,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,
@@ -786,8 +846,10 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, edge, outline, onHo
                 changes,
                 setCodeValues,
                 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,6 +869,7 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, edge, outline, onHo
         clearDragOverrides,
         edgeInfo,
         getDragOverrides,
+        onDraggingChange,
         onSelect,
         scaleDrag,
         selected,
@@ -817,7 +880,17 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, edge, outline, onHo
     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,7 +898,11 @@ const getSvgPointFromPointerEvent = ({ event, rect, }) => {
         y: event.clientY - rect.top,
     };
 };
-const SelectedUvHandleCircle = ({ handle, outline }) => {
+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, setCodeValues } = (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) => {
@@ -840,6 +917,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,6 +939,7 @@ 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) &&
@@ -871,6 +950,7 @@ const SelectedUvHandleCircle = ({ handle, outline }) => {
                 return;
             }
             (0, save_effect_prop_1.saveEffectProp)({
+                type: 'value',
                 fileName: handle.nodePath.absolutePath,
                 nodePath: handle.nodePath,
                 effectIndex: handle.effectIndex,
@@ -890,12 +970,100 @@ const SelectedUvHandleCircle = ({ handle, outline }) => {
     }, [
         clearEffectDragOverrides,
         handle,
+        onDraggingChange,
         outline.points,
         setCodeValues,
         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 }));
 };
+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.selected) || 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 SelectedOutlineOverlay = ({ scale }) => {
     const { selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineSelection)();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
@@ -904,11 +1072,19 @@ const SelectedOutlineOverlay = ({ scale }) => {
     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);
@@ -948,6 +1124,7 @@ const SelectedOutlineOverlay = ({ scale }) => {
                 ref: sequence.refForOutline,
                 selected,
                 selection: { type: 'sequence', nodePathInfo },
+                sequence,
                 drag: canDrag
                     ? {
                         codeValue,
@@ -1001,6 +1178,7 @@ const SelectedOutlineOverlay = ({ scale }) => {
         getDragOverrides,
         getEffectDragOverrides,
         getScaleLockState,
+        editorShowOutlines,
         overrideIdToNodePathMappings,
         previewServerState,
         selectedItems,
@@ -1046,16 +1224,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.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))) }));
 };
 exports.SelectedOutlineOverlay = SelectedOutlineOverlay;

package/dist/components/ShowOutlinesProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ShowOutlinesProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/components/ShowOutlinesProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowOutlinesProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_outlines_1 = require("../state/editor-outlines");
+const ShowOutlinesProvider = ({ children }) => {
+    const [editorShowOutlines, setEditorShowOutlinesState] = (0, react_1.useState)(() => (0, editor_outlines_1.loadEditorShowOutlinesOption)());
+    const setEditorShowOutlines = (0, react_1.useCallback)((newValue) => {
+        setEditorShowOutlinesState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, editor_outlines_1.persistEditorShowOutlinesOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const editorShowOutlinesCtx = (0, react_1.useMemo)(() => {
+        return {
+            editorShowOutlines,
+            setEditorShowOutlines,
+        };
+    }, [editorShowOutlines, setEditorShowOutlines]);
+    return (jsx_runtime_1.jsx(editor_outlines_1.EditorShowOutlinesContext.Provider, { value: editorShowOutlinesCtx, children: children }));
+};
+exports.ShowOutlinesProvider = ShowOutlinesProvider;

package/dist/components/SizeSelector.js

@@ -4,10 +4,10 @@ exports.SizeSelector = exports.getUniqueSizes = exports.getPreviewSizeLabel = vo
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const Checkmark_1 = require("../icons/Checkmark");
 const ControlButton_1 = require("./ControlButton");
 const ComboBox_1 = require("./NewComposition/ComboBox");
-const Preview_1 = require("./Preview");
 const commonPreviewSizes = [
     {
         size: 'auto',
@@ -83,11 +83,11 @@ const SizeSelector = () => {
             return true;
         }
         if (canvasContent.type === 'asset' &&
-            zoomableFileTypes.includes((0, Preview_1.getPreviewFileType)(canvasContent.asset))) {
+            zoomableFileTypes.includes((0, get_preview_file_type_1.getPreviewFileType)(canvasContent.asset))) {
             return true;
         }
         if (canvasContent.type === 'output' &&
-            zoomableFileTypes.includes((0, Preview_1.getPreviewFileType)(canvasContent.path))) {
+            zoomableFileTypes.includes((0, get_preview_file_type_1.getPreviewFileType)(canvasContent.path))) {
             return true;
         }
         return false;

package/dist/components/Splitter/SplitterHandle.js

@@ -34,6 +34,8 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             if (e.button !== 0) {
                 return;
             }
+            // Prevent deselection of currently selected items
+            e.stopPropagation();
             // Capture the context and starting flex once, at drag start. The flex
             // value updates on every pointermove, so it must not be re-read live.
             const dragContext = latest.current.context;

package/dist/components/StaticFilePreview.js

@@ -6,8 +6,8 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
+const get_preview_file_type_1 = require("../helpers/get-preview-file-type");
 const FilePreview_1 = require("./FilePreview");
-const Preview_1 = require("./Preview");
 const use_static_files_1 = require("./use-static-files");
 const msgStyle = {
     fontSize: 13,
@@ -21,7 +21,7 @@ const errMsgStyle = {
     color: colors_1.LIGHT_TEXT,
 };
 const StaticFilePreview = ({ currentAsset, assetMetadata }) => {
-    const fileType = (0, Preview_1.getPreviewFileType)(currentAsset);
+    const fileType = (0, get_preview_file_type_1.getPreviewFileType)(currentAsset);
     const staticFileSrc = (0, remotion_1.staticFile)(currentAsset);
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusKeyframed, SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
+export type KeyframeSettingsModalState = {
+    type: 'keyframe-settings';
+    fileName: string;
+    nodePath: SequencePropsSubscriptionKey;
+    fieldKey: string;
+    fieldLabel: string;
+    status: CanUpdateSequencePropStatusKeyframed;
+    schema: SequenceSchema;
+    effectIndex: number | null;
+};
+export declare const KeyframeSettingsModal: React.FC<{
+    readonly state: KeyframeSettingsModalState;
+}>;

package/dist/components/Timeline/KeyframeSettingsModal.js

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyframeSettingsModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
+const modals_1 = require("../../state/modals");
+const Button_1 = require("../Button");
+const layout_1 = require("../layout");
+const ModalButton_1 = require("../ModalButton");
+const ModalFooter_1 = require("../ModalFooter");
+const ModalHeader_1 = require("../ModalHeader");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const DismissableModal_1 = require("../NewComposition/DismissableModal");
+const InputDragger_1 = require("../NewComposition/InputDragger");
+const call_update_keyframe_settings_1 = require("./call-update-keyframe-settings");
+const container = {
+    padding: 16,
+    width: 520,
+};
+const row = {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginBottom: 12,
+};
+const label = {
+    fontSize: 13,
+};
+const helperText = {
+    color: 'rgba(255, 255, 255, 0.6)',
+    fontSize: 12,
+    lineHeight: 1.4,
+    marginTop: 4,
+};
+const comboStyle = {
+    minWidth: 150,
+};
+const posterizeInputStyle = {
+    backgroundColor: colors_1.INPUT_BACKGROUND,
+    borderRadius: 4,
+    minWidth: 64,
+    textAlign: 'right',
+};
+const extrapolateOptions = [
+    'extend',
+    'clamp',
+    'identity',
+    'wrap',
+];
+const labelForExtrapolate = (value) => value[0].toUpperCase() + value.slice(1);
+const getExtrapolateValues = (onSelect) => {
+    return extrapolateOptions.map((value) => ({
+        type: 'item',
+        id: value,
+        keyHint: null,
+        label: labelForExtrapolate(value),
+        leftItem: null,
+        disabled: false,
+        onClick: () => onSelect(value),
+        quickSwitcherLabel: null,
+        subMenu: null,
+        value,
+    }));
+};
+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 { 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);
+    const [posterize, setPosterize] = (0, react_1.useState)((_a = state.status.posterize) !== null && _a !== void 0 ? _a : 0);
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    const canEditClamping = state.status.interpolationFunction === 'interpolate';
+    const close = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const leftOptions = (0, react_1.useMemo)(() => getExtrapolateValues(setLeft), []);
+    const rightOptions = (0, react_1.useMemo)(() => getExtrapolateValues(setRight), []);
+    const onPosterizeChange = (0, react_1.useCallback)((value) => {
+        setPosterize(Math.max(0, Math.round(value)));
+    }, []);
+    const posterizeFormatter = (0, react_1.useCallback)((value) => {
+        const numericValue = Number(value);
+        return String(Math.round(numericValue));
+    }, []);
+    const onSave = (0, react_1.useCallback)(() => {
+        if (previewServerState.type !== 'connected') {
+            return;
+        }
+        const settings = {
+            clamping: canEditClamping ? { left, right } : undefined,
+            posterize: posterize <= 0 ? undefined : posterize,
+        };
+        setSaving(true);
+        const promise = state.effectIndex === null
+            ? (0, call_update_keyframe_settings_1.callUpdateSequenceKeyframeSettings)({
+                fileName: state.fileName,
+                nodePath: state.nodePath,
+                fieldKey: state.fieldKey,
+                settings,
+                schema: state.schema,
+                setCodeValues,
+                clientId: previewServerState.clientId,
+            })
+            : (0, call_update_keyframe_settings_1.callUpdateEffectKeyframeSettings)({
+                fileName: state.fileName,
+                nodePath: state.nodePath,
+                effectIndex: state.effectIndex,
+                fieldKey: state.fieldKey,
+                settings,
+                schema: state.schema,
+                setCodeValues,
+                clientId: previewServerState.clientId,
+            });
+        promise.then(close).finally(() => {
+            setSaving(false);
+        });
+    }, [
+        canEditClamping,
+        close,
+        left,
+        posterize,
+        previewServerState,
+        right,
+        setCodeValues,
+        state,
+    ]);
+    const saveDisabled = saving || previewServerState.type !== 'connected';
+    return (jsx_runtime_1.jsxs(DismissableModal_1.DismissableModal, { children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Keyframe settings: ${state.fieldLabel}` }), jsx_runtime_1.jsxs("div", { style: container, children: [canEditClamping ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                            jsx_runtime_1.jsxs("div", { style: row, children: [
+                                    jsx_runtime_1.jsx("div", { style: label, children: "Extrapolate left" }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: leftOptions, selectedId: left, title: "Extrapolate left", style: comboStyle })
+                                ] }), jsx_runtime_1.jsxs("div", { style: row, children: [
+                                    jsx_runtime_1.jsx("div", { style: label, children: "Extrapolate right" }), jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: rightOptions, selectedId: right, title: "Extrapolate right", style: comboStyle })
+                                ] })
+                        ] })) : null, jsx_runtime_1.jsxs("div", { style: row, children: [
+                            jsx_runtime_1.jsxs("div", { children: [
+                                    jsx_runtime_1.jsx("div", { style: label, children: "Posterize" }), jsx_runtime_1.jsx("div", { style: helperText, children: "Use 0 to turn posterization off." })
+                                ] }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: posterize, status: "ok", onValueChange: onPosterizeChange, onValueChangeEnd: onPosterizeChange, onTextChange: () => undefined, min: 0, step: 1, formatter: posterizeFormatter, rightAlign: true, style: posterizeInputStyle })
+                        ] })
+                ] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsxs(layout_1.Row, { justify: "flex-end", align: "center", children: [
+                        jsx_runtime_1.jsx(Button_1.Button, { onClick: close, children: "Cancel" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx(ModalButton_1.ModalButton, { onClick: onSave, disabled: saveDisabled, children: "Save" })
+                    ] }) })
+        ] }));
+};
+exports.KeyframeSettingsModal = KeyframeSettingsModal;