@remotion/studio 4.0.496 → 4.0.498

package/dist/components/Timeline/use-timeline-asset-drop.js

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimelineAssetDrop = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../../helpers/client-id");
+const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
+const drop_handler_data_1 = require("../drop-handler-data");
+const effect_drag_and_drop_1 = require("../effect-drag-and-drop");
+const handle_drop_1 = require("../handle-drop");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const SvgImportDialog_1 = require("../SvgImportDialog");
+const timeline_refs_1 = require("./timeline-refs");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
+const use_resolved_stack_1 = require("./use-resolved-stack");
+const isEventInsideElement = (event, element) => {
+    if (event.target instanceof Node && element.contains(event.target)) {
+        return true;
+    }
+    const rect = element.getBoundingClientRect();
+    return (event.clientX >= rect.left &&
+        event.clientX <= rect.right &&
+        event.clientY >= rect.top &&
+        event.clientY <= rect.bottom);
+};
+const useTimelineAssetDrop = () => {
+    var _a, _b;
+    const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const chooseSvgImportMode = (0, SvgImportDialog_1.useSvgImportDialog)();
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const [isAddingAsset, setIsAddingAsset] = (0, react_1.useState)(false);
+    const [assetDropFrame, setAssetDropFrame] = (0, react_1.useState)(null);
+    const currentCompositionId = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
+    const currentComposition = (0, react_1.useMemo)(() => {
+        var _a;
+        return ((_a = compositions.find((composition) => composition.id === currentCompositionId)) !== null && _a !== void 0 ? _a : null);
+    }, [compositions, currentCompositionId]);
+    const resolvedCompositionLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.stack) !== null && _a !== void 0 ? _a : null);
+    const compositionFile = (_b = resolvedCompositionLocation === null || resolvedCompositionLocation === void 0 ? void 0 : resolvedCompositionLocation.source) !== null && _b !== void 0 ? _b : null;
+    const compositionComponentInfo = (0, open_in_editor_1.useCachedCompositionComponentInfo)({
+        compositionFile,
+        compositionId: currentCompositionId,
+    });
+    const previewInteractive = previewServerState.type === 'connected' && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
+    const canInsertAsset = previewInteractive &&
+        !window.remotion_isReadOnlyStudio &&
+        (compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === true &&
+        currentCompositionId !== null &&
+        compositionFile !== null &&
+        videoConfig !== null &&
+        !isAddingAsset;
+    const getDropFrame = (0, react_1.useCallback)((event) => {
+        if (videoConfig === null) {
+            return null;
+        }
+        const scrollable = timeline_refs_1.scrollableRef.current;
+        return scrollable !== null && isEventInsideElement(event, scrollable)
+            ? (0, timeline_scroll_logic_1.getFrameFromTimelineDrop)({
+                clientX: event.clientX,
+                durationInFrames: videoConfig.durationInFrames,
+                scrollLeft: scrollable.scrollLeft,
+                timelineLeft: scrollable.getBoundingClientRect().left,
+                timelineWidth: scrollable.scrollWidth,
+            })
+            : timelinePosition;
+    }, [timelinePosition, videoConfig]);
+    const onAssetDragOver = (0, react_1.useCallback)((event) => {
+        const timeline = timeline_refs_1.timelineVerticalScroll.current;
+        const { dataTransfer } = event;
+        if (timeline === null ||
+            dataTransfer === null ||
+            !(0, drop_handler_data_1.isSupportedDropEvent)(event) ||
+            !isEventInsideElement(event, timeline)) {
+            setAssetDropFrame(null);
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        dataTransfer.dropEffect = canInsertAsset ? 'copy' : 'none';
+        const scrollable = timeline_refs_1.scrollableRef.current;
+        const shouldShowDropFrame = canInsertAsset &&
+            scrollable !== null &&
+            isEventInsideElement(event, scrollable);
+        setAssetDropFrame(shouldShowDropFrame ? getDropFrame(event) : null);
+    }, [canInsertAsset, getDropFrame]);
+    const onAssetDrop = (0, react_1.useCallback)(async (event) => {
+        setAssetDropFrame(null);
+        const timeline = timeline_refs_1.timelineVerticalScroll.current;
+        const { dataTransfer } = event;
+        if (timeline === null ||
+            dataTransfer === null ||
+            !(0, drop_handler_data_1.isSupportedDropEvent)(event) ||
+            !isEventInsideElement(event, timeline)) {
+            return;
+        }
+        if ((0, effect_drag_and_drop_1.getEffectDragData)(dataTransfer) !== null) {
+            event.preventDefault();
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (!canInsertAsset ||
+            currentCompositionId === null ||
+            compositionFile === null ||
+            videoConfig === null) {
+            if ((compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence) === false) {
+                (0, NotificationCenter_1.showNotification)('Cannot insert items into this composition component', 3000);
+            }
+            return;
+        }
+        const frame = getDropFrame(event);
+        if (frame === null) {
+            return;
+        }
+        setIsAddingAsset(true);
+        try {
+            await (0, handle_drop_1.handleDrop)({
+                chooseSvgImportMode,
+                compositionFile,
+                compositionId: currentCompositionId,
+                destinationDimensions: {
+                    height: videoConfig.height,
+                    width: videoConfig.width,
+                },
+                dropPosition: {
+                    centerX: videoConfig.width / 2,
+                    centerY: videoConfig.height / 2,
+                },
+                event,
+                fps: videoConfig.fps,
+                from: frame,
+            });
+        }
+        finally {
+            setIsAddingAsset(false);
+        }
+    }, [
+        canInsertAsset,
+        chooseSvgImportMode,
+        compositionComponentInfo === null || compositionComponentInfo === void 0 ? void 0 : compositionComponentInfo.canAddSequence,
+        compositionFile,
+        currentCompositionId,
+        getDropFrame,
+        videoConfig,
+    ]);
+    const clearAssetDropFrame = (0, react_1.useCallback)(() => {
+        setAssetDropFrame(null);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        document.addEventListener('dragover', onAssetDragOver, { capture: true });
+        document.addEventListener('drop', onAssetDrop, { capture: true });
+        document.addEventListener('dragend', clearAssetDropFrame, { capture: true });
+        return () => {
+            document.removeEventListener('dragover', onAssetDragOver, {
+                capture: true,
+            });
+            document.removeEventListener('drop', onAssetDrop, { capture: true });
+            document.removeEventListener('dragend', clearAssetDropFrame, {
+                capture: true,
+            });
+        };
+    }, [clearAssetDropFrame, onAssetDragOver, onAssetDrop]);
+    return assetDropFrame;
+};
+exports.useTimelineAssetDrop = useTimelineAssetDrop;

package/dist/components/composition-menu-items.d.ts

@@ -2,11 +2,25 @@ import type { SetStateAction } from 'react';
 import type { ResolvedStackLocation } from 'remotion';
 import type { ModalState } from '../state/modals';
 import type { ComboboxValue } from './NewComposition/ComboBox';
-export declare const getCompositionMenuItems: ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, }: {
+export declare const getCompositionMenuItems: ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, includeNewCompositionItem, includeCompositionManagementItems, }: {
     composition: import("remotion").AnyComposition | null;
     connectionStatus: "connected" | "disconnected" | "init";
     resolvedLocation: ResolvedStackLocation | null;
     setSelectedModal: (value: SetStateAction<ModalState | null>) => void;
     closeMenu: () => void;
     readOnlyStudio: boolean;
+    includeNewCompositionItem: boolean;
+    includeCompositionManagementItems: boolean;
+}) => ComboboxValue[];
+export declare const getCompositionContextMenuItems: (args: Omit<{
+    composition: import("remotion").AnyComposition | null;
+    connectionStatus: "connected" | "disconnected" | "init";
+    resolvedLocation: ResolvedStackLocation | null;
+    setSelectedModal: (value: SetStateAction<ModalState | null>) => void;
+    closeMenu: () => void;
+    readOnlyStudio: boolean;
+    includeNewCompositionItem: boolean;
+    includeCompositionManagementItems: boolean;
+}, "includeCompositionManagementItems" | "includeNewCompositionItem"> & {
+    readonly includeCompositionManagementItems: boolean;
 }) => ComboboxValue[];

