@remotion/studio 4.0.471 → 4.0.472

package/dist/components/SelectedOutlineOverlay.js

@@ -33,21 +33,26 @@ 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.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 get_box_quads_ponyfill_1 = require("../helpers/get-box-quads-ponyfill");
+const scale_lock_1 = require("../state/scale-lock");
 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 translateFieldKey = 'style.translate';
+const scaleFieldKey = 'style.scale';
 const outlineContainer = {
     position: 'absolute',
     inset: 0,
@@ -78,6 +83,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]);
@@ -249,6 +263,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 +289,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 +298,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 +336,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 +352,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 +414,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 +432,7 @@ const getSelectedOutlineDragStates = ({ dragTargets, getDragOverrides, }) => {
                 ? JSON.stringify(target.fieldDefault)
                 : null,
             key: remotion_1.Internals.makeSequencePropsSubscriptionKey(target.nodePath),
+            sourceFrame,
             startX,
             startY,
             target,
@@ -425,13 +447,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 +584,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 +592,48 @@ 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, hovered, outline, 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 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;
+        }
         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,7 +648,16 @@ 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 = () => {
@@ -501,13 +672,29 @@ 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' : null,
+                        redoLabel: changes.length > 1 ? 'Move selected sequences back' : null,
+                    })
+                    : 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 +710,114 @@ const SelectedOutlinePolygon = ({ allDragTargets, outline, scale, target }) => {
         clearDragOverrides,
         drag,
         getDragOverrides,
+        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.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 }));
+};
+const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, edge, outline, 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 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;
+        }
+        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);
+            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' : null,
+                redoLabel: changes.length > 1 ? 'Scale selected sequences back' : null,
+            })
+                .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,
+        onSelect,
+        scaleDrag,
+        selected,
+        setCodeValues,
+        setDragOverrides,
+        target,
+    ]);
+    if (scaleDrag === null || edgeInfo === null) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("line", { x1: edgeInfo.start.x, y1: edgeInfo.start.y, x2: edgeInfo.end.x, y2: edgeInfo.end.y, stroke: "transparent", strokeWidth: 12, vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: edgeInfo.cursor, onPointerEnter: () => onHoverChange(outline.key), onPointerLeave: () => onHoverChange(null), onPointerDown: onPointerDown }));
 };
 const getSvgPointFromPointerEvent = ({ event, rect, }) => {
     return {
@@ -560,7 +850,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) => {
@@ -607,84 +897,139 @@ const SelectedUvHandleCircle = ({ handle, outline }) => {
     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 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 [outlines, setOutlines] = (0, react_1.useState)([]);
+    const [hoveredOutlineKey, setHoveredOutlineKey] = (0, react_1.useState)(null);
     const overlayRef = (0, react_1.useRef)(null);
-    const selectedOutlineTargets = (0, react_1.useMemo)(() => {
+    const outlineTargets = (0, react_1.useMemo)(() => {
         if (!TimelineSelection_1.ENABLE_OUTLINES) {
             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 },
                 drag: canDrag
                     ? {
                         codeValue,
                         clientId: previewServerState.clientId,
                         fieldDefault: fieldSchema.default,
+                        keyframeDisplayOffset,
+                        nodePath,
+                        schema: controls.schema,
+                    }
+                    : null,
+                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: getSelectedUvHandles({
-                    codeValues,
-                    clientId,
-                    getEffectDragOverrides,
-                    nodePath,
-                    selectedEffects: selectedEffectsBySequenceKey.get(key),
-                    sequence,
-                }),
+                uvHandles: selected
+                    ? getSelectedUvHandles({
+                        codeValues,
+                        clientId,
+                        getEffectDragOverrides,
+                        nodePath,
+                        selectedEffects: selectedEffectsBySequenceKey.get(key),
+                        sequence,
+                    })
+                    : [],
             };
         });
     }, [
         codeValues,
+        getDragOverrides,
         getEffectDragOverrides,
+        getScaleLockState,
         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 +1042,20 @@ 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;
+            var _a, _b, _c;
             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));
+                    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));
         }) }));
 };
 exports.SelectedOutlineOverlay = SelectedOutlineOverlay;