@remotion/studio 4.0.485 → 4.0.487

package/dist/components/SelectedOutlineElement.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineElement = void 0;
+exports.SelectedOutlineElement = exports.SelectedOutlineTransformOriginHandle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
@@ -43,6 +43,7 @@ const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const format_file_location_1 = require("../helpers/format-file-location");
 const open_in_editor_1 = require("../helpers/open-in-editor");
+const editor_snapping_1 = require("../state/editor-snapping");
 const modals_1 = require("../state/modals");
 const call_api_1 = require("./call-api");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
@@ -53,6 +54,7 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const options_sidebar_tabs_1 = require("./options-sidebar-tabs");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
+const selected_outline_snap_1 = require("./selected-outline-snap");
 const selected_outline_types_1 = require("./selected-outline-types");
 const selected_outline_uv_1 = require("./selected-outline-uv");
 const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
@@ -70,6 +72,7 @@ const emptyContextMenuValues = [];
 const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, target }) => {
     var _a;
     const { setDragOverrides, clearDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const transformOriginDrag = (_a = target === null || target === void 0 ? void 0 : target.transformOriginDrag) !== null && _a !== void 0 ? _a : null;
     const parsed = (0, react_1.useMemo)(() => transformOriginDrag === null
         ? null
@@ -142,11 +145,13 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
             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 snappedUv = editorSnapping
+                ? (0, selected_outline_drag_1.snapSelectedOutlineTransformOriginUv)({
+                    point: snapPoint,
+                    points: outline.points,
+                    uv: axisLockedUv,
+                })
+                : axisLockedUv;
             const nextUv = (0, selected_outline_drag_1.applySelectedOutlineTransformOriginAxisLock)({
                 lockedAxis,
                 startUv: uv,
@@ -293,6 +298,7 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         window.addEventListener('keyup', onKeyChange);
     }, [
         clearDragOverrides,
+        editorSnapping,
         onDraggingChange,
         outline,
         parsed,
@@ -308,15 +314,17 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
         return null;
     }
     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))',
+            filter: colors_1.SELECTED_OUTLINE_DROP_SHADOW,
         }, 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" })
         ] }));
 };
