feat: basic ripple editing

apps/web/src/core/managers/timeline-manager.ts

@@ -140,12 +140,19 @@ export class TimelineManager {
 		elements,
 		splitTime,
 		retainSide = "both",
+		rippleEnabled = false,
 	}: {
 		elements: { trackId: string; elementId: string }[];
 		splitTime: number;
 		retainSide?: "both" | "left" | "right";
+		rippleEnabled?: boolean;
 	}): { trackId: string; elementId: string }[] {
-		const command = new SplitElementsCommand(elements, splitTime, retainSide);
+		const command = new SplitElementsCommand(
+			elements,
+			splitTime,
+			retainSide,
+			rippleEnabled,
+		);
 		this.editor.command.execute({ command });
 		return command.getRightSideElements();
 	}
@@ -194,10 +201,12 @@ export class TimelineManager {
 
 	deleteElements({
 		elements,
+		rippleEnabled = false,
 	}: {
 		elements: { trackId: string; elementId: string }[];
+		rippleEnabled?: boolean;
 	}): void {
-		const command = new DeleteElementsCommand(elements);
+		const command = new DeleteElementsCommand(elements, rippleEnabled);
 		this.editor.command.execute({ command });
 	}
 

apps/web/src/hooks/actions/use-editor-actions.ts

@@ -10,7 +10,13 @@ export function useEditorActions() {
 	const editor = useEditor();
 	const activeProject = editor.project.getActive();
 	const { selectedElements, setElementSelection } = useElementSelection();
-	const { clipboard, setClipboard, toggleSnapping } = useTimelineStore();
+	const {
+		clipboard,
+		setClipboard,
+		toggleSnapping,
+		rippleEditingEnabled,
+		toggleRippleEditing,
+	} = useTimelineStore();
 
 	useActionHandler(
 		"toggle-play",
@@ -158,11 +164,21 @@ export function useEditorActions() {
 
 			if (elementsToSplit.length === 0) return;
 
-			editor.timeline.splitElements({
+			const rightSideElements = editor.timeline.splitElements({
 				elements: elementsToSplit,
 				splitTime: currentTime,
 				retainSide: "right",
+				rippleEnabled: rippleEditingEnabled,
 			});
+
+			if (rippleEditingEnabled && rightSideElements.length > 0) {
+				const firstRightElement = editor.timeline.getElementsWithTracks({
+					elements: [rightSideElements[0]],
+				})[0];
+				if (firstRightElement) {
+					editor.playback.seek({ time: firstRightElement.element.startTime });
+				}
+			}
 		},
 		undefined,
 	);
@@ -198,6 +214,7 @@ export function useEditorActions() {
 			}
 			editor.timeline.deleteElements({
 				elements: selectedElements,
+				rippleEnabled: rippleEditingEnabled,
 			});
 			editor.selection.clearSelection();
 		},
@@ -295,6 +312,14 @@ export function useEditorActions() {
 		undefined,
 	);
 
+	useActionHandler(
+		"toggle-ripple-editing",
+		() => {
+			toggleRippleEditing();
+		},
+		undefined,
+	);
+
 	useActionHandler(
 		"undo",
 		() => {

apps/web/src/lib/actions/definitions.ts

@@ -105,6 +105,10 @@ export const ACTIONS = {
 		category: "editing",
 		defaultShortcuts: ["n"],
 	},
+	"toggle-ripple-editing": {
+		description: "Toggle ripple editing",
+		category: "editing",
+	},
 	"select-all": {
 		description: "Select all elements",
 		category: "selection",

apps/web/src/lib/commands/timeline/element/delete-elements.ts

@@ -1,12 +1,15 @@
 import { Command } from "@/lib/commands/base-command";
 import type { TimelineTrack } from "@/types/timeline";
 import { EditorCore } from "@/core";
-import { isMainTrack } from "@/lib/timeline";
+import { isMainTrack, rippleShiftElements } from "@/lib/timeline";
 
 export class DeleteElementsCommand extends Command {
 	private savedState: TimelineTrack[] | null = null;
 
-	constructor(private elements: { trackId: string; elementId: string }[]) {
+	constructor(
+		private elements: { trackId: string; elementId: string }[],
+		private rippleEnabled = false,
+	) {
 		super();
 	}
 
@@ -16,23 +19,44 @@ export class DeleteElementsCommand extends Command {
 
 		const updatedTracks = this.savedState
 			.map((track) => {
-				const hasElementsToDelete = this.elements.some(
+			const elementsToDeleteOnTrack = this.elements.filter(
-					(el) => el.trackId === track.id,
+				(target) => target.trackId === track.id,
-				);
+			);
+			const hasElementsToDelete = elementsToDeleteOnTrack.length > 0;
 
-				if (!hasElementsToDelete) {
+			if (!hasElementsToDelete) {
-					return track;
+				return track;
+			}
+
+			const deletedElementInfos = elementsToDeleteOnTrack
+				.map((target) =>
+					track.elements.find((element) => element.id === target.elementId),
+				)
+				.filter((element): element is NonNullable<typeof element> => element !== undefined)
+				.map((element) => ({ startTime: element.startTime, duration: element.duration }));
+
+			let elements = track.elements.filter(
+				(element) =>
+					!this.elements.some(
+						(target) =>
+							target.trackId === track.id && target.elementId === element.id,
+					),
+			);
+
+				if (this.rippleEnabled && deletedElementInfos.length > 0) {
+					const sortedByStartDesc = [...deletedElementInfos].sort(
+						(a, b) => b.startTime - a.startTime,
+					);
+					for (const { startTime, duration } of sortedByStartDesc) {
+						elements = rippleShiftElements({
+							elements,
+							afterTime: startTime,
+							shiftAmount: duration,
+						});
+					}
 				}
 
-				return {
+				return { ...track, elements } as typeof track;
-					...track,
-					elements: track.elements.filter(
-						(element) =>
-							!this.elements.some(
-								(el) => el.trackId === track.id && el.elementId === element.id,
-							),
-					),
-				} as typeof track;
 			})
 			.filter((track) => track.elements.length > 0 || isMainTrack(track));
 

apps/web/src/lib/commands/timeline/element/split-elements.ts

@@ -2,6 +2,7 @@ import { Command } from "@/lib/commands/base-command";
 import type { TimelineTrack } from "@/types/timeline";
 import { generateUUID } from "@/utils/id";
 import { EditorCore } from "@/core";
+import { rippleShiftElements } from "@/lib/timeline";
 
 export class SplitElementsCommand extends Command {
 	private savedState: TimelineTrack[] | null = null;
@@ -12,6 +13,7 @@ export class SplitElementsCommand extends Command {
 		private elements: { trackId: string; elementId: string }[],
 		private splitTime: number,
 		private retainSide: "both" | "left" | "right" = "both",
+		private rippleEnabled = false,
 	) {
 		super();
 	}
@@ -28,74 +30,39 @@ export class SplitElementsCommand extends Command {
 
 		const updatedTracks = this.savedState.map((track) => {
 			const elementsToSplit = this.elements.filter(
-				(el) => el.trackId === track.id,
+				(target) => target.trackId === track.id,
 			);
 
 			if (elementsToSplit.length === 0) {
 				return track;
 			}
 
-			return {
+			let leftVisibleDurationForRipple: number | null = null;
-				...track,
-				elements: track.elements.flatMap((element) => {
-					const shouldSplit = elementsToSplit.some(
-						(el) => el.elementId === element.id,
-					);
 
-					if (!shouldSplit) {
+			let elements = track.elements.flatMap((element) => {
-						return [element];
+				const shouldSplit = elementsToSplit.some(
-					}
+					(target) => target.elementId === element.id,
+				);
 
-					const effectiveStart = element.startTime;
+				if (!shouldSplit) {
-					const effectiveEnd = element.startTime + element.duration;
+					return [element];
+				}
 
-					if (
+				const effectiveStart = element.startTime;
-						this.splitTime <= effectiveStart ||
+				const effectiveEnd = element.startTime + element.duration;
-						this.splitTime >= effectiveEnd
-					) {
-						return [element];
-					}
 
-					const relativeTime = this.splitTime - element.startTime;
+				if (
-					const leftVisibleDuration = relativeTime;
+					this.splitTime <= effectiveStart ||
-					const rightVisibleDuration = element.duration - relativeTime;
+					this.splitTime >= effectiveEnd
+				) {
+					return [element];
+				}
 
-					if (this.retainSide === "left") {
+				const relativeTime = this.splitTime - element.startTime;
-						return [
+				const leftVisibleDuration = relativeTime;
-							{
+				const rightVisibleDuration = element.duration - relativeTime;
-								...element,
-								duration: leftVisibleDuration,
-								trimEnd: element.trimEnd + rightVisibleDuration,
-								name: `${element.name} (left)`,
-							},
-						];
-					}
-
-					if (this.retainSide === "right") {
-						const newId = generateUUID();
-						this.rightSideElements.push({
-							trackId: track.id,
-							elementId: newId,
-						});
-						return [
-							{
-								...element,
-								id: newId,
-								startTime: this.splitTime,
-								duration: rightVisibleDuration,
-								trimStart: element.trimStart + leftVisibleDuration,
-								name: `${element.name} (right)`,
-							},
-						];
-					}
-
-					// "both" - split into two pieces
-					const secondElementId = generateUUID();
-					this.rightSideElements.push({
-						trackId: track.id,
-						elementId: secondElementId,
-					});
 
+				if (this.retainSide === "left") {
 					return [
 						{
 							...element,
@@ -103,17 +70,66 @@ export class SplitElementsCommand extends Command {
 							trimEnd: element.trimEnd + rightVisibleDuration,
 							name: `${element.name} (left)`,
 						},
+					];
+				}
+
+				if (this.retainSide === "right") {
+					if (this.rippleEnabled && elementsToSplit.length === 1) {
+						leftVisibleDurationForRipple = leftVisibleDuration;
+					}
+					const newId = generateUUID();
+					this.rightSideElements.push({
+						trackId: track.id,
+						elementId: newId,
+					});
+					return [
 						{
 							...element,
-							id: secondElementId,
+							id: newId,
 							startTime: this.splitTime,
 							duration: rightVisibleDuration,
 							trimStart: element.trimStart + leftVisibleDuration,
 							name: `${element.name} (right)`,
 						},
 					];
-				}),
+				}
-			} as typeof track;
+
+			const secondElementId = generateUUID();
+				this.rightSideElements.push({
+					trackId: track.id,
+					elementId: secondElementId,
+				});
+
+				return [
+					{
+						...element,
+						duration: leftVisibleDuration,
+						trimEnd: element.trimEnd + rightVisibleDuration,
+						name: `${element.name} (left)`,
+					},
+					{
+						...element,
+						id: secondElementId,
+						startTime: this.splitTime,
+						duration: rightVisibleDuration,
+						trimStart: element.trimStart + leftVisibleDuration,
+						name: `${element.name} (right)`,
+					},
+				];
+			});
+
+			if (
+				this.rippleEnabled &&
+				leftVisibleDurationForRipple !== null
+			) {
+				elements = rippleShiftElements({
+					elements,
+					afterTime: this.splitTime,
+					shiftAmount: leftVisibleDurationForRipple,
+				});
+			}
+
+			return { ...track, elements } as typeof track;
 		});
 
 		editor.timeline.updateTracks(updatedTracks);

apps/web/src/lib/timeline/index.ts

@@ -4,6 +4,7 @@ export * from "./track-utils";
 export * from "./element-utils";
 export * from "./zoom-utils";
 export * from "./ruler-utils";
+export * from "./ripple-utils";
 
 export function calculateTotalDuration({
 	tracks,

apps/web/src/lib/timeline/ripple-utils.ts

@@ -0,0 +1,17 @@
+import type { TimelineElement } from "@/types/timeline";
+
+export function rippleShiftElements({
+	elements,
+	afterTime,
+	shiftAmount,
+}: {
+	elements: TimelineElement[];
+	afterTime: number;
+	shiftAmount: number;
+}): TimelineElement[] {
+	return elements.map((element) =>
+		element.startTime >= afterTime
+			? { ...element, startTime: element.startTime - shiftAmount }
+			: element,
+	);
+}