@remotion/studio 4.0.473 → 4.0.475

package/dist/components/Timeline/TimelineSelection.d.ts

@@ -7,9 +7,8 @@ export declare const TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = 2;
 export declare const getTimelineSelectedLabelStyle: (selected: boolean, subcategory: boolean) => CSSProperties;
 export declare const getTimelineColor: (selected: boolean, subcategory: boolean) => "black" | "rgba(255, 255, 255, 0.8)";
 export declare const getTimelineSelectedTrackHighlightStyle: (timelineWidth: number) => CSSProperties;
-export declare const SELECTION_ENABLED = false;
-export declare const TIMELINE_TOP_DRAG = false;
-export declare const ENABLE_OUTLINES = false;
+export declare const TIMELINE_BACKGROUND = "#0F1113";
+export declare const TIMELINE_TICKS_BACKGROUND = "rgb(31,36,40)";
 type TimelineSelectionBase = {
     readonly nodePathInfo: SequenceNodePathInfo;
 };
@@ -30,7 +29,15 @@ export type TimelineSelection = (TimelineSelectionBase & {
 }) | (TimelineSelectionBase & {
     readonly type: 'keyframe';
     readonly frame: number;
+}) | (TimelineSelectionBase & {
+    readonly type: 'easing';
+    readonly fromFrame: number;
+    readonly toFrame: number;
+    readonly segmentIndex: number;
 });