package/dist/components/composition-menu-items.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCompositionMenuItems = void 0;
+exports.getCompositionContextMenuItems = exports.getCompositionMenuItems = void 0;
 const no_react_1 = require("remotion/no-react");
 const format_file_location_1 = require("../helpers/format-file-location");
 const open_in_editor_1 = require("../helpers/open-in-editor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, }) => {
+const open_in_new_window_1 = require("./open-in-new-window");
+const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocation, setSelectedModal, closeMenu, readOnlyStudio, includeNewCompositionItem, includeCompositionManagementItems, }) => {
     const editorName = window.remotion_editorName;
     const fileLocation = (0, format_file_location_1.formatFileLocation)({
         location: resolvedLocation,
@@ -19,7 +20,7 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
             ? {
                 id: 'show-in-editor',
                 keyHint: null,
-                label: `Show composition in ${editorName}`,
+                label: `Open composition in ${editorName}`,
                 leftItem: null,
                 onClick: async () => {
                     closeMenu();
@@ -33,13 +34,41 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
                         (0, NotificationCenter_1.showNotification)(err.message, 2000);
                     }
                 },
-                quickSwitcherLabel: `Show composition in ${editorName}`,
+                quickSwitcherLabel: `Open composition in ${editorName}`,
                 subMenu: null,
                 type: 'item',
                 value: 'show-in-editor',
                 disabled: showInEditorDisabled,
             }
             : null,
+        editorName
+            ? {
+                id: 'open-component-in-editor',
+                keyHint: null,
+                label: `Open component in ${editorName}`,
+                leftItem: null,
+                onClick: async () => {
+                    closeMenu();
+                    if (!composition || !(resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source)) {
+                        return;
+                    }
+                    try {
+                        await (0, open_in_editor_1.openCompositionComponentInEditor)({
+                            compositionFile: resolvedLocation.source,
+                            compositionId: composition.id,
+                        });
+                    }
+                    catch (err) {
+                        (0, NotificationCenter_1.showNotification)(err.message, 2000);
+                    }
+                },
+                quickSwitcherLabel: `Open composition component in ${editorName}`,
+                subMenu: null,
+                type: 'item',
+                value: 'open-component-in-editor',
+                disabled: openComponentInEditorDisabled,
+            }
+            : null,
         {
             id: 'copy-file-location',
             keyHint: null,
@@ -65,124 +94,105 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
             value: 'copy-file-location',
             disabled: copyFileLocationDisabled,
         },
-        editorName
+        (editorName || fileLocation) &&
+            (includeNewCompositionItem || includeCompositionManagementItems)
             ? {
-                id: 'open-component-in-editor',
+                type: 'divider',
+                id: 'show-in-editor-divider',
+            }
+            : null,
+        includeNewCompositionItem
+            ? {
+                id: 'new',
                 keyHint: null,
-                label: `Show component in ${editorName}`,
+                label: `New...`,
                 leftItem: null,
-                onClick: async () => {
+                onClick: () => {
                     closeMenu();
-                    if (!composition || !(resolvedLocation === null || resolvedLocation === void 0 ? void 0 : resolvedLocation.source)) {
+                    setSelectedModal({
+                        type: 'new-comp',
+                        folderName: null,
+                        parentName: null,
+                        stack: null,
+                    });
+                },
+                quickSwitcherLabel: 'New composition...',
+                subMenu: null,
+                type: 'item',
+                value: 'new',
+                disabled: readOnlyStudio,
+            }
+            : null,
+        includeCompositionManagementItems
+            ? {
+                id: 'rename',
+                keyHint: null,
+                label: `Rename...`,
+                leftItem: null,
+                onClick: () => {
+                    if (!composition) {
                         return;
                     }
-                    try {
-                        await (0, open_in_editor_1.openCompositionComponentInEditor)({
-                            compositionFile: resolvedLocation.source,
-                            compositionId: composition.id,
-                        });
-                    }
-                    catch (err) {
-                        (0, NotificationCenter_1.showNotification)(err.message, 2000);
+                    closeMenu();
+                    setSelectedModal({
+                        type: 'rename-comp',
+                        compositionId: composition.id,
+                    });
+                },
+                quickSwitcherLabel: 'Rename composition...',
+                subMenu: null,
+                type: 'item',
+                value: 'rename',
+                disabled: !composition || readOnlyStudio,
+            }
+            : null,
+        includeCompositionManagementItems
+            ? {
+                id: 'duplicate',
+                keyHint: null,
+                label: `Duplicate...`,
+                leftItem: null,
+                onClick: () => {
+                    if (!composition) {
+                        return;
                     }
+                    closeMenu();
+                    setSelectedModal({
+                        type: 'duplicate-comp',
+                        compositionId: composition.id,
+                        compositionType: composition.durationInFrames === 1 ? 'still' : 'composition',
+                    });
                 },
-                quickSwitcherLabel: `Show composition component in ${editorName}`,
+                quickSwitcherLabel: 'Duplicate composition...',
                 subMenu: null,
                 type: 'item',
-                value: 'open-component-in-editor',
-                disabled: openComponentInEditorDisabled,
+                value: 'duplicate',
+                disabled: !composition || readOnlyStudio,
             }
             : null,
-        editorName || fileLocation
+        includeCompositionManagementItems
             ? {
-                type: 'divider',
-                id: 'show-in-editor-divider',
+                id: 'delete',
+                keyHint: null,
+                label: `Delete...`,
+                leftItem: null,
+                onClick: () => {
+                    if (!composition) {
+                        return;
+                    }
+                    closeMenu();
+                    setSelectedModal({
+                        type: 'delete-comp',
+                        compositionId: composition.id,
+                    });
+                },
+                quickSwitcherLabel: 'Delete composition...',
+                subMenu: null,
+                type: 'item',
+                value: 'delete',
+                disabled: !composition || readOnlyStudio,
             }
             : null,
-        {
-            id: 'new',
-            keyHint: null,
-            label: `New...`,
-            leftItem: null,
-            onClick: () => {
-                closeMenu();
-                setSelectedModal({
-                    type: 'new-comp',
-                    folderName: null,
-                    parentName: null,
-                    stack: null,
-                });
-            },
-            quickSwitcherLabel: 'New composition...',
-            subMenu: null,
-            type: 'item',
-            value: 'new',
-            disabled: readOnlyStudio,
-        },
-        {
-            id: 'rename',
-            keyHint: null,
-            label: `Rename...`,
-            leftItem: null,
-            onClick: () => {
-                if (!composition) {
-                    return;
-                }
-                closeMenu();
-                setSelectedModal({
-                    type: 'rename-comp',
-                    compositionId: composition.id,
-                });
-            },
-            quickSwitcherLabel: 'Rename composition...',
-            subMenu: null,
-            type: 'item',
-            value: 'rename',
-            disabled: !composition || readOnlyStudio,
-        },
-        {
-            id: 'duplicate',
-            keyHint: null,
-            label: `Duplicate...`,
-            leftItem: null,
-            onClick: () => {
-                if (!composition) {
-                    return;
-                }
-                closeMenu();
-                setSelectedModal({
-                    type: 'duplicate-comp',
-                    compositionId: composition.id,
-                    compositionType: composition.durationInFrames === 1 ? 'still' : 'composition',
-                });
-            },
-            quickSwitcherLabel: 'Duplicate composition...',
-            subMenu: null,
-            type: 'item',
-            value: 'duplicate',
-            disabled: !composition || readOnlyStudio,
-        },
-        {
-            id: 'delete',
-            keyHint: null,
-            label: `Delete...`,
-            leftItem: null,
-            onClick: () => {
-                if (!composition) {
-                    return;
-                }
-                closeMenu();
-                setSelectedModal({
-                    type: 'delete-comp',
-                    compositionId: composition.id,
-                });
-            },
-            quickSwitcherLabel: 'Delete composition...',
-            subMenu: null,
-            type: 'item',
-            value: 'delete',
-            disabled: !composition || readOnlyStudio,
-        },
         {
             type: 'divider',
             id: 'copy-id-divider',
@@ -215,3 +225,23 @@ const getCompositionMenuItems = ({ composition, connectionStatus, resolvedLocati
     ].filter(no_react_1.NoReactInternals.truthy);
 };
 exports.getCompositionMenuItems = getCompositionMenuItems;
+const getCompositionContextMenuItems = (args) => {
+    if (args.composition === null) {
+        return (0, exports.getCompositionMenuItems)({
+            ...args,
+            includeNewCompositionItem: false,
+        });
+    }
+    return [
+        (0, open_in_new_window_1.getOpenInNewWindowMenuItem)(`/${args.composition.id}`),
+        {
+            type: 'divider',
+            id: 'open-in-new-window-divider',
+        },
+        ...(0, exports.getCompositionMenuItems)({
+            ...args,
+            includeNewCompositionItem: false,
+        }),
+    ];
+};
+exports.getCompositionContextMenuItems = getCompositionContextMenuItems;

package/dist/components/drop-handler-data.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentDragData, type CompositionDragData } from '@remotion/studio-shared';
+export declare const isFileDragEvent: (event: DragEvent) => boolean;
+export declare const isAssetDragEvent: (event: DragEvent) => boolean;
+export declare const isComponentDragEvent: (event: DragEvent) => boolean;
+export declare const isCompositionDragEvent: (event: DragEvent) => boolean;
+export declare const isElementDragEvent: (event: DragEvent) => boolean;
+export declare const isSfxDragEvent: (event: DragEvent) => boolean;
+export declare const isRemoteAssetDragEvent: (event: DragEvent) => boolean;
+export declare const isSupportedDropEvent: (event: DragEvent) => boolean;
+export declare const getAssetDragPath: (event: DragEvent) => string | null;
+export declare const getCompositionDragData: (event: DragEvent) => CompositionDragData | null;
+export declare const getComponentDragData: (event: DragEvent) => ComponentDragData | null;
+export declare const getSfxDragUrl: (event: DragEvent) => string | null;

package/dist/components/drop-handler-data.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSfxDragUrl = exports.getComponentDragData = exports.getCompositionDragData = exports.getAssetDragPath = exports.isSupportedDropEvent = exports.isRemoteAssetDragEvent = exports.isSfxDragEvent = exports.isElementDragEvent = exports.isCompositionDragEvent = exports.isComponentDragEvent = exports.isAssetDragEvent = exports.isFileDragEvent = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const remote_asset_drag_1 = require("../helpers/remote-asset-drag");
+const isFileDragEvent = (event) => {
+    var _a;
+    var _b;
+    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes('Files');
+};
+exports.isFileDragEvent = isFileDragEvent;
+const isAssetDragEvent = (event) => {
+    var _a;
+    var _b;
+    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.ASSET_DRAG_MIME_TYPE);
+};
+exports.isAssetDragEvent = isAssetDragEvent;
+const isComponentDragEvent = (event) => {
+    var _a;
+    var _b;
+    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.COMPONENT_DRAG_MIME_TYPE);
+};
+exports.isComponentDragEvent = isComponentDragEvent;
+const isCompositionDragEvent = (event) => {
+    var _a;
+    var _b;
+    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE);
+};
+exports.isCompositionDragEvent = isCompositionDragEvent;
+const isElementDragEvent = (event) => {
+    var _a;
+    var _b;
+    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.ELEMENT_DRAG_MIME_TYPE);
+};
+exports.isElementDragEvent = isElementDragEvent;
+const isSfxDragEvent = (event) => {
+    var _a;
+    var _b;
+    return Array.from((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) !== null && _b !== void 0 ? _b : []).includes(studio_shared_1.SFX_DRAG_MIME_TYPE);
+};
+exports.isSfxDragEvent = isSfxDragEvent;
+const isRemoteAssetDragEvent = (event) => {
+    return (!(0, exports.isFileDragEvent)(event) &&
+        !(0, exports.isAssetDragEvent)(event) &&
+        !(0, exports.isCompositionDragEvent)(event) &&
+        !(0, exports.isComponentDragEvent)(event) &&
+        !(0, exports.isElementDragEvent)(event) &&
+        !(0, exports.isSfxDragEvent)(event) &&
+        (0, remote_asset_drag_1.hasRemoteAssetDragData)(event.dataTransfer));
+};
+exports.isRemoteAssetDragEvent = isRemoteAssetDragEvent;
+const isSupportedDropEvent = (event) => {
+    return ((0, exports.isFileDragEvent)(event) ||
+        (0, exports.isAssetDragEvent)(event) ||
+        (0, exports.isCompositionDragEvent)(event) ||
+        (0, exports.isComponentDragEvent)(event) ||
+        (0, exports.isElementDragEvent)(event) ||
+        (0, exports.isSfxDragEvent)(event) ||
+        (0, exports.isRemoteAssetDragEvent)(event));
+};
+exports.isSupportedDropEvent = isSupportedDropEvent;
+const getAssetDragPath = (event) => {
+    var _a, _b;
+    var _c;
+    const value = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(studio_shared_1.ASSET_DRAG_MIME_TYPE);
+    if (!value) {
+        return null;
+    }
+    return (_c = (_b = (0, studio_shared_1.parseAssetDragData)(value)) === null || _b === void 0 ? void 0 : _b.assetPath) !== null && _c !== void 0 ? _c : null;
+};
+exports.getAssetDragPath = getAssetDragPath;
+const getCompositionDragData = (event) => {
+    var _a;
+    const value = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(studio_shared_1.COMPOSITION_DRAG_MIME_TYPE);
+    if (!value) {
+        return null;
+    }
+    return (0, studio_shared_1.parseCompositionDragData)(value);
+};
+exports.getCompositionDragData = getCompositionDragData;
+const getComponentDragData = (event) => {
+    var _a;
+    for (const type of [
+        studio_shared_1.COMPONENT_DRAG_MIME_TYPE,
+        'application/json',
+        'text/plain',
+    ]) {
+        const value = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(type);
+        if (!value) {
+            continue;
+        }
+        const parsed = (0, studio_shared_1.parseComponentDragData)(value);
+        if (parsed) {
+            return parsed;
+        }
+    }
+    return null;
+};
+exports.getComponentDragData = getComponentDragData;
+const getSfxDragUrl = (event) => {
+    const { dataTransfer } = event;
+    if (!dataTransfer) {
+        return null;
+    }
+    for (const type of [studio_shared_1.SFX_DRAG_MIME_TYPE, 'application/json', 'text/plain']) {
+        const value = dataTransfer.getData(type);
+        if (!value) {
+            continue;
+        }
+        const parsed = (0, studio_shared_1.parseSfxDragData)(value);
+        if (parsed) {
+            return parsed.sfx.url;
+        }
+    }
+    return null;
+};
+exports.getSfxDragUrl = getSfxDragUrl;

package/dist/components/handle-drop.d.ts

@@ -0,0 +1,13 @@
+import type { Dimensions } from '../helpers/is-current-selected-still';
+import { type InsertElementDropPosition } from './import-assets';
+import type { SvgImportMode } from './SvgImportDialog';
+export declare const handleDrop: ({ chooseSvgImportMode, compositionFile, compositionId, destinationDimensions, dropPosition, event, fps, from, }: {
+    chooseSvgImportMode: () => Promise<SvgImportMode | null>;
+    compositionFile: string;
+    compositionId: string;
+    destinationDimensions: Dimensions | null;
+    dropPosition: InsertElementDropPosition | null;
+    event: DragEvent;
+    fps: number;
+    from: number | null;
+}) => Promise<void>;