@remotion/studio 4.0.515 → 4.0.517

package/dist/components/Timeline/TimelineSelection.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = 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.TimelineSelectableItemsProvider = exports.getTimelineSequenceSelectionForEscape = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_HOVER_BACKGROUND = exports.TIMELINE_EXPANDED_SELECTED_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const canvas_1 = require("@remotion/canvas");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -78,98 +79,8 @@ const shouldSelectTimelineRowOnPointerDown = ({ selected, shiftKey, metaKey, ctr
     return (!selected || (0, exports.isTimelineSelectionModifierEvent)({ shiftKey, metaKey, ctrlKey }));
 };
 exports.shouldSelectTimelineRowOnPointerDown = shouldSelectTimelineRowOnPointerDown;
-exports.EMPTY_TIMELINE_SELECTION_STATE = {
-    selectedItems: [],
-    anchor: null,
-};
-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) {
-        return previousAnchor;
-    }
-    for (let i = selectedItems.length - 1; i >= 0; i--) {
-        const candidate = selectedItems[i];
-        if (getTimelineSelectionType(candidate) === targetType) {
-            return candidate;
-        }
-    }
-    return null;
-};
-const getRangeSelection = ({ anchor, clickedItem, allSelectableItems, }) => {
-    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) => (0, exports.getTimelineSelectionKey)(item) === anchorKey);
-    const clickedIndex = orderedOfType.findIndex((item) => (0, exports.getTimelineSelectionKey)(item) === clickedKey);
-    if (anchorIndex === -1 || clickedIndex === -1) {
-        return [clickedItem];
-    }
-    const [from, to] = anchorIndex < clickedIndex
-        ? [anchorIndex, clickedIndex]
-        : [clickedIndex, anchorIndex];
-    return orderedOfType.slice(from, to + 1);
-};
-const getTimelineSelectionAfterInteraction = ({ currentState, clickedItem, interaction, allSelectableItems, }) => {
-    const { selectedItems, anchor: previousAnchor } = currentState;
-    const clickedType = getTimelineSelectionType(clickedItem);
-    if (clickedType === 'guide') {
-        return {
-            selectedItems: [clickedItem],
-            anchor: clickedItem,
-        };
-    }
-    const nextAnchor = getTimelineSelectionAnchor(selectedItems, previousAnchor, clickedType);
-    const clickedKey = (0, exports.getTimelineSelectionKey)(clickedItem);
-    if (interaction.shiftKey && nextAnchor) {
-        return {
-            selectedItems: getRangeSelection({
-                anchor: nextAnchor,
-                clickedItem,
-                allSelectableItems,
-            }),
-            anchor: nextAnchor,
-        };
-    }
-    if (interaction.toggleKey) {
-        const compatibleItems = selectedItems.filter((item) => isTimelineSelectionCompatibleWithType(item, clickedType));
-        const existingKeySet = new Set(compatibleItems.map(exports.getTimelineSelectionKey));
-        if (existingKeySet.has(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) => 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((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,
-            anchor: clickedItem,
-        };
-    }
-    return {
-        selectedItems: [clickedItem],
-        anchor: clickedItem,
-    };
-};
-exports.getTimelineSelectionAfterInteraction = getTimelineSelectionAfterInteraction;
+exports.EMPTY_TIMELINE_SELECTION_STATE = canvas_1.EMPTY_CANVAS_SELECTION;
+exports.getTimelineSelectionAfterInteraction = canvas_1.getCanvasSelectionAfterInteraction;
 const getAvailableTimelineSelectionState = ({ availableKeys, availableItemsByKey, state, }) => {
     if (state.selectedItems.length === 0 && state.anchor === null) {
         return state;
@@ -361,29 +272,7 @@ const getTimelineSelectionFromNodePathInfo = (nodePathInfo) => {
     return null;
 };
 exports.getTimelineSelectionFromNodePathInfo = getTimelineSelectionFromNodePathInfo;
-const getTimelineSelectionKey = (item) => {
-    switch (item.type) {
-        case 'guide':
-            return `guide.${item.guideId}`;
-        case 'sequence':
-            return `${(0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo)}.sequence`;
-        case 'sequence-prop':
-            return `${(0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo)}.sequence-prop.${item.key}`;
-        case 'sequence-all-effects':
-            return `${(0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo)}.sequence-all-effects`;
-        case 'sequence-effect':
-            return `${(0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo)}.sequence-effect.${item.i}`;
-        case 'sequence-effect-prop':
-            return `${(0, exports.getTimelineSequenceSelectionKey)(item.nodePathInfo)}.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}`;
-        default:
-            throw new Error(`Unexpected timeline selection type: ${item}`);
-    }
-};
-exports.getTimelineSelectionKey = getTimelineSelectionKey;
+exports.getTimelineSelectionKey = canvas_1.getCanvasSelectionItemKey;
 const nodePathDescendsFrom = (descendant, ancestor) => {
     if ((0, studio_shared_1.stringifySequenceExpandedRowKey)(descendant.sequenceSubscriptionKey) !==
         (0, studio_shared_1.stringifySequenceExpandedRowKey)(ancestor.sequenceSubscriptionKey)) {
@@ -511,8 +400,7 @@ const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides,
     });
 };
 exports.getSelectableTimelineItems = getSelectableTimelineItems;
-const getTimelineSequenceSelectionKey = (nodePathInfo) => (0, timeline_node_path_key_1.timelineNodePathInfoToKey)({ ...nodePathInfo, auxiliaryKeys: [] });
-exports.getTimelineSequenceSelectionKey = getTimelineSequenceSelectionKey;
+exports.getTimelineSequenceSelectionKey = canvas_1.getCanvasSequenceSelectionKey;
 const TimelineSelectAllKeybindings = ({ timeline }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const { canSelect } = (0, exports.useTimelineSelection)();
@@ -647,8 +535,8 @@ const TimelineSelectionProvider = ({ children }) => {
         (previewServerState.type === 'connected' ||
             window.remotion_isReadOnlyStudio);
     const keyframeOperationsAvailable = (0, browser_studio_operations_1.canUseKeyframeOperations)();
-    const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
-    const selectionAnchor = (0, react_1.useRef)(null);
+    const selectionController = (0, canvas_1.useCanvasSelectionController)();
+    const selectionState = (0, canvas_1.useCanvasSelection)(selectionController);
     const selectionScope = (0, react_1.useRef)(null);
     const marqueeSelectableItems = (0, react_1.useRef)(new Map());
     const marqueeRegistrationCounter = (0, react_1.useRef)(0);
@@ -656,25 +544,17 @@ const TimelineSelectionProvider = ({ children }) => {
     (0, react_1.useEffect)(() => {
         if (!canSelect) {
             selectionScope.current = null;
-            selectionAnchor.current = null;
             setRevealRequest(null);
-            setSelectedItems([]);
+            selectionController.clear();
         }
-    }, [canSelect]);
+    }, [canSelect, selectionController]);
     const canSelectItem = (0, react_1.useCallback)((item) => canSelect &&
         (!window.remotion_isReadOnlyStudio ||
             keyframeOperationsAvailable ||
             item.type === 'sequence'), [canSelect, keyframeOperationsAvailable]);
-    const getCurrentAvailableSelectionState = (0, react_1.useCallback)((currentSelectedItems) => {
-        if (selectionScope.current !== timelineSelectionScope) {
-            return exports.EMPTY_TIMELINE_SELECTION_STATE;
-        }
-        return {
-            selectedItems: currentSelectedItems,
-            anchor: selectionAnchor.current,
-        };
-    }, [timelineSelectionScope]);
-    const availableSelectionState = getCurrentAvailableSelectionState(selectedItems);
+    const availableSelectionState = selectionScope.current === timelineSelectionScope
+        ? selectionState
+        : exports.EMPTY_TIMELINE_SELECTION_STATE;
     const availableSelectedItems = availableSelectionState.selectedItems;
     const requestRevealSelectionItem = (0, react_1.useCallback)((item) => {
         setRevealRequest((previousRequest) => {
@@ -700,22 +580,12 @@ const TimelineSelectionProvider = ({ children }) => {
         expandParentTracks(item.nodePathInfo);
     }, [expandParentTracks]);
     (0, react_1.useEffect)(() => {
-        setSelectedItems((currentSelectedItems) => {
-            const nextState = selectionScope.current === timelineSelectionScope
-                ? {
-                    selectedItems: currentSelectedItems,
-                    anchor: selectionAnchor.current,
-                }
-                : exports.EMPTY_TIMELINE_SELECTION_STATE;
-            selectionScope.current = timelineSelectionScope;
-            selectionAnchor.current = nextState.anchor;
-            if (nextState.selectedItems.length === currentSelectedItems.length &&
-                nextState.selectedItems.every((item, index) => item === currentSelectedItems[index])) {
-                return currentSelectedItems;
-            }
-            return nextState.selectedItems;
-        });
-    }, [timelineSelectionScope]);
+        if (selectionScope.current === timelineSelectionScope) {
+            return;
+        }
+        selectionScope.current = timelineSelectionScope;
+        selectionController.clear();
+    }, [selectionController, timelineSelectionScope]);
     const selectedKeys = (0, react_1.useMemo)(() => new Set(availableSelectedItems.map(exports.getTimelineSelectionKey)), [availableSelectedItems]);
     const isSelected = (0, react_1.useCallback)((item) => {
         return selectedKeys.has((0, exports.getTimelineSelectionKey)(item));
@@ -732,26 +602,16 @@ const TimelineSelectionProvider = ({ children }) => {
         if (options.reveal) {
             requestRevealSelectionItem(item);
         }
-        setSelectedItems((currentSelectedItems) => {
-            const currentSelectionState = getCurrentAvailableSelectionState(currentSelectedItems);
-            const nextState = (0, exports.getTimelineSelectionAfterInteraction)({
-                currentState: {
-                    selectedItems: currentSelectionState.selectedItems,
-                    anchor: currentSelectionState.anchor,
-                },
-                clickedItem: item,
-                interaction,
-                allSelectableItems,
-            });
-            selectionScope.current = timelineSelectionScope;
-            selectionAnchor.current = nextState.anchor;
-            return nextState.selectedItems;
-        });
+        if (selectionScope.current !== timelineSelectionScope) {
+            selectionController.clear();
+        }
+        selectionScope.current = timelineSelectionScope;
+        selectionController.select(item, interaction, allSelectableItems);
     }, [
         canSelectItem,
         expandParentsForSelectionItem,
-        getCurrentAvailableSelectionState,
         requestRevealSelectionItem,
+        selectionController,
         timelineSelectionScope,
     ]);
     const selectItems = (0, react_1.useCallback)((items, options = {}) => {
@@ -762,17 +622,16 @@ const TimelineSelectionProvider = ({ children }) => {
             (0, options_sidebar_tabs_1.selectOptionsSidebarInspectorPanel)();
         }
         selectionScope.current = timelineSelectionScope;
-        selectionAnchor.current =
-            items.length === 0 ? null : items[items.length - 1];
         expandParentsForSelectionItems(items);
         if (options.reveal && items.length === 1) {
             requestRevealSelectionItem(items[0]);
         }
-        setSelectedItems(items);
+        selectionController.setSelectedItems(items);
     }, [
         canSelectItem,
         expandParentsForSelectionItems,
         requestRevealSelectionItem,
+        selectionController,
         timelineSelectionScope,
     ]);
     const registerMarqueeSelectableItem = (0, react_1.useCallback)((item, getRect) => {
@@ -819,9 +678,8 @@ const TimelineSelectionProvider = ({ children }) => {
     }, [canSelectItem]);
     const clearSelection = (0, react_1.useCallback)(() => {
         selectionScope.current = null;
-        selectionAnchor.current = null;
-        setSelectedItems([]);
-    }, []);
+        selectionController.clear();
+    }, [selectionController]);
     const containsSelection = (0, react_1.useCallback)((nodePathInfo) => {
         return availableSelectedItems.some((selected) => selected.type !== 'guide' &&
             nodePathDescendsFrom(selected.nodePathInfo, nodePathInfo));
@@ -982,7 +840,9 @@ const useTimelineMarqueeSelection = () => {
                 : nextSelection.selectedItems);
         };
         const autoScroll = (0, timeline_scroll_logic_1.startTimelineEdgeAutoScroll)({
+            includeHorizontal: true,
             includeVertical: true,
+            verticalTopOffset: 0,
             onTick: (directions) => {
                 if (scrollable && directions.x !== null) {
                     scrollable.scrollLeft +=
@@ -1056,7 +916,7 @@ const useTimelineRowSelection = (nodePathInfo) => {
         if (selectionItem === null) {
             return;
         }
-        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current, { reveal: true });
+        selectItem(selectionItem, interaction, selectableTimelineItemsRef.current);
     }, [selectItem, selectableTimelineItemsRef, selectionItem]);
     return {
         onSelect,

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

@@ -6,4 +6,6 @@ export declare const TimelineSequence: React.NamedExoticComponent<{
     readonly connectedCompositions: readonly import("remotion").AnyComposition[];
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly sequenceFrameOffset: number;
+    readonly cascadedStart: number;
+    readonly localStart: number;
 }>;

package/dist/components/Timeline/TimelineSequence.js

@@ -39,6 +39,7 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const drag_aware_double_click_1 = require("../../helpers/drag-aware-double-click");
 const get_sequence_double_click_action_1 = require("../../helpers/get-sequence-double-click-action");
 const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-sequence-layout");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
@@ -69,17 +70,58 @@ const TimelineViewport_1 = require("./TimelineViewport");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const use_open_sequence_in_apps_1 = require("./use-open-sequence-in-apps");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
-const TimelineSequenceFn = ({ s, connectedCompositions, nodePathInfo, sequenceFrameOffset }) => {
+const TimelineSequenceFn = ({ s, connectedCompositions, nodePathInfo, sequenceFrameOffset, cascadedStart, localStart, }) => {
     const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     if (windowWidth === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s, connectedCompositions: connectedCompositions, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset }));
+    return (jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s, connectedCompositions: connectedCompositions, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, cascadedStart: cascadedStart, localStart: localStart }));
 };
-const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, postmount, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, onDoubleClick, }) => {
-    var _a, _b, _c;
+const TimelineSequenceNegativeStartInner = ({ left, width, leftEdgeVisible, clipped }) => {
+    const outerStyle = (0, react_1.useMemo)(() => {
+        return {
+            backgroundColor: clipped ? colors_1.TIMELINE_BACKGROUND_COLOR : undefined,
+            height: '100%',
+            left,
+            minWidth: 2,
+            pointerEvents: 'none',
+            position: 'absolute',
+            top: 0,
+            width,
+        };
+    }, [clipped, left, width]);
+    const innerStyle = (0, react_1.useMemo)(() => {
+        const showLeftEdge = leftEdgeVisible && !clipped;
+        const maskImage = clipped
+            ? 'linear-gradient(to right, transparent, black 20%)'
+            : undefined;
+        return {
+            backgroundColor: colors_1.TIMELINE_NEGATIVE_START_BACKGROUND_COLOR,
+            border: `${get_timeline_sequence_layout_1.SEQUENCE_BORDER_WIDTH}px solid ${colors_1.TIMELINE_NEGATIVE_START_BORDER_COLOR}`,
+            borderBottomLeftRadius: showLeftEdge ? 2 : 0,
+            borderLeft: showLeftEdge
+                ? `${get_timeline_sequence_layout_1.SEQUENCE_BORDER_WIDTH}px solid ${colors_1.TIMELINE_NEGATIVE_START_BORDER_COLOR}`
+                : 'none',
+            borderRight: 'none',
+            borderTopLeftRadius: showLeftEdge ? 2 : 0,
+            boxSizing: 'border-box',
+            height: '100%',
+            maskImage,
+            position: 'absolute',
+            top: 0,
+            WebkitMaskImage: maskImage,
+            width: '100%',
+        };
+    }, [clipped, leftEdgeVisible]);
+    return (jsx_runtime_1.jsx("div", { style: outerStyle, children: jsx_runtime_1.jsx("div", { style: innerStyle }) }));
+};
+const TimelineSequenceNegativeStart = react_1.default.memo(TimelineSequenceNegativeStartInner);
+const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, postmount, negativeStart, leftEdgeVisible, negativeStartClipped, style, children, nodePathInfo, sequenceFrameOffset, fromCanUpdate, frozenFrame, onMoveDragPointerDown, onPointerDownCapture, onDoubleClick, }) => {
+    var _a, _b, _c, _d;
     const ref = (0, react_1.useRef)(null);
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
+    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     (0, TimelineSelection_1.useTimelineMarqueeSelectableItem)(selectionItem, ref);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button === 0) {
@@ -113,13 +155,19 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
     const isPostmounting = relativeFrameWithPostmount >= 0 &&
         relativeFrameWithPostmount < ((_b = s.postmountDisplay) !== null && _b !== void 0 ? _b : 0) &&
         !isInRange;
+    const negativeStartEnd = negativeStart
+        ? negativeStart.left + negativeStart.width
+        : 0;
     const actualStyle = (0, react_1.useMemo)(() => {
+        const hasSelectedTrack = selectedItems.some((item) => item.type !== 'guide');
         return {
             ...style,
-            opacity: isInRange ? 1 : 0.5,
+            background: negativeStart ? colors_1.TRANSPARENT : style.background,
+            border: negativeStart ? 'none' : style.border,
+            opacity: hasSelectedTrack && !selected && !containsSelection ? 0.75 : 1,
         };
-    }, [isInRange, 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, onDoubleClick: onDoubleClick, children: [premount ? (jsx_runtime_1.jsx("div", { style: {
+    }, [containsSelection, negativeStart, selected, selectedItems, style]);
+    const content = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [premount ? (jsx_runtime_1.jsx("div", { style: {
                     left: premount.left,
                     width: premount.width,
                     height: '100%',
@@ -148,20 +196,46 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premount, po
                 s.type !== 'image' &&
                 s.loopDisplay === undefined &&
                 (isInRange || isPremounting || isPostmounting) ? (jsx_runtime_1.jsx("div", { style: {
-                    paddingLeft: 5 + ((_c = premount === null || premount === void 0 ? void 0 : premount.width) !== null && _c !== void 0 ? _c : 0),
+                    paddingLeft: 5 + ((_c = negativeStart === null || negativeStart === void 0 ? void 0 : negativeStart.width) !== null && _c !== void 0 ? _c : 0) + ((_d = premount === null || premount === void 0 ? void 0 : premount.width) !== null && _d !== void 0 ? _d : 0),
                     height: '100%',
                     display: 'flex',
                     alignItems: 'center',
                 }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame, frozenFrame: frozenFrame }) })) : null] }));
+    return (jsx_runtime_1.jsx("div", { ref: ref, [TimelineSelection_1.TIMELINE_MARQUEE_ITEM_ATTR]: true, style: actualStyle, title: s.displayName, onPointerDownCapture: onPointerDownCapture, onPointerDown: selectable ? onPointerDown : undefined, onDoubleClick: onDoubleClick, children: negativeStart ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                jsx_runtime_1.jsx(TimelineSequenceNegativeStart, { left: negativeStart.left, width: negativeStart.width, leftEdgeVisible: leftEdgeVisible, clipped: negativeStartClipped }), jsx_runtime_1.jsx("div", { style: {
+                        background: style.background,
+                        border: style.border,
+                        borderBottomLeftRadius: 0,
+                        borderBottomRightRadius: style.borderBottomRightRadius,
+                        borderLeft: 'none',
+                        borderRightColor: style.borderRightColor,
+                        borderTopLeftRadius: 0,
+                        borderTopRightRadius: style.borderTopRightRadius,
+                        boxSizing: 'border-box',
+                        height: '100%',
+                        left: negativeStartEnd,
+                        overflow: 'hidden',
+                        position: 'absolute',
+                        top: 0,
+                        width: `calc(100% - ${negativeStartEnd}px)`,
+                    }, children: jsx_runtime_1.jsx("div", { style: {
+                            height: '100%',
+                            left: -negativeStartEnd,
+                            position: 'absolute',
+                            top: 0,
+                            width: style.width,
+                        }, children: content }) })
+            ] })) : (content) }));
 };
-const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePathInfo, sequenceFrameOffset, }) => {
+const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePathInfo, sequenceFrameOffset, cascadedStart, localStart, }) => {
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
     var _a, _b, _c;
-    var _d, _e, _f, _g, _h, _j;
+    var _d, _e, _f, _g, _h, _j, _k;
     const video = remotion_1.Internals.useVideo();
     const renderWindow = (0, react_1.useContext)(TimelineViewport_1.TimelineViewportContext);
+    const dragAwareDoubleClick = (0, react_1.useMemo)(() => (0, drag_aware_double_click_1.createDragAwareDoubleClickTracker)(), []);
     const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_d = video === null || video === void 0 ? void 0 : video.fps) !== null && _d !== void 0 ? _d : 30);
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
     const extendVideoLastFrame = (0, is_video_with_last_frame_hold_1.isVideoWithLastFrameHold)(s);
