@remotion/studio 4.0.478 → 4.0.479

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

@@ -303,7 +303,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 +717,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 +744,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 +799,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 +876,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,

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
@@ -608,6 +620,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;
 }>;

package/dist/components/SelectedOutlineUvControls.js

@@ -33,11 +33,14 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineUvHandleCircleLayer = exports.SelectedOutlineUvHandleConnectionLayer = void 0;
+exports.SelectedOutlineUvHandleCircleLayer = exports.SelectedOutlineUvHandleConnectionLayer = exports.getSelectedOutlineUvHandleTimelineSelection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
+const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
+const selected_outline_drag_1 = require("./selected-outline-drag");
+const selected_outline_measurement_1 = require("./selected-outline-measurement");
 const selected_outline_uv_1 = require("./selected-outline-uv");
 const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
 const save_effect_prop_1 = require("./Timeline/save-effect-prop");
@@ -47,11 +50,28 @@ const getSvgPointFromPointerEvent = ({ event, rect, }) => {
         y: event.clientY - rect.top,
     };
 };
+const uvHandleRadius = 4.25;
+const selectedUvHandleRadius = 6.8;
+const uvHandleStyle = {
+    filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28))',
+};
+const getSelectedOutlineUvHandleTimelineSelection = ({ effectIndex, fieldKey, nodePathInfo, }) => {
+    return {
+        type: 'sequence-effect-prop',
+        nodePathInfo: {
+            ...nodePathInfo,
+            auxiliaryKeys: ['effects', String(effectIndex), fieldKey],
+        },
+        i: effectIndex,
+        key: fieldKey,
+    };
+};
+exports.getSelectedOutlineUvHandleTimelineSelection = getSelectedOutlineUvHandleTimelineSelection;
 const SelectedUvHandleConnectionLines = ({ handles, outline }) => {
     const lines = (0, react_1.useMemo)(() => (0, selected_outline_uv_1.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 SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSelect, outline }) => {
     const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const position = (0, react_1.useMemo)(() => (0, selected_outline_uv_1.getUvHandlePosition)(outline.points, handle.value), [handle.value, outline.points]);
     const onPointerDown = react_1.default.useCallback((event) => {
@@ -60,13 +80,24 @@ const SelectedUvHandleCircle = ({ handle, onDraggingChange, outline }) => {
         }
         event.preventDefault();
         event.stopPropagation();
+        const interaction = (0, selected_outline_measurement_1.getOutlineSelectionInteraction)(event);
+        onSelect((0, exports.getSelectedOutlineUvHandleTimelineSelection)({
+            effectIndex: handle.effectIndex,
+            fieldKey: handle.fieldKey,
+            nodePathInfo,
+        }), interaction);
+        if (interaction.shiftKey || interaction.toggleKey) {
+            return;
+        }
         const svg = event.currentTarget.ownerSVGElement;
         if (svg === null) {
             return;
         }
         const svgRect = svg.getBoundingClientRect();
+        const startPointerX = event.clientX;
+        const startPointerY = event.clientY;
         let lastValue = null;
-        onDraggingChange(true);
+        let dragging = false;
         const defaultValue = handle.fieldDefault !== undefined
             ? JSON.stringify(handle.fieldDefault)
             : null;
@@ -75,7 +106,13 @@ const SelectedUvHandleCircle = ({ handle, onDraggingChange, outline }) => {
                 event: pointerEvent,
                 rect: svgRect,
             });
-            const nextValue = (0, selected_outline_uv_1.roundUvCoordinate)((0, selected_outline_uv_1.constrainUv)((0, selected_outline_uv_1.getUvCoordinateForPoint)(outline.points, point), handle.fieldSchema), handle.fieldSchema);
+            const rawUv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(outline.points, point);
+            const snappedUv = (0, selected_outline_drag_1.snapSelectedOutlineUv)({
+                point,
+                points: outline.points,
+                uv: rawUv,
+            });
+            const nextValue = (0, selected_outline_uv_1.roundUvCoordinate)((0, selected_outline_uv_1.constrainUv)(snappedUv, handle.fieldSchema), handle.fieldSchema);
             lastValue = nextValue;
             setEffectDragOverrides(handle.nodePath, handle.effectIndex, handle.fieldKey, handle.propStatus.status === 'keyframed'
                 ? remotion_1.Internals.makeKeyframedDragOverride({
@@ -85,16 +122,31 @@ const SelectedUvHandleCircle = ({ handle, onDraggingChange, outline }) => {
                 })
                 : remotion_1.Internals.makeStaticDragOverride(nextValue));
         };
-        updateFromPointerEvent(event);
+        const updateDragFromPointerEvent = (pointerEvent) => {
+            if (!dragging) {
+                const deltaX = pointerEvent.clientX - startPointerX;
+                const deltaY = pointerEvent.clientY - startPointerY;
+                if (!(0, selected_outline_drag_1.isSelectedOutlineDragPastThreshold)({ deltaX, deltaY })) {
+                    return;
+                }
+                dragging = true;
+                (0, ForceSpecificCursor_1.forceSpecificCursor)('default');
+                onDraggingChange(true);
+            }
+            updateFromPointerEvent(pointerEvent);
+        };
         const onPointerMove = (moveEvent) => {
             moveEvent.preventDefault();
-            updateFromPointerEvent(moveEvent);
+            updateDragFromPointerEvent(moveEvent);
         };
         const onPointerUp = () => {
             window.removeEventListener('pointermove', onPointerMove);
             window.removeEventListener('pointerup', onPointerUp);
             window.removeEventListener('pointercancel', onPointerUp);
-            onDraggingChange(false);
+            if (dragging) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                onDraggingChange(false);
+            }
             const stringifiedValue = lastValue === null ? null : JSON.stringify(lastValue);
             const shouldSave = (() => {
                 if (lastValue === null) {
@@ -144,12 +196,14 @@ const SelectedUvHandleCircle = ({ handle, onDraggingChange, outline }) => {
     }, [
         clearEffectDragOverrides,
         handle,
+        nodePathInfo,
         onDraggingChange,
+        onSelect,
         outline.points,
         setPropStatuses,
         setEffectDragOverrides,
     ]);
-    return (jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: 6, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: "default", onPointerDown: onPointerDown }));
+    return (jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: handle.isSelected ? selectedUvHandleRadius : uvHandleRadius, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, style: uvHandleStyle, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: "default", onPointerDown: onPointerDown }));
 };
 const SelectedOutlineUvHandleConnectionLayer = ({ outline, target }) => {
     if (!(target === null || target === void 0 ? void 0 : target.containsSelection) || target.uvHandles.length === 0) {
@@ -158,10 +212,10 @@ const SelectedOutlineUvHandleConnectionLayer = ({ outline, target }) => {
     return (jsx_runtime_1.jsx(SelectedUvHandleConnectionLines, { handles: target.uvHandles, outline: outline }));
 };
 exports.SelectedOutlineUvHandleConnectionLayer = SelectedOutlineUvHandleConnectionLayer;
-const SelectedOutlineUvHandleCircleLayer = ({ onDraggingChange, outline, target }) => {
+const SelectedOutlineUvHandleCircleLayer = ({ onDraggingChange, onSelect, outline, target }) => {
     if (!(target === null || target === void 0 ? void 0 : target.containsSelection) || target.uvHandles.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: target.uvHandles.map((handle) => (jsx_runtime_1.jsx(SelectedUvHandleCircle, { handle: handle, onDraggingChange: onDraggingChange, outline: outline }, `${handle.effectIndex}-${handle.fieldKey}`))) }));
+    return (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: target.uvHandles.map((handle) => (jsx_runtime_1.jsx(SelectedUvHandleCircle, { handle: handle, nodePathInfo: target.nodePathInfo, onDraggingChange: onDraggingChange, onSelect: onSelect, outline: outline }, `${handle.effectIndex}-${handle.fieldKey}`))) }));
 };
 exports.SelectedOutlineUvHandleCircleLayer = SelectedOutlineUvHandleCircleLayer;

package/dist/components/Tabs/index.js

@@ -22,12 +22,12 @@ exports.Tabs = Tabs;
 const selectorButton = {
     border: 'none',
     flex: 1,
-    padding: 4,
-    height: 40,
-    paddingLeft: 16,
+    padding: 3,
+    height: 34,
+    paddingLeft: 12,
     display: 'flex',
     flexDirection: 'row',
-    fontSize: 14,
+    fontSize: 13,
     color: 'inherit',
     alignItems: 'center',
     cursor: 'default',

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

@@ -1,11 +1,12 @@
 import React from 'react';
+import type { SegmentedControlItem } from '../SegmentedControl';
 import type { TimelineSelection } from './TimelineSelection';
 import type { TimelineEasingValue } from './update-selected-easing';
-export type EasingEditorModalState = {
-    type: 'easing-editor';
+export type EasingEditorState = {
     initialEasing: TimelineEasingValue;
     selections: TimelineSelection[];
 };
-export declare const EasingEditorModal: React.FC<{
-    readonly state: EasingEditorModalState;
+export declare const EasingEditor: React.FC<{
+    readonly state: EasingEditorState;
+    readonly renderHeader?: (modeItems: SegmentedControlItem[]) => React.ReactNode;
 }>;