@remotion/studio 4.0.471 → 4.0.473

package/dist/components/SelectedOutlineOverlay.js

@@ -33,27 +33,38 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineDragValues = exports.getSelectedEffectFieldsBySequenceKey = 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");
+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 = {
     position: 'absolute',
     inset: 0,
     pointerEvents: 'none',
     overflow: 'visible',
 };
+const emptyContextMenuValues = [];
 const pointToString = (point) => `${point.x},${point.y}`;
 const parseUvCoordinate = (value) => {
     if (Array.isArray(value) &&
@@ -78,6 +89,15 @@ const mixPoint = (from, to, progress) => {
         y: mix(from.y, to.y, progress),
     };
 };
+const midpoint = (from, to) => {
+    return mixPoint(from, to, 0.5);
+};
+const dot = (left, right) => {
+    return left.x * right.x + left.y * right.y;
+};
+const vectorLength = (vector) => {
+    return Math.hypot(vector.x, vector.y);
+};
 const getBilinearUvHandlePosition = (points, uv) => {
     const [tl, tr, br, bl] = points;
     const top = mixPoint(tl, tr, uv[0]);
@@ -128,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 };
 };
@@ -249,6 +302,11 @@ const getElementOutlinePoints = (element, containerRect) => {
 const getSelectedSequenceKeys = (selectedItems) => {
     return new Set(selectedItems.map((item) => (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(item.nodePathInfo)));
 };
+const getOutlineSelectionInteraction = ({ shiftKey, metaKey, ctrlKey, }) => ({
+    shiftKey,
+    toggleKey: metaKey || ctrlKey,
+});
+exports.getOutlineSelectionInteraction = getOutlineSelectionInteraction;
 const getSelectedEffectFieldsBySequenceKey = (selectedItems) => {
     var _a, _b;
     const selectedEffects = new Map();
@@ -270,11 +328,7 @@ const getSelectedEffectFieldsBySequenceKey = (selectedItems) => {
     return selectedEffects;
 };
 exports.getSelectedEffectFieldsBySequenceKey = getSelectedEffectFieldsBySequenceKey;
-const getSequencesWithSelectedOutlines = ({ selectedItems, sequences, overrideIdsToNodePaths, }) => {
-    const selectedSequenceKeys = getSelectedSequenceKeys(selectedItems);
-    if (selectedSequenceKeys.size === 0) {
-        return [];
-    }
+const getSequencesWithSelectableOutlines = ({ sequences, overrideIdsToNodePaths, }) => {
     return (0, calculate_timeline_1.calculateTimeline)({
         sequences: [...sequences],
         overrideIdsToNodePaths,
@@ -283,20 +337,24 @@ const getSequencesWithSelectedOutlines = ({ selectedItems, sequences, overrideId
         if (track.nodePathInfo === null) {
             return false;
         }
-        return selectedSequenceKeys.has((0, TimelineSelection_1.getTimelineSequenceSelectionKey)(track.nodePathInfo));
+        return track.nodePathInfo.auxiliaryKeys.length === 0;
     })
         .filter((track) => track.sequence.refForOutline !== null)
+        .sort((a, b) => a.depth - b.depth)
         .map((track) => {
         if (track.nodePathInfo === null) {
             throw new Error('Expected selected outline to have a node path');
         }
         return {
+            depth: track.depth,
+            keyframeDisplayOffset: track.keyframeDisplayOffset,
             key: (0, TimelineSelection_1.getTimelineSequenceSelectionKey)(track.nodePathInfo),
             nodePathInfo: track.nodePathInfo,
             sequence: track.sequence,
         };
     });
 };
+exports.getSequencesWithSelectableOutlines = getSequencesWithSelectableOutlines;
 const getSelectedUvHandles = ({ codeValues, clientId, getEffectDragOverrides, nodePath, selectedEffects, sequence, }) => {
     if (clientId === null || selectedEffects === undefined) {
         return [];
@@ -317,12 +375,12 @@ const getSelectedUvHandles = ({ codeValues, clientId, getEffectDragOverrides, no
         }
         const dragOverrides = getEffectDragOverrides(nodePath, effectIndex);
         const activeSchema = remotion_1.Internals.flattenActiveSchema(effect.schema, (key) => {
-            const dragOverride = dragOverrides[key];
+            const dragOverride = remotion_1.Internals.getStaticDragOverrideValue(dragOverrides[key]);
             if (dragOverride !== undefined) {
                 return dragOverride;
             }
             const propStatus = effectStatus.props[key];
-            if (!(propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate)) {
+            if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'static') {
                 return undefined;
             }
             return propStatus.codeValue;
@@ -333,7 +391,7 @@ const getSelectedUvHandles = ({ codeValues, clientId, getEffectDragOverrides, no
                 continue;
             }
             const propStatus = effectStatus.props[fieldKey];
-            if (!(propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate)) {
+            if ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) !== 'static') {
                 continue;
             }
             const dragOverrideValue = dragOverrides[fieldKey];
@@ -395,14 +453,16 @@ const outlinesAreEqual = (a, b) => {
     }
     return true;
 };
-const getSelectedOutlineDragStates = ({ dragTargets, getDragOverrides, }) => {
+const getSelectedOutlineDragStates = ({ dragTargets, getDragOverrides, timelinePosition, }) => {
     return dragTargets.map((target) => {
         var _a;
         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,
             dragOverrideValue,
             defaultValue: target.fieldDefault,
+            frame: sourceFrame,
             shouldResortToDefaultValueIfUndefined: true,
         });
         const [startX, startY] = (0, timeline_translate_utils_1.parseTranslate)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0px 0px'));
@@ -411,6 +471,7 @@ const getSelectedOutlineDragStates = ({ dragTargets, getDragOverrides, }) => {
                 ? JSON.stringify(target.fieldDefault)
                 : null,
             key: remotion_1.Internals.makeSequencePropsSubscriptionKey(target.nodePath),
+            sourceFrame,
             startX,
             startY,
             target,
@@ -425,13 +486,134 @@ const getSelectedOutlineDragValues = ({ dragStates, deltaX, deltaY, }) => {
 };
 exports.getSelectedOutlineDragValues = getSelectedOutlineDragValues;
 const getSelectedOutlineDragChanges = ({ dragStates, lastValues, }) => {
+    const changes = [];
+    for (const dragState of dragStates) {
+        const value = lastValues.get(dragState.key);
+        if (value === undefined) {
+            continue;
+        }
+        if (dragState.target.codeValue.status === 'keyframed') {
+            const startValue = (0, timeline_translate_utils_1.serializeTranslate)(dragState.startX, dragState.startY);
+            if (value === startValue) {
+                continue;
+            }
+            changes.push({
+                type: 'keyframed',
+                fileName: dragState.target.nodePath.absolutePath,
+                nodePath: dragState.target.nodePath,
+                fieldKey: translateFieldKey,
+                sourceFrame: dragState.sourceFrame,
+                value,
+                schema: dragState.target.schema,
+                clientId: dragState.target.clientId,
+            });
+            continue;
+        }
+        const stringifiedValue = JSON.stringify(value);
+        const shouldSave = value !== dragState.target.codeValue.codeValue &&
+            !(dragState.defaultValue === stringifiedValue &&
+                dragState.target.codeValue.codeValue === undefined);
+        if (!shouldSave) {
+            continue;
+        }
+        changes.push({
+            type: 'static',
+            fileName: dragState.target.nodePath.absolutePath,
+            nodePath: dragState.target.nodePath,
+            fieldKey: translateFieldKey,
+            value,
+            defaultValue: dragState.defaultValue,
+            schema: dragState.target.schema,
+        });
+    }
+    return changes;
+};
+exports.getSelectedOutlineDragChanges = getSelectedOutlineDragChanges;
+const getSelectedOutlineScaleEdgeInfo = (points, edge) => {
+    const [tl, tr, br, bl] = points;
+    const edgePoints = {
+        top: { start: tl, end: tr, oppositeStart: bl, oppositeEnd: br },
+        right: { start: tr, end: br, oppositeStart: tl, oppositeEnd: bl },
+        bottom: { start: bl, end: br, oppositeStart: tl, oppositeEnd: tr },
+        left: { start: tl, end: bl, oppositeStart: tr, oppositeEnd: br },
+    }[edge];
+    const edgeMidpoint = midpoint(edgePoints.start, edgePoints.end);
+    const oppositeMidpoint = midpoint(edgePoints.oppositeStart, edgePoints.oppositeEnd);
+    const outward = vectorBetween(oppositeMidpoint, edgeMidpoint);
+    const length = vectorLength(outward);
+    if (length < 0.001) {
+        return null;
+    }
+    return {
+        axis: edge === 'left' || edge === 'right' ? 'x' : 'y',
+        cursor: edge === 'left' || edge === 'right' ? 'ew-resize' : 'ns-resize',
+        end: edgePoints.end,
+        extent: length,
+        normal: { x: outward.x / length, y: outward.y / length },
+        start: edgePoints.start,
+    };
+};
+exports.getSelectedOutlineScaleEdgeInfo = getSelectedOutlineScaleEdgeInfo;
+const getSelectedOutlineScaleDragStates = ({ dragTargets, getDragOverrides, }) => {
+    return dragTargets.map((target) => {
+        var _a;
+        const dragOverrideValue = ((_a = getDragOverrides(target.nodePath)) !== null && _a !== void 0 ? _a : {})[scaleFieldKey];
+        const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
+            codeValue: target.codeValue,
+            dragOverrideValue,
+            defaultValue: target.fieldDefault,
+            shouldResortToDefaultValueIfUndefined: true,
+        });
+        const [startX, startY, startZ] = no_react_1.NoReactInternals.parseScaleValue(effectiveValue);
+        return {
+            defaultValue: target.fieldDefault !== undefined
+                ? JSON.stringify(target.fieldDefault)
+                : null,
+            key: remotion_1.Internals.makeSequencePropsSubscriptionKey(target.nodePath),
+            startX,
+            startY,
+            startZ,
+            target,
+        };
+    });
+};
+exports.getSelectedOutlineScaleDragStates = getSelectedOutlineScaleDragStates;
+const getSelectedOutlineScaleDragValues = ({ axis, dragStates, scaleFactor, }) => {
+    return new Map(dragStates.map((dragState) => {
+        var _a, _b;
+        const min = (_a = dragState.target.fieldSchema.min) !== null && _a !== void 0 ? _a : -Infinity;
+        const max = (_b = dragState.target.fieldSchema.max) !== null && _b !== void 0 ? _b : Infinity;
+        const baseX = dragState.startX;
+        const baseY = dragState.startY;
+        const newValue = (axis === 'x' ? baseX : baseY) * scaleFactor;
+        const [x, y] = dragState.target.linked
+            ? (0, TimelineScaleField_1.getLinkedScale)({
+                axis,
+                newValue,
+                baseX,
+                baseY,
+                min,
+                max,
+            })
+            : axis === 'x'
+                ? [clamp(newValue, min, max), baseY]
+                : [baseX, clamp(newValue, min, max)];
+        return [
+            dragState.key,
+            no_react_1.NoReactInternals.serializeScaleValue([x, y, dragState.startZ]),
+        ];
+    }));
+};
+exports.getSelectedOutlineScaleDragValues = getSelectedOutlineScaleDragValues;
+const getSelectedOutlineScaleDragChanges = ({ dragStates, lastValues, }) => {
     return dragStates.flatMap((dragState) => {
         const value = lastValues.get(dragState.key);
         if (value === undefined) {
             return [];
         }
         const stringifiedValue = JSON.stringify(value);
-        const shouldSave = value !== dragState.target.codeValue.codeValue &&
+        const shouldSave = stringifiedValue !==
+            JSON.stringify(dragState.target.codeValue.codeValue) &&
             !(dragState.defaultValue === stringifiedValue &&
                 dragState.target.codeValue.codeValue === undefined);
         if (!shouldSave) {
@@ -441,7 +623,7 @@ const getSelectedOutlineDragChanges = ({ dragStates, lastValues, }) => {
             {
                 fileName: dragState.target.nodePath.absolutePath,
                 nodePath: dragState.target.nodePath,
-                fieldKey: translateFieldKey,
+                fieldKey: scaleFieldKey,
                 value,
                 defaultValue: dragState.defaultValue,
                 schema: dragState.target.schema,
@@ -449,29 +631,50 @@ const getSelectedOutlineDragChanges = ({ dragStates, lastValues, }) => {
         ];
     });
 };
-exports.getSelectedOutlineDragChanges = getSelectedOutlineDragChanges;
+exports.getSelectedOutlineScaleDragChanges = getSelectedOutlineScaleDragChanges;
 const clearSelectedOutlineDragOverrides = ({ clearDragOverrides, dragStates, }) => {
     for (const dragState of dragStates) {
         clearDragOverrides(dragState.target.nodePath);
     }
 };
-const SelectedOutlinePolygon = ({ allDragTargets, outline, scale, target }) => {
-    var _a;
+const clearSelectedOutlineScaleDragOverrides = ({ clearDragOverrides, dragStates, }) => {
+    for (const dragState of dragStates) {
+        clearDragOverrides(dragState.target.nodePath);
+    }
+};
+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;
+    const visible = selected || hovered;
     const onPointerDown = react_1.default.useCallback((event) => {
-        if (event.button !== 0 || drag === null) {
+        if (event.button !== 0 || target === undefined) {
             return;
         }
         event.preventDefault();
         event.stopPropagation();
+        const interaction = (0, exports.getOutlineSelectionInteraction)(event);
+        const shouldUpdateSelection = !selected || interaction.shiftKey || interaction.toggleKey;
+        if (shouldUpdateSelection) {
+            onSelect(target.selection, interaction);
+        }
+        if (drag === null || interaction.shiftKey || interaction.toggleKey) {
+            return;
+        }
+        onDraggingChange(true);
         const startPointerX = event.clientX;
         const startPointerY = event.clientY;
         const dragStates = getSelectedOutlineDragStates({
-            dragTargets: allDragTargets,
+            dragTargets: selected ? allDragTargets : [drag],
             getDragOverrides,
+            timelinePosition: timelinePositionRef.current,
         });
         let lastValues = new Map();
         const onPointerMove = (moveEvent) => {
@@ -486,13 +689,23 @@ const SelectedOutlinePolygon = ({ allDragTargets, outline, scale, target }) => {
                 if (value === undefined) {
                     throw new Error('Expected drag value to be available');
                 }
-                setDragOverrides(dragState.target.nodePath, translateFieldKey, value);
+                if (dragState.target.codeValue.status === 'keyframed') {
+                    setDragOverrides(dragState.target.nodePath, translateFieldKey, remotion_1.Internals.makeKeyframedDragOverride({
+                        status: dragState.target.codeValue,
+                        frame: dragState.sourceFrame,
+                        value,
+                    }));
+                }
+                else {
+                    setDragOverrides(dragState.target.nodePath, translateFieldKey, remotion_1.Internals.makeStaticDragOverride(value));
+                }
             }
         };
         const onPointerUp = () => {
             window.removeEventListener('pointermove', onPointerMove);
             window.removeEventListener('pointerup', onPointerUp);
             window.removeEventListener('pointercancel', onPointerUp);
+            onDraggingChange(false);
             const changes = (0, exports.getSelectedOutlineDragChanges)({
                 dragStates,
                 lastValues,
@@ -501,13 +714,33 @@ const SelectedOutlinePolygon = ({ allDragTargets, outline, scale, target }) => {
                 clearSelectedOutlineDragOverrides({ clearDragOverrides, dragStates });
                 return;
             }
-            (0, save_sequence_prop_1.saveSequenceProps)({
-                changes,
-                setCodeValues,
-                clientId: drag.clientId,
-                undoLabel: changes.length > 1 ? 'Move selected sequences' : null,
-                redoLabel: changes.length > 1 ? 'Move selected sequences back' : null,
-            })
+            const staticChanges = changes.filter((change) => change.type === 'static');
+            const keyframedChanges = changes.filter((change) => change.type === 'keyframed');
+            Promise.all([
+                staticChanges.length > 0
+                    ? (0, save_sequence_prop_1.saveSequenceProps)({
+                        changes: staticChanges,
+                        setCodeValues,
+                        clientId: drag.clientId,
+                        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)({
+                    fileName: change.fileName,
+                    nodePath: change.nodePath,
+                    fieldKey: change.fieldKey,
+                    sourceFrame: change.sourceFrame,
+                    value: change.value,
+                    schema: change.schema,
+                    setCodeValues,
+                    clientId: change.clientId,
+                })),
+            ])
                 .catch((err) => {
                 (0, NotificationCenter_1.showNotification)(`Could not save sequence props: ${err instanceof Error ? err.message : String(err)}`, 4000);
             })
@@ -523,11 +756,141 @@ const SelectedOutlinePolygon = ({ allDragTargets, outline, scale, target }) => {
         clearDragOverrides,
         drag,
         getDragOverrides,
+        onDraggingChange,
+        onSelect,
         scale,
+        selected,
         setCodeValues,
         setDragOverrides,
+        target,
     ]);
-    return (jsx_runtime_1.jsx("polygon", { points: points, fill: drag === null ? 'none' : 'transparent', stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: drag === null ? undefined : 'all', onPointerDown: drag === null ? undefined : 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, 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) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const interaction = (0, exports.getOutlineSelectionInteraction)(event);
+        const shouldUpdateSelection = !selected || interaction.shiftKey || interaction.toggleKey;
+        if (shouldUpdateSelection && target !== undefined) {
+            onSelect(target.selection, interaction);
+        }
+        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],
+            getDragOverrides,
+        });
+        let lastValues = new Map();
+        const onPointerMove = (moveEvent) => {
+            moveEvent.preventDefault();
+            const delta = {
+                x: moveEvent.clientX - startPointer.x,
+                y: moveEvent.clientY - startPointer.y,
+            };
+            const projectedDelta = dot(delta, edgeInfo.normal);
+            const scaleFactor = Math.max(0.001, 1 + projectedDelta / edgeInfo.extent);
+            lastValues = (0, exports.getSelectedOutlineScaleDragValues)({
+                dragStates,
+                axis: edgeInfo.axis,
+                scaleFactor,
+            });
+            for (const dragState of dragStates) {
+                const value = lastValues.get(dragState.key);
+                if (value === undefined) {
+                    throw new Error('Expected scale drag value to be available');
+                }
+                setDragOverrides(dragState.target.nodePath, scaleFieldKey, remotion_1.Internals.makeStaticDragOverride(value));
+            }
+        };
+        const onPointerUp = () => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerUp);
+            onDraggingChange(false);
+            const changes = (0, exports.getSelectedOutlineScaleDragChanges)({
+                dragStates,
+                lastValues,
+            });
+            if (changes.length === 0) {
+                clearSelectedOutlineScaleDragOverrides({
+                    clearDragOverrides,
+                    dragStates,
+                });
+                return;
+            }
+            (0, save_sequence_prop_1.saveSequenceProps)({
+                changes,
+                setCodeValues,
+                clientId: scaleDrag.clientId,
+                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);
+            })
+                .finally(() => {
+                clearSelectedOutlineScaleDragOverrides({
+                    clearDragOverrides,
+                    dragStates,
+                });
+            });
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerUp);
+    }, [
+        allScaleDragTargets,
+        clearDragOverrides,
+        edgeInfo,
+        getDragOverrides,
+        onDraggingChange,
+        onSelect,
+        scaleDrag,
+        selected,
+        setCodeValues,
+        setDragOverrides,
+        target,
+    ]);
+    if (scaleDrag === null || edgeInfo === null) {
+        return null;
+    }
+    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 {
@@ -535,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) => {
@@ -550,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;
@@ -560,7 +928,7 @@ const SelectedUvHandleCircle = ({ handle, outline }) => {
             });
             const nextValue = constrainUv((0, exports.getUvCoordinateForPoint)(outline.points, point), handle.fieldSchema);
             lastValue = nextValue;
-            setEffectDragOverrides(handle.nodePath, handle.effectIndex, handle.fieldKey, nextValue);
+            setEffectDragOverrides(handle.nodePath, handle.effectIndex, handle.fieldKey, remotion_1.Internals.makeStaticDragOverride(nextValue));
         };
         updateFromPointerEvent(event);
         const onPointerMove = (moveEvent) => {
@@ -571,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) &&
@@ -581,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,
@@ -600,91 +970,244 @@ 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 } = (0, TimelineSelection_1.useTimelineSelection)();
+    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 { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
-    const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
+    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 selectedOutlineTargets = (0, react_1.useMemo)(() => {
-        if (!TimelineSelection_1.ENABLE_OUTLINES) {
+    const onDraggingChange = react_1.default.useCallback((dragging) => {
+        setDraggingOutline(dragging);
+        if (dragging) {
+            setHoveredOutlineKey(null);
+        }
+    }, []);
+    const outlineTargets = (0, react_1.useMemo)(() => {
+        if (!TimelineSelection_1.ENABLE_OUTLINES || !editorShowOutlines) {
             return [];
         }
+        const selectedSequenceKeys = getSelectedSequenceKeys(selectedItems);
         const selectedEffectsBySequenceKey = (0, exports.getSelectedEffectFieldsBySequenceKey)(selectedItems);
         const clientId = previewServerState.type === 'connected'
             ? previewServerState.clientId
             : null;
-        return getSequencesWithSelectedOutlines({
-            selectedItems,
+        return (0, exports.getSequencesWithSelectableOutlines)({
             sequences,
             overrideIdsToNodePaths: overrideIdToNodePathMappings,
-        }).map(({ key, nodePathInfo, sequence }) => {
-            var _a;
+        }).map(({ key, keyframeDisplayOffset, nodePathInfo, sequence }) => {
+            var _a, _b;
             if (sequence.refForOutline === null) {
                 throw new Error('Expected sequence to have a ref for outline');
             }
+            const selected = selectedSequenceKeys.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 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 canDrag = previewServerState.type === 'connected' &&
                 controls !== null &&
                 (fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.type) === 'translate' &&
-                (codeValue === null || codeValue === void 0 ? void 0 : codeValue.canUpdate) === true;
+                canDragStatus;
+            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';
             return {
                 key,
+                nodePathInfo,
                 ref: sequence.refForOutline,
+                selected,
+                selection: { type: 'sequence', nodePathInfo },
+                sequence,
                 drag: canDrag
                     ? {
                         codeValue,
                         clientId: previewServerState.clientId,
                         fieldDefault: fieldSchema.default,
+                        keyframeDisplayOffset,
                         nodePath,
                         schema: controls.schema,
                     }
                     : null,
-                uvHandles: getSelectedUvHandles({
-                    codeValues,
-                    clientId,
-                    getEffectDragOverrides,
-                    nodePath,
-                    selectedEffects: selectedEffectsBySequenceKey.get(key),
-                    sequence,
-                }),
+                scaleDrag: canScaleDrag
+                    ? {
+                        codeValue: scaleCodeValue,
+                        clientId: previewServerState.clientId,
+                        fieldDefault: scaleFieldSchema.default,
+                        fieldSchema: scaleFieldSchema,
+                        linked: getScaleLockState({
+                            nodePath,
+                            fieldKey: scaleFieldKey,
+                            defaultValue: (() => {
+                                var _a;
+                                const dragOverrideValue = ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[scaleFieldKey];
+                                const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
+                                    codeValue: scaleCodeValue,
+                                    dragOverrideValue,
+                                    defaultValue: scaleFieldSchema.default,
+                                    shouldResortToDefaultValueIfUndefined: true,
+                                });
+                                const [x, y] = no_react_1.NoReactInternals.parseScaleValue(effectiveValue);
+                                return x === y;
+                            })(),
+                        }),
+                        nodePath,
+                        schema: controls.schema,
+                    }
+                    : null,
+                uvHandles: selected
+                    ? getSelectedUvHandles({
+                        codeValues,
+                        clientId,
+                        getEffectDragOverrides,
+                        nodePath,
+                        selectedEffects: selectedEffectsBySequenceKey.get(key),
+                        sequence,
+                    })
+                    : [],
             };
         });
     }, [
         codeValues,
+        getDragOverrides,
         getEffectDragOverrides,
+        getScaleLockState,
+        editorShowOutlines,
         overrideIdToNodePathMappings,
         previewServerState,
         selectedItems,
         sequences,
     ]);
+    (0, react_1.useEffect)(() => {
+        if (hoveredOutlineKey !== null &&
+            !outlineTargets.some((target) => target.key === hoveredOutlineKey)) {
+            setHoveredOutlineKey(null);
+        }
+    }, [hoveredOutlineKey, outlineTargets]);
     const targetsByKey = (0, react_1.useMemo)(() => {
-        return new Map(selectedOutlineTargets.map((target) => [target.key, target]));
-    }, [selectedOutlineTargets]);
+        return new Map(outlineTargets.map((target) => [target.key, target]));
+    }, [outlineTargets]);
     const allDragTargets = (0, react_1.useMemo)(() => {
-        return selectedOutlineTargets.flatMap((target) => target.drag === null ? [] : [target.drag]);
-    }, [selectedOutlineTargets]);
+        return outlineTargets.flatMap((target) => target.selected && target.drag !== null ? [target.drag] : []);
+    }, [outlineTargets]);
+    const allScaleDragTargets = (0, react_1.useMemo)(() => {
+        return outlineTargets.flatMap((target) => target.selected && target.scaleDrag !== null ? [target.scaleDrag] : []);
+    }, [outlineTargets]);
     (0, react_1.useEffect)(() => {
-        if (selectedOutlineTargets.length === 0) {
+        if (outlineTargets.length === 0) {
             setOutlines((prevOutlines) => prevOutlines.length === 0 ? prevOutlines : []);
             return;
         }
         let animationFrame = null;
         const updateOutlines = () => {
             if (overlayRef.current) {
-                const nextOutlines = measureOutlines(overlayRef.current, selectedOutlineTargets);
+                const nextOutlines = measureOutlines(overlayRef.current, outlineTargets);
                 setOutlines((prevOutlines) => outlinesAreEqual(prevOutlines, nextOutlines)
                     ? prevOutlines
                     : nextOutlines);
@@ -697,14 +1220,10 @@ const SelectedOutlineOverlay = ({ scale }) => {
                 cancelAnimationFrame(animationFrame);
             }
         };
-    }, [selectedOutlineTargets]);
-    if (selectedOutlineTargets.length === 0) {
+    }, [outlineTargets]);
+    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;
-            return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
-                    jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, outline: outline, scale: scale, target: targetsByKey.get(outline.key) }), (_a = targetsByKey.get(outline.key)) === null || _a === void 0 ? void 0 : _a.uvHandles.map((handle) => (jsx_runtime_1.jsx(SelectedUvHandleCircle, { handle: handle, outline: outline }, `${handle.effectIndex}-${handle.fieldKey}`)))] }, 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;