@@ -215,6 +289,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             button: e.button,
             canOpenInEditor,
             numberOfConnectedCompositions: connectedCompositions.length,
+            sequenceWasDragged: dragAwareDoubleClick.consumePointerGestureWasDragged(),
         });
         if (action === null) {
             return;
@@ -233,6 +308,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     }, [
         canOpenInEditor,
         connectedCompositions,
+        dragAwareDoubleClick,
         openInEditor,
         s,
         selectComposition,
@@ -399,6 +475,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         nodePathInfo,
         windowWidth,
         timelineDurationInFrames: (_g = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _g !== void 0 ? _g : 1,
+        onDragEnd: dragAwareDoubleClick.endPointerGesture,
     });
     if (!video) {
         throw new TypeError('Expected video config');
@@ -406,10 +483,11 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const displayDurationInFrames = s.loopDisplay
         ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes
         : s.duration;
-    const { marginLeft, width, premountWidth, postmountWidth } = (0, react_1.useMemo)(() => {
+    const { marginLeft, width, negativeStartWidth, negativeStartClipped, premountWidth, postmountWidth, } = (0, react_1.useMemo)(() => {
         return (0, get_timeline_sequence_layout_1.getTimelineSequenceLayout)({
             durationInFrames: displayDurationInFrames,
             startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
+            cascadedStart,
             startFromMedia: s.type === 'sequence' || s.type === 'image' ? 0 : s.startMediaFrom,
             maxMediaDuration: effectiveMaxMediaDuration,
             video,
@@ -418,6 +496,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             postmountDisplay: s.postmountDisplay,
         });
     }, [
+        cascadedStart,
         displayDurationInFrames,
         effectiveMaxMediaDuration,
         s,
@@ -431,12 +510,20 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         return (0, get_timeline_sequence_visible_layout_1.getTimelineSequenceVisibleLayout)({
             marginLeft,
             width,
+            negativeStartWidth,
             premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0,
             postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0,
             renderWindowLeft: renderWindow.left - timeline_layout_1.TIMELINE_PADDING,
             renderWindowWidth: renderWindow.width,
         });
-    }, [marginLeft, postmountWidth, premountWidth, renderWindow, width]);
+    }, [
+        marginLeft,
+        negativeStartWidth,
+        postmountWidth,
+        premountWidth,
+        renderWindow,
+        width,
+    ]);
     const mediaVisualizationStyle = (0, react_1.useMemo)(() => {
         var _a, _b;
         var _c, _d;
@@ -446,6 +533,9 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             height: '100%',
         };
     }, [visibleLayout]);
