@remotion/studio 4.0.475 → 4.0.477

package/dist/components/Timeline/use-timeline-keyframe-drag.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineKeyframeDrag = void 0;
+exports.useTimelineEasingKeyframeDrag = exports.useTimelineKeyframeDrag = exports.getTimelineSelectionsAfterEasingKeyframeDrag = exports.getKeyframesForTimelineEasingDrag = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -15,6 +15,89 @@ const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const pointerDragThreshold = 3;
 const isKeyframeSelection = (selection) => selection.type === 'keyframe';
+const isEasingSelection = (selection) => selection.type === 'easing';
+const keyframesForEasing = (easing) => [
+    {
+        type: 'keyframe',
+        nodePathInfo: easing.nodePathInfo,
+        frame: easing.fromFrame,
+    },
+    {
+        type: 'keyframe',
+        nodePathInfo: easing.nodePathInfo,
+        frame: easing.toFrame,
+    },
+];
+const deduplicateKeyframeSelections = (keyframes) => {
+    const seen = new Set();
+    return keyframes.filter((keyframe) => {
+        const key = JSON.stringify({
+            nodePathInfo: keyframe.nodePathInfo,
+            frame: keyframe.frame,
+        });
+        if (seen.has(key)) {
+            return false;
+        }
+        seen.add(key);
+        return true;
+    });
+};
+const getKeyframesForTimelineEasingDrag = ({ currentSelections, interaction, selectionItem, selected, }) => {
+    if (interaction.shiftKey || interaction.toggleKey) {
+        return keyframesForEasing(selectionItem);
+    }
+    const selectedKeyframes = currentSelections.filter(isKeyframeSelection);
+    if (selectedKeyframes.length > 0) {
+        return selectedKeyframes;
+    }
+    if (!selected) {
+        return keyframesForEasing(selectionItem);
+    }
+    const selectedEasings = currentSelections.filter(isEasingSelection);
+    return deduplicateKeyframeSelections((selectedEasings.length > 0 ? selectedEasings : [selectionItem]).flatMap(keyframesForEasing));
+};
+exports.getKeyframesForTimelineEasingDrag = getKeyframesForTimelineEasingDrag;
+const getTimelineSelectionsAfterEasingKeyframeDrag = ({ delta, selections, targets, }) => {
+    const movedFrames = new Map(targets.map((target) => [
+        (0, TimelineKeyframeDragState_1.getTimelineKeyframeDragKey)(target),
+        target.frame + delta,
+    ]));
+    return selections.map((selection) => {
+        var _a, _b;
+        if (selection.type === 'keyframe') {
+            const movedFrame = movedFrames.get((0, TimelineKeyframeDragState_1.getTimelineKeyframeDragKey)({
+                nodePathInfo: selection.nodePathInfo,
+                frame: selection.frame,
+            }));
+            return movedFrame === undefined
+                ? selection
+                : {
+                    ...selection,
+                    frame: movedFrame,
+                };
+        }
+        if (selection.type === 'easing') {
+            const movedFromFrame = (_a = movedFrames.get((0, TimelineKeyframeDragState_1.getTimelineKeyframeDragKey)({
+                nodePathInfo: selection.nodePathInfo,
+                frame: selection.fromFrame,
+            }))) !== null && _a !== void 0 ? _a : selection.fromFrame;
+            const movedToFrame = (_b = movedFrames.get((0, TimelineKeyframeDragState_1.getTimelineKeyframeDragKey)({
+                nodePathInfo: selection.nodePathInfo,
+                frame: selection.toFrame,
+            }))) !== null && _b !== void 0 ? _b : selection.toFrame;
+            return movedFromFrame === selection.fromFrame &&
+                movedToFrame === selection.toFrame
+                ? selection
+                : {
+                    ...selection,
+                    fromFrame: movedFromFrame,
+                    toFrame: movedToFrame,
+                };
+        }
+        return selection;
+    });
+};
+exports.getTimelineSelectionsAfterEasingKeyframeDrag = getTimelineSelectionsAfterEasingKeyframeDrag;
 const getCodeValueForTarget = ({ propStatuses, nodePath, }) => propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath)];
 const getTimelineKeyframeDragTarget = ({ propStatuses, displayFrame, nodePathInfo, overrideIdsToNodePaths, sequences, }) => {
     var _a, _b;
@@ -121,21 +204,16 @@ const makeMovedKeyframedDragOverride = ({ group, delta, }) => {
     if (!first) {
         throw new Error('Expected a keyframe drag target');
     }
-    const moves = new Map(getMovesForGroup({ group, delta }).map((move) => [move.fromFrame, move.toFrame]));
+    const movedStatus = (0, studio_shared_1.moveKeyframesInPropStatus)({
+        status: first.propStatus,
+        moves: getMovesForGroup({ group, delta }),
+    });
+    if (movedStatus.status !== 'keyframed') {
+        throw new Error('Expected keyframed status');
+    }
     return {
         type: 'keyframed',
-        status: {
-            ...first.propStatus,
-            keyframes: first.propStatus.keyframes
-                .map((keyframe) => {
-                var _a;
-                return ({
-                    ...keyframe,
-                    frame: (_a = moves.get(keyframe.frame)) !== null && _a !== void 0 ? _a : keyframe.frame,
-                });
-            })
-                .sort((a, b) => a.frame - b.frame),
-        },
+        status: movedStatus,
     };
 };
 const applyDragOverrides = ({ delta, setDragOverrides, setEffectDragOverrides, targets, }) => {
@@ -378,3 +456,201 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
     ]);
 };
 exports.useTimelineKeyframeDrag = useTimelineKeyframeDrag;
