refactor: move track pruning into a post-command reactor

apps/web/src/core/index.ts

@@ -10,6 +10,7 @@ import { AudioManager } from "./managers/audio-manager";
 import { SelectionManager } from "./managers/selection-manager";
 import { registerDefaultEffects } from "@/lib/effects";
 import { registerDefaultMasks } from "@/lib/masks";
+import { isMainTrack } from "@/lib/timeline/placement";
 
 export class EditorCore {
 	private static instance: EditorCore | null = null;
@@ -37,6 +38,15 @@ export class EditorCore {
 		this.save = new SaveManager(this);
 		this.audio = new AudioManager(this);
 		this.selection = new SelectionManager(this);
+		this.command.registerReactor(() => {
+			const tracks = this.timeline.getTracks();
+			const prunedTracks = tracks.filter(
+				(track) => track.elements.length > 0 || isMainTrack(track),
+			);
+			if (prunedTracks.length !== tracks.length) {
+				this.timeline.updateTracks(prunedTracks);
+			}
+		});
 		this.save.start();
 	}
 

apps/web/src/core/managers/commands.ts

@@ -11,6 +11,7 @@ interface CommandHistoryEntry {
 export class CommandManager {
 	private history: CommandHistoryEntry[] = [];
 	private redoStack: CommandHistoryEntry[] = [];
+	private reactors: Array<() => void> = [];
 
 	constructor(private editor: EditorCore) {}
 
@@ -18,6 +19,7 @@ export class CommandManager {
 		const previousSelection = this.getSelectionSnapshot();
 		const result = command.execute();
 		const selectionOverride = this.applySelectionOverride(result);
+		this.runReactors();
 		this.history.push({
 			command,
 			previousSelection,
@@ -35,6 +37,10 @@ export class CommandManager {
 		this.redoStack = [];
 	}
 
+	registerReactor(reactor: () => void): void {
+		this.reactors.push(reactor);
+	}
+
 	undo(): void {
 		if (this.history.length === 0) return;
 		const entry = this.history.pop();
@@ -64,6 +70,7 @@ export class CommandManager {
 		const previousSelection = this.getSelectionSnapshot();
 		const result = entry.command.redo();
 		const selectionOverride = this.applySelectionOverride(result);
+		this.runReactors();
 
 		this.history.push({
 			command: entry.command,
@@ -100,4 +107,10 @@ export class CommandManager {
 		this.editor.selection.setSelectedElements({ elements: selectionOverride });
 		return selectionOverride;
 	}
+
+	private runReactors(): void {
+		for (const reactor of this.reactors) {
+			reactor();
+		}
+	}
 }

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

@@ -2,7 +2,6 @@ import { Command, type CommandResult } from "@/lib/commands/base-command";
 import type { TimelineTrack } from "@/lib/timeline";
 import { EditorCore } from "@/core";
 import { rippleShiftElements } from "@/lib/timeline";
-import { isMainTrack } from "@/lib/timeline/placement";
 
 export class DeleteElementsCommand extends Command {
 	private savedState: TimelineTrack[] | null = null;
@@ -25,8 +24,7 @@ export class DeleteElementsCommand extends Command {
 		const editor = EditorCore.getInstance();
 		this.savedState = editor.timeline.getTracks();
 
-		const updatedTracks = this.savedState
+		const updatedTracks = this.savedState.map((track) => {
-			.map((track) => {
 				const elementsToDeleteOnTrack = this.elements.filter(
 					(target) => target.trackId === track.id,
 				);
@@ -65,8 +63,7 @@ export class DeleteElementsCommand extends Command {
 				}
 
 				return { ...track, elements } as typeof track;
-			})
+			});
-			.filter((track) => track.elements.length > 0 || isMainTrack(track));
 
 		editor.timeline.updateTracks(updatedTracks);
 

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

@@ -7,7 +7,6 @@ import type {
 } from "@/lib/timeline";
 import {
 	buildEmptyTrack,
-	isMainTrack,
 	validateElementTrackCompatibility,
 	enforceMainTrackStart,
 } from "@/lib/timeline/placement";
@@ -100,7 +99,7 @@ export class MoveElementCommand extends Command {
 
 		const isSameTrack = this.sourceTrackId === this.targetTrackId;
 
-		let updatedTracks = tracksToUpdate.map((track): TimelineTrack => {
+		const updatedTracks = tracksToUpdate.map((track): TimelineTrack => {
 			if (isSameTrack && track.id === this.sourceTrackId) {
 				return {
 					...track,
@@ -134,21 +133,6 @@ export class MoveElementCommand extends Command {
 			return track;
 		});
 
-		if (!isSameTrack) {
-			const sourceTrackAfterMove = updatedTracks.find(
-				(track) => track.id === this.sourceTrackId,
-			);
-			if (
-				sourceTrackAfterMove &&
-				sourceTrackAfterMove.elements.length === 0 &&
-				!isMainTrack(sourceTrackAfterMove)
-			) {
-				updatedTracks = updatedTracks.filter(
-					(track) => track.id !== this.sourceTrackId,
-				);
-			}
-		}
-
 		editor.timeline.updateTracks(updatedTracks);
 	}