@remotion/studio 4.0.476 → 4.0.477

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSequenceContextMenuItems = void 0;
+const no_react_1 = require("remotion/no-react");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const timeline_asset_link_1 = require("./timeline-asset-link");
+const normalizeMenuDividers = (items) => {
+    var _a;
+    const normalized = [];
+    for (const item of items) {
+        if (item.type === 'divider') {
+            const previousItem = normalized[normalized.length - 1];
+            if (!previousItem || previousItem.type === 'divider') {
+                continue;
+            }
+        }
+        normalized.push(item);
+    }
+    if (((_a = normalized[normalized.length - 1]) === null || _a === void 0 ? void 0 : _a.type) === 'divider') {
+        normalized.pop();
+    }
+    return normalized;
+};
+const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
+    const editorName = window.remotion_editorName;
+    const { documentationLink } = sequence;
+    const items = [
+        editorName
+            ? {
+                type: 'item',
+                id: 'show-in-editor',
+                keyHint: null,
+                label: `Show in ${editorName}`,
+                leftItem: null,
+                disabled: !canOpenInEditor || !originalLocation,
+                onClick: openInEditor,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'show-in-editor',
+            }
+            : null,
+        {
+            type: 'item',
+            id: 'copy-file-location',
+            keyHint: null,
+            label: 'Copy file location',
+            leftItem: null,
+            disabled: !fileLocation,
+            onClick: () => {
+                if (!fileLocation) {
+                    return;
+                }
+                navigator.clipboard
+                    .writeText(fileLocation)
+                    .then(() => {
+                    (0, NotificationCenter_1.showNotification)('Copied file location to clipboard', 1000);
+                })
+                    .catch((err) => {
+                    (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                });
+            },
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'copy-file-location',
+        },
+        documentationLink
+            ? {
+                type: 'item',
+                id: 'open-component-docs',
+                keyHint: null,
+                label: 'Open component docs',
+                leftItem: null,
+                disabled: false,
+                onClick: () => {
+                    window.open(documentationLink, '_blank', 'noopener,noreferrer');
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'open-component-docs',
+            }
+            : null,
+        assetLinkInfo
+            ? {
+                type: 'item',
+                id: 'show-asset',
+                keyHint: null,
+                label: 'Show asset',
+                leftItem: null,
+                disabled: false,
+                onClick: () => {
+                    (0, timeline_asset_link_1.openTimelineAssetLink)(assetLinkInfo, selectAsset);
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'show-asset',
+            }
+            : null,
+        documentationLink || assetLinkInfo
+            ? {
+                type: 'divider',
+                id: 'sequence-link-divider',
+            }
+            : null,
+        sourceActions.length > 0
+            ? {
+                type: 'divider',
+                id: 'sequence-source-actions-divider',
+            }
+            : null,
+        ...sourceActions,
+        {
+            type: 'item',
+            id: 'disable-interactivity',
+            keyHint: null,
+            label: 'Disable interactivity',
+            leftItem: null,
+            disabled: disableInteractivityDisabled,
+            onClick: onDisableSequenceInteractivity,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            value: 'disable-interactivity',
+        },
+        includeSourceEditItems
+            ? {
+                type: 'item',
+                id: 'duplicate-sequence',
+                keyHint: null,
+                label: 'Duplicate',
+                leftItem: null,
+                disabled: duplicateDisabled,
+                onClick: onDuplicateSequenceFromSource,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'duplicate-sequence',
+            }
+            : null,
+        includeSourceEditItems
+            ? {
+                type: 'divider',
+                id: 'sequence-duplicate-delete-divider',
+            }
+            : null,
+        includeSourceEditItems
+            ? {
+                type: 'item',
+                id: 'delete-sequence',
+                keyHint: null,
+                label: 'Delete',
+                leftItem: null,
+                disabled: deleteDisabled,
+                onClick: onDeleteSequenceFromSource,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'delete-sequence',
+            }
+            : null,
+    ].filter(no_react_1.NoReactInternals.truthy);
+    return normalizeMenuDividers(items);
+};
+exports.getSequenceContextMenuItems = getSequenceContextMenuItems;

package/dist/components/Timeline/sequence-props-subscription-store.d.ts

@@ -2,11 +2,12 @@ import type { SequenceNodePath, SequenceSchema } from 'remotion';
 import { callApi } from '../call-api';
 type SubscribeResult = Awaited<ReturnType<typeof callApi<'/api/subscribe-to-sequence-props'>>>;
 type ApplyResult = (result: SubscribeResult) => void;
-export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, effects, nodePath, clientId, applyOnce, applyEach, }: {
+export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, }: {
     fileName: string;
     line: number;
     column: number;
     schema: SequenceSchema;
+    componentIdentity: string | null;
     effects: SequenceSchema[];
     nodePath: SequenceNodePath | null;
     clientId: string;

package/dist/components/Timeline/sequence-props-subscription-store.js

@@ -4,12 +4,19 @@ exports.acquireSequencePropsSubscription = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const remotion_1 = require("remotion");
 const call_api_1 = require("../call-api");
-const makeKey = (fileName, line, column, sequenceKeys, effectKeys) => `${fileName}\0${line}\0${column}\0${sequenceKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}`;
+const makeKey = ({ fileName, line, column, componentIdentity, sequenceKeys, effectKeys, }) => `${fileName}\0${line}\0${column}\0${componentIdentity !== null && componentIdentity !== void 0 ? componentIdentity : ''}\0${sequenceKeys.join('\0')}\0${effectKeys.map((keys) => keys.join('\0')).join('\0\0')}`;
 const entries = new Map();
-const acquireSequencePropsSubscription = ({ fileName, line, column, schema, effects, nodePath, clientId, applyOnce, applyEach, }) => {
+const acquireSequencePropsSubscription = ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, }) => {
     const sequenceKeys = (0, studio_shared_1.getAllSchemaKeys)(schema);
     const effectKeys = effects.map((effect) => (0, studio_shared_1.getAllSchemaKeys)(effect));
-    const key = makeKey(fileName, line, column, sequenceKeys, effectKeys);
+    const key = makeKey({
+        fileName,
+        line,
+        column,
+        componentIdentity,
+        sequenceKeys,
+        effectKeys,
+    });
     let entry = entries.get(key);
     if (!entry) {
         const promise = (0, call_api_1.callApi)('/api/subscribe-to-sequence-props', {
@@ -17,6 +24,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, effe
             line,
             column,
             nodePath,
+            componentIdentity,
             keys: (0, studio_shared_1.getAllSchemaKeys)(schema),
             effects: effectKeys,
             clientId,

package/dist/components/Timeline/should-clear-selection-on-pointer-down.d.ts

@@ -1,3 +1,5 @@
+export declare const PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR = "data-remotion-prevent-selection-clear";
 export declare const shouldClearSelectionOnPointerDown: (event: {
     readonly button: number;
+    readonly target?: EventTarget | null | undefined;
 }) => boolean;

package/dist/components/Timeline/should-clear-selection-on-pointer-down.js

@@ -1,7 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.shouldClearSelectionOnPointerDown = void 0;
+exports.shouldClearSelectionOnPointerDown = exports.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR = void 0;
+exports.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR = 'data-remotion-prevent-selection-clear';
+const isSelectionClearBlocked = (target) => {
+    if (target === null ||
+        target === undefined ||
+        typeof target !== 'object' ||
+        !('closest' in target) ||
+        typeof target.closest !== 'function') {
+        return false;
+    }
+    return (target.closest(`[${exports.PREVENT_CLEAR_SELECTION_ON_POINTER_DOWN_ATTR}]`) !== null);
+};
 const shouldClearSelectionOnPointerDown = (event) => {
-    return event.button === 0;
+    if (event.button !== 0) {
+        return false;
+    }
+    return !isSelectionClearBlocked(event.target);
 };
 exports.shouldClearSelectionOnPointerDown = shouldClearSelectionOnPointerDown;

package/dist/components/Timeline/update-selected-easing.d.ts

@@ -3,19 +3,17 @@ import type { SetPropStatuses } from './save-sequence-prop';
 import type { TimelineEasingSelection, TimelineSelection } from './TimelineSelection';
 export type EasingSelection = TimelineEasingSelection;
 export type TimelineEasingValue = 'linear' | [number, number, number, number];
-export declare const getEasingSelections: (selections: readonly TimelineSelection[]) => ({
-    readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
-} & {
+export declare const getEasingSelections: (selections: readonly TimelineSelection[]) => {
     readonly type: "easing";
+    readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
     readonly fromFrame: number;
     readonly toFrame: number;
     readonly segmentIndex: number;
-})[];
+}[];
 export declare const getTimelineEasingValueForSelection: ({ selection, sequences, overrideIdsToNodePaths, propStatuses, }: {
     selection: {
-        readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
-    } & {
         readonly type: "easing";
+        readonly nodePathInfo: import("../../helpers/get-timeline-sequence-sort-key").SequenceNodePathInfo;
         readonly fromFrame: number;
         readonly toFrame: number;
         readonly segmentIndex: number;

package/dist/components/Timeline/use-sequence-props-subscription.d.ts

@@ -1,7 +1,8 @@
 import type { SequenceSchema } from 'remotion';
 import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, schema, effects, }: {
+export declare const useSequencePropsSubscription: ({ originalLocation, overrideId, componentIdentity, schema, effects, }: {
     overrideId: string;
+    componentIdentity: string | null;
     schema: SequenceSchema;
     effects: SequenceSchema[];
     originalLocation: OriginalPosition | null;

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -7,7 +7,7 @@ const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const sequence_props_subscription_store_1 = require("./sequence-props-subscription-store");
-const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, effects, }) => {
+const useSequencePropsSubscription = ({ originalLocation, overrideId, componentIdentity, schema, effects, }) => {
     var _a, _b, _c;
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setOverrideIdToNodePath } = (0, react_1.useContext)(remotion_1.Internals.OverrideIdsToNodePathsSettersContext);
@@ -50,6 +50,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
             line: locationLine,
             column: locationColumn,
             schema,
+            componentIdentity,
             effects,
             nodePath: (_b = nodePathAtResubscribe === null || nodePathAtResubscribe === void 0 ? void 0 : nodePathAtResubscribe.nodePath) !== null && _b !== void 0 ? _b : null,
             clientId,
@@ -85,6 +86,7 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, ef
         };
     }, [
         clientId,
+        componentIdentity,
         effects,
         effectsSignature,
         locationColumn,

package/dist/components/Timeline/use-timeline-keyframe-drag.d.ts

@@ -1,6 +1,30 @@
 import type React from 'react';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-import { type TimelineSelectionInteraction } from './TimelineSelection';
+import { type TimelineDraggedKeyframe } from './TimelineKeyframeDragState';
+import { type TimelineSelection, type TimelineSelectionInteraction } from './TimelineSelection';
+export declare const getKeyframesForTimelineEasingDrag: ({ currentSelections, interaction, selectionItem, selected, }: {
+    readonly currentSelections: readonly TimelineSelection[];
+    readonly interaction: TimelineSelectionInteraction;
+    readonly selectionItem: {
+        readonly type: "easing";
+        readonly nodePathInfo: SequenceNodePathInfo;
+        readonly fromFrame: number;
+        readonly toFrame: number;
+        readonly segmentIndex: number;
+    };
+    readonly selected: boolean;
+}) => ({
+    readonly type: "keyframe";
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly frame: number;
+} & {
+    type: "keyframe";
+})[];
+export declare const getTimelineSelectionsAfterEasingKeyframeDrag: ({ delta, selections, targets, }: {
+    readonly delta: number;
+    readonly selections: readonly TimelineSelection[];
+    readonly targets: readonly TimelineDraggedKeyframe[];
+}) => TimelineSelection[];
 export declare const useTimelineKeyframeDrag: ({ frame, nodePathInfo, onSelect, selectable, selected, }: {
     readonly frame: number;
     readonly nodePathInfo: SequenceNodePathInfo;
@@ -8,3 +32,15 @@ export declare const useTimelineKeyframeDrag: ({ frame, nodePathInfo, onSelect,
     readonly selectable: boolean;
     readonly selected: boolean;
 }) => (e: React.PointerEvent<HTMLButtonElement>) => void;
+export declare const useTimelineEasingKeyframeDrag: ({ onSelect, selectable, selected, selectionItem, }: {
+    readonly onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    readonly selectable: boolean;
+    readonly selected: boolean;
+    readonly selectionItem: {
+        readonly type: "easing";
+        readonly nodePathInfo: SequenceNodePathInfo;
+        readonly fromFrame: number;
+        readonly toFrame: number;
+        readonly segmentIndex: number;
+    };
+}) => (e: React.PointerEvent<HTMLButtonElement>) => void;

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;
@@ -373,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;