@remotion/studio 4.0.477 → 4.0.479

package/dist/components/SelectedOutlineElement.js

@@ -113,14 +113,41 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
             ? JSON.stringify(transformOriginDrag.translateDefault)
             : null;
         let last = null;
+        let currentPointerX = event.clientX;
+        let currentPointerY = event.clientY;
+        let axisLocked = event.shiftKey;
         onDraggingChange(true);
         (0, ForceSpecificCursor_1.forceSpecificCursor)('crosshair');
-        const updateFromPointerEvent = (pointerEvent) => {
+        const updateFromPointerPosition = () => {
             const point = {
-                x: pointerEvent.clientX - svgRect.left,
-                y: pointerEvent.clientY - svgRect.top,
+                x: currentPointerX - svgRect.left,
+                y: currentPointerY - svgRect.top,
             };
-            const nextUv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(outline.points, point);
+            const rawUv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(outline.points, point);
+            const lockedAxis = (0, selected_outline_drag_1.getSelectedOutlineTransformOriginLockedAxis)({
+                axisLocked,
+                dimensions,
+                startUv: uv,
+                uv: rawUv,
+            });
+            const axisLockedUv = (0, selected_outline_drag_1.applySelectedOutlineTransformOriginAxisLock)({
+                lockedAxis,
+                startUv: uv,
+                uv: rawUv,
+            });
+            const snapPoint = lockedAxis === null
+                ? point
+                : (0, selected_outline_uv_1.getUvHandlePosition)(outline.points, axisLockedUv);
+            const snappedUv = (0, selected_outline_drag_1.snapSelectedOutlineTransformOriginUv)({
+                point: snapPoint,
+                points: outline.points,
+                uv: axisLockedUv,
+            });
+            const nextUv = (0, selected_outline_drag_1.applySelectedOutlineTransformOriginAxisLock)({
+                lockedAxis,
+                startUv: uv,
+                uv: snappedUv,
+            });
             const deltaOrigin = [
                 (nextUv[0] - uv[0]) * dimensions.width,
                 (nextUv[1] - uv[1]) * dimensions.height,
@@ -152,15 +179,31 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
                 })
                 : remotion_1.Internals.makeStaticDragOverride(translate));
         };
-        updateFromPointerEvent(event);
+        updateFromPointerPosition();
         const onPointerMove = (moveEvent) => {
             moveEvent.preventDefault();
-            updateFromPointerEvent(moveEvent);
+            currentPointerX = moveEvent.clientX;
+            currentPointerY = moveEvent.clientY;
+            axisLocked = moveEvent.shiftKey;
+            updateFromPointerPosition();
+        };
+        const onKeyChange = (keyEvent) => {
+            if (keyEvent.key !== 'Shift') {
+                return;
+            }
+            const nextAxisLocked = keyEvent.type === 'keydown';
+            if (nextAxisLocked === axisLocked) {
+                return;
+            }
+            axisLocked = nextAxisLocked;
+            updateFromPointerPosition();
         };
         const onPointerUp = () => {
             window.removeEventListener('pointermove', onPointerMove);
             window.removeEventListener('pointerup', onPointerUp);
             window.removeEventListener('pointercancel', onPointerUp);
+            window.removeEventListener('keydown', onKeyChange);
+            window.removeEventListener('keyup', onKeyChange);
             (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
             onDraggingChange(false);
             if (last === null || (0, selected_outline_drag_1.uvsEqual)(last.uv, uv)) {
@@ -242,6 +285,8 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         window.addEventListener('pointermove', onPointerMove);
         window.addEventListener('pointerup', onPointerUp);
         window.addEventListener('pointercancel', onPointerUp);
+        window.addEventListener('keydown', onKeyChange);
+        window.addEventListener('keyup', onKeyChange);
     }, [
         clearDragOverrides,
         onDraggingChange,
@@ -258,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" })
         ] }));
 };
@@ -506,8 +553,6 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
         if (interaction.shiftKey || interaction.toggleKey) {
             return;
         }
-        onDraggingChange(true);
-        (0, ForceSpecificCursor_1.forceSpecificCursor)(edgeInfo.cursor);
         const startPointer = { x: event.clientX, y: event.clientY };
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineScaleDragStates)({
             dragTargets: selected ? allScaleDragTargets : [scaleDrag],
@@ -515,12 +560,24 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
             timelinePosition: timelinePositionRef.current,
         });
         let lastValues = new Map();
