@remotion/studio 4.0.482 → 4.0.484

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;