+export type TimelineEasingSelection = Extract<TimelineSelection, {
+    type: 'easing';
+}>;
 export type TimelineSelectionInteraction = {
     readonly shiftKey: boolean;
     readonly toggleKey: boolean;
@@ -40,27 +47,74 @@ export declare const isTimelineSelectionModifierEvent: ({ shiftKey, metaKey, ctr
     readonly metaKey: boolean;
     readonly ctrlKey: boolean;
 }) => boolean;
+export declare const shouldSelectTimelineRowOnPointerDown: ({ selected, shiftKey, metaKey, ctrlKey, }: {
+    readonly selected: boolean;
+    readonly shiftKey: boolean;
+    readonly metaKey: boolean;
+    readonly ctrlKey: boolean;
+}) => boolean;
 export type TimelineSelectionState = {
     readonly selectedItems: readonly TimelineSelection[];
     readonly anchor: TimelineSelection | null;
 };
+export type TimelineMarqueeRect = {
+    readonly left: number;
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+};
+export type TimelineMarqueeSelectionKind = 'sequence' | 'keyframes-and-easings';
+export type TimelineMarqueeSelectionCandidate = {
+    readonly item: TimelineSelection;
+    readonly rect: TimelineMarqueeRect;
+};
 export declare const getTimelineSelectionAfterInteraction: ({ currentState, clickedItem, interaction, allSelectableItems, }: {
     readonly currentState: TimelineSelectionState;
     readonly clickedItem: TimelineSelection;
     readonly interaction: TimelineSelectionInteraction;
     readonly allSelectableItems: readonly TimelineSelection[];
 }) => TimelineSelectionState;
+export declare const getNormalizedTimelineMarqueeRect: ({ startX, startY, currentX, currentY, }: {
+    readonly startX: number;
+    readonly startY: number;
+    readonly currentX: number;
+    readonly currentY: number;
+}) => TimelineMarqueeRect;
+export declare const getClampedTimelineMarqueePoint: ({ x, y, bounds, }: {
+    readonly x: number;
+    readonly y: number;
+    readonly bounds: TimelineMarqueeRect;
+}) => {
+    readonly x: number;
+    readonly y: number;
+};
+export declare const timelineMarqueeRectsIntersect: (a: TimelineMarqueeRect, b: TimelineMarqueeRect) => boolean;
+export declare const getTimelineMarqueeSelection: ({ candidates, lockedSelectionKind, marqueeRect, }: {
+    readonly candidates: readonly TimelineMarqueeSelectionCandidate[];
+    readonly lockedSelectionKind: TimelineMarqueeSelectionKind | null;
+    readonly marqueeRect: TimelineMarqueeRect;
+}) => {
+    readonly lockedSelectionKind: TimelineMarqueeSelectionKind | null;
+    readonly selectedItems: readonly TimelineSelection[];
+};
 type TimelineSelectionContextValue = {
     readonly canSelect: boolean;
+    readonly canSelectEasing: boolean;
     readonly selectedItems: readonly TimelineSelection[];
     readonly isSelected: (item: TimelineSelection) => boolean;
     readonly selectItem: (item: TimelineSelection, interaction?: TimelineSelectionInteraction) => void;
     readonly selectItems: (items: readonly TimelineSelection[]) => void;
     readonly registerSelectableItem: (item: TimelineSelection) => () => void;
+    readonly registerMarqueeSelectableItem: (item: TimelineSelection, getRect: () => DOMRect | null) => () => void;
+    readonly getMarqueeSelection: (marqueeRect: TimelineMarqueeRect, lockedSelectionKind: TimelineMarqueeSelectionKind | null) => {
+        readonly lockedSelectionKind: TimelineMarqueeSelectionKind | null;
+        readonly selectedItems: readonly TimelineSelection[];
+    };
     readonly containsSelection: (nodePathInfo: SequenceNodePathInfo) => boolean;
     readonly clearSelection: () => void;
 };
 export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => TimelineSelection | null;
+export declare const getTimelineSelectionKey: (item: TimelineSelection) => string;
 export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TrackWithHash, "nodePathInfo">[]) => TimelineSelection[];
 export declare const getTimelineSequenceSelectionKey: (nodePathInfo: SequenceNodePathInfo) => string;
 export declare const TimelineSelectAllKeybindings: React.FC<{
@@ -70,16 +124,41 @@ export declare const TimelineSelectionProvider: React.FC<{
     readonly children: React.ReactNode;
 }>;
 export declare const useTimelineSelection: () => TimelineSelectionContextValue;
+export declare const TIMELINE_MARQUEE_ITEM_ATTR = "data-timeline-marquee-item";
+export declare const TIMELINE_SCRUBBER_ATTR = "data-timeline-scrubber";
 export declare const useCurrentTimelineSelectionStateAsRef: () => React.RefObject<TimelineSelectionContextValue>;
+export declare const useTimelineMarqueeSelection: () => {
+    marqueeRect: TimelineMarqueeRect | null;
+    onPointerDownCapture: (event: React.PointerEvent<HTMLDivElement>) => void;
+};
+export declare const useTimelineMarqueeSelectableItem: (item: TimelineSelection | null, ref: React.RefObject<Element | null>) => void;
 export declare const useTimelineRowSelection: (nodePathInfo: SequenceNodePathInfo | null) => {
     onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
     selectable: boolean;
+    selectionItem: TimelineSelection | null;
     selected: boolean;
 };
 export declare const useTimelineKeyframeSelection: (nodePathInfo: SequenceNodePathInfo, frame: number) => {
+    onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
+    selectable: boolean;
+    selectionItem: TimelineSelection;
+    selected: boolean;
+};
+export declare const useTimelineEasingSelection: ({ nodePathInfo, fromFrame, toFrame, segmentIndex, }: {
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly fromFrame: number;
+    readonly toFrame: number;
+    readonly segmentIndex: number;
+}) => {
     onSelect: (interaction?: TimelineSelectionInteraction | undefined) => void;
     selectable: boolean;
     selected: boolean;
+    selectionItem: TimelineSelectionBase & {
+        readonly type: "easing";
+        readonly fromFrame: number;
+        readonly toFrame: number;
+        readonly segmentIndex: number;
+    };
 };
 export declare const useTimelineRowContainsSelection: (nodePathInfo: SequenceNodePathInfo | null) => boolean;
 export {};

package/dist/components/Timeline/TimelineSelection.js

@@ -1,13 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowContainsSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionFromNodePathInfo = exports.getTimelineSelectionAfterInteraction = exports.isTimelineSelectionModifierEvent = exports.ENABLE_OUTLINES = exports.TIMELINE_TOP_DRAG = exports.SELECTION_ENABLED = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowContainsSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getTimelineSelectionAfterInteraction = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const client_id_1 = require("../../helpers/client-id");
+const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const z_index_1 = require("../../state/z-index");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
 const TimelineDeleteKeybindings_1 = require("./TimelineDeleteKeybindings");
 exports.TIMELINE_SELECTED_BACKGROUND = '#3B3F42';
@@ -44,14 +46,27 @@ const getTimelineSelectedTrackHighlightStyle = (timelineWidth) => ({
     width: timelineWidth,
 });
 exports.getTimelineSelectedTrackHighlightStyle = getTimelineSelectedTrackHighlightStyle;
-exports.SELECTION_ENABLED = false;
-exports.TIMELINE_TOP_DRAG = false;
-exports.ENABLE_OUTLINES = false;
+exports.TIMELINE_BACKGROUND = '#0F1113';
+exports.TIMELINE_TICKS_BACKGROUND = colors_1.BACKGROUND;
 const isTimelineSelectionModifierEvent = ({ shiftKey, metaKey, ctrlKey, }) => {
     return shiftKey || metaKey || ctrlKey;
 };
 exports.isTimelineSelectionModifierEvent = isTimelineSelectionModifierEvent;
+const shouldSelectTimelineRowOnPointerDown = ({ selected, shiftKey, metaKey, ctrlKey, }) => {
+    return (!selected || (0, exports.isTimelineSelectionModifierEvent)({ shiftKey, metaKey, ctrlKey }));
+};
+exports.shouldSelectTimelineRowOnPointerDown = shouldSelectTimelineRowOnPointerDown;
 const getTimelineSelectionType = (item) => item.type;
+const areTimelineSelectionTypesCompatible = (firstType, secondType) => {
+    if (firstType === secondType) {
+        return true;
+    }
+    return ((firstType === 'sequence-prop' && secondType === 'sequence-effect-prop') ||
+        (firstType === 'sequence-effect-prop' && secondType === 'sequence-prop') ||
+        (firstType === 'keyframe' && secondType === 'easing') ||
+        (firstType === 'easing' && secondType === 'keyframe'));
+};
+const isTimelineSelectionCompatibleWithType = (item, type) => areTimelineSelectionTypesCompatible(getTimelineSelectionType(item), type);
 const getTimelineSelectionAnchor = (selectedItems, previousAnchor, targetType) => {
     if (previousAnchor &&
         getTimelineSelectionType(previousAnchor) === targetType) {
@@ -66,11 +81,11 @@ const getTimelineSelectionAnchor = (selectedItems, previousAnchor, targetType) =
     return null;
 };
 const getRangeSelection = ({ anchor, clickedItem, allSelectableItems, }) => {
-    const anchorKey = getTimelineSelectionKey(anchor);
-    const clickedKey = getTimelineSelectionKey(clickedItem);
+    const anchorKey = (0, exports.getTimelineSelectionKey)(anchor);
+    const clickedKey = (0, exports.getTimelineSelectionKey)(clickedItem);
     const orderedOfType = allSelectableItems.filter((item) => getTimelineSelectionType(item) === clickedItem.type);
-    const anchorIndex = orderedOfType.findIndex((item) => getTimelineSelectionKey(item) === anchorKey);
-    const clickedIndex = orderedOfType.findIndex((item) => getTimelineSelectionKey(item) === clickedKey);
+    const anchorIndex = orderedOfType.findIndex((item) => (0, exports.getTimelineSelectionKey)(item) === anchorKey);
+    const clickedIndex = orderedOfType.findIndex((item) => (0, exports.getTimelineSelectionKey)(item) === clickedKey);
     if (anchorIndex === -1 || clickedIndex === -1) {
         return [clickedItem];
     }
@@ -83,7 +98,7 @@ const getTimelineSelectionAfterInteraction = ({ currentState, clickedItem, inter
     const { selectedItems, anchor: previousAnchor } = currentState;
     const clickedType = getTimelineSelectionType(clickedItem);
     const nextAnchor = getTimelineSelectionAnchor(selectedItems, previousAnchor, clickedType);
-    const clickedKey = getTimelineSelectionKey(clickedItem);
+    const clickedKey = (0, exports.getTimelineSelectionKey)(clickedItem);
     if (interaction.shiftKey && nextAnchor) {
         return {
             selectedItems: getRangeSelection({
@@ -95,22 +110,22 @@ const getTimelineSelectionAfterInteraction = ({ currentState, clickedItem, inter
         };
     }
     if (interaction.toggleKey) {
-        const sameTypeItems = selectedItems.filter((item) => getTimelineSelectionType(item) === clickedType);
-        const existingKeySet = new Set(sameTypeItems.map(getTimelineSelectionKey));
+        const compatibleItems = selectedItems.filter((item) => isTimelineSelectionCompatibleWithType(item, clickedType));
+        const existingKeySet = new Set(compatibleItems.map(exports.getTimelineSelectionKey));
         if (existingKeySet.has(clickedKey)) {
-            const toggledSelection = sameTypeItems.filter((item) => getTimelineSelectionKey(item) !== clickedKey);
+            const toggledSelection = compatibleItems.filter((item) => (0, exports.getTimelineSelectionKey)(item) !== clickedKey);
             return {
                 selectedItems: toggledSelection,
                 anchor: toggledSelection.length === 0 ? null : clickedItem,
             };
         }
         const selectableOrderMap = new Map(allSelectableItems
-            .filter((item) => getTimelineSelectionType(item) === clickedType)
-            .map((item, index) => [getTimelineSelectionKey(item), index]));
-        const extendedSelection = [...sameTypeItems, clickedItem].sort((a, b) => {
+            .filter((item) => isTimelineSelectionCompatibleWithType(item, clickedType))
+            .map((item, index) => [(0, exports.getTimelineSelectionKey)(item), index]));
+        const extendedSelection = [...compatibleItems, clickedItem].sort((a, b) => {
             var _a, _b;
-            return (((_a = selectableOrderMap.get(getTimelineSelectionKey(a))) !== null && _a !== void 0 ? _a : 0) -
-                ((_b = selectableOrderMap.get(getTimelineSelectionKey(b))) !== null && _b !== void 0 ? _b : 0));
+            return (((_a = selectableOrderMap.get((0, exports.getTimelineSelectionKey)(a))) !== null && _a !== void 0 ? _a : 0) -
+                ((_b = selectableOrderMap.get((0, exports.getTimelineSelectionKey)(b))) !== null && _b !== void 0 ? _b : 0));
         });
         return {
             selectedItems: extendedSelection,
@@ -123,13 +138,80 @@ const getTimelineSelectionAfterInteraction = ({ currentState, clickedItem, inter
     };
 };
 exports.getTimelineSelectionAfterInteraction = getTimelineSelectionAfterInteraction;
+const getNormalizedTimelineMarqueeRect = ({ startX, startY, currentX, currentY, }) => ({
+    left: Math.min(startX, currentX),
+    top: Math.min(startY, currentY),
+    right: Math.max(startX, currentX),
+    bottom: Math.max(startY, currentY),
+});
+exports.getNormalizedTimelineMarqueeRect = getNormalizedTimelineMarqueeRect;
+const getClampedTimelineMarqueePoint = ({ x, y, bounds, }) => ({
+    x: Math.min(bounds.right, Math.max(bounds.left, x)),
+    y: Math.min(bounds.bottom, Math.max(bounds.top, y)),
+});
+exports.getClampedTimelineMarqueePoint = getClampedTimelineMarqueePoint;
+const timelineMarqueeRectsIntersect = (a, b) => a.left <= b.right &&
+    a.right >= b.left &&
+    a.top <= b.bottom &&
+    a.bottom >= b.top;
+exports.timelineMarqueeRectsIntersect = timelineMarqueeRectsIntersect;
+const getTimelineMarqueeSelectionKind = (item) => {
+    if (item.type === 'sequence') {
+        return 'sequence';
+    }
+    if (item.type === 'keyframe' || item.type === 'easing') {
+        return 'keyframes-and-easings';
+    }
+    return null;
+};
+const isTimelineSelectionCompatibleWithMarqueeKind = (item, kind) => {
+    if (kind === 'sequence') {
+        return item.type === 'sequence';
+    }
+    return item.type === 'keyframe' || item.type === 'easing';
+};
+const getTimelineMarqueeSelection = ({ candidates, lockedSelectionKind, marqueeRect, }) => {
+    const intersectingCandidates = candidates.filter((candidate) => {
+        return (getTimelineMarqueeSelectionKind(candidate.item) !== null &&
+            (0, exports.timelineMarqueeRectsIntersect)(candidate.rect, marqueeRect));
+    });
+    const getFirstIntersectingSelectionKind = () => intersectingCandidates.length === 0
+        ? null
+        : getTimelineMarqueeSelectionKind(intersectingCandidates[0].item);
+    let nextLockedSelectionKind = lockedSelectionKind !== null && lockedSelectionKind !== void 0 ? lockedSelectionKind : getFirstIntersectingSelectionKind();
+    const getSelectedItemsForKind = (kind) => intersectingCandidates
+        .filter((candidate) => isTimelineSelectionCompatibleWithMarqueeKind(candidate.item, kind))
+        .map((candidate) => candidate.item);
+    if (nextLockedSelectionKind === null) {
+        return { lockedSelectionKind: null, selectedItems: [] };
+    }
+    let selectedItems = getSelectedItemsForKind(nextLockedSelectionKind);
+    if (lockedSelectionKind !== null && selectedItems.length === 0) {
+        nextLockedSelectionKind = getFirstIntersectingSelectionKind();
+        selectedItems =
+            nextLockedSelectionKind === null
+                ? []
+                : getSelectedItemsForKind(nextLockedSelectionKind);
+    }
+    return {
+        lockedSelectionKind: nextLockedSelectionKind,
+        selectedItems,
+    };
+};
+exports.getTimelineMarqueeSelection = getTimelineMarqueeSelection;
 const defaultTimelineSelectionContextValue = {
     canSelect: false,
+    canSelectEasing: false,
     selectedItems: [],
     isSelected: () => false,
     selectItem: () => undefined,
     selectItems: () => undefined,
     registerSelectableItem: () => () => undefined,
+    registerMarqueeSelectableItem: () => () => undefined,
+    getMarqueeSelection: () => ({
+        lockedSelectionKind: null,
+        selectedItems: [],
+    }),
     containsSelection: () => false,
     clearSelection: () => undefined,
 };
@@ -191,10 +273,13 @@ const getTimelineSelectionKey = (item) => {
             return `${sequenceKey}.sequence-effect-prop.${item.i}.${item.key}`;
         case 'keyframe':
             return `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(item.nodePathInfo)}.keyframe.${item.frame}`;
+        case 'easing':
+            return `${(0, timeline_node_path_key_1.timelineNodePathInfoToKey)(item.nodePathInfo)}.easing.${item.segmentIndex}.${item.fromFrame}.${item.toFrame}`;
         default:
             throw new Error(`Unexpected timeline selection type: ${item}`);
     }
 };
+exports.getTimelineSelectionKey = getTimelineSelectionKey;
 const nodePathDescendsFrom = (descendant, ancestor) => {
     if ((0, studio_shared_1.stringifySequenceExpandedRowKey)(descendant.sequenceSubscriptionKey) !==
         (0, studio_shared_1.stringifySequenceExpandedRowKey)(ancestor.sequenceSubscriptionKey)) {
@@ -256,28 +341,32 @@ const TimelineSelectAllKeybindings = ({ timeline }) => {
 exports.TimelineSelectAllKeybindings = TimelineSelectAllKeybindings;
 const TimelineSelectionProvider = ({ children }) => {
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const canSelect = (exports.SELECTION_ENABLED || exports.ENABLE_OUTLINES) &&
-        previewServerState.type === 'connected' &&
+    const canSelect = previewServerState.type === 'connected' &&
+        !window.remotion_isReadOnlyStudio;
+    const canSelectEasing = previewServerState.type === 'connected' &&
         !window.remotion_isReadOnlyStudio;
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     const selectionAnchor = (0, react_1.useRef)(null);
     const selectableItemsOrder = (0, react_1.useRef)(new Map());
     const selectableItems = (0, react_1.useRef)(new Map());
+    const marqueeSelectableItems = (0, react_1.useRef)(new Map());
     const registrationCounter = (0, react_1.useRef)(0);
+    const marqueeRegistrationCounter = (0, react_1.useRef)(0);
     (0, react_1.useEffect)(() => {
-        if (!canSelect) {
+        if (!canSelect && !canSelectEasing) {
             setSelectedItems([]);
         }
-    }, [canSelect]);
-    const selectedKeys = (0, react_1.useMemo)(() => new Set(selectedItems.map(getTimelineSelectionKey)), [selectedItems]);
+    }, [canSelect, canSelectEasing]);
+    const canSelectItem = (0, react_1.useCallback)((item) => canSelect || (canSelectEasing && item.type === 'easing'), [canSelect, canSelectEasing]);
+    const selectedKeys = (0, react_1.useMemo)(() => new Set(selectedItems.map(exports.getTimelineSelectionKey)), [selectedItems]);
     const isSelected = (0, react_1.useCallback)((item) => {
-        return selectedKeys.has(getTimelineSelectionKey(item));
+        return selectedKeys.has((0, exports.getTimelineSelectionKey)(item));
     }, [selectedKeys]);
     const selectItem = (0, react_1.useCallback)((item, interaction = {
         shiftKey: false,
         toggleKey: false,
     }) => {
-        if (!canSelect) {
+        if (!canSelectItem(item)) {
             return;
         }
         setSelectedItems((currentSelectedItems) => {
@@ -285,8 +374,8 @@ const TimelineSelectionProvider = ({ children }) => {
                 ...selectableItems.current.values(),
             ].sort((a, b) => {
                 var _a, _b;
-                return (((_a = selectableItemsOrder.current.get(getTimelineSelectionKey(a))) !== null && _a !== void 0 ? _a : 0) -
-                    ((_b = selectableItemsOrder.current.get(getTimelineSelectionKey(b))) !== null && _b !== void 0 ? _b : 0));
+                return (((_a = selectableItemsOrder.current.get((0, exports.getTimelineSelectionKey)(a))) !== null && _a !== void 0 ? _a : 0) -
+                    ((_b = selectableItemsOrder.current.get((0, exports.getTimelineSelectionKey)(b))) !== null && _b !== void 0 ? _b : 0));
             });
             const nextState = (0, exports.getTimelineSelectionAfterInteraction)({
                 currentState: {
@@ -300,17 +389,17 @@ const TimelineSelectionProvider = ({ children }) => {
             selectionAnchor.current = nextState.anchor;
             return nextState.selectedItems;
         });
-    }, [canSelect]);
+    }, [canSelectItem]);
     const selectItems = (0, react_1.useCallback)((items) => {
-        if (!canSelect) {
+        if (!items.every(canSelectItem)) {
             return;
         }
         selectionAnchor.current =
             items.length === 0 ? null : items[items.length - 1];
         setSelectedItems(items);
-    }, [canSelect]);
+    }, [canSelectItem]);
     const registerSelectableItem = (0, react_1.useCallback)((item) => {
-        const key = getTimelineSelectionKey(item);
+        const key = (0, exports.getTimelineSelectionKey)(item);
         const registrationOrder = registrationCounter.current;
         registrationCounter.current += 1;
         selectableItems.current.set(key, item);
@@ -320,6 +409,48 @@ const TimelineSelectionProvider = ({ children }) => {
             selectableItemsOrder.current.delete(key);
         };
     }, []);
+    const registerMarqueeSelectableItem = (0, react_1.useCallback)((item, getRect) => {
+        const key = (0, exports.getTimelineSelectionKey)(item);
+        const registrationOrder = marqueeRegistrationCounter.current;
+        marqueeRegistrationCounter.current += 1;
+        marqueeSelectableItems.current.set(key, {
+            getRect,
+            item,
+            order: registrationOrder,
+        });
+        return () => {
+            marqueeSelectableItems.current.delete(key);
+        };
+    }, []);
+    const getMarqueeSelectionForRect = (0, react_1.useCallback)((marqueeRect, lockedSelectionKind) => {
+        const candidates = [...marqueeSelectableItems.current.values()]
+            .sort((a, b) => a.order - b.order)
+            .flatMap((candidate) => {
+            if (!canSelectItem(candidate.item)) {
+                return [];
+            }
+            const rect = candidate.getRect();
+            if (rect === null) {
+                return [];
+            }
+            return [
+                {
+                    item: candidate.item,
+                    rect: {
+                        bottom: rect.bottom,
+                        left: rect.left,
+                        right: rect.right,
+                        top: rect.top,
+                    },
+                },
+            ];
+        });
+        return (0, exports.getTimelineMarqueeSelection)({
+            candidates,
+            lockedSelectionKind,
+            marqueeRect,
+        });
+    }, [canSelectItem]);
     const clearSelection = (0, react_1.useCallback)(() => {
         selectionAnchor.current = null;
         setSelectedItems([]);
@@ -329,20 +460,26 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [selectedItems]);
     const value = (0, react_1.useMemo)(() => ({
         canSelect,
+        canSelectEasing,
         selectedItems,
         isSelected,
         selectItem,
         selectItems,
         registerSelectableItem,
+        registerMarqueeSelectableItem,
+        getMarqueeSelection: getMarqueeSelectionForRect,
         containsSelection,
         clearSelection,
     }), [
         canSelect,
+        canSelectEasing,
         selectedItems,
         isSelected,
         selectItem,
         selectItems,
         registerSelectableItem,
+        registerMarqueeSelectableItem,
+        getMarqueeSelectionForRect,
         containsSelection,
         clearSelection,
     ]);
@@ -356,6 +493,8 @@ const useTimelineSelection = () => {
     return (0, react_1.useContext)(TimelineSelectionContext);
 };
 exports.useTimelineSelection = useTimelineSelection;
+exports.TIMELINE_MARQUEE_ITEM_ATTR = 'data-timeline-marquee-item';
+exports.TIMELINE_SCRUBBER_ATTR = 'data-timeline-scrubber';
 const useCurrentTimelineSelectionStateAsRef = () => {
     const currentSelection = (0, react_1.useContext)(CurrentTimelineSelectionContext);
     if (currentSelection === null) {
@@ -364,6 +503,123 @@ const useCurrentTimelineSelectionStateAsRef = () => {
     return currentSelection;
 };
 exports.useCurrentTimelineSelectionStateAsRef = useCurrentTimelineSelectionStateAsRef;
+const useTimelineMarqueeSelection = () => {
+    const { canSelect, canSelectEasing, getMarqueeSelection, selectItems } = (0, exports.useTimelineSelection)();
+    const { isHighestContext } = (0, z_index_1.useZIndex)();
+    const [marqueeRect, setMarqueeRect] = (0, react_1.useState)(null);
+    const onPointerDownCapture = (0, react_1.useCallback)((event) => {
+        if (!isHighestContext) {
+            return;
+        }
+        if (event.button !== 0 || (!canSelect && !canSelectEasing)) {
+            return;
+        }
+        if (event.shiftKey || event.metaKey || event.ctrlKey) {
+            return;
+        }
+        if (!(event.target instanceof Element)) {
+            return;
+        }
+        if (event.target.closest(`[${exports.TIMELINE_MARQUEE_ITEM_ATTR}]`) ||
+            event.target.closest(`[${exports.TIMELINE_SCRUBBER_ATTR}]`)) {
+            return;
+        }
+        const { currentTarget: target, pointerId } = event;
+        if (target.setPointerCapture) {
+            target.setPointerCapture(pointerId);
+        }
+        const initialBounds = target.getBoundingClientRect();
+        const marqueeBounds = {
+            bottom: initialBounds.bottom,
+            left: initialBounds.left,
+            right: initialBounds.right,
+            top: initialBounds.top,
+        };
+        const start = (0, exports.getClampedTimelineMarqueePoint)({
+            bounds: marqueeBounds,
+            x: event.clientX,
+            y: event.clientY,
+        });
+        const startX = start.x;
+        const startY = start.y;
+        const previousUserSelect = document.body.style.userSelect;
+        const previousWebkitUserSelect = document.body.style.webkitUserSelect;
+        document.body.style.userSelect = 'none';
+        document.body.style.webkitUserSelect = 'none';
+        let hasDragged = false;
+        let lockedSelectionKind = null;
+        const cleanup = () => {
+            var _a;
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+            window.removeEventListener('pointercancel', onPointerCancel);
+            if ((_a = target.hasPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, pointerId)) {
+                target.releasePointerCapture(pointerId);
+            }
+            document.body.style.userSelect = previousUserSelect;
+            document.body.style.webkitUserSelect = previousWebkitUserSelect;
+            setMarqueeRect(null);
+        };
+        const updateSelection = (clientX, clientY) => {
+            const current = (0, exports.getClampedTimelineMarqueePoint)({
+                bounds: marqueeBounds,
+                x: clientX,
+                y: clientY,
+            });
+            if (!hasDragged &&
+                Math.max(Math.abs(current.x - startX), Math.abs(current.y - startY)) <
+                    3) {
+                return;
+            }
+            hasDragged = true;
+            const rect = (0, exports.getNormalizedTimelineMarqueeRect)({
+                currentX: current.x,
+                currentY: current.y,
+                startX,
+                startY,
+            });
+            const nextSelection = getMarqueeSelection(rect, lockedSelectionKind);
+            lockedSelectionKind = nextSelection.lockedSelectionKind;
+            setMarqueeRect(rect);
+            selectItems(nextSelection.selectedItems);
+        };
+        const onPointerMove = (moveEvent) => {
+            updateSelection(moveEvent.clientX, moveEvent.clientY);
+        };
+        const onPointerUp = (upEvent) => {
+            updateSelection(upEvent.clientX, upEvent.clientY);
+            cleanup();
+        };
+        const onPointerCancel = () => {
+            cleanup();
+        };
+        window.addEventListener('pointermove', onPointerMove);
+        window.addEventListener('pointerup', onPointerUp);
+        window.addEventListener('pointercancel', onPointerCancel);
+    }, [
+        canSelect,
+        canSelectEasing,
+        getMarqueeSelection,
+        isHighestContext,
+        selectItems,
+    ]);
+    return { marqueeRect, onPointerDownCapture };
+};
+exports.useTimelineMarqueeSelection = useTimelineMarqueeSelection;
+const useTimelineMarqueeSelectableItem = (item, ref) => {
+    const { registerMarqueeSelectableItem } = (0, exports.useTimelineSelection)();
+    (0, react_1.useEffect)(() => {
+        if (item === null) {
+            return;
+        }
+        return registerMarqueeSelectableItem(item, () => {
+            var _a;
+            var _b;
+            return (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) !== null && _b !== void 0 ? _b : null;
+        });
+    }, [item, ref, registerMarqueeSelectableItem]);
+};
+exports.useTimelineMarqueeSelectableItem = useTimelineMarqueeSelectableItem;
 const useTimelineRowSelection = (nodePathInfo) => {
     const { canSelect, isSelected, selectItem, registerSelectableItem } = (0, exports.useTimelineSelection)();
     const selectionItem = (0, react_1.useMemo)(() => (0, exports.getTimelineSelectionFromNodePathInfo)(nodePathInfo), [nodePathInfo]);
@@ -383,6 +639,7 @@ const useTimelineRowSelection = (nodePathInfo) => {
     return {
         onSelect,
         selectable: canSelect && selectionItem !== null,
+        selectionItem,
         selected,
     };
 };
@@ -404,10 +661,35 @@ const useTimelineKeyframeSelection = (nodePathInfo, frame) => {
     return {
         onSelect,
         selectable: canSelect,
+        selectionItem,
         selected,
     };
 };
 exports.useTimelineKeyframeSelection = useTimelineKeyframeSelection;
+const useTimelineEasingSelection = ({ nodePathInfo, fromFrame, toFrame, segmentIndex, }) => {
+    const { canSelectEasing, isSelected, selectItem, registerSelectableItem } = (0, exports.useTimelineSelection)();
+    const selectionItem = (0, react_1.useMemo)(() => ({
+        type: 'easing',
+        nodePathInfo,
+        fromFrame,
+        toFrame,
+        segmentIndex,
+    }), [nodePathInfo, fromFrame, segmentIndex, toFrame]);
+    (0, react_1.useEffect)(() => {
+        return registerSelectableItem(selectionItem);
+    }, [registerSelectableItem, selectionItem]);
+    const selected = isSelected(selectionItem);
+    const onSelect = (0, react_1.useCallback)((interaction) => {
+        selectItem(selectionItem, interaction);
+    }, [selectItem, selectionItem]);
+    return {
+        onSelect,
+        selectable: canSelectEasing,
+        selected,
+        selectionItem,
+    };
+};
+exports.useTimelineEasingSelection = useTimelineEasingSelection;
 const useTimelineRowContainsSelection = (nodePathInfo) => {
     const { containsSelection } = (0, exports.useTimelineSelection)();
     if (nodePathInfo === null) {