@remotion/studio 4.0.478 → 4.0.481

package/dist/components/RenderModal/get-render-modal-warnings.d.ts

@@ -12,7 +12,7 @@ export type TypeCanSaveState = {
     reason: string;
     determined: boolean;
 };
-export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }: {
+export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, showCannotSaveDefaultPropsWarning, }: {
     cliProps: unknown;
     canSaveDefaultProps: TypeCanSaveState | null;
     isCustomDateUsed: boolean;
@@ -21,4 +21,5 @@ export declare const getRenderModalWarnings: ({ cliProps, canSaveDefaultProps, i
     jsSetUsed: boolean;
     inJSONEditor: boolean;
     propsEditType: PropsEditType;
+    showCannotSaveDefaultPropsWarning: boolean;
 }) => RenderModalWarning[];

package/dist/components/RenderModal/get-render-modal-warnings.js

@@ -19,7 +19,10 @@ const getInputPropsWarning = ({ cliProps, propsEditType, }) => {
     }
     return null;
 };
-const getCannotSaveDefaultProps = (canSaveDefaultProps) => {
+const getCannotSaveDefaultProps = (canSaveDefaultProps, showCannotSaveDefaultPropsWarning) => {
+    if (!showCannotSaveDefaultPropsWarning) {
+        return null;
+    }
     if (canSaveDefaultProps === null) {
         return null;
     }
@@ -59,10 +62,10 @@ const setUsed = (used, inJSONEditor) => {
     }
     return null;
 };
-const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, }) => {
+const getRenderModalWarnings = ({ cliProps, canSaveDefaultProps, isCustomDateUsed, customFileUsed, jsMapUsed, jsSetUsed, inJSONEditor, propsEditType, showCannotSaveDefaultPropsWarning, }) => {
     return [
         warningOrNull('input-props-override', getInputPropsWarning({ cliProps, propsEditType })),
-        getCannotSaveDefaultProps(canSaveDefaultProps),
+        getCannotSaveDefaultProps(canSaveDefaultProps, showCannotSaveDefaultPropsWarning),
         warningOrNull('custom-date-used', customDateUsed(isCustomDateUsed, inJSONEditor)),
         warningOrNull('static-file-used', staticFileUsed(customFileUsed, inJSONEditor)),
         warningOrNull('map-used', mapUsed(jsMapUsed, inJSONEditor)),

package/dist/components/RendersTab.js

@@ -10,7 +10,7 @@ const Tabs_1 = require("./Tabs");
 const row = {
     display: 'flex',
     flexDirection: 'row',
-    fontSize: 14,
+    fontSize: 'inherit',
     color: 'inherit',
     alignItems: 'center',
     flex: 1,

package/dist/components/ResetZoomButton.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const ResetZoomButton: React.FC<{
-    onClick: () => void;
+    readonly onClick: () => void;
 }>;

package/dist/components/ResetZoomButton.js

@@ -2,8 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResetZoomButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const Button_1 = require("./Button");
 const ResetZoomButton = ({ onClick }) => {
-    return jsx_runtime_1.jsx(Button_1.Button, { onClick: onClick, children: "Reset zoom" });
+    const onPointerDown = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+    }, []);
+    return (jsx_runtime_1.jsx(Button_1.Button, { onClick: onClick, onPointerDown: onPointerDown, children: "Reset zoom" }));
 };
 exports.ResetZoomButton = ResetZoomButton;

package/dist/components/SegmentedControl.d.ts

@@ -5,7 +5,10 @@ export type SegmentedControlItem = {
     key: string;
     selected: boolean;
 };
+type SegmentedControlSize = 'default' | 'compact';
 export declare const SegmentedControl: React.FC<{
     readonly items: SegmentedControlItem[];
     readonly needsWrapping: boolean;
+    readonly size?: SegmentedControlSize;
 }>;
+export {};

package/dist/components/SegmentedControl.js

@@ -25,7 +25,13 @@ const item = {
     justifyContent: 'center',
     whiteSpace: 'nowrap',
 };
-const SegmentedControl = ({ items, needsWrapping }) => {
+const compactItem = {
+    ...item,
+    fontSize: 11,
+    fontWeight: 400,
+    padding: '2px 7px',
+};
+const SegmentedControl = ({ items, needsWrapping, size = 'default' }) => {
     const controlStyle = (0, react_1.useMemo)(() => {
         if (needsWrapping) {
             return {
@@ -41,11 +47,11 @@ const SegmentedControl = ({ items, needsWrapping }) => {
         };
     }, [needsWrapping]);
     return (jsx_runtime_1.jsx("div", { style: controlStyle, children: items.map((i) => {
-            return (jsx_runtime_1.jsx(Item, { onClick: i.onClick, selected: i.selected, children: i.label }, i.key));
+            return (jsx_runtime_1.jsx(Item, { onClick: i.onClick, selected: i.selected, size: size, children: i.label }, i.key));
         }) }));
 };
 exports.SegmentedControl = SegmentedControl;
-const Item = ({ selected, onClick, children }) => {
+const Item = ({ selected, onClick, children, size }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { tabIndex } = (0, z_index_1.useZIndex)();
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -56,10 +62,10 @@ const Item = ({ selected, onClick, children }) => {
     }, []);
     const itemStyle = (0, react_1.useMemo)(() => {
         return {
-            ...item,
+            ...(size === 'compact' ? compactItem : item),
             backgroundColor: selected ? colors_1.INPUT_BACKGROUND : 'transparent',
             color: selected ? 'white' : hovered ? 'white' : colors_1.LIGHT_TEXT,
         };
-    }, [hovered, selected]);
+    }, [hovered, selected, size]);
     return (jsx_runtime_1.jsx("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: itemStyle, tabIndex: tabIndex, onClick: onClick, children: children }));
 };

package/dist/components/SelectedOutlineElement.js

@@ -42,6 +42,7 @@ 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 open_in_editor_1 = require("../helpers/open-in-editor");
+const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const ContextMenu_1 = require("./ContextMenu");
@@ -303,7 +304,9 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         position === null) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("g", { pointerEvents: "all", cursor: "crosshair", onPointerDown: onPointerDown, "aria-hidden": "true", children: [
+    return (jsx_runtime_1.jsxs("g", { pointerEvents: "all", cursor: "crosshair", onPointerDown: onPointerDown, "aria-hidden": "true", style: {
+            filter: 'drop-shadow(0 0 1px rgba(255, 255, 255, 0.2))',
+        }, children: [
             jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: 4, stroke: colors_1.BLUE, fill: "none", strokeWidth: 2, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x - 8, y1: position.y, x2: position.x + 8, y2: position.y, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x, y1: position.y - 8, x2: position.x, y2: position.y + 8, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" })
         ] }));
 };
@@ -715,11 +718,14 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
             return;
         }
         const interaction = (0, selected_outline_measurement_1.getOutlineSelectionInteraction)(event);
-        const shouldUpdateSelection = !selected || interaction.shiftKey || interaction.toggleKey;
+        const shouldUpdateSelection = !selected || interaction.toggleKey;
         if (shouldUpdateSelection && target !== undefined) {
-            onSelect(target.selection, interaction);
+            onSelect(target.selection, {
+                shiftKey: false,
+                toggleKey: interaction.toggleKey,
+            });
         }
-        if (interaction.shiftKey || interaction.toggleKey) {
+        if (interaction.toggleKey) {
             return;
         }
         const startPointer = { x: event.clientX, y: event.clientY };
@@ -739,8 +745,38 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
             y: event.clientY,
         });
         let accumulatedDelta = 0;
+        let rotationLocked = event.shiftKey;
         let lastValues = new Map();
         let dragStarted = false;
+        const updateRotationDragOverrides = () => {
+            const rotationDeltaDegrees = rotationLocked
+                ? (0, selected_outline_drag_1.snapSelectedOutlineRotationDeltaDegrees)({
+                    dragStates,
+                    rotationDeltaDegrees: accumulatedDelta,
+                })
+                : accumulatedDelta;
+            lastValues = (0, selected_outline_drag_1.getSelectedOutlineRotationDragValues)({
+                dragStates,
+                rotationDeltaDegrees,
+            });
+            (0, ForceSpecificCursor_1.forceSpecificCursor)((0, selected_outline_measurement_1.getRotationCursor)(cornerInfo.cursorDegrees + rotationDeltaDegrees));
+            for (const dragState of dragStates) {
+                const value = lastValues.get(dragState.key);
+                if (value === undefined) {
+                    throw new Error('Expected rotation drag value to be available');
+                }
+                if (dragState.target.propStatus.status === 'keyframed') {
+                    setDragOverrides(dragState.target.nodePath, selected_outline_types_1.rotateFieldKey, remotion_1.Internals.makeKeyframedDragOverride({
+                        status: dragState.target.propStatus,
+                        frame: dragState.sourceFrame,
+                        value,
+                    }));
+                }
+                else {
+                    setDragOverrides(dragState.target.nodePath, selected_outline_types_1.rotateFieldKey, remotion_1.Internals.makeStaticDragOverride(value));
+                }
+            }
+        };
         const onPointerMove = (moveEvent) => {
             moveEvent.preventDefault();
             const screenDeltaX = moveEvent.clientX - startPointer.x;
@@ -764,32 +800,28 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
                 to: nextAngle,
             });
             previousAngle = nextAngle;
-            lastValues = (0, selected_outline_drag_1.getSelectedOutlineRotationDragValues)({
-                dragStates,
-                rotationDeltaDegrees: accumulatedDelta,
-            });
-            (0, ForceSpecificCursor_1.forceSpecificCursor)((0, selected_outline_measurement_1.getRotationCursor)(cornerInfo.cursorDegrees + accumulatedDelta));
-            for (const dragState of dragStates) {
-                const value = lastValues.get(dragState.key);
-                if (value === undefined) {
-                    throw new Error('Expected rotation drag value to be available');
-                }
-                if (dragState.target.propStatus.status === 'keyframed') {
-                    setDragOverrides(dragState.target.nodePath, selected_outline_types_1.rotateFieldKey, remotion_1.Internals.makeKeyframedDragOverride({
-                        status: dragState.target.propStatus,
-                        frame: dragState.sourceFrame,
-                        value,
-                    }));
-                }
-                else {
-                    setDragOverrides(dragState.target.nodePath, selected_outline_types_1.rotateFieldKey, remotion_1.Internals.makeStaticDragOverride(value));
-                }
+            rotationLocked = moveEvent.shiftKey;
+            updateRotationDragOverrides();
+        };
+        const onKeyChange = (keyEvent) => {
+            if (keyEvent.key !== 'Shift') {
+                return;
+            }
+            const nextRotationLocked = keyEvent.type === 'keydown';
+            if (nextRotationLocked === rotationLocked) {
+                return;
+            }
+            rotationLocked = nextRotationLocked;
+            if (dragStarted) {
+                updateRotationDragOverrides();
             }
         };
         const onPointerUp = () => {
             window.removeEventListener('pointermove', onPointerMove);
             window.removeEventListener('pointerup', onPointerUp);
             window.removeEventListener('pointercancel', onPointerUp);
+            window.removeEventListener('keydown', onKeyChange);
+            window.removeEventListener('keyup', onKeyChange);
             if (dragStarted) {
                 (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 onDraggingChange(false);
@@ -845,6 +877,8 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         window.addEventListener('pointermove', onPointerMove);
         window.addEventListener('pointerup', onPointerUp);
         window.addEventListener('pointercancel', onPointerUp);
+        window.addEventListener('keydown', onKeyChange);
+        window.addEventListener('keyup', onKeyChange);
     }, [
         allRotationDragTargets,
         clearDragOverrides,
@@ -881,6 +915,7 @@ const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allSca
     const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const onContextMenuOpen = react_1.default.useCallback(async () => {
         if (target === undefined || previewServerState.type !== 'connected') {
             return false;
@@ -915,6 +950,9 @@ const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allSca
         const canOpenInEditor = Boolean(window.remotion_editorName && originalLocation);
         const disableInteractivityDisabled = !target.sequence.showInTimeline;
         const sourceEditDisabled = !target.sequence.controls || !nodePath.absolutePath;
+        const canAddEffect = target.nodePathInfo.supportsEffects &&
+            !sourceEditDisabled &&
+            previewServerState.type === 'connected';
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo,
             canOpenInEditor,
@@ -988,12 +1026,46 @@ const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allSca
             originalLocation,
             selectAsset,
             sequence: target.sequence,
+            sourceActions: [
+                ...(target.nodePathInfo.supportsEffects
+                    ? [
+                        {
+                            type: 'item',
+                            id: 'add-effect',
+                            keyHint: null,
+                            label: 'Add effect...',
+                            leftItem: null,
+                            disabled: !canAddEffect,
+                            onClick: () => {
+                                if (!canAddEffect ||
+                                    previewServerState.type !== 'connected') {
+                                    return;
+                                }
+                                setSelectedModal({
+                                    type: 'add-effect',
+                                    clientId: previewServerState.clientId,
+                                    fileName: nodePath.absolutePath,
+                                    nodePath,
+                                });
+                            },
+                            quickSwitcherLabel: null,
+                            subMenu: null,
+                            value: 'add-effect',
+                        },
+                        {
+                            type: 'divider',
+                            id: 'add-effect-divider',
+                        },
+                    ]
+                    : []),
+            ],
         });
     }, [
         confirm,
         onSelect,
         previewServerState,
         selectAsset,
+        setSelectedModal,
         setPropStatuses,
         target,
         updateResolvedStackTrace,

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, snapSelectedOutlineTransformOriginUv, } from './selected-outline-drag';
+export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineUvSnapThresholdPx, selectedOutlineTransformOriginSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineUv, snapSelectedOutlineTransformOriginUv, } from './selected-outline-drag';
 export { getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
 export { selectedOutlineDragThresholdPx } from './selected-outline-types';
 export type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineScaleDragState, } from './selected-outline-types';

package/dist/components/SelectedOutlineOverlay.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineTransformOriginUv = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
+exports.SelectedOutlineOverlay = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.selectedOutlineUvSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -59,6 +59,7 @@ const selected_outline_drag_2 = require("./selected-outline-drag");
 Object.defineProperty(exports, "applySelectedOutlineDragAxisLock", { enumerable: true, get: function () { return selected_outline_drag_2.applySelectedOutlineDragAxisLock; } });
 Object.defineProperty(exports, "applySelectedOutlineTransformOriginAxisLock", { enumerable: true, get: function () { return selected_outline_drag_2.applySelectedOutlineTransformOriginAxisLock; } });
 Object.defineProperty(exports, "compensateTranslateForTransformOrigin", { enumerable: true, get: function () { return selected_outline_drag_2.compensateTranslateForTransformOrigin; } });
+Object.defineProperty(exports, "getSelectedOutlineActiveSchema", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineActiveSchema; } });
 Object.defineProperty(exports, "getSelectedOutlineDragChanges", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineDragChanges; } });
 Object.defineProperty(exports, "getSelectedOutlineDragValues", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineDragValues; } });
 Object.defineProperty(exports, "getSelectedOutlineKeyboardNudgeDelta", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineKeyboardNudgeDelta; } });
