@remotion/studio 4.0.486 → 4.0.488

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -40,6 +40,7 @@ const remotion_1 = require("remotion");
 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 interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const modals_1 = require("../../state/modals");
@@ -158,6 +159,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
+    const previewInteractive = previewConnected && interactivity_enabled_1.studioInteractivityEnabled;
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -191,7 +193,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         };
     }, [originalLocation]);
     const { canRename: canRenameThisSequence, displayName, fallbackDisplayName, propStatusesForOverride, saveName, } = (0, use_rename_sequence_1.useRenameSequence)({
-        clientId: previewServerState.type === 'connected'
+        clientId: previewInteractive && previewServerState.type === 'connected'
             ? previewServerState.clientId
             : null,
         nodePathInfo,
@@ -201,25 +203,25 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
     const parentId = (_e = sequence.parent) !== null && _e !== void 0 ? _e : null;
-    const canReorderSequence = previewConnected &&
+    const canReorderSequence = previewInteractive &&
         Boolean(nodePath && nodePathKey && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) &&
         (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) === 1;
-    const canHandleSequenceDrag = previewConnected;
+    const canHandleSequenceDrag = previewInteractive;
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
-    const deleteDisabled = (0, react_1.useMemo)(() => !previewConnected || !sequence.controls || !canDeleteFromSource, [previewConnected, sequence.controls, canDeleteFromSource]);
+    const deleteDisabled = (0, react_1.useMemo)(() => !previewInteractive || !sequence.controls || !canDeleteFromSource, [previewInteractive, sequence.controls, canDeleteFromSource]);
     const duplicateDisabled = deleteDisabled;
-    const disableInteractivityDisabled = !previewConnected ||
+    const disableInteractivityDisabled = !previewInteractive ||
         !sequence.showInTimeline ||
         !nodePath ||
         !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source);
     const onDuplicateSequenceFromSource = (0, react_1.useCallback)(() => {
-        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePathInfo) {
+        if (duplicateDisabled || !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePathInfo) {
             return;
         }
         (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([nodePathInfo], confirm).catch(() => undefined);
-    }, [confirm, nodePathInfo, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
+    }, [confirm, duplicateDisabled, nodePathInfo, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
-        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
+        if (deleteDisabled || !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
             return;
         }
         if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
@@ -253,7 +255,13 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         catch (err) {
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         }
-    }, [confirm, nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, nodePathInfo]);
+    }, [
+        confirm,
+        deleteDisabled,
+        nodePath,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
+        nodePathInfo,
+    ]);
     const onDisableSequenceInteractivity = (0, react_1.useCallback)(() => {
         if (disableInteractivityDisabled ||
             !nodePath ||
@@ -517,8 +525,9 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             }
             : inner;
     }, [effectDropHovered, inner]);
-    const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
-    const canToggleVisibility = previewConnected &&
+    const hasExpandableContent = interactivity_enabled_1.studioInteractivityEnabled &&
+        (Boolean(sequence.controls) || sequence.effects.length > 0);
+    const canToggleVisibility = previewInteractive &&
         Boolean(sequence.controls) &&
         nodePath !== null &&
         validatedLocation !== null &&
