@remotion/studio 4.0.474 → 4.0.475

package/dist/components/Timeline/TimelineSelection.js

@@ -1,13 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowContainsSelection = exports.useTimelineEasingSelection = 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,
 };
@@ -197,6 +279,7 @@ const getTimelineSelectionKey = (item) => {
             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)) {
@@ -258,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) => {
@@ -287,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: {
@@ -302,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);
@@ -322,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([]);
@@ -331,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,
     ]);
@@ -358,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) {
@@ -366,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]);
@@ -385,6 +639,7 @@ const useTimelineRowSelection = (nodePathInfo) => {
     return {
         onSelect,
         selectable: canSelect && selectionItem !== null,
+        selectionItem,
         selected,
     };
 };
@@ -406,12 +661,13 @@ const useTimelineKeyframeSelection = (nodePathInfo, frame) => {
     return {
         onSelect,
         selectable: canSelect,
+        selectionItem,
         selected,
     };
 };
 exports.useTimelineKeyframeSelection = useTimelineKeyframeSelection;
 const useTimelineEasingSelection = ({ nodePathInfo, fromFrame, toFrame, segmentIndex, }) => {
-    const { canSelect, isSelected, selectItem, registerSelectableItem } = (0, exports.useTimelineSelection)();
+    const { canSelectEasing, isSelected, selectItem, registerSelectableItem } = (0, exports.useTimelineSelection)();
     const selectionItem = (0, react_1.useMemo)(() => ({
         type: 'easing',
         nodePathInfo,
@@ -428,8 +684,9 @@ const useTimelineEasingSelection = ({ nodePathInfo, fromFrame, toFrame, segmentI
     }, [selectItem, selectionItem]);
     return {
         onSelect,
-        selectable: canSelect,
+        selectable: canSelectEasing,
         selected,
+        selectionItem,
     };
 };
 exports.useTimelineEasingSelection = useTimelineEasingSelection;

package/dist/components/Timeline/TimelineSequence.js

@@ -62,19 +62,28 @@ const TimelineSequenceFn = ({ s, nodePathInfo, sequenceFrameOffset }) => {
 };
 const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, onMoveDragPointerDown, }) => {
     var _a, _b;
-    const { onSelect, selectable } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const ref = (0, react_1.useRef)(null);
+    const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    (0, TimelineSelection_1.useTimelineMarqueeSelectableItem)(selectionItem, ref);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button === 0) {
             e.stopPropagation();
-            onSelect({
+            if ((0, TimelineSelection_1.shouldSelectTimelineRowOnPointerDown)({
+                selected,
                 shiftKey: e.shiftKey,
-                toggleKey: e.metaKey || e.ctrlKey,
-            });
-            if (TimelineSelection_1.TIMELINE_TOP_DRAG && fromCanUpdate) {
+                metaKey: e.metaKey,
+                ctrlKey: e.ctrlKey,
+            })) {
+                onSelect({
+                    shiftKey: e.shiftKey,
+                    toggleKey: e.metaKey || e.ctrlKey,
+                });
+            }
+            if (fromCanUpdate) {
                 onMoveDragPointerDown(e);
             }
         }
-    }, [fromCanUpdate, onMoveDragPointerDown, onSelect]);
+    }, [fromCanUpdate, onMoveDragPointerDown, onSelect, selected]);
     const frame = (0, remotion_1.useCurrentFrame)();
     const relativeFrame = frame - s.from;
     const sequenceFrame = relativeFrame + sequenceFrameOffset;
@@ -94,7 +103,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
             opacity: isInRange ? 1 : 0.5,
         };
     }, [isInRange, style]);
-    return (jsx_runtime_1.jsxs("div", { style: actualStyle, title: s.displayName, onPointerDown: selectable ? onPointerDown : undefined, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
+    return (jsx_runtime_1.jsxs("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDown: selectable ? onPointerDown : undefined, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
                     width: premountWidth,
                     height: '100%',
                     background: `repeating-linear-gradient(
@@ -208,8 +217,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             overflow: 'hidden',
         };
     }, [marginLeft, s.type, width]);
-    const showRightEdgeDragHandle = TimelineSelection_1.TIMELINE_TOP_DRAG &&
-        (s.type === 'sequence' || s.type === 'image') &&
+    const showRightEdgeDragHandle = (s.type === 'sequence' || s.type === 'image') &&
         !s.loopDisplay &&
         !s.isInsideSeries &&
         nodePath !== null &&