+    const showLeftBorderRadius = (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible) === true &&
+        localStart >= 0 &&
+        ((_h = s.trimBefore) !== null && _h !== void 0 ? _h : 0) === 0;
     const style = (0, react_1.useMemo)(() => {
         var _a, _b;
         return {
@@ -457,14 +547,14 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
                         ? colors_1.TIMELINE_IMAGE_GRADIENT
                         : colors_1.BLUE,
             border: `${get_timeline_sequence_layout_1.SEQUENCE_BORDER_WIDTH}px solid ${colors_1.WHITE_ALPHA_20}`,
-            borderLeftColor: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible)
+            borderLeftColor: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible) && !negativeStartClipped
                 ? colors_1.WHITE_ALPHA_20
                 : colors_1.TRANSPARENT,
             borderRightColor: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.rightEdgeVisible)
                 ? colors_1.WHITE_ALPHA_20
                 : colors_1.TRANSPARENT,
-            borderTopLeftRadius: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible) ? 2 : 0,
-            borderBottomLeftRadius: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.leftEdgeVisible) ? 2 : 0,
+            borderTopLeftRadius: showLeftBorderRadius ? 2 : 0,
+            borderBottomLeftRadius: showLeftBorderRadius ? 2 : 0,
             borderTopRightRadius: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.rightEdgeVisible) ? 2 : 0,
             borderBottomRightRadius: (visibleLayout === null || visibleLayout === void 0 ? void 0 : visibleLayout.rightEdgeVisible) ? 2 : 0,
             position: 'absolute',