-const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSelect, onTextEditStart, scale, target, }) => {
+exports.SelectedOutlineTransformOriginHandle = SelectedOutlineTransformOriginHandle;
+const SelectedOutlinePolygon = ({ allDragTargets, allDragOutlines, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, onTextEditStart, scale, snapTargets, target, }) => {
     var _a, _b, _c, _d;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
     timelinePositionRef.current = timelinePosition;
@@ -357,6 +365,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
         let currentPointerY = startPointerY;
         let axisLocked = false;
         let dragStarted = false;
+        let snappingDisabled = event.metaKey || event.ctrlKey;
         const updateDragOverrides = () => {
             const screenDeltaX = currentPointerX - startPointerX;
             const screenDeltaY = currentPointerY - startPointerY;
@@ -369,16 +378,44 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
                 }
                 dragStarted = true;
                 onDraggingChange(true);
+                (0, ForceSpecificCursor_1.forceSpecificCursor)('default');
             }
+            const axisLockedDirection = axisLocked
+                ? Math.abs(screenDeltaX) >= Math.abs(screenDeltaY)
+                    ? 'horizontal'
+                    : 'vertical'
+                : null;
             const dragDelta = (0, selected_outline_drag_1.applySelectedOutlineDragAxisLock)({
                 deltaX: screenDeltaX / scale,
                 deltaY: screenDeltaY / scale,
                 axisLocked,
             });
+            let { deltaX, deltaY } = dragDelta;
+            if (editorSnapping && !snappingDisabled) {
+                const snapResult = (0, selected_outline_snap_1.findSelectedOutlineSnap)({
+                    allowX: axisLockedDirection !== 'vertical',
+                    allowY: axisLockedDirection !== 'horizontal',
+                    deltaX,
+                    deltaY,
+                    outlines: selected ? allDragOutlines : [outline],
+                    scale,
+                    targets: snapTargets,
+                });
+                if (snapResult.snapOffsetX !== null) {
+                    deltaX += snapResult.snapOffsetX;
+                }
+                if (snapResult.snapOffsetY !== null) {
+                    deltaY += snapResult.snapOffsetY;
+                }
+                onSnapPointsChange(snapResult.activeSnapPoints);
+            }
+            else {
+                onSnapPointsChange([]);
+            }
             lastValues = (0, selected_outline_drag_1.getSelectedOutlineDragValues)({
                 dragStates,
-                deltaX: dragDelta.deltaX,
-                deltaY: dragDelta.deltaY,
+                deltaX,
+                deltaY,
             });
             for (const dragState of dragStates) {
                 const value = lastValues.get(dragState.key);
@@ -402,6 +439,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
             currentPointerX = moveEvent.clientX;
             currentPointerY = moveEvent.clientY;
             axisLocked = moveEvent.shiftKey;
+            snappingDisabled = moveEvent.metaKey || moveEvent.ctrlKey;
             updateDragOverrides();
         };
         const onKeyChange = (keyEvent) => {
@@ -422,6 +460,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
             window.removeEventListener('keydown', onKeyChange);
             window.removeEventListener('keyup', onKeyChange);
             if (dragStarted) {
+                (0, ForceSpecificCursor_1.stopForcingSpecificCursor)();
                 onDraggingChange(false);
             }
             const changes = (0, selected_outline_drag_1.getSelectedOutlineDragChanges)({
@@ -473,15 +512,20 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
         window.addEventListener('keyup', onKeyChange);
     }, [
         allDragTargets,
+        allDragOutlines,
         clearDragOverrides,
         drag,
+        editorSnapping,
         getDragOverrides,
         onDraggingChange,
         onSelect,
+        onSnapPointsChange,
+        outline,
         scale,
         selected,
         setPropStatuses,
         setDragOverrides,
+        snapTargets,
         target,
     ]);
     const onDoubleClick = react_1.default.useCallback((event) => {
@@ -532,7 +576,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
         });
     }, [effectDrop]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("polygon", { ref: polygonRef, points: points, fill: effectDropHovered ? 'rgba(0, 155, 255, 0.12)' : 'transparent', stroke: colors_1.BLUE, strokeOpacity: visible || effectDropHovered ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: target === undefined ? undefined : 'all', onPointerEnter: () => {
+            jsx_runtime_1.jsx("polygon", { ref: polygonRef, points: points, fill: effectDropHovered ? colors_1.TIMELINE_DROP_BLUE_ALPHA_12 : colors_1.TRANSPARENT, stroke: colors_1.BLUE, strokeOpacity: visible || effectDropHovered ? 1 : 0, strokeWidth: 2, vectorEffect: "non-scaling-stroke", pointerEvents: target === undefined ? undefined : 'all', onPointerEnter: () => {
                     if (!dragging) {
                         onHoverChange(outline.key);
                     }
@@ -696,7 +740,7 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("line", { ref: lineRef, x1: edgeInfo.start.x, y1: edgeInfo.start.y, x2: edgeInfo.end.x, y2: edgeInfo.end.y, stroke: "transparent", strokeWidth: 12, vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: edgeInfo.cursor, onPointerEnter: () => {
+            jsx_runtime_1.jsx("line", { ref: lineRef, x1: edgeInfo.start.x, y1: edgeInfo.start.y, x2: edgeInfo.end.x, y2: edgeInfo.end.y, stroke: colors_1.TRANSPARENT, strokeWidth: 12, vectorEffect: "non-scaling-stroke", pointerEvents: "stroke", cursor: edgeInfo.cursor, onPointerEnter: () => {
                     if (!dragging) {
                         onHoverChange(outline.key);
                     }
@@ -717,6 +761,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
     var _a, _b;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const timelinePositionRef = (0, react_1.useRef)(timelinePosition);
     timelinePositionRef.current = timelinePosition;
@@ -769,7 +814,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         let lastValues = new Map();
         let dragStarted = false;
         const updateRotationDragOverrides = () => {
-            const rotationDeltaDegrees = rotationLocked
+            const rotationDeltaDegrees = rotationLocked && editorSnapping
                 ? (0, selected_outline_drag_1.snapSelectedOutlineRotationDeltaDegrees)({
                     dragStates,
                     rotationDeltaDegrees: accumulatedDelta,
@@ -903,6 +948,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         allRotationDragTargets,
         clearDragOverrides,
         cornerInfo,
+        editorSnapping,
         getDragOverrides,
         onDraggingChange,
         outline.dimensions,
@@ -918,7 +964,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("circle", { ref: circleRef, cx: cornerInfo.point.x, cy: cornerInfo.point.y, r: 12, fill: "transparent", stroke: "transparent", vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: cornerInfo.cursor, onPointerEnter: () => {
+            jsx_runtime_1.jsx("circle", { ref: circleRef, cx: cornerInfo.point.x, cy: cornerInfo.point.y, r: 12, fill: colors_1.TRANSPARENT, stroke: colors_1.TRANSPARENT, vectorEffect: "non-scaling-stroke", pointerEvents: "all", cursor: cornerInfo.cursor, onPointerEnter: () => {
                     if (!dragging) {
                         onHoverChange(outline.key);
                     }
@@ -929,7 +975,7 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
                 }, onPointerDown: onPointerDown }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: circleRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
         ] }));
 };
-const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allScaleDragTargets, dragging, hovered, outline, onDraggingChange, onHoverChange, onSelect, scale, target, }) => {
+const SelectedOutlineElement = ({ allDragTargets, allDragOutlines, allRotationDragTargets, allScaleDragTargets, dragging, hovered, outline, onDraggingChange, onHoverChange, onSnapPointsChange, onSelect, scale, snapTargets, target, }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const updateResolvedStackTrace = (0, react_1.useContext)(remotion_1.Internals.SequenceStackTracesUpdateContext);
@@ -1113,11 +1159,10 @@ const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allSca
         updateResolvedStackTrace,
     ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, onTextEditStart: onTextEditStart, scale: scale, target: target }), (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
+            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSnapPointsChange: onSnapPointsChange, onSelect: onSelect, onTextEditStart: onTextEditStart, scale: scale, snapTargets: snapTargets, target: target }), (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
                 ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, edge)))
                 : null, (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
                 ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle, { allRotationDragTargets: allRotationDragTargets, contextMenuValues: emptyContextMenuValues, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, corner)))
-                : null, jsx_runtime_1.jsx(SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, target: target })
-        ] }));
+                : null] }));
 };
 exports.SelectedOutlineElement = SelectedOutlineElement;

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -10,6 +10,8 @@ export declare const orderOutlinesForRendering: ({ outlines, targetsByKey, }: {
     readonly targetsByKey: ReadonlyMap<string, SelectedOutlineTarget>;
 }) => readonly SelectedOutline[];
 export declare const SelectedOutlineOverlay: React.FC<{
+    readonly compositionHeight: number;
+    readonly compositionWidth: number;
     readonly scale: number;
     readonly translationX: number;
     readonly translationY: number;

package/dist/components/SelectedOutlineOverlay.js

@@ -41,11 +41,13 @@ const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../helpers/client-id");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const editor_guides_1 = require("../state/editor-guides");
 const editor_outlines_1 = require("../state/editor-outlines");
 const scale_lock_1 = require("../state/scale-lock");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
+const selected_outline_snap_1 = require("./selected-outline-snap");
 const selected_outline_types_1 = require("./selected-outline-types");
 const selected_outline_uv_1 = require("./selected-outline-uv");
 const SelectedOutlineElement_1 = require("./SelectedOutlineElement");
@@ -95,6 +97,19 @@ const outlineContainer = {
     pointerEvents: 'none',
     overflow: 'visible',
 };
+const SelectedOutlineSnapIndicators = ({ activeSnapPoints, compositionHeight, compositionWidth, scale }) => {
+    if (activeSnapPoints.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx("g", { pointerEvents: "none", children: activeSnapPoints.map((snapPoint) => {
+            if (snapPoint.target.axis === 'x') {
+                const x = snapPoint.target.position * scale;
+                return (jsx_runtime_1.jsx("line", { x1: x, x2: x, y1: 0, y2: compositionHeight * scale, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
+            }
+            const y = snapPoint.target.position * scale;
+            return (jsx_runtime_1.jsx("line", { x1: 0, x2: compositionWidth * scale, y1: y, y2: y, stroke: selected_outline_snap_1.selectedOutlineSnapIndicatorColor, strokeWidth: 1, vectorEffect: "non-scaling-stroke" }, `${snapPoint.target.axis}-${snapPoint.target.type}-${snapPoint.target.position}-${snapPoint.edge}`));
+        }) }));
+};
 const orderOutlinesForRendering = ({ outlines, targetsByKey, }) => {
     return [...outlines].sort((a, b) => {
         var _a, _b;
@@ -105,9 +120,10 @@ const orderOutlinesForRendering = ({ outlines, targetsByKey, }) => {
     });
 };
 exports.orderOutlinesForRendering = orderOutlinesForRendering;
-const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
+const SelectedOutlineOverlay = ({ compositionHeight, compositionWidth, scale, translationX, translationY, }) => {
     const { selectedItems, selectItem } = (0, TimelineSelection_1.useTimelineSelection)();
     const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
@@ -115,12 +131,14 @@ const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { getScaleLockState } = (0, react_1.useContext)(scale_lock_1.ScaleLockContext);
     const { editorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
+    const { editorShowGuides, guidesList } = (0, react_1.useContext)(editor_guides_1.EditorShowGuidesContext);
     const { frameBack, frameForward, getCurrentFrame, seek } = player_1.PlayerInternals.usePlayer();
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const [outlines, setOutlines] = (0, react_1.useState)([]);
     const [hoveredOutlineKey, setHoveredOutlineKey] = (0, react_1.useState)(null);
     const [draggingOutline, setDraggingOutline] = (0, react_1.useState)(false);
+    const [activeSnapPoints, setActiveSnapPoints] = (0, react_1.useState)([]);
     const overlayRef = (0, react_1.useRef)(null);
     const keyboardNudgeSessionRef = (0, react_1.useRef)(null);
     const saveKeyboardNudgeSessionRef = (0, react_1.useRef)(() => undefined);
@@ -129,6 +147,12 @@ const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
         if (dragging) {
             setHoveredOutlineKey(null);
         }
+        else {
+            setActiveSnapPoints([]);
+        }
+    }, []);
+    const onSnapPointsChange = (0, react_1.useCallback)((snapPoints) => {
+        setActiveSnapPoints(snapPoints);
     }, []);
     const selectOutlineItem = (0, react_1.useCallback)((item, interaction) => {
         selectItem(item, interaction, undefined, { reveal: true });
@@ -391,11 +415,24 @@ const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
     const outlinesForRendering = (0, react_1.useMemo)(() => {
         return (0, exports.orderOutlinesForRendering)({ outlines, targetsByKey });
     }, [outlines, targetsByKey]);
+    const outlinesByKey = (0, react_1.useMemo)(() => {
+        return new Map(outlines.map((outline) => [outline.key, outline]));
+    }, [outlines]);
     const allDragTargets = (0, react_1.useMemo)(() => {
         return outlineTargets.flatMap((target) => (target.selected || target.containsSelection) && target.drag !== null
             ? [target.drag]
             : []);
     }, [outlineTargets]);
+    const allDragOutlines = (0, react_1.useMemo)(() => {
+        return outlineTargets.flatMap((target) => {
+            if ((!target.selected && !target.containsSelection) ||
+                target.drag === null) {
+                return [];
+            }
+            const outline = outlinesByKey.get(target.key);
+            return outline === undefined ? [] : [outline];
+        });
+    }, [outlineTargets, outlinesByKey]);
     const allScaleDragTargets = (0, react_1.useMemo)(() => {
         return outlineTargets.flatMap((target) => target.selected && target.scaleDrag !== null ? [target.scaleDrag] : []);
     }, [outlineTargets]);
@@ -404,6 +441,19 @@ const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
             ? [target.rotationDrag]
             : []);
     }, [outlineTargets]);
+    const guidesForSnap = (0, react_1.useMemo)(() => {
+        if (!editorShowGuides || (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) !== 'composition') {
+            return [];
+        }
+        return guidesList.filter((guide) => guide.compositionId === canvasContent.compositionId);
+    }, [canvasContent, editorShowGuides, guidesList]);
+    const snapTargets = (0, react_1.useMemo)(() => {
+        return (0, selected_outline_snap_1.getSelectedOutlineSnapTargets)({
+            compositionHeight,
+            compositionWidth,
+            guides: guidesForSnap,
+        });
+    }, [compositionHeight, compositionWidth, guidesForSnap]);
     const saveKeyboardNudgeSession = (0, react_1.useCallback)(() => {
         const session = keyboardNudgeSessionRef.current;
         if (session === null) {
@@ -671,6 +721,7 @@ const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
     if (outlineTargets.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsxs("svg", { ref: overlayRef, style: outlineContainer, width: "100%", height: "100%", "aria-hidden": "true", children: [outlinesForRendering.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: selectOutlineItem, scale: scale, target: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: selectOutlineItem, 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: [
+            jsx_runtime_1.jsx(SelectedOutlineSnapIndicators, { activeSnapPoints: activeSnapPoints, compositionHeight: compositionHeight, compositionWidth: compositionWidth, scale: scale }), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineElement, { allDragTargets: allDragTargets, allDragOutlines: allDragOutlines, allRotationDragTargets: allRotationDragTargets, allScaleDragTargets: allScaleDragTargets, dragging: draggingOutline, hovered: hoveredOutlineKey === outline.key, outline: outline, onDraggingChange: onDraggingChange, onHoverChange: setHoveredOutlineKey, onSnapPointsChange: onSnapPointsChange, onSelect: selectOutlineItem, scale: scale, snapTargets: snapTargets, target: targetsByKey.get(outline.key) }, outline.key))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineElement_1.SelectedOutlineTransformOriginHandle, { outline: outline, onDraggingChange: onDraggingChange, target: targetsByKey.get(outline.key) }, `${outline.key}-transform-origin`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleConnectionLayer, { outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-connection-lines`))), outlinesForRendering.map((outline) => (jsx_runtime_1.jsx(SelectedOutlineUvControls_1.SelectedOutlineUvHandleCircleLayer, { onDraggingChange: onDraggingChange, onSelect: selectOutlineItem, outline: outline, target: targetsByKey.get(outline.key) }, `${outline.key}-uv-handles`)))] }));
 };
 exports.SelectedOutlineOverlay = SelectedOutlineOverlay;

package/dist/components/SelectedOutlineUvControls.js

@@ -38,6 +38,7 @@ 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 editor_snapping_1 = require("../state/editor-snapping");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
@@ -55,7 +56,7 @@ 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))',
+    filter: colors_1.SELECTED_OUTLINE_UV_DROP_SHADOW,
 };
 const getSelectedOutlineUvHandleTimelineSelection = ({ effectIndex, fieldKey, nodePathInfo, }) => {
     return {
@@ -254,7 +255,7 @@ const SelectedUvEllipseStartHandle = ({ control, onDraggingChange, outline }) =>
     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 }));
+    return (jsx_runtime_1.jsx("circle", { cx: startControl.position.x, cy: startControl.position.y, r: ellipseControlRadius, fill: colors_1.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);
@@ -354,7 +355,7 @@ const SelectedUvEllipseResizeHandle = ({ axis, control, onDraggingChange, outlin
     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 }));
+    return (jsx_runtime_1.jsx("circle", { cx: resizeControl.position.x, cy: resizeControl.position.y, r: ellipseControlRadius, fill: colors_1.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;
@@ -384,6 +385,7 @@ const trimLineToCircleEdges = ({ from, fromRadius, to, toRadius, }) => {
 };
 const SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
     const { setEffectDragOverrides, clearEffectDragOverrides, setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     const { rotationControl } = control;
     const field = rotationControl === null || rotationControl === void 0 ? void 0 : rotationControl.field;
     const onPointerDown = react_1.default.useCallback((event) => {
@@ -413,7 +415,7 @@ const SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
         let lastValue = null;
         const updateRotationDragOverride = () => {
             const rawValue = control.rotation + accumulatedDelta;
-            const snappedValue = rotationLocked
+            const snappedValue = rotationLocked && editorSnapping
                 ? snapRotationDegrees(rawValue)
                 : rawValue;
             const nextValue = (0, selected_outline_uv_1.roundNumericUvEllipseValue)(snappedValue, field.fieldSchema);
@@ -497,6 +499,7 @@ const SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
     }, [
         clearEffectDragOverrides,
         control,
+        editorSnapping,
         field,
         onDraggingChange,
         rotationControl,
@@ -517,11 +520,12 @@ const SelectedUvEllipseRotationHandle = ({ control, onDraggingChange }) => {
         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 })
+            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: colors_1.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);
+    const { editorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
     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) => {
         if (event.button !== 0) {
@@ -556,11 +560,13 @@ const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSele
                 rect: svgRect,
             });
             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 snappedUv = editorSnapping
+                ? (0, selected_outline_drag_1.snapSelectedOutlineUv)({
+                    point,
+                    points: outline.points,
+                    uv: rawUv,
+                })
+                : 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'
@@ -644,6 +650,7 @@ const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSele
         window.addEventListener('pointercancel', onPointerUp);
     }, [
         clearEffectDragOverrides,
+        editorSnapping,
         handle,
         nodePathInfo,
         onDraggingChange,
@@ -652,7 +659,7 @@ const SelectedUvHandleCircle = ({ handle, nodePathInfo, onDraggingChange, onSele
         setPropStatuses,
         setEffectDragOverrides,
     ]);
-    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 }));
+    return (jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: handle.isSelected ? selectedUvHandleRadius : uvHandleRadius, fill: colors_1.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) {

package/dist/components/SidebarCollapserControls.js

@@ -4,6 +4,7 @@ exports.SidebarCollapserControls = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../error-overlay/remotion-overlay/ShortcutHint");
+const colors_1 = require("../helpers/colors");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const sidebar_1 = require("../state/sidebar");
 const InlineAction_1 = require("./InlineAction");
@@ -12,9 +13,9 @@ const style = {
     width: 16,
     height: 16,
     minWidth: 16,
-    border: '1px solid currentColor',
+    border: colors_1.BORDER_CURRENT_COLOR,
     borderRadius: 3,
-    color: 'currentColor',
+    color: colors_1.CURRENT_COLOR,
     position: 'relative',
 };
 const SidebarCollapserControls = () => {
@@ -26,7 +27,7 @@ const SidebarCollapserControls = () => {
             width: '35%',
             height: '100%',
             borderRight: '1px solid ' + color,
-            background: leftSidebarStatus === 'expanded' ? color : 'transparent',
+            background: leftSidebarStatus === 'expanded' ? color : colors_1.TRANSPARENT,
         };
     }, [leftSidebarStatus]);
     const rightIcon = (0, react_1.useCallback)((color) => {
@@ -36,7 +37,7 @@ const SidebarCollapserControls = () => {
             right: 0,
             position: 'absolute',
             borderLeft: '1px solid ' + color,
-            background: sidebarCollapsedStateRight === 'expanded' ? color : 'transparent',
+            background: sidebarCollapsedStateRight === 'expanded' ? color : colors_1.TRANSPARENT,
         };
     }, [sidebarCollapsedStateRight]);
     const toggleLeft = (0, react_1.useCallback)(() => {

package/dist/components/SnappingProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SnappingProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/components/SnappingProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnappingProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const editor_snapping_1 = require("../state/editor-snapping");
+const SnappingProvider = ({ children }) => {
+    const [editorSnapping, setEditorSnappingState] = (0, react_1.useState)(() => (0, editor_snapping_1.loadEditorSnappingOption)());
+    const setEditorSnapping = (0, react_1.useCallback)((newValue) => {
+        setEditorSnappingState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, editor_snapping_1.persistEditorSnappingOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const editorSnappingCtx = (0, react_1.useMemo)(() => {
+        return {
+            editorSnapping,
+            setEditorSnapping,
+        };
+    }, [editorSnapping, setEditorSnapping]);
+    return (jsx_runtime_1.jsx(editor_snapping_1.EditorSnappingContext.Provider, { value: editorSnappingCtx, children: children }));
+};
+exports.SnappingProvider = SnappingProvider;

package/dist/components/SnappingToggle.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SnappingToggle: React.FC;

package/dist/components/SnappingToggle.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SnappingToggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const no_react_1 = require("remotion/no-react");
+const colors_1 = require("../helpers/colors");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const magnet_1 = require("../icons/magnet");
+const editor_snapping_1 = require("../state/editor-snapping");
+const ControlButton_1 = require("./ControlButton");
+const SnappingToggle = () => {
+    const { editorSnapping, setEditorSnapping } = (0, react_1.useContext)(editor_snapping_1.EditorSnappingContext);
+    const onClick = (0, react_1.useCallback)(() => {
+        setEditorSnapping((current) => !current);
+    }, [setEditorSnapping]);
+    const color = editorSnapping ? colors_1.BLUE : colors_1.WHITE;
+    const accessibilityLabel = [
+        editorSnapping ? 'Disable snapping' : 'Enable snapping',
+        (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(Shift+M)',
+    ]
+        .filter(no_react_1.NoReactInternals.truthy)
+        .join(' ');
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, "aria-pressed": editorSnapping, "aria-keyshortcuts": "Shift+M", onClick: onClick, children: jsx_runtime_1.jsx(magnet_1.MagnetIcon, { style: { width: 17, height: 17 }, fill: color, "aria-hidden": "true", focusable: "false" }) }));
+};
+exports.SnappingToggle = SnappingToggle;

package/dist/components/Splitter/SplitterContext.d.ts

@@ -14,7 +14,7 @@ export type TSplitterContext = {
     defaultFlex: number;
     id: string;
     persistFlex: (value: number) => void;
-    isDragging: React.MutableRefObject<false | {
+    isDragging: React.RefObject<false | {
         x: number;
         y: number;
     }>;

package/dist/components/Splitter/SplitterElement.js

@@ -4,6 +4,7 @@ exports.SplitterElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
 const SplitterContext_1 = require("./SplitterContext");
 const SplitterElement = ({ children, type, sticky }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
@@ -24,7 +25,7 @@ const SplitterElement = ({ children, type, sticky }) => {
             left: (type === 'flexer' ? 0 : context.flexValue) * 100 + '%',
             width: (type === 'flexer' ? context.flexValue : 1 - context.flexValue) * 100 +
                 '%',
-            backgroundColor: (0, remotion_1.interpolateColors)((0, remotion_1.random)(context.flexValue), [0, 1], ['red', 'blue']),
+            backgroundColor: (0, remotion_1.interpolateColors)((0, remotion_1.random)(context.flexValue), [0, 1], [colors_1.RED, 'blue']),
         };
     }, [context.flexValue, type]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [

package/dist/components/StaticFilePreview.js

@@ -11,7 +11,7 @@ const FilePreview_1 = require("./FilePreview");
 const use_static_files_1 = require("./use-static-files");
 const msgStyle = {
     fontSize: 13,
-    color: 'white',
+    color: colors_1.WHITE,
     fontFamily: 'sans-serif',
     display: 'flex',
     justifyContent: 'center',