@remotion/studio 4.0.482 → 4.0.483

package/dist/components/Canvas.js

@@ -23,6 +23,7 @@ const EditorGuides_1 = __importDefault(require("./EditorGuides"));
 const EditorRuler_1 = require("./EditorRuler");
 const use_is_ruler_visible_1 = require("./EditorRuler/use-is-ruler-visible");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
+const element_drag_and_drop_1 = require("./element-drag-and-drop");
 const import_assets_1 = require("./import-assets");
 const layout_1 = require("./layout");
 const Preview_1 = require("./Preview");
@@ -57,6 +58,11 @@ const isComponentDragEvent = (event) => {
     var _b;
     return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.COMPONENT_DRAG_MIME_TYPE);
 };
+const isElementDragEvent = (event) => {
+    var _a;
+    var _b;
+    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.ELEMENT_DRAG_MIME_TYPE);
+};
 const isSfxDragEvent = (event) => {
     var _a;
     var _b;
@@ -66,6 +72,7 @@ const isRemoteAssetDragEvent = (event) => {
     return (!isFileDragEvent(event) &&
         !isAssetDragEvent(event) &&
         !isComponentDragEvent(event) &&
+        !isElementDragEvent(event) &&
         !isSfxDragEvent(event) &&
         (0, remote_asset_drag_1.hasRemoteAssetDragData)(event.dataTransfer));
 };
@@ -560,6 +567,7 @@ const Canvas = ({ canvasContent, size }) => {
             (!isFileDragEvent(event) &&
                 !isAssetDragEvent(event) &&
                 !isComponentDragEvent(event) &&
+                !isElementDragEvent(event) &&
                 !isSfxDragEvent(event) &&
                 !isRemoteAssetDragEvent(event)) ||
             !isDragEventInsideCanvas(event)) {
@@ -579,6 +587,7 @@ const Canvas = ({ canvasContent, size }) => {
             (!isFileDragEvent(event) &&
                 !isAssetDragEvent(event) &&
                 !isComponentDragEvent(event) &&
+                !isElementDragEvent(event) &&
                 !isSfxDragEvent(event) &&
                 !isRemoteAssetDragEvent(event)) ||
             !isDragEventInsideCanvas(event)) {
@@ -636,6 +645,16 @@ const Canvas = ({ canvasContent, size }) => {
                 });
             }
             else {
+                const elementDragData = (0, element_drag_and_drop_1.getElementDragData)(event.dataTransfer);
+                if (elementDragData !== null) {
+                    await (0, import_assets_1.insertElement)({
+                        element: elementDragData.element,
+                        compositionFile,
+                        compositionId: currentCompositionId,
+                        dropPosition,
+                    });
+                    return;
+                }
                 const componentDragData = getComponentDragData(event);
                 if (componentDragData !== null) {
                     await (0, import_assets_1.insertComponent)({

package/dist/components/InspectorPanel/styles.js

@@ -36,6 +36,7 @@ exports.sectionHeader = {
     fontSize: 12,
     fontWeight: 'bold',
     padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    userSelect: 'none',
 };
 exports.sequenceHeader = {
     backgroundColor: colors_1.BACKGROUND,
@@ -96,6 +97,7 @@ exports.sectionHeaderTitle = {
     minWidth: 0,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    userSelect: 'none',
     whiteSpace: 'nowrap',
 };
 exports.sectionHeaderStart = {

package/dist/components/InspectorSequenceSection.js

@@ -1,8 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InspectorSequenceSection = exports.hasSequenceControls = exports.getInspectorSelectableItems = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const timeline_layout_1 = require("../helpers/timeline-layout");
@@ -55,6 +88,15 @@ const isEffectsRoot = (node) => {
 const getInspectorExpansionKey = (nodePathInfo) => {
     return JSON.stringify(nodePathInfo);
 };
+const getInspectorControlGroups = (rows) => {
+    return timeline_layout_1.SCHEMA_FIELD_GROUPS.map((group) => ({
+        ...group,
+        rows: rows.filter(({ node }) => {
+            var _a;
+            return node.kind === 'field' && ((_a = node.field) === null || _a === void 0 ? void 0 : _a.group) === group.id;
+        }),
+    })).filter((group) => group.rows.length > 0);
+};
 const getInspectorSelectableItems = (rows) => {
     return rows.flatMap(({ node }) => {
         const selection = (0, TimelineSelection_1.getTimelineSelectionFromNodePathInfo)(node.nodePathInfo);
@@ -116,6 +158,7 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
     }, [getIsExpanded, tree]);
     const controlSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(controlRows), [controlRows]);
     const effectSelectableItems = (0, react_1.useMemo)(() => (0, exports.getInspectorSelectableItems)(effectRows), [effectRows]);
+    const controlGroups = (0, react_1.useMemo)(() => getInspectorControlGroups(controlRows), [controlRows]);
     const { schema } = sequence.controls;
     const showEffectsSection = nodePathInfo.supportsEffects || effectRows.length > 0;
     const showControlsEffectsDivider = controlRows.length > 0 && showEffectsSection;
@@ -152,6 +195,6 @@ const InspectorSequenceSection = ({ sequence, validatedLocation, nodePathInfo, k
             ] }));
     }
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
-            jsx_runtime_1.jsx("div", { style: divider }), controlRows.length > 0 ? renderSectionHeader('Controls') : null, jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlRows.map(renderRow) }), showEffectsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showControlsEffectsDivider ? (jsx_runtime_1.jsx("div", { style: controlsEffectsDivider })) : null, renderEffectsHeader(), effectRows.length === 0 ? (jsx_runtime_1.jsx("div", { style: emptyState, children: "None" })) : (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) }))] })) : null] }));
+            jsx_runtime_1.jsx("div", { style: divider }), controlRows.length > 0 ? (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: controlSelectableItems, children: controlGroups.map((group, i) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i === 0 ? null : jsx_runtime_1.jsx("div", { style: controlsEffectsDivider }), renderSectionHeader(group.label), group.rows.map(renderRow)] }, group.id))) })) : null, showEffectsSection ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [showControlsEffectsDivider ? (jsx_runtime_1.jsx("div", { style: controlsEffectsDivider })) : null, renderEffectsHeader(), effectRows.length === 0 ? (jsx_runtime_1.jsx("div", { style: emptyState, children: "None" })) : (jsx_runtime_1.jsx(TimelineSelection_1.TimelineSelectionOrderProvider, { items: effectSelectableItems, children: effectRows.map(renderRow) }))] })) : null] }));
 };
 exports.InspectorSequenceSection = InspectorSequenceSection;