@@ -583,7 +592,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         setIsRenaming(true);
     }, [canRenameThisSequence]);
     const freezeFrameMenuItem = (0, use_sequence_freeze_frame_menu_item_1.useSequenceFreezeFrameMenuItem)({
-        clientId: previewServerState.type === 'connected'
+        clientId: previewInteractive && previewServerState.type === 'connected'
             ? previewServerState.clientId
             : null,
         nodePath,
@@ -595,7 +604,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         validatedSource: (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _f !== void 0 ? _f : null,
     });
     const canAddEffect = (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects) === true &&
-        previewServerState.type === 'connected' &&
+        previewInteractive &&
         Boolean(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source);
     const onAddEffect = (0, react_1.useCallback)(() => {
         if (!canAddEffect ||
@@ -628,7 +637,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             disableInteractivityDisabled,
             duplicateDisabled,
             fileLocation,
-            includeSourceEditItems: true,
+            includeSourceEditItems: interactivity_enabled_1.studioInteractivityEnabled,
             onDeleteSequenceFromSource,
             onDisableSequenceInteractivity,
             onDuplicateSequenceFromSource,
@@ -636,43 +645,45 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             originalLocation,
             selectAsset,
             sequence,
-            sourceActions: [
-                ...((nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects)
-                    ? [
-                        {
-                            type: 'item',
-                            id: 'add-effect',
-                            keyHint: null,
-                            label: 'Add effect...',
-                            leftItem: null,
-                            disabled: !canAddEffect,
-                            onClick: onAddEffect,
-                            quickSwitcherLabel: null,
-                            subMenu: null,
-                            value: 'add-effect',
-                        },
-                        {
-                            type: 'divider',
-                            id: 'add-effect-divider',
+            sourceActions: interactivity_enabled_1.studioInteractivityEnabled
+                ? [
+                    ...((nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects)
+                        ? [
+                            {
+                                type: 'item',
+                                id: 'add-effect',
+                                keyHint: null,
+                                label: 'Add effect...',
+                                leftItem: null,
+                                disabled: !canAddEffect,
+                                onClick: onAddEffect,
+                                quickSwitcherLabel: null,
+                                subMenu: null,
+                                value: 'add-effect',
+                            },
+                            {
+                                type: 'divider',
+                                id: 'add-effect-divider',
+                            },
+                        ]
+                        : []),
+                    {
+                        type: 'item',
+                        id: 'rename-sequence',
+                        keyHint: null,
+                        label: 'Rename...',
+                        leftItem: null,
+                        disabled: !canRenameThisSequence,
+                        onClick: () => {
+                            onRenameSequence();
                         },
-                    ]
-                    : []),
-                {
-                    type: 'item',
-                    id: 'rename-sequence',
-                    keyHint: null,
-                    label: 'Rename...',
-                    leftItem: null,
-                    disabled: !canRenameThisSequence,
-                    onClick: () => {
-                        onRenameSequence();
+                        quickSwitcherLabel: null,
+                        subMenu: null,
+                        value: 'rename-sequence',
                     },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    value: 'rename-sequence',
-                },
-                ...(freezeFrameMenuItem ? [freezeFrameMenuItem] : []),
-            ],
+                    ...(freezeFrameMenuItem ? [freezeFrameMenuItem] : []),
+                ]
+                : [],
         });
     }, [
         assetLinkInfo,
@@ -696,7 +707,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         selectAsset,
         sequence,
     ]);
-    const canDropEffect = previewServerState.type === 'connected' &&
+    const canDropEffect = previewInteractive &&
         nodePath !== null &&
         validatedLocation !== null &&
         ((_c = sequence.controls) === null || _c === void 0 ? void 0 : _c.supportsEffects) === true;
@@ -754,7 +765,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             clientId: previewServerState.clientId,
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewConnected, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canRenameThisSequence || canOpenInEditor
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canRenameThisSequence || canOpenInEditor
             ? onSequenceDoubleClick
             : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
                 jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
@@ -764,6 +775,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
                     ] })) : null] }) }));
     const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, sequenceDropRejection ? (jsx_runtime_1.jsx("div", { style: sequenceReorderRejectionStyle, children: sequenceDropRejection })) : null, trackRow] })) : (trackRow);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
+                interactivity_enabled_1.studioInteractivityEnabled &&
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo &&

package/dist/components/VisualControls/ClickableFileName.js

@@ -8,8 +8,8 @@ const open_in_editor_1 = require("../../helpers/open-in-editor");
 const Fieldset_1 = require("../RenderModal/SchemaEditor/Fieldset");
 const source_attribution_1 = require("../Timeline/TimelineStack/source-attribution");
 const container = {
-    paddingLeft: Fieldset_1.SCHEMA_EDITOR_FIELDSET_PADDING,
-    paddingTop: Fieldset_1.SCHEMA_EDITOR_FIELDSET_PADDING / 2,
+    paddingLeft: (0, Fieldset_1.getSchemaEditorFieldsetPadding)(),
+    paddingTop: (0, Fieldset_1.getSchemaEditorFieldsetPadding)() / 2,
 };
 const ClickableFileName = ({ originalFileName, }) => {
     const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);

package/dist/components/VisualControls/VisualControlsContent.js

@@ -37,15 +37,23 @@ exports.VisualControlsContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const VisualControls_1 = require("../../visual-controls/VisualControls");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
+const Fieldset_1 = require("../RenderModal/SchemaEditor/Fieldset");
 const SchemaSeparationLine_1 = require("../RenderModal/SchemaEditor/SchemaSeparationLine");
 const VisualControlHandle_1 = require("./VisualControlHandle");