+const useTimelineEasingKeyframeDrag = ({ onSelect, selectable, selected, selectionItem, }) => {
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const sequencesRef = (0, react_1.useContext)(remotion_1.Internals.SequenceManagerRefContext);
+    const { overrideIdToNodePathMappings } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsGettersContext);
+    const propStatusesRef = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesRefContext);
+    const { clearDragOverrides, clearEffectDragOverrides, setPropStatuses, setDragOverrides, setEffectDragOverrides, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const currentSelection = (0, TimelineSelection_1.useCurrentTimelineSelectionStateAsRef)();
+    const { clearDraggedKeyframes } = (0, TimelineKeyframeDragState_1.useTimelineKeyframeDragState)();
+    return (0, react_1.useCallback)((e) => {
+        if (e.button !== 0 || !selectable) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        const interaction = {
+            shiftKey: e.shiftKey,
+            toggleKey: e.metaKey || e.ctrlKey,
+        };
+        const shouldSelectOnPointerDown = !selected && !interaction.shiftKey && !interaction.toggleKey;
+        if (timelineWidth === null || previewServerState.type !== 'connected') {
+            onSelect(interaction);
+            return;
+        }
+        const keyframesToDrag = (0, exports.getKeyframesForTimelineEasingDrag)({
+            currentSelections: currentSelection.current.selectedItems,
+            interaction,
+            selectionItem,
+            selected,
+        });
+        if (shouldSelectOnPointerDown) {
+            onSelect(interaction);
+        }
+        const startClientX = e.clientX;
+        let dragTargets = null;
+        let hasDragged = false;
+        let lastDelta = 0;
+        const propStatuses = propStatusesRef.current;
+        const sequences = sequencesRef.current;
+        const resolveDragTargets = () => {
+            if (dragTargets !== null) {
+                return dragTargets;
+            }
+            dragTargets = keyframesToDrag
+                .map((keyframe) => getTimelineKeyframeDragTarget({
+                propStatuses,
+                displayFrame: keyframe.frame,
+                nodePathInfo: keyframe.nodePathInfo,
+                overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                sequences,
+            }))
+                .filter((target) => target !== null);
+            return dragTargets;
+        };
+        const cleanup = () => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerCancel);
+        };
+        const clearActiveOverrides = () => {
+            const targets = dragTargets;
+            if (targets === null) {
+                return;
+            }
+            clearDragOverridesForTargets({
+                clearDragOverrides,
+                clearEffectDragOverrides,
+                targets,
+            });
+        };
+        const onPointerMove = (event) => {
+            const clientXDelta = event.clientX - startClientX;
+            if (!hasDragged && Math.abs(clientXDelta) < pointerDragThreshold) {
+                return;
+            }
+            const targets = resolveDragTargets();
+            if (targets.length === 0) {
+                cleanup();
+                clearDraggedKeyframes();
+                return;
+            }
+            const rawDelta = getFrameDelta({
+                clientXDelta,
+                durationInFrames: videoConfig.durationInFrames,
+                timelineWidth,
+            });
+            const delta = (0, get_bounded_keyframe_drag_delta_1.getBoundedKeyframeDragDelta)({
+                delta: rawDelta,
+                durationInFrames: videoConfig.durationInFrames,
+                targets,
+            });
+            if (hasDragged && delta === lastDelta) {
+                return;
+            }
+            hasDragged = true;
+            lastDelta = delta;
+            if (!canMoveTimelineKeyframeDragTargets({ targets, delta })) {
+                clearActiveOverrides();
+                clearDraggedKeyframes();
+                return;
+            }
+            applyDragOverrides({
+                delta,
+                setDragOverrides,
+                setEffectDragOverrides,
+                targets,
+            });
+        };
+        const onPointerUp = () => {
+            cleanup();
+            const targets = dragTargets;
+            if (!hasDragged) {
+                if (!shouldSelectOnPointerDown) {
+                    onSelect(interaction);
+                }
+                clearActiveOverrides();
+                clearDraggedKeyframes();
+                return;
+            }
+            if (lastDelta === 0 || targets === null) {
+                clearActiveOverrides();
+                clearDraggedKeyframes();
+                return;
+            }
+            if (!canMoveTimelineKeyframeDragTargets({
+                targets,
+                delta: lastDelta,
+            })) {
+                clearActiveOverrides();
+                clearDraggedKeyframes();
+                return;
+            }
+            currentSelection.current.selectItems((0, exports.getTimelineSelectionsAfterEasingKeyframeDrag)({
+                delta: lastDelta,
+                selections: currentSelection.current.selectedItems,
+                targets: targets.map((target) => ({
+                    nodePathInfo: target.nodePathInfo,
+                    frame: target.displayFrame,
+                })),
+            }));
+            clearActiveOverrides();
+            clearDraggedKeyframes();
+            (0, call_move_keyframe_1.callMoveKeyframes)({
+                sequenceKeyframes: targets
+                    .filter((target) => target.type === 'sequence')
+                    .map((target) => ({
+                    fileName: target.fileName,
+                    nodePath: target.nodePath,
+                    fieldKey: target.fieldKey,
+                    fromFrame: target.sourceFrame,
+                    toFrame: target.sourceFrame + lastDelta,
+                    schema: target.schema,
+                })),
+                effectKeyframes: targets
+                    .filter((target) => target.type === 'effect')
+                    .map((target) => ({
+                    fileName: target.fileName,
+                    nodePath: target.nodePath,
+                    effectIndex: target.effectIndex,
+                    fieldKey: target.fieldKey,
+                    fromFrame: target.sourceFrame,
+                    toFrame: target.sourceFrame + lastDelta,
+                    schema: target.schema,
+                })),
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+            }).catch(() => undefined);
+        };
+        const onPointerCancel = () => {
+            cleanup();
+            clearActiveOverrides();
+            clearDraggedKeyframes();
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerCancel);
+    }, [
+        clearDragOverrides,
+        clearEffectDragOverrides,
+        clearDraggedKeyframes,
+        currentSelection,
+        onSelect,
+        overrideIdToNodePathMappings,
+        propStatusesRef,
+        previewServerState,
+        selectable,
+        selected,
+        selectionItem,
+        sequencesRef,
+        setPropStatuses,
+        setDragOverrides,
+        setEffectDragOverrides,
+        timelineWidth,
+        videoConfig.durationInFrames,
+    ]);
+};
+exports.useTimelineEasingKeyframeDrag = useTimelineEasingKeyframeDrag;

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