package/dist/components/SelectedOutlineUvControls.js

@@ -41,6 +41,7 @@ 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_measurement_2 = 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");
@@ -52,6 +53,7 @@ const getSvgPointFromPointerEvent = ({ event, rect, }) => {
 };
 const uvHandleRadius = 4.25;
 const selectedUvHandleRadius = 6.8;
+const ellipseControlRadius = 5.2;
 const uvHandleStyle = {
     filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28))',
 };
@@ -69,7 +71,454 @@ const getSelectedOutlineUvHandleTimelineSelection = ({ effectIndex, fieldKey, no
 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 ellipses = (0, react_1.useMemo)(() => (0, selected_outline_uv_1.getUvHandleConnectionEllipses)({
+        handles,
+        dimensions: outline.dimensions,
+        points: outline.points,
+    }), [handles, outline.dimensions, outline.points]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [ellipses.map((ellipse) => (jsx_runtime_1.jsx("polyline", { points: ellipse.points
+                    .map((point) => `${point.x},${point.y}`)
+                    .join(' '), fill: "none", stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: "none" }, ellipse.key))), 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 fieldDefaultToString = (value) => value !== undefined ? JSON.stringify(value) : null;
+const shouldSaveNumericEffectValue = ({ defaultValue, field, value, }) => {
+    if (value === null) {
+        return false;
+    }
+    if (field.propStatus.status === 'keyframed') {
+        return field.value !== value;
+    }
+    const stringifiedValue = JSON.stringify(value);
+    return (field.propStatus.codeValue !== value &&
+        !(defaultValue === stringifiedValue &&
+            field.propStatus.codeValue === undefined));
+};
+const saveNumericEffectField = ({ clearEffectDragOverrides, clientId, effectIndex, field, lastValue, nodePath, schema, setPropStatuses, sourceFrame, }) => {
+    const defaultValue = fieldDefaultToString(field.fieldDefault);
+    if (!shouldSaveNumericEffectValue({
+        defaultValue,
+        field,
+        value: lastValue,
+    })) {
+        clearEffectDragOverrides(nodePath, effectIndex);
+        return;
+    }
+    (field.propStatus.status === 'keyframed'
+        ? (0, call_add_keyframe_1.callAddEffectKeyframe)({
+            fileName: nodePath.absolutePath,
+            nodePath,
+            effectIndex,
+            fieldKey: field.fieldKey,
+            sourceFrame,
+            value: lastValue,
+            schema,
+            setPropStatuses,
+            clientId,
+        })
+        : (0, save_effect_prop_1.saveEffectProp)({
+            type: 'value',
+            fileName: nodePath.absolutePath,
+            nodePath,
+            effectIndex,
+            fieldKey: field.fieldKey,
+            value: lastValue,
+            defaultValue,
+            schema,
+            setPropStatuses,
+            clientId,
+        })).finally(() => {
+        clearEffectDragOverrides(nodePath, effectIndex);
+    });
+};
+const getLocalEllipseAxisValue = ({ axis, center, dimensions, point, rotation, }) => {
+    const radians = (rotation / 180) * Math.PI;
+    const deltaX = point[0] - center[0];
+    const deltaY = point[1] - center[1];
+    const axisX = axis === 'width' ? Math.cos(radians) : -Math.sin(radians);
+    const axisY = axis === 'width' ? Math.sin(radians) : Math.cos(radians);
+    if (dimensions !== null && dimensions.width > 0 && dimensions.height > 0) {
+        const pixelDeltaX = deltaX * dimensions.width;
+        const pixelDeltaY = deltaY * dimensions.height;
+        const pixelAxisValue = pixelDeltaX * axisX + pixelDeltaY * axisY;
+        return (pixelAxisValue / (axis === 'width' ? dimensions.width : dimensions.height));
+    }
+    return deltaX * axisX + deltaY * axisY;
+};
+const getLocalEllipseWidthProgress = ({ center, dimensions, point, rotation, width, }) => {
+    if (width <= 0.000001) {
+        return 0;
+    }
+    return (getLocalEllipseAxisValue({
+        axis: 'width',
+        center,
+        dimensions,
+        point,
+        rotation,
+    }) /
+        (width / 2));
+};
+const SelectedUvEllipseStartHandle = ({ control, onDraggingChange, outline }) => {
+    const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { startControl } = control;
+    const field = startControl === null || startControl === void 0 ? void 0 : startControl.field;
+    const onPointerDown = react_1.default.useCallback((event) => {
+        if (startControl === null || field === undefined) {
+            return;
+        }
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const svg = event.currentTarget.ownerSVGElement;
+        if (svg === null) {
+            return;
+        }
+        const svgRect = svg.getBoundingClientRect();
+        const startPointerX = event.clientX;
+        const startPointerY = event.clientY;
+        let dragging = false;
+        let lastValue = null;
+        const updateFromPointerEvent = (pointerEvent) => {
+            const point = getSvgPointFromPointerEvent({
+                event: pointerEvent,
+                rect: svgRect,
+            });
+            const uv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(outline.points, point);
+            const nextValue = (0, selected_outline_uv_1.roundNumericUvEllipseValue)(getLocalEllipseWidthProgress({
+                center: control.handle.value,
+                dimensions: outline.dimensions,
+                point: uv,
+                rotation: control.rotation,
+                width: control.width,
+            }), field.fieldSchema);
+            lastValue = nextValue;
+            setEffectDragOverrides(control.handle.nodePath, control.handle.effectIndex, field.fieldKey, field.propStatus.status === 'keyframed'
+                ? remotion_1.Internals.makeKeyframedDragOverride({
+                    status: field.propStatus,
+                    frame: control.handle.sourceFrame,
+                    value: nextValue,
+                })
+                : remotion_1.Internals.makeStaticDragOverride(nextValue));
+        };
+        const onPointerMove = (moveEvent) => {
+            moveEvent.preventDefault();
+            const deltaX = moveEvent.clientX - startPointerX;
+            const deltaY = moveEvent.clientY - startPointerY;
+            if (!dragging) {
+                if (!(0, selected_outline_drag_1.isSelectedOutlineDragPastThreshold)({ deltaX, deltaY })) {
+                    return;
+                }
+                dragging = true;
+                (0, ForceSpecificCursor_1.forceSpecificCursor)(startControl.cursor);
+                onDraggingChange(true);
+            }
+            updateFromPointerEvent(moveEvent);
+        };
+        const onPointerUp = () => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerUp);
+            if (dragging) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                onDraggingChange(false);
+            }
+            saveNumericEffectField({
+                clearEffectDragOverrides,
+                clientId: control.handle.clientId,
+                effectIndex: control.handle.effectIndex,
+                field,
+                lastValue,
+                nodePath: control.handle.nodePath,
+                schema: control.handle.schema,
+                setPropStatuses,
+                sourceFrame: control.handle.sourceFrame,
+            });
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerUp);
+    }, [
+        clearEffectDragOverrides,
+        control.handle,
+        control.rotation,
+        control.width,
+        field,
+        onDraggingChange,
+        outline.dimensions,
+        outline.points,
+        setEffectDragOverrides,
+        setPropStatuses,
+        startControl,
+    ]);
+    if (startControl === null || field === undefined) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("circle", { cx: startControl.position.x, cy: startControl.position.y, r: ellipseControlRadius, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, style: uvHandleStyle, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: startControl.cursor, onPointerDown: onPointerDown }));
+};
+const SelectedUvEllipseResizeHandle = ({ axis, control, onDraggingChange, outline }) => {
+    const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const resizeControl = control.resize.find((item) => item.axis === axis);
+    const field = resizeControl === null || resizeControl === void 0 ? void 0 : resizeControl.field;
+    const onPointerDown = react_1.default.useCallback((event) => {
+        if (resizeControl === undefined || field === undefined) {
+            return;
+        }
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const svg = event.currentTarget.ownerSVGElement;
+        if (svg === null) {
+            return;
+        }
+        const svgRect = svg.getBoundingClientRect();
+        const startPointerX = event.clientX;
+        const startPointerY = event.clientY;
+        let dragging = false;
+        let lastValue = null;
+        const updateFromPointerEvent = (pointerEvent) => {
+            const point = getSvgPointFromPointerEvent({
+                event: pointerEvent,
+                rect: svgRect,
+            });
+            const uv = (0, selected_outline_uv_1.getUvCoordinateForPoint)(outline.points, point);
+            const axisValue = getLocalEllipseAxisValue({
+                axis,
+                center: control.handle.value,
+                dimensions: outline.dimensions,
+                point: uv,
+                rotation: control.rotation,
+            });
+            const nextValue = (0, selected_outline_uv_1.roundNumericUvEllipseValue)(Math.max(0, axisValue * 2), field.fieldSchema);
+            lastValue = nextValue;
+            setEffectDragOverrides(control.handle.nodePath, control.handle.effectIndex, field.fieldKey, field.propStatus.status === 'keyframed'
+                ? remotion_1.Internals.makeKeyframedDragOverride({
+                    status: field.propStatus,
+                    frame: control.handle.sourceFrame,
+                    value: nextValue,
+                })
+                : remotion_1.Internals.makeStaticDragOverride(nextValue));
+        };
+        const onPointerMove = (moveEvent) => {
+            moveEvent.preventDefault();
+            const deltaX = moveEvent.clientX - startPointerX;
+            const deltaY = moveEvent.clientY - startPointerY;
+            if (!dragging) {
+                if (!(0, selected_outline_drag_1.isSelectedOutlineDragPastThreshold)({ deltaX, deltaY })) {
+                    return;
+                }
+                dragging = true;
+                (0, ForceSpecificCursor_1.forceSpecificCursor)(resizeControl.cursor);
+                onDraggingChange(true);
+            }
+            updateFromPointerEvent(moveEvent);
+        };
+        const onPointerUp = () => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerUp);
+            if (dragging) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                onDraggingChange(false);
+            }
+            saveNumericEffectField({
+                clearEffectDragOverrides,
+                clientId: control.handle.clientId,
+                effectIndex: control.handle.effectIndex,
+                field,
+                lastValue,
+                nodePath: control.handle.nodePath,
+                schema: control.handle.schema,
+                setPropStatuses,
+                sourceFrame: control.handle.sourceFrame,
+            });
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerUp);
+    }, [
+        axis,
+        clearEffectDragOverrides,
+        control.handle,
+        control.rotation,
+        field,
+        onDraggingChange,
+        outline.dimensions,
+        outline.points,
+        resizeControl,
+        setEffectDragOverrides,
+        setPropStatuses,
+    ]);
+    if (resizeControl === undefined || field === undefined) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("circle", { cx: resizeControl.position.x, cy: resizeControl.position.y, r: ellipseControlRadius, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, style: uvHandleStyle, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: resizeControl.cursor, onPointerDown: onPointerDown }));
+};
+const snapRotationDegrees = (value) => Math.round(value / selected_outline_drag_1.selectedOutlineRotationSnapStepDegrees) *
+    selected_outline_drag_1.selectedOutlineRotationSnapStepDegrees;
+const trimLineToCircleEdges = ({ from, fromRadius, to, toRadius, }) => {
+    const deltaX = to.x - from.x;
+    const deltaY = to.y - from.y;
+    const distance = Math.hypot(deltaX, deltaY);
+    if (distance <= fromRadius + toRadius || distance <= 0.000001) {
+        const middle = {
+            x: (from.x + to.x) / 2,
+            y: (from.y + to.y) / 2,
+        };
+        return { from: middle, to: middle };
+    }
+    const unitX = deltaX / distance;
+    const unitY = deltaY / distance;
+    return {
+        from: {
+            x: from.x + unitX * fromRadius,
+            y: from.y + unitY * fromRadius,
+        },
+        to: {
+            x: to.x - unitX * toRadius,
+            y: to.y - unitY * toRadius,
+        },
+    };
+};
+const SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
+    const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { rotationControl } = control;
+    const field = rotationControl === null || rotationControl === void 0 ? void 0 : rotationControl.field;
+    const onPointerDown = react_1.default.useCallback((event) => {
+        if (rotationControl === null || field === undefined) {
+            return;
+        }
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const svg = event.currentTarget.ownerSVGElement;
+        if (svg === null) {
+            return;
+        }
+        const svgRect = svg.getBoundingClientRect();
+        const { center } = control;
+        const startPointer = { x: event.clientX, y: event.clientY };
+        let previousAngle = (0, selected_outline_measurement_2.getAngleDegrees)(center, {
+            x: event.clientX - svgRect.left,
+            y: event.clientY - svgRect.top,
+        });
+        const startCursorDegrees = previousAngle;
+        let accumulatedDelta = 0;
+        let rotationLocked = event.shiftKey;
+        let dragging = false;
+        let lastValue = null;
+        const updateRotationDragOverride = () => {
+            const rawValue = control.rotation + accumulatedDelta;
+            const snappedValue = rotationLocked
+                ? snapRotationDegrees(rawValue)
+                : rawValue;
+            const nextValue = (0, selected_outline_uv_1.roundNumericUvEllipseValue)(snappedValue, field.fieldSchema);
+            const cursorDelta = (0, selected_outline_measurement_2.getSelectedOutlineRotationDeltaDegrees)({
+                from: control.rotation,
+                to: nextValue,
+            });
+            lastValue = nextValue;
+            (0, ForceSpecificCursor_1.forceSpecificCursor)((0, selected_outline_measurement_2.getRotationCursor)(startCursorDegrees + cursorDelta));
+            setEffectDragOverrides(control.handle.nodePath, control.handle.effectIndex, field.fieldKey, field.propStatus.status === 'keyframed'
+                ? remotion_1.Internals.makeKeyframedDragOverride({
+                    status: field.propStatus,
+                    frame: control.handle.sourceFrame,
+                    value: nextValue,
+                })
+                : remotion_1.Internals.makeStaticDragOverride(nextValue));
+        };
+        const onPointerMove = (moveEvent) => {
+            moveEvent.preventDefault();
+            const deltaX = moveEvent.clientX - startPointer.x;
+            const deltaY = moveEvent.clientY - startPointer.y;
+            if (!dragging) {
+                if (!(0, selected_outline_drag_1.isSelectedOutlineDragPastThreshold)({ deltaX, deltaY })) {
+                    return;
+                }
+                dragging = true;
+                onDraggingChange(true);
+            }
+            const nextAngle = (0, selected_outline_measurement_2.getAngleDegrees)(center, {
+                x: moveEvent.clientX - svgRect.left,
+                y: moveEvent.clientY - svgRect.top,
+            });
+            accumulatedDelta += (0, selected_outline_measurement_2.getSelectedOutlineRotationDeltaDegrees)({
+                from: previousAngle,
+                to: nextAngle,
+            });
+            previousAngle = nextAngle;
+            rotationLocked = moveEvent.shiftKey;
+            updateRotationDragOverride();
+        };
+        const onKeyChange = (keyEvent) => {
+            if (keyEvent.key !== 'Shift') {
+                return;
+            }
+            const nextRotationLocked = keyEvent.type === 'keydown';
+            if (nextRotationLocked === rotationLocked) {
+                return;
+            }
+            rotationLocked = nextRotationLocked;
+            if (dragging) {
+                updateRotationDragOverride();
+            }
+        };
+        const onPointerUp = () => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerUp);
+            window.removeEventListener('keydown', onKeyChange);
+            window.removeEventListener('keyup', onKeyChange);
+            if (dragging) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
+                onDraggingChange(false);
+            }
+            saveNumericEffectField({
+                clearEffectDragOverrides,
+                clientId: control.handle.clientId,
+                effectIndex: control.handle.effectIndex,
+                field,
+                lastValue,
+                nodePath: control.handle.nodePath,
+                schema: control.handle.schema,
+                setPropStatuses,
+                sourceFrame: control.handle.sourceFrame,
+            });
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerUp);
+        window.addEventListener('keydown', onKeyChange);
+        window.addEventListener('keyup', onKeyChange);
+    }, [
+        clearEffectDragOverrides,
+        control,
+        field,
+        onDraggingChange,
+        rotationControl,
+        setEffectDragOverrides,
+        setPropStatuses,
+    ]);
+    if (rotationControl === null || field === undefined) {
+        return null;
+    }
+    const heightControl = control.resize.find((item) => item.axis === 'height');
+    if (heightControl === undefined) {
+        return null;
+    }
+    const connector = trimLineToCircleEdges({
+        from: heightControl.position,
+        fromRadius: ellipseControlRadius,
+        to: rotationControl.position,
+        toRadius: ellipseControlRadius,
+    });
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("line", { x1: connector.from.x, y1: connector.from.y, x2: connector.to.x, y2: connector.to.y, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: "none" }), jsx_runtime_1.jsx("circle", { cx: rotationControl.position.x, cy: rotationControl.position.y, r: ellipseControlRadius, fill: "white", stroke: colors_1.BLUE, strokeWidth: 2, style: uvHandleStyle, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: (0, selected_outline_measurement_2.getRotationCursor)((0, selected_outline_measurement_2.getAngleDegrees)(control.center, rotationControl.position)), onPointerDown: onPointerDown })
+        ] }));
 };
 const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSelect, outline }) => {
     const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -213,9 +662,19 @@ const SelectedOutlineUvHandleConnectionLayer = ({ outline, target }) => {
 };
 exports.SelectedOutlineUvHandleConnectionLayer = SelectedOutlineUvHandleConnectionLayer;
 const SelectedOutlineUvHandleCircleLayer = ({ onDraggingChange, onSelect, outline, target }) => {
+    const ellipseControls = (0, react_1.useMemo)(() => {
+        var _a;
+        return (0, selected_outline_uv_1.getUvEllipseInteractiveControls)({
+            handles: (_a = target === null || target === void 0 ? void 0 : target.uvHandles) !== null && _a !== void 0 ? _a : [],
+            dimensions: outline.dimensions,
+            points: outline.points,
+        });
+    }, [outline.dimensions, outline.points, target === null || target === void 0 ? void 0 : target.uvHandles]);
     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, nodePathInfo: target.nodePathInfo, onDraggingChange: onDraggingChange, onSelect: onSelect, outline: outline }, `${handle.effectIndex}-${handle.fieldKey}`))) }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [ellipseControls.map((control) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
+                    jsx_runtime_1.jsx(SelectedUvEllipseStartHandle, { control: control, onDraggingChange: onDraggingChange, outline: outline }), jsx_runtime_1.jsx(SelectedUvEllipseResizeHandle, { axis: "width", control: control, onDraggingChange: onDraggingChange, outline: outline }), jsx_runtime_1.jsx(SelectedUvEllipseResizeHandle, { axis: "height", control: control, onDraggingChange: onDraggingChange, outline: outline }), jsx_runtime_1.jsx(SelectedUvEllipseRotationHandle, { control: control, onDraggingChange: onDraggingChange })
+                ] }, `${control.handle.effectIndex}-${control.handle.fieldKey}-ellipse-controls`))), 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;