+        let dragStarted = false;
         const onPointerMove = (moveEvent) => {
             moveEvent.preventDefault();
             const delta = {
                 x: moveEvent.clientX - startPointer.x,
                 y: moveEvent.clientY - startPointer.y,
             };
+            if (!dragStarted) {
+                if (!(0, selected_outline_drag_1.isSelectedOutlineDragPastThreshold)({
+                    deltaX: delta.x,
+                    deltaY: delta.y,
+                })) {
+                    return;
+                }
+                dragStarted = true;
+                onDraggingChange(true);
+                (0, ForceSpecificCursor_1.forceSpecificCursor)(edgeInfo.cursor);
+            }
             const projectedDelta = (0, selected_outline_measurement_1.dot)(delta, edgeInfo.normal);
             const scaleFactor = Math.max(0.001, 1 + projectedDelta / edgeInfo.extent);
             lastValues = (0, selected_outline_drag_1.getSelectedOutlineScaleDragValues)({
@@ -549,8 +606,10 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
             window.removeEventListener('pointermove', onPointerMove);
             window.removeEventListener('pointerup', onPointerUp);
             window.removeEventListener('pointercancel', onPointerUp);
-            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-            onDraggingChange(false);
+            if (dragStarted) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                onDraggingChange(false);
+            }
             const changes = (0, selected_outline_drag_1.getSelectedOutlineScaleDragChanges)({
                 dragStates,
                 lastValues,
@@ -658,15 +717,17 @@ 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;
         }
-        onDraggingChange(true);
-        (0, ForceSpecificCursor_1.forceSpecificCursor)(cornerInfo.cursor);
+        const startPointer = { x: event.clientX, y: event.clientY };
         const svgRect = svg.getBoundingClientRect();
         const center = svgPointToClientPoint((0, selected_outline_measurement_1.getSelectedOutlineRotationPivot)({
             dimensions: outline.dimensions,
@@ -683,23 +744,21 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
             y: event.clientY,
         });
         let accumulatedDelta = 0;
+        let rotationLocked = event.shiftKey;
         let lastValues = new Map();
-        const onPointerMove = (moveEvent) => {
-            moveEvent.preventDefault();
-            const nextAngle = (0, selected_outline_measurement_1.getAngleDegrees)(center, {
-                x: moveEvent.clientX,
-                y: moveEvent.clientY,
-            });
-            accumulatedDelta += (0, selected_outline_measurement_1.getSelectedOutlineRotationDeltaDegrees)({
-                from: previousAngle,
-                to: nextAngle,
-            });
-            previousAngle = nextAngle;
+        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: accumulatedDelta,
+                rotationDeltaDegrees,
             });
-            (0, ForceSpecificCursor_1.forceSpecificCursor)((0, selected_outline_measurement_1.getRotationCursor)(cornerInfo.cursorDegrees + accumulatedDelta));
+            (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) {
@@ -717,12 +776,55 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
                 }
             }
         };
+        const onPointerMove = (moveEvent) => {
+            moveEvent.preventDefault();
+            const screenDeltaX = moveEvent.clientX - startPointer.x;
+            const screenDeltaY = moveEvent.clientY - startPointer.y;
+            if (!dragStarted) {
+                if (!(0, selected_outline_drag_1.isSelectedOutlineDragPastThreshold)({
+                    deltaX: screenDeltaX,
+                    deltaY: screenDeltaY,
+                })) {
+                    return;
+                }
+                dragStarted = true;
+                onDraggingChange(true);
+            }
+            const nextAngle = (0, selected_outline_measurement_1.getAngleDegrees)(center, {
+                x: moveEvent.clientX,
+                y: moveEvent.clientY,
+            });
+            accumulatedDelta += (0, selected_outline_measurement_1.getSelectedOutlineRotationDeltaDegrees)({
+                from: previousAngle,
+                to: nextAngle,
+            });
+            previousAngle = nextAngle;
+            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);
-            (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
-            onDraggingChange(false);
+            window.removeEventListener('keydown', onKeyChange);
+            window.removeEventListener('keyup', onKeyChange);
+            if (dragStarted) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                onDraggingChange(false);
+            }
             const changes = (0, selected_outline_drag_1.getSelectedOutlineRotationDragChanges)({
                 dragStates,
                 lastValues,
@@ -774,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, compensateTranslateForTransformOrigin, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, isSelectedOutlineDragPastThreshold, } 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.isSelectedOutlineDragPastThreshold = 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.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"));
@@ -57,7 +57,9 @@ const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
 const TimelineSelection_1 = require("./Timeline/TimelineSelection");
 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; } });
@@ -69,7 +71,13 @@ Object.defineProperty(exports, "getSelectedOutlineScaleDragChanges", { enumerabl
 Object.defineProperty(exports, "getSelectedOutlineScaleDragStates", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineScaleDragStates; } });
 Object.defineProperty(exports, "getSelectedOutlineScaleDragValues", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineScaleDragValues; } });
 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; } });
 Object.defineProperty(exports, "getSelectedEffectFieldsBySequenceKey", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedEffectFieldsBySequenceKey; } });
@@ -127,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');
             }
@@ -136,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' &&
@@ -181,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' &&
@@ -234,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,
@@ -269,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
@@ -604,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;
 }>;