+const rootInset = (0, Fieldset_1.getSchemaEditorRootInset)(InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING);
+const container = {
+    boxSizing: 'border-box',
+    paddingLeft: rootInset,
+    paddingRight: rootInset,
+};
 const VisualControlsContent = () => {
     const { handles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
     const entries = Object.entries(handles);
     if (entries.length === 0) {
         return null;
     }
-    return (jsx_runtime_1.jsx("div", { children: entries.map(([key, value], i) => {
+    return (jsx_runtime_1.jsx("div", { style: container, children: entries.map(([key, value], i) => {
             return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
                     jsx_runtime_1.jsx(VisualControlHandle_1.VisualControlHandle, { keyName: key, value: value }), i === entries.length - 1 ? null : jsx_runtime_1.jsx(SchemaSeparationLine_1.SchemaSeparationLine, {})] }, key));
         }) }));

package/dist/components/effect-drag-and-drop.js

@@ -8,7 +8,9 @@ const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const hasEffectDragType = (dataTransfer) => {
     const types = Array.from(dataTransfer.types);
     const hasExplicitEffectType = types.includes(studio_shared_1.EFFECT_DRAG_MIME_TYPE);
-    if (!hasExplicitEffectType && hasImportableAssetDragType(dataTransfer)) {
+    if (!hasExplicitEffectType &&
+        (hasNonEffectRemotionDragType(dataTransfer) ||
+            hasNonRemotionImportableAssetDragType(dataTransfer))) {
         return false;
     }
     return types.some((type) => type === studio_shared_1.EFFECT_DRAG_MIME_TYPE || isGenericDragType(type));
@@ -21,14 +23,33 @@ exports.hasExplicitEffectDragType = hasExplicitEffectDragType;
 const isGenericDragType = (type) => {
     return type === 'application/json' || type === 'text/plain';
 };
-const hasImportableAssetDragType = (dataTransfer) => {
-    return Array.from(dataTransfer.types).some((type) => type === 'Files' ||
-        type === studio_shared_1.ASSET_DRAG_MIME_TYPE ||
-        type === studio_shared_1.COMPOSITION_DRAG_MIME_TYPE ||
-        type === studio_shared_1.COMPONENT_DRAG_MIME_TYPE ||
-        type === studio_shared_1.SFX_DRAG_MIME_TYPE ||
-        type === 'text/uri-list' ||
-        type === 'text/html');
+const isNonEffectRemotionDragType = (mimeType) => {
+    switch (mimeType) {
+        case studio_shared_1.EFFECT_DRAG_MIME_TYPE:
+            return false;
+        case studio_shared_1.ASSET_DRAG_MIME_TYPE:
+        case studio_shared_1.COMPOSITION_DRAG_MIME_TYPE:
+        case studio_shared_1.COMPONENT_DRAG_MIME_TYPE:
+        case studio_shared_1.ELEMENT_DRAG_MIME_TYPE:
+        case studio_shared_1.SFX_DRAG_MIME_TYPE:
+            return true;
+        default:
+            mimeType;
+            throw new Error(`Unhandled Remotion drag MIME type: ${mimeType}`);
+    }
+};
+const hasNonEffectRemotionDragType = (dataTransfer) => {
+    return Array.from(dataTransfer.types).some((type) => {
+        if (!(0, studio_shared_1.isRemotionDragMimeType)(type)) {
+            return false;
+        }
+        return isNonEffectRemotionDragType(type);
+    });
+};
+const hasNonRemotionImportableAssetDragType = (dataTransfer) => {
+    return Array.from(dataTransfer.types).some((type) => {
+        return type === 'Files' || type === 'text/uri-list' || type === 'text/html';
+    });
 };
 const getEffectDragData = (dataTransfer) => {
     for (const type of [

package/dist/components/import-assets.d.ts

@@ -86,6 +86,6 @@ export declare const insertElement: ({ compositionFile, compositionId, dropPosit
         slug: string;
         displayName: string;
         sourceCode: string;
-        dimensions: import("@remotion/studio-shared").ComponentDimensions;
+        dimensions: import("@remotion/studio-shared").ComponentDimensions | null;
     };
 }) => Promise<void>;

package/dist/components/options-sidebar-tabs.d.ts

@@ -2,3 +2,4 @@ export declare const optionsSidebarTabs: import("react").RefObject<{
     selectInspectorPanel: () => void;
     selectRendersPanel: () => void;
 } | null>;
+export declare const selectOptionsSidebarInspectorPanel: () => void;

package/dist/components/options-sidebar-tabs.js

@@ -1,5 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.optionsSidebarTabs = void 0;
+exports.selectOptionsSidebarInspectorPanel = exports.optionsSidebarTabs = void 0;
 const react_1 = require("react");
 exports.optionsSidebarTabs = (0, react_1.createRef)();
+const selectOptionsSidebarInspectorPanel = () => {
+    var _a;
+    (_a = exports.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectInspectorPanel();
+};
+exports.selectOptionsSidebarInspectorPanel = selectOptionsSidebarInspectorPanel;

package/dist/components/selected-outline-snap.d.ts

@@ -0,0 +1,36 @@
+import type { Guide } from '../state/editor-guides';
+import type { SelectedOutline } from './selected-outline-geometry';
+export declare const selectedOutlineSnapThresholdPx = 10;
+export declare const selectedOutlineSnapIndicatorColor = "#ff00ff";
+export type SelectedOutlineSnapAxis = 'x' | 'y';
+export type SelectedOutlineSnapTargetType = 'canvas-left' | 'canvas-right' | 'canvas-top' | 'canvas-bottom' | 'canvas-horizontal-center' | 'canvas-vertical-center' | 'guide-vertical' | 'guide-horizontal';
+export type SelectedOutlineSnapTarget = {
+    readonly axis: SelectedOutlineSnapAxis;
+    readonly position: number;
+    readonly type: SelectedOutlineSnapTargetType;
+};
+export type SelectedOutlineSnapEdge = 'left' | 'right' | 'center-x' | 'top' | 'bottom' | 'center-y';
+export type SelectedOutlineSnapPoint = {
+    readonly distance: number;
+    readonly edge: SelectedOutlineSnapEdge;
+    readonly target: SelectedOutlineSnapTarget;
+};
+export type SelectedOutlineSnapResult = {
+    readonly activeSnapPoints: readonly SelectedOutlineSnapPoint[];
+    readonly snapOffsetX: number | null;
+    readonly snapOffsetY: number | null;
+};
+export declare const getSelectedOutlineSnapTargets: ({ compositionHeight, compositionWidth, guides, }: {
+    readonly compositionHeight: number;
+    readonly compositionWidth: number;
+    readonly guides: readonly Guide[];
+}) => readonly SelectedOutlineSnapTarget[];
+export declare const findSelectedOutlineSnap: ({ allowX, allowY, deltaX, deltaY, outlines, scale, targets, }: {
+    readonly allowX: boolean;
+    readonly allowY: boolean;
+    readonly deltaX: number;
+    readonly deltaY: number;
+    readonly outlines: readonly SelectedOutline[];
+    readonly scale: number;
+    readonly targets: readonly SelectedOutlineSnapTarget[];
+}) => SelectedOutlineSnapResult;

package/dist/components/selected-outline-snap.js

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findSelectedOutlineSnap = exports.getSelectedOutlineSnapTargets = exports.selectedOutlineSnapIndicatorColor = exports.selectedOutlineSnapThresholdPx = void 0;
+exports.selectedOutlineSnapThresholdPx = 10;
+exports.selectedOutlineSnapIndicatorColor = '#ff00ff';
+const EPSILON = 0.000001;
+const getSelectedOutlineSnapTargets = ({ compositionHeight, compositionWidth, guides, }) => {
+    return [
+        { axis: 'x', position: 0, type: 'canvas-left' },
+        {
+            axis: 'x',
+            position: compositionWidth / 2,
+            type: 'canvas-horizontal-center',
+        },
+        { axis: 'x', position: compositionWidth, type: 'canvas-right' },
+        { axis: 'y', position: 0, type: 'canvas-top' },
+        {
+            axis: 'y',
+            position: compositionHeight / 2,
+            type: 'canvas-vertical-center',
+        },
+        { axis: 'y', position: compositionHeight, type: 'canvas-bottom' },
+        ...guides.flatMap((guide) => {
+            if (!guide.show) {
+                return [];
+            }
+            return [
+                guide.orientation === 'vertical'
+                    ? {
+                        axis: 'x',
+                        position: guide.position,
+                        type: 'guide-vertical',
+                    }
+                    : {
+                        axis: 'y',
+                        position: guide.position,
+                        type: 'guide-horizontal',
+                    },
+            ];
+        }),
+    ];
+};
+exports.getSelectedOutlineSnapTargets = getSelectedOutlineSnapTargets;
+const getSelectedOutlineBounds = ({ deltaX, deltaY, outlines, scale, }) => {
+    if (outlines.length === 0) {
+        return null;
+    }
+    const points = outlines.flatMap((outline) => outline.points);
+    const left = Math.min(...points.map((point) => point.x)) / scale + deltaX;
+    const right = Math.max(...points.map((point) => point.x)) / scale + deltaX;
+    const top = Math.min(...points.map((point) => point.y)) / scale + deltaY;
+    const bottom = Math.max(...points.map((point) => point.y)) / scale + deltaY;
+    return {
+        left,
+        right,
+        top,
+        bottom,
+        centerX: left + (right - left) / 2,
+        centerY: top + (bottom - top) / 2,
+    };
+};
+const canSnapEdgeToTarget = (edge, target) => {
+    if (target.type === 'canvas-horizontal-center') {
+        return edge === 'center-x';
+    }
+    if (target.type === 'canvas-vertical-center') {
+        return edge === 'center-y';
+    }
+    if (target.type === 'canvas-left' || target.type === 'canvas-right') {
+        return edge === 'left' || edge === 'right';
+    }
+    if (target.type === 'guide-vertical') {
+        return edge === 'left' || edge === 'right' || edge === 'center-x';
+    }
+    if (target.type === 'canvas-top' || target.type === 'canvas-bottom') {
+        return edge === 'top' || edge === 'bottom';
+    }
+    return edge === 'top' || edge === 'bottom' || edge === 'center-y';
+};
+const findBestSnapForAxis = ({ edges, targets, threshold, }) => {
+    var _a;
+    let bestDistance = Infinity;
+    let bestSnaps = [];
+    for (const target of targets) {
+        for (const edge of edges) {
+            if (!canSnapEdgeToTarget(edge.edge, target)) {
+                continue;
+            }
+            const distance = Math.abs(edge.position - target.position);
+            if (distance > threshold || distance > bestDistance + EPSILON) {
+                continue;
+            }
+            if (distance < bestDistance - EPSILON) {
+                bestSnaps = [];
+                bestDistance = distance;
+            }
+            bestSnaps.push({
+                offset: target.position - edge.position,
+                snapPoint: {
+                    distance,
+                    edge: edge.edge,
+                    target,
+                },
+            });
+        }
+    }
+    if (bestSnaps.length > 1) {
+        const centerSnap = bestSnaps.find((snap) => snap.snapPoint.target.type === 'canvas-horizontal-center' ||
+            snap.snapPoint.target.type === 'canvas-vertical-center');
+        if (centerSnap) {
+            return centerSnap;
+        }
+    }
+    return (_a = bestSnaps[0]) !== null && _a !== void 0 ? _a : null;
+};
+const findSelectedOutlineSnap = ({ allowX, allowY, deltaX, deltaY, outlines, scale, targets, }) => {
+    var _a, _b, _c, _d;
+    const bounds = getSelectedOutlineBounds({ deltaX, deltaY, outlines, scale });
+    if (bounds === null) {
+        return {
+            activeSnapPoints: [],
+            snapOffsetX: null,
+            snapOffsetY: null,
+        };
+    }
+    const threshold = exports.selectedOutlineSnapThresholdPx / scale;
+    const snapX = allowX
+        ? findBestSnapForAxis({
+            edges: [
+                { edge: 'left', position: bounds.left },
+                { edge: 'center-x', position: bounds.centerX },
+                { edge: 'right', position: bounds.right },
+            ],
+            targets: targets.filter((target) => target.axis === 'x'),
+            threshold,
+        })
+        : null;
+    const snapY = allowY
+        ? findBestSnapForAxis({
+            edges: [
+                { edge: 'top', position: bounds.top },
+                { edge: 'center-y', position: bounds.centerY },
+                { edge: 'bottom', position: bounds.bottom },
+            ],
+            targets: targets.filter((target) => target.axis === 'y'),
+            threshold,
+        })
+        : null;
+    return {
+        activeSnapPoints: [
+            (_a = snapX === null || snapX === void 0 ? void 0 : snapX.snapPoint) !== null && _a !== void 0 ? _a : null,
+            (_b = snapY === null || snapY === void 0 ? void 0 : snapY.snapPoint) !== null && _b !== void 0 ? _b : null,
+        ].filter((snapPoint) => snapPoint !== null),
+        snapOffsetX: (_c = snapX === null || snapX === void 0 ? void 0 : snapX.offset) !== null && _c !== void 0 ? _c : null,
+        snapOffsetY: (_d = snapY === null || snapY === void 0 ? void 0 : snapY.offset) !== null && _d !== void 0 ? _d : null,
+    };
+};
+exports.findSelectedOutlineSnap = findSelectedOutlineSnap;