@@ -72,7 +73,10 @@ Object.defineProperty(exports, "getSelectedOutlineScaleDragValues", { enumerable
 Object.defineProperty(exports, "getSelectedOutlineScaleEdgeInfo", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineScaleEdgeInfo; } });
 Object.defineProperty(exports, "getSelectedOutlineTransformOriginLockedAxis", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineTransformOriginLockedAxis; } });
 Object.defineProperty(exports, "isSelectedOutlineDragPastThreshold", { enumerable: true, get: function () { return selected_outline_drag_2.isSelectedOutlineDragPastThreshold; } });
+Object.defineProperty(exports, "selectedOutlineUvSnapThresholdPx", { enumerable: true, get: function () { return selected_outline_drag_2.selectedOutlineUvSnapThresholdPx; } });
 Object.defineProperty(exports, "selectedOutlineTransformOriginSnapThresholdPx", { enumerable: true, get: function () { return selected_outline_drag_2.selectedOutlineTransformOriginSnapThresholdPx; } });
+Object.defineProperty(exports, "snapSelectedOutlineRotationDeltaDegrees", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineRotationDeltaDegrees; } });
+Object.defineProperty(exports, "snapSelectedOutlineUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineUv; } });
 Object.defineProperty(exports, "snapSelectedOutlineTransformOriginUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineTransformOriginUv; } });
 const selected_outline_measurement_2 = require("./selected-outline-measurement");
 Object.defineProperty(exports, "getOutlineSelectionInteraction", { enumerable: true, get: function () { return selected_outline_measurement_2.getOutlineSelectionInteraction; } });
@@ -131,8 +135,7 @@ const SelectedOutlineOverlay = ({ scale }) => {
             sequences,
             overrideIdsToNodePaths: overrideIdToNodePathMappings,
         }).map(({ key, keyframeDisplayOffset, nodePathInfo, sequence }) => {
-            var _a;
-            var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            var _a, _b, _c, _d, _e, _f;
             if (sequence.refForOutline === null) {
                 throw new Error('Expected sequence to have a ref for outline');
             }
@@ -140,26 +143,36 @@ const SelectedOutlineOverlay = ({ scale }) => {
             const containsSelection = sequenceKeysContainingSelection.has(key);
             const nodePath = nodePathInfo.sequenceSubscriptionKey;
             const { controls } = sequence;
-            const fieldSchema = controls === null || controls === void 0 ? void 0 : controls.schema[selected_outline_types_1.translateFieldKey];
             const nodePropStatuses = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath);
+            const sourceFrame = timelinePosition - keyframeDisplayOffset;
+            const dragOverrides = (_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {};
+            const activeSchema = controls
+                ? (0, selected_outline_drag_1.getSelectedOutlineActiveSchema)({
+                    schema: controls.schema,
+                    currentRuntimeValueDotNotation: controls.currentRuntimeValueDotNotation,
+                    dragOverrides,
+                    propStatus: nodePropStatuses,
+                    frame: sourceFrame,
+                })
+                : null;
+            const fieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.translateFieldKey];
             const propStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.translateFieldKey];
-            const scaleFieldSchema = controls === null || controls === void 0 ? void 0 : controls.schema[selected_outline_types_1.scaleFieldKey];
+            const scaleFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.scaleFieldKey];
             const scalePropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.scaleFieldKey];
