@remotion/studio: Refactor timeline selection state for multiple items

packages/studio/src/components/Timeline/TimelineDeleteKeybindings.tsx

@@ -14,36 +14,41 @@ export const TimelineDeleteKeybindings: React.FC = () => {
 		Internals.OverrideIdsToNodePathsGettersContext,
 	);
 	const {setCodeValues} = useContext(Internals.VisualModeSettersContext);
-	const {canSelect, selectedItem, clearSelection} = useTimelineSelection();
+	const {canSelect, selectedItems, clearSelection} = useTimelineSelection();
 
 	useEffect(() => {
 		if (
 			!canSelect ||
 			previewServerState.type !== 'connected' ||
-			!selectedItem
+			selectedItems.length === 0
 		) {
 			return;
 		}
 
 		const {clientId} = previewServerState;
-		const currentSelection = selectedItem;
+		const currentSelection = selectedItems;
 		const backspace = keybindings.registerKeybinding({
 			event: 'keydown',
 			key: 'Backspace',
 			callback: () => {
-				const deletePromise = deleteSelectedTimelineItem({
-					selection: currentSelection,
-					sequences,
-					overrideIdsToNodePaths: overrideIdToNodePathMappings,
-					setCodeValues,
-					clientId,
-				});
-				if (deletePromise === null) {
+				const deletePromises = currentSelection
+					.map((selection) =>
+						deleteSelectedTimelineItem({
+							selection,
+							sequences,
+							overrideIdsToNodePaths: overrideIdToNodePathMappings,
+							setCodeValues,
+							clientId,
+						}),
+					)
+					.filter((promise): promise is Promise<void> => promise !== null);
+
+				if (deletePromises.length === 0) {
 					return;
 				}
 
 				clearSelection();
-				deletePromise.catch(() => undefined);
+				Promise.all(deletePromises).catch(() => undefined);
 			},
 			commandCtrlKey: false,
 			preventDefault: true,
@@ -60,7 +65,7 @@ export const TimelineDeleteKeybindings: React.FC = () => {
 		keybindings,
 		overrideIdToNodePathMappings,
 		previewServerState,
-		selectedItem,
+		selectedItems,
 		sequences,
 		setCodeValues,
 	]);

packages/studio/src/components/Timeline/TimelineSelection.tsx

@@ -70,7 +70,7 @@ export type TimelineSelection =
 
 type TimelineSelectionContextValue = {
 	readonly canSelect: boolean;
-	readonly selectedItem: TimelineSelection | null;
+	readonly selectedItems: readonly TimelineSelection[];
 	readonly isSelected: (item: TimelineSelection) => boolean;
 	readonly selectItem: (item: TimelineSelection) => void;
 	readonly containsSelection: (nodePathInfo: SequenceNodePathInfo) => boolean;
@@ -79,7 +79,7 @@ type TimelineSelectionContextValue = {
 
 const TimelineSelectionContext = createContext<TimelineSelectionContextValue>({
 	canSelect: false,
-	selectedItem: null,
+	selectedItems: [],
 	isSelected: () => false,
 	selectItem: () => undefined,
 	containsSelection: () => false,
@@ -95,6 +95,31 @@ const getTimelineSelectionKey = (item: TimelineSelection): string => {
 	return `${rowKey}.keyframe.${item.frame}`;
 };
 
+const nodePathDescendsFrom = (
+	descendant: SequenceNodePathInfo,
+	ancestor: SequenceNodePathInfo,
+): boolean => {
+	if (
+		stringifySequenceExpandedRowKey(descendant.sequenceSubscriptionKey) !==
+		stringifySequenceExpandedRowKey(ancestor.sequenceSubscriptionKey)
+	) {
+		return false;
+	}
+
+	if (descendant.index !== ancestor.index) {
+		return false;
+	}
+
+	// Must be strictly deeper than `ancestor` (i.e. a descendant), not the same row.
+	if (descendant.auxiliaryKeys.length <= ancestor.auxiliaryKeys.length) {
+		return false;
+	}
+
+	return ancestor.auxiliaryKeys.every(
+		(key, i) => descendant.auxiliaryKeys[i] === key,
+	);
+};
+
 export const TimelineSelectionProvider: React.FC<{
 	readonly children: React.ReactNode;
 }> = ({children}) => {
@@ -103,24 +128,26 @@ export const TimelineSelectionProvider: React.FC<{
 		SELECTION_ENABLED &&
 		previewServerState.type === 'connected' &&
 		!window.remotion_isReadOnlyStudio;
-	const [selectedItem, setSelectedItem] = useState<TimelineSelection | null>(
-		null,
-	);
+	const [selectedItems, setSelectedItems] = useState<
+		readonly TimelineSelection[]
+	>([]);
 
 	useEffect(() => {
 		if (!canSelect) {
-			setSelectedItem(null);
+			setSelectedItems([]);
 		}
 	}, [canSelect]);
 
+	const selectedKeys = useMemo(
+		() => new Set(selectedItems.map(getTimelineSelectionKey)),
+		[selectedItems],
+	);
+
 	const isSelected = useCallback(
 		(item: TimelineSelection) => {
-			return selectedItem === null
-				? false
-				: getTimelineSelectionKey(selectedItem) ===
-						getTimelineSelectionKey(item);
+			return selectedKeys.has(getTimelineSelectionKey(item));
 		},
-		[selectedItem],
+		[selectedKeys],
 	);
 
 	const selectItem = useCallback(
@@ -129,64 +156,36 @@ export const TimelineSelectionProvider: React.FC<{
 				return;
 			}
 
-			setSelectedItem(item);
+			setSelectedItems([item]);
 		},
 		[canSelect],
 	);
 
 	const clearSelection = useCallback(() => {
-		setSelectedItem(null);
+		setSelectedItems([]);
 	}, []);
 
 	const containsSelection = useCallback(
 		(nodePathInfo: SequenceNodePathInfo) => {
-			if (selectedItem === null) {
-				return false;
-			}
-
-			const selectedNodePath = selectedItem.nodePathInfo;
-
-			if (
-				stringifySequenceExpandedRowKey(
-					selectedNodePath.sequenceSubscriptionKey,
-				) !==
-				stringifySequenceExpandedRowKey(nodePathInfo.sequenceSubscriptionKey)
-			) {
-				return false;
-			}
-
-			if (selectedNodePath.index !== nodePathInfo.index) {
-				return false;
-			}
-
-			// Selection must be strictly deeper than this node (i.e. a descendant),
-			// not the same row.
-			if (
-				selectedNodePath.auxiliaryKeys.length <=
-				nodePathInfo.auxiliaryKeys.length
-			) {
-				return false;
-			}
-
-			return nodePathInfo.auxiliaryKeys.every(
-				(key, i) => selectedNodePath.auxiliaryKeys[i] === key,
+			return selectedItems.some((selected) =>
+				nodePathDescendsFrom(selected.nodePathInfo, nodePathInfo),
 			);
 		},
-		[selectedItem],
+		[selectedItems],
 	);
 
 	const value = useMemo(
 		(): TimelineSelectionContextValue => ({
 			canSelect,
-			selectedItem,
+			selectedItems,
 			isSelected,
 			selectItem,
 			containsSelection,
 			clearSelection,
 		}),
 		[
 			canSelect,
-			selectedItem,
+			selectedItems,
 			isSelected,
 			selectItem,
 			containsSelection,

packages/studio/src/components/Timeline/TimelineSequence.tsx

@@ -3,8 +3,8 @@ import type {TSequence} from 'remotion';
 import {Internals, useCurrentFrame} from 'remotion';
 import {BLUE} from '../../helpers/colors';
 import {
-	SEQUENCE_BORDER_WIDTH,
 	getTimelineSequenceLayout,
+	SEQUENCE_BORDER_WIDTH,
 } from '../../helpers/get-timeline-sequence-layout';
 import type {SequenceNodePathInfo} from '../../helpers/get-timeline-sequence-sort-key';
 import {