@@ -1,18 +1,44 @@
-import { type FileType, type InsertableCompositionElement } from '@remotion/studio-shared';
+import { type ComponentProp, type FileType, type InsertableCompositionElementPosition } from '@remotion/studio-shared';
+export type InsertElementDropPosition = {
+    readonly centerX: number;
+    readonly centerY: number;
+};
 export declare const getAssetElement: ({ fileType, src, }: {
     fileType: FileType;
     src: string;
-}) => InsertableCompositionElement | null;
-export declare const getAssetElementFromPath: (assetPath: string) => InsertableCompositionElement | null;
+}) => {
+    type: "asset";
+    assetType: "audio" | "gif" | "image" | "video";
+    src: string;
+    srcType: "remote" | "static";
+    dimensions: {
+        width: number;
+        height: number;
+    } | null;
+    position: InsertableCompositionElementPosition | null;
+} | null;
+export declare const getAssetElementFromPath: (assetPath: string) => {
+    type: "asset";
+    assetType: "audio" | "gif" | "image" | "video";
+    src: string;
+    srcType: "remote" | "static";
+    dimensions: {
+        width: number;
+        height: number;
+    } | null;
+    position: InsertableCompositionElementPosition | null;
+} | null;
 export declare const pickFilesToImport: () => Promise<File[]>;
-export declare const importAssets: ({ compositionFile, compositionId, files, }: {
+export declare const importAssets: ({ compositionFile, compositionId, dropPosition, files, }: {
     compositionFile: string;
     compositionId: string;
+    dropPosition: InsertElementDropPosition | null;
     files: File[];
 }) => Promise<void>;
-export declare const importRemoteAsset: ({ compositionFile, compositionId, url, }: {
+export declare const importRemoteAsset: ({ compositionFile, compositionId, dropPosition, url, }: {
     compositionFile: string;
     compositionId: string;
+    dropPosition: InsertElementDropPosition | null;
     url: string;
 }) => Promise<void>;
 export declare const insertRemoteAudio: ({ compositionFile, compositionId, url, }: {
@@ -20,18 +46,20 @@ export declare const insertRemoteAudio: ({ compositionFile, compositionId, url,
     compositionId: string;
     url: string;
 }) => Promise<void>;
-export declare const insertExistingAssets: ({ assetPaths, compositionFile, compositionId, }: {
+export declare const insertExistingAssets: ({ assetPaths, compositionFile, compositionId, dropPosition, }: {
     assetPaths: string[];
     compositionFile: string;
     compositionId: string;
+    dropPosition: InsertElementDropPosition | null;
 }) => Promise<void>;
-export declare const insertComponent: ({ component, compositionFile, compositionId, }: {
+export declare const insertComponent: ({ component, compositionFile, compositionId, dropPosition, }: {
     component: {
         componentName: string;
         importName: string;
         importPath: string;
-        props: import("@remotion/studio-shared").ComponentProp[];
+        props: ComponentProp[];
     };
     compositionFile: string;
     compositionId: string;
+    dropPosition: InsertElementDropPosition | null;
 }) => Promise<void>;