@@ -474,7 +564,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
             color: colors_1.WHITE,
             overflow: 'hidden',
         };
-    }, [s.type, visibleLayout]);
+    }, [negativeStartClipped, s.type, showLeftBorderRadius, visibleLayout]);
     const showRightEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceDurationDraggable)(s) &&
         nodePath !== null &&
         validatedLocation !== null &&
@@ -495,13 +585,14 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const mediaDisplayDurationInFrames = visibleLayout.media
         ? visibleLayout.media.width / frameIncrement
         : 0;
-    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premount: visibleLayout.premount, postmount: visibleLayout.postmount, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: [s.type === 'audio' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, muted: s.muted, visualizationWidth: visibleLayout.media.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' && visibleLayout.media ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: visibleLayout.media.width, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, playbackRate: s.playbackRate, volume: s.volume, muted: s.muted, doesVolumeChange: s.doesVolumeChange, marginLeft: visibleLayout.media.left, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: visibleLayout.media.width, offsetInPixels: visibleLayout.media.offset }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes, fullWidth: width, visibleOffset: visibleLayout.cropLeft, visibleWidth: visibleLayout.width })), showLeftEdgeDragHandle &&
+    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premount: visibleLayout.premount, postmount: visibleLayout.postmount, negativeStart: visibleLayout.negativeStart, leftEdgeVisible: visibleLayout.leftEdgeVisible, negativeStartClipped: negativeStartClipped, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, onPointerDownCapture: dragAwareDoubleClick.beginPointerGesture, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: [s.type === 'audio' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, muted: s.muted, visualizationWidth: visibleLayout.media.width, startFrom: s.startMediaFrom, durationInFrames: s.duration, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay }) })) : null, s.type === 'video' && visibleLayout.media ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: visibleLayout.media.width, displayOffsetInFrames: mediaDisplayOffsetInFrames, displayDurationInFrames: mediaDisplayDurationInFrames, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, playbackRate: s.playbackRate, volume: s.volume, muted: s.muted, doesVolumeChange: s.doesVolumeChange, marginLeft: visibleLayout.media.left, loopDisplay: s.loopDisplay, frozenMediaFrame: s.frozenMediaFrame, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' && visibleLayout.media ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, offsetInPixels: visibleLayout.media.offset }) })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes, fullWidth: width, visibleOffset: visibleLayout.cropLeft, visibleWidth: visibleLayout.width })), showLeftEdgeDragHandle &&
                 visibleLayout.leftEdgeVisible &&
+                negativeStartWidth === 0 &&
                 nodePathInfo &&
-                validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_h = video.durationInFrames) !== null && _h !== void 0 ? _h : 1 })) : null, showRightEdgeDragHandle &&
+                validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture })) : null, showRightEdgeDragHandle &&
                 visibleLayout.rightEdgeVisible &&
                 nodePathInfo &&
-                validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1 })) : null] }));
+                validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_k = video.durationInFrames) !== null && _k !== void 0 ? _k : 1, onDragEnd: dragAwareDoubleClick.endPointerGesture })) : null] }));
     return previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const SEQUENCE_REORDER_MIME_TYPE = "application/remotion-sequence-reorder";
 export declare const TimelineSequenceItem: React.NamedExoticComponent<{
     readonly afterDropLineOffset: number;
     readonly sequence: TSequence;