@remotion/studio 4.0.477 → 4.0.479

package/dist/components/SelectedOutlineUvControls.js

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

package/dist/components/Tabs/index.js

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

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

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