feat: text / custom masks, fix preview pan, refactor selection

3 files changed, 264 insertions, 90 deletions

diff --git a/apps/web/src/core/managers/commands.ts b/apps/web/src/core/managers/commands.ts
index 2f652a85..7cdd6373 100644
--- a/apps/web/src/core/managers/commands.ts
+++ b/apps/web/src/core/managers/commands.ts
@@ -1,12 +1,13 @@
 import type { EditorCore } from "@/core";
 import type { Command, CommandResult } from "@/lib/commands";
+import type { EditorSelectionSnapshot } from "@/lib/selection/editor-selection";
 import { applyRippleAdjustments, computeRippleAdjustments } from "@/lib/ripple";
-import type { ElementRef, SceneTracks } from "@/lib/timeline/types";
+import type { SceneTracks } from "@/lib/timeline/types";
 
 interface CommandHistoryEntry {
 	command: Command;
-	previousSelection: ElementRef[];
-	selectionOverride?: ElementRef[];
+	previousSelection: EditorSelectionSnapshot;
+	selectionOverride?: EditorSelectionSnapshot;
 }
 
 export class CommandManager {
@@ -19,7 +20,7 @@ export class CommandManager {
 
 	execute({ command }: { command: Command }): Command {
 		const beforeTracks = this.isRippleEnabled
-			? this.editor.scenes.getActiveSceneOrNull()?.tracks ?? null
+			? (this.editor.scenes.getActiveSceneOrNull()?.tracks ?? null)
 			: null;
 		const previousSelection = this.getSelectionSnapshot();
 		const result = command.execute();
@@ -55,11 +56,11 @@ export class CommandManager {
 			// Only restore selection for commands that explicitly changed it.
 			// Commands without selection intent leave selection untouched,
 			// preserving any UI-driven selection changes (clicks, box select)
-			// that happened between commands. Commands that remove elements
-			// must declare { select: [] } to clear stale refs.
+			// that happened between commands. Commands that remove editor-owned
+			// selection targets must declare a selection override to clear stale refs.
 			if (entry.selectionOverride !== undefined) {
-				this.editor.selection.setSelectedElements({
-					elements: [...entry.previousSelection],
+				this.editor.selection.restoreSnapshot({
+					snapshot: entry.previousSelection,
 				});
 			}
 			this.redoStack.push(entry);
@@ -74,7 +75,7 @@ export class CommandManager {
 		}
 
 		const beforeTracks = this.isRippleEnabled
-			? this.editor.scenes.getActiveSceneOrNull()?.tracks ?? null
+			? (this.editor.scenes.getActiveSceneOrNull()?.tracks ?? null)
 			: null;
 		const previousSelection = this.getSelectionSnapshot();
 		const result = entry.command.redo();
@@ -102,20 +103,19 @@ export class CommandManager {
 		this.redoStack = [];
 	}
 
-	private getSelectionSnapshot(): ElementRef[] {
-		return [...this.editor.selection.getSelectedElements()];
+	private getSelectionSnapshot(): EditorSelectionSnapshot {
+		return this.editor.selection.getSnapshot();
 	}
 
 	private applySelectionOverride(
 		result: CommandResult | undefined,
-	): ElementRef[] | undefined {
-		if (result?.select === undefined) {
+	): EditorSelectionSnapshot | undefined {
+		if (!result?.selection) {
 			return undefined;
 		}
-
-		const selectionOverride = [...result.select];
-		this.editor.selection.setSelectedElements({ elements: selectionOverride });
-		return selectionOverride;
+		return this.editor.selection.applySelectionPatch({
+			patch: result.selection,
+		});
 	}
 
 	private runReactors(): void {
diff --git a/apps/web/src/core/managers/selection-manager.ts b/apps/web/src/core/managers/selection-manager.ts
index 9bafc6d7..5da4fa60 100644
--- a/apps/web/src/core/managers/selection-manager.ts
+++ b/apps/web/src/core/managers/selection-manager.ts
@@ -1,73 +1,195 @@
-import type { EditorCore } from "@/core";

-import type { SelectedKeyframeRef } from "@/lib/animation/types";

-import type { ElementRef } from "@/lib/timeline/types";

-

-export class SelectionManager {

-	private selectedElements: ElementRef[] = [];

-	private selectedKeyframes: SelectedKeyframeRef[] = [];

-	private keyframeSelectionAnchor: SelectedKeyframeRef | null = null;

-	private listeners = new Set<() => void>();

-

-	constructor(editor: EditorCore) {

-		void editor;

-	}

-

-	getSelectedElements(): ElementRef[] {

-		return this.selectedElements;

-	}

-

-	getSelectedKeyframes(): SelectedKeyframeRef[] {

-		return this.selectedKeyframes;

-	}

-

-	getKeyframeSelectionAnchor(): SelectedKeyframeRef | null {

-		return this.keyframeSelectionAnchor;

-	}

-

-	setSelectedElements({ elements }: { elements: ElementRef[] }): void {

-		this.selectedElements = elements;

-		this.selectedKeyframes = [];

-		this.keyframeSelectionAnchor = null;

-		this.notify();

-	}

-

-	setSelectedKeyframes({

-		keyframes,

-		anchorKeyframe,

-	}: {

-		keyframes: SelectedKeyframeRef[];

-		anchorKeyframe?: SelectedKeyframeRef | null;

-	}): void {

-		this.selectedKeyframes = keyframes;

-		if (anchorKeyframe !== undefined) {

-			this.keyframeSelectionAnchor = anchorKeyframe;

-		} else if (keyframes.length === 0) {

-			this.keyframeSelectionAnchor = null;

-		}

-		this.notify();

-	}

-

-	clearSelection(): void {

-		this.selectedElements = [];

-		this.selectedKeyframes = [];

-		this.keyframeSelectionAnchor = null;

-		this.notify();

-	}

-

-	clearKeyframeSelection(): void {

-		this.selectedKeyframes = [];

-		this.keyframeSelectionAnchor = null;

-		this.notify();

-	}

-

-	subscribe(listener: () => void): () => void {

-		this.listeners.add(listener);

-		return () => this.listeners.delete(listener);

-	}

-

-	private notify(): void {

-		this.listeners.forEach((fn) => {

-			fn();

-		});

-	}

-}

+import type { EditorCore } from "@/core";
+import type { SelectedKeyframeRef } from "@/lib/animation/types";
+import type {
+	EditorSelectionKind,
+	EditorSelectionPatch,
+	EditorSelectionSnapshot,
+	SelectedMaskPointSelection,
+} from "@/lib/selection/editor-selection";
+import type { ElementRef } from "@/lib/timeline/types";
+
+export class SelectionManager {
+	private selectedElements: ElementRef[] = [];
+	private selectedKeyframes: SelectedKeyframeRef[] = [];
+	private keyframeSelectionAnchor: SelectedKeyframeRef | null = null;
+	private selectedMaskPoints: SelectedMaskPointSelection | null = null;
+	private listeners = new Set<() => void>();
+
+	constructor(editor: EditorCore) {
+		void editor;
+	}
+
+	getSelectedElements(): ElementRef[] {
+		return this.selectedElements;
+	}
+
+	getSelectedKeyframes(): SelectedKeyframeRef[] {
+		return this.selectedKeyframes;
+	}
+
+	getKeyframeSelectionAnchor(): SelectedKeyframeRef | null {
+		return this.keyframeSelectionAnchor;
+	}
+
+	getSelectedMaskPointSelection(): SelectedMaskPointSelection | null {
+		return this.selectedMaskPoints;
+	}
+
+	getActiveSelectionKind(): EditorSelectionKind | null {
+		if ((this.selectedMaskPoints?.pointIds.length ?? 0) > 0) {
+			return "mask-points";
+		}
+		if (this.selectedKeyframes.length > 0) {
+			return "keyframes";
+		}
+		if (this.selectedElements.length > 0) {
+			return "elements";
+		}
+		return null;
+	}
+
+	getSnapshot(): EditorSelectionSnapshot {
+		return {
+			selectedElements: [...this.selectedElements],
+			selectedKeyframes: [...this.selectedKeyframes],
+			keyframeSelectionAnchor: this.keyframeSelectionAnchor,
+			selectedMaskPoints: this.selectedMaskPoints
+				? {
+						...this.selectedMaskPoints,
+						pointIds: [...this.selectedMaskPoints.pointIds],
+					}
+				: null,
+		};
+	}
+
+	setSelectedElements({ elements }: { elements: ElementRef[] }): void {
+		this.selectedElements = elements;
+		this.selectedKeyframes = [];
+		this.keyframeSelectionAnchor = null;
+		this.selectedMaskPoints = null;
+		this.notify();
+	}
+
+	setSelectedKeyframes({
+		keyframes,
+		anchorKeyframe,
+	}: {
+		keyframes: SelectedKeyframeRef[];
+		anchorKeyframe?: SelectedKeyframeRef | null;
+	}): void {
+		this.selectedKeyframes = keyframes;
+		if (anchorKeyframe !== undefined) {
+			this.keyframeSelectionAnchor = anchorKeyframe;
+		} else if (keyframes.length === 0) {
+			this.keyframeSelectionAnchor = null;
+		}
+		this.selectedMaskPoints = null;
+		this.notify();
+	}
+
+	setSelectedMaskPoints({
+		selection,
+	}: {
+		selection: SelectedMaskPointSelection | null;
+	}): void {
+		this.selectedMaskPoints =
+			selection && selection.pointIds.length > 0
+				? {
+						...selection,
+						pointIds: [...selection.pointIds],
+					}
+				: null;
+		this.selectedKeyframes = [];
+		this.keyframeSelectionAnchor = null;
+		this.notify();
+	}
+
+	clearSelection(): void {
+		this.selectedElements = [];
+		this.selectedKeyframes = [];
+		this.keyframeSelectionAnchor = null;
+		this.selectedMaskPoints = null;
+		this.notify();
+	}
+
+	clearKeyframeSelection(): void {
+		this.selectedKeyframes = [];
+		this.keyframeSelectionAnchor = null;
+		this.notify();
+	}
+
+	clearMaskPointSelection(): void {
+		if (!this.selectedMaskPoints) {
+			return;
+		}
+		this.selectedMaskPoints = null;
+		this.notify();
+	}
+
+	clearMostSpecificSelection(): boolean {
+		const activeSelectionKind = this.getActiveSelectionKind();
+		if (activeSelectionKind === "mask-points") {
+			this.clearMaskPointSelection();
+			return true;
+		}
+		if (activeSelectionKind === "keyframes") {
+			this.clearKeyframeSelection();
+			return true;
+		}
+		if (activeSelectionKind === "elements") {
+			this.setSelectedElements({ elements: [] });
+			return true;
+		}
+		return false;
+	}
+
+	applySelectionPatch({
+		patch,
+	}: {
+		patch: EditorSelectionPatch;
+	}): EditorSelectionSnapshot {
+		if (patch.selectedElements !== undefined) {
+			this.selectedElements = [...patch.selectedElements];
+		}
+		if (patch.selectedKeyframes !== undefined) {
+			this.selectedKeyframes = [...patch.selectedKeyframes];
+		}
+		if (patch.keyframeSelectionAnchor !== undefined) {
+			this.keyframeSelectionAnchor = patch.keyframeSelectionAnchor;
+		}
+		if (patch.selectedMaskPoints !== undefined) {
+			this.selectedMaskPoints = patch.selectedMaskPoints
+				? {
+						...patch.selectedMaskPoints,
+						pointIds: [...patch.selectedMaskPoints.pointIds],
+					}
+				: null;
+		}
+		this.notify();
+		return this.getSnapshot();
+	}
+
+	restoreSnapshot({ snapshot }: { snapshot: EditorSelectionSnapshot }): void {
+		this.selectedElements = [...snapshot.selectedElements];
+		this.selectedKeyframes = [...snapshot.selectedKeyframes];
+		this.keyframeSelectionAnchor = snapshot.keyframeSelectionAnchor;
+		this.selectedMaskPoints = snapshot.selectedMaskPoints
+			? {
+					...snapshot.selectedMaskPoints,
+					pointIds: [...snapshot.selectedMaskPoints.pointIds],
+				}
+			: null;
+		this.notify();
+	}
+
+	subscribe(listener: () => void): () => void {
+		this.listeners.add(listener);
+		return () => this.listeners.delete(listener);
+	}
+
+	private notify(): void {
+		this.listeners.forEach((fn) => {
+			fn();
+		});
+	}
+}
diff --git a/apps/web/src/core/managers/timeline-manager.ts b/apps/web/src/core/managers/timeline-manager.ts
index c1398e8b..898a7e89 100644
--- a/apps/web/src/core/managers/timeline-manager.ts
+++ b/apps/web/src/core/managers/timeline-manager.ts
@@ -1,4 +1,5 @@
 import type { EditorCore } from "@/core";
+import type { ElementBounds } from "@/lib/preview/element-bounds";
 import type { ParamValues } from "@/lib/params";
 import type {
 	SceneTracks,
@@ -44,6 +45,8 @@ import {
 	RetimeKeyframeCommand,
 	UpdateScalarKeyframeCurveCommand,
 	AddClipEffectCommand,
+	DeleteCustomMaskPointsCommand,
+	InsertCustomMaskPointCommand,
 	RemoveClipEffectCommand,
 	UpdateClipEffectParamsCommand,
 	ToggleClipEffectCommand,
@@ -344,6 +347,55 @@ export class TimelineManager {
 		this.editor.command.execute({ command });
 	}
 
+	deleteCustomMaskPoints({
+		trackId,
+		elementId,
+		maskId,
+		pointIds,
+	}: {
+		trackId: string;
+		elementId: string;
+		maskId: string;
+		pointIds: string[];
+	}): void {
+		if (pointIds.length === 0) {
+			return;
+		}
+		const command = new DeleteCustomMaskPointsCommand({
+			trackId,
+			elementId,
+			maskId,
+			pointIds,
+		});
+		this.editor.command.execute({ command });
+	}
+
+	insertCustomMaskPoint({
+		trackId,
+		elementId,
+		maskId,
+		segmentIndex,
+		canvasPoint,
+		bounds,
+	}: {
+		trackId: string;
+		elementId: string;
+		maskId: string;
+		segmentIndex: number;
+		canvasPoint: { x: number; y: number };
+		bounds: ElementBounds;
+	}): void {
+		const command = new InsertCustomMaskPointCommand({
+			trackId,
+			elementId,
+			maskId,
+			segmentIndex,
+			canvasPoint,
+			bounds,
+		});
+		this.editor.command.execute({ command });
+	}
+
 	updateClipEffectParams({
 		trackId,
 		elementId,