-            const rotationFieldSchema = controls === null || controls === void 0 ? void 0 : controls.schema[selected_outline_types_1.rotateFieldKey];
-            const rotationPropStatus = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a[selected_outline_types_1.rotateFieldKey];
-            const transformOriginFieldSchema = controls === null || controls === void 0 ? void 0 : controls.schema[selected_outline_types_1.transformOriginFieldKey];
+            const rotationFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.rotateFieldKey];
+            const rotationPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.rotateFieldKey];
+            const transformOriginFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.transformOriginFieldKey];
             const transformOriginPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.transformOriginFieldKey];
-            const rotationSourceFrame = timelinePosition - keyframeDisplayOffset;
             const transformOriginValueForRotation = (transformOriginFieldSchema === null || transformOriginFieldSchema === void 0 ? void 0 : transformOriginFieldSchema.type) === 'transform-origin' &&
                 ((transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'static' ||
                     (transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'keyframed')
-                ? String((_c = remotion_1.Internals.getEffectiveVisualModeValue({
+                ? String((_b = remotion_1.Internals.getEffectiveVisualModeValue({
                     propStatus: transformOriginPropStatus,
-                    dragOverrideValue: ((_b = getDragOverrides(nodePath)) !== null && _b !== void 0 ? _b : {})[selected_outline_types_1.transformOriginFieldKey],
+                    dragOverrideValue: dragOverrides[selected_outline_types_1.transformOriginFieldKey],
                     defaultValue: transformOriginFieldSchema.default,
-                    frame: rotationSourceFrame,
+                    frame: sourceFrame,
                     shouldResortToDefaultValueIfUndefined: true,
-                })) !== null && _c !== void 0 ? _c : transformOriginFieldSchema.default)
+                })) !== null && _b !== void 0 ? _b : transformOriginFieldSchema.default)
                 : '50% 50%';
             const canDragStatus = (propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'static' ||
                 ((propStatus === null || propStatus === void 0 ? void 0 : propStatus.status) === 'keyframed' &&
@@ -185,7 +198,7 @@ const SelectedOutlineOverlay = ({ scale }) => {
             const selectedForTransformOrigin = (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.sequenceKey) === key;
             const transformOriginSourceFrame = (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.displayFrame) === null ||
                 (selectedTransformOriginInfo === null || selectedTransformOriginInfo === void 0 ? void 0 : selectedTransformOriginInfo.displayFrame) === undefined
-                ? timelinePosition - keyframeDisplayOffset
+                ? sourceFrame
                 : selectedTransformOriginInfo.displayFrame - keyframeDisplayOffset;
             const canTransformOriginStatus = (transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'static' ||
                 ((transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'keyframed' &&
@@ -238,8 +251,7 @@ const SelectedOutlineOverlay = ({ scale }) => {
                             nodePath,
                             fieldKey: selected_outline_types_1.scaleFieldKey,
                             defaultValue: (() => {
-                                var _a;
-                                const dragOverrideValue = ((_a = getDragOverrides(nodePath)) !== null && _a !== void 0 ? _a : {})[selected_outline_types_1.scaleFieldKey];
+                                const dragOverrideValue = dragOverrides[selected_outline_types_1.scaleFieldKey];
                                 const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
                                     propStatus: scalePropStatus,
                                     dragOverrideValue,
@@ -273,48 +285,48 @@ const SelectedOutlineOverlay = ({ scale }) => {
                         nodePath,
                         originDefault: transformOriginFieldSchema.default,
                         originPropStatus: transformOriginPropStatus,
-                        originValue: String((_e = remotion_1.Internals.getEffectiveVisualModeValue({
+                        originValue: String((_c = remotion_1.Internals.getEffectiveVisualModeValue({
                             propStatus: transformOriginPropStatus,
-                            dragOverrideValue: ((_d = getDragOverrides(nodePath)) !== null && _d !== void 0 ? _d : {})[selected_outline_types_1.transformOriginFieldKey],
+                            dragOverrideValue: dragOverrides[selected_outline_types_1.transformOriginFieldKey],
                             defaultValue: transformOriginFieldSchema.default,
                             frame: transformOriginSourceFrame,
                             shouldResortToDefaultValueIfUndefined: true,
-                        })) !== null && _e !== void 0 ? _e : transformOriginFieldSchema.default),
+                        })) !== null && _c !== void 0 ? _c : transformOriginFieldSchema.default),
                         rotateValue: String((rotationPropStatus === null || rotationPropStatus === void 0 ? void 0 : rotationPropStatus.status) === 'static' ||
                             (rotationPropStatus === null || rotationPropStatus === void 0 ? void 0 : rotationPropStatus.status) === 'keyframed'
-                            ? ((_g = remotion_1.Internals.getEffectiveVisualModeValue({
+                            ? ((_d = remotion_1.Internals.getEffectiveVisualModeValue({
                                 propStatus: rotationPropStatus,
-                                dragOverrideValue: ((_f = getDragOverrides(nodePath)) !== null && _f !== void 0 ? _f : {})[selected_outline_types_1.rotateFieldKey],
+                                dragOverrideValue: dragOverrides[selected_outline_types_1.rotateFieldKey],
                                 defaultValue: (rotationFieldSchema === null || rotationFieldSchema === void 0 ? void 0 : rotationFieldSchema.type) === 'rotation-css'
                                     ? rotationFieldSchema.default
                                     : '0deg',
                                 frame: transformOriginSourceFrame,
                                 shouldResortToDefaultValueIfUndefined: true,
-                            })) !== null && _g !== void 0 ? _g : '0deg')
+                            })) !== null && _d !== void 0 ? _d : '0deg')
                             : '0deg'),
                         scaleValue: (scalePropStatus === null || scalePropStatus === void 0 ? void 0 : scalePropStatus.status) === 'static' ||
                             (scalePropStatus === null || scalePropStatus === void 0 ? void 0 : scalePropStatus.status) === 'keyframed'
-                            ? String((_j = remotion_1.Internals.getEffectiveVisualModeValue({
+                            ? String((_e = remotion_1.Internals.getEffectiveVisualModeValue({
                                 propStatus: scalePropStatus,
-                                dragOverrideValue: ((_h = getDragOverrides(nodePath)) !== null && _h !== void 0 ? _h : {})[selected_outline_types_1.scaleFieldKey],
+                                dragOverrideValue: dragOverrides[selected_outline_types_1.scaleFieldKey],
                                 defaultValue: (scaleFieldSchema === null || scaleFieldSchema === void 0 ? void 0 : scaleFieldSchema.type) === 'scale'
                                     ? scaleFieldSchema.default
                                     : 1,
                                 frame: transformOriginSourceFrame,
                                 shouldResortToDefaultValueIfUndefined: true,
-                            })) !== null && _j !== void 0 ? _j : 1)
+                            })) !== null && _e !== void 0 ? _e : 1)
                             : '1',
                         schema: controls.schema,
                         sourceFrame: transformOriginSourceFrame,
                         translateDefault: fieldSchema.default,
                         translatePropStatus: propStatus,
-                        translateValue: String((_l = remotion_1.Internals.getEffectiveVisualModeValue({
+                        translateValue: String((_f = remotion_1.Internals.getEffectiveVisualModeValue({
                             propStatus,
-                            dragOverrideValue: ((_k = getDragOverrides(nodePath)) !== null && _k !== void 0 ? _k : {})[selected_outline_types_1.translateFieldKey],
+                            dragOverrideValue: dragOverrides[selected_outline_types_1.translateFieldKey],
                             defaultValue: fieldSchema.default,
                             frame: transformOriginSourceFrame,
                             shouldResortToDefaultValueIfUndefined: true,
-                        })) !== null && _l !== void 0 ? _l : fieldSchema.default),
+                        })) !== null && _f !== void 0 ? _f : fieldSchema.default),
                     }
                     : null,
                 uvHandles: containsSelection
@@ -352,7 +364,9 @@ const SelectedOutlineOverlay = ({ scale }) => {
         return new Map(outlineTargets.map((target) => [target.key, target]));
     }, [outlineTargets]);
     const allDragTargets = (0, react_1.useMemo)(() => {
-        return outlineTargets.flatMap((target) => target.selected && target.drag !== null ? [target.drag] : []);
+        return outlineTargets.flatMap((target) => (target.selected || target.containsSelection) && target.drag !== null
+            ? [target.drag]
+            : []);
     }, [outlineTargets]);
     const allScaleDragTargets = (0, react_1.useMemo)(() => {
         return outlineTargets.flatMap((target) => target.selected && target.scaleDrag !== null ? [target.scaleDrag] : []);
@@ -608,6 +622,6 @@ const SelectedOutlineOverlay = ({ scale }) => {
     if (outlineTargets.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [outlines.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { allDragTargets: allDragTargets, allRotationDragTargets: allRotationDragTargets, allScaleDragTargets: allScaleDragTargets, dragging: draggingOutline, hovered: hoveredOutlineKey === outline.key, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: setHoveredOutlineKey, onSelect: selectItem, scale: scale, target: targetsByKey.get(outline.key) }, outline.key))), outlines.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlines.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
+    return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [outlines.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { allDragTargets: allDragTargets, allRotationDragTargets: allRotationDragTargets, allScaleDragTargets: allScaleDragTargets, dragging: draggingOutline, hovered: hoveredOutlineKey === outline.key, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: setHoveredOutlineKey, onSelect: selectItem, scale: scale, target: targetsByKey.get(outline.key) }, outline.key))), outlines.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlines.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: selectItem, outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
 };
 exports.SelectedOutlineOverlay = SelectedOutlineOverlay;

package/dist/components/SelectedOutlineUvControls.d.ts

@@ -1,8 +1,16 @@
 import React from 'react';
+import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 import type { SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineUvHandle } from './selected-outline-uv';
+import type { TimelineSelection, TimelineSelectionInteraction } from './Timeline/TimelineSelection';
+export declare const getSelectedOutlineUvHandleTimelineSelection: ({ effectIndex, fieldKey, nodePathInfo, }: {
+    readonly effectIndex: number;
+    readonly fieldKey: string;
+    readonly nodePathInfo: SequenceNodePathInfo;
+}) => TimelineSelection;
 type UvTarget = {
     readonly containsSelection: boolean;
+    readonly nodePathInfo: SequenceNodePathInfo;
     readonly uvHandles: readonly SelectedOutlineUvHandle[];
 };
 export declare const SelectedOutlineUvHandleConnectionLayer: React.FC<{
@@ -11,6 +19,7 @@ export declare const SelectedOutlineUvHandleConnectionLayer: React.FC<{
 }>;
 export declare const SelectedOutlineUvHandleCircleLayer: React.FC<{
     readonly onDraggingChange: (dragging: boolean) => void;
+    readonly onSelect: (item: TimelineSelection, interaction?: TimelineSelectionInteraction) => void;
     readonly outline: SelectedOutline;
     readonly target: UvTarget | undefined;
 }>;