From e7dcb586c0408255a0bf788e355fdb6d50d9b923 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Mon, 2 Mar 2026 13:13:07 +0100 Subject: feat: Clip effects, asset sorting, and timeline improvements Major features and improvements: * **Clip Effects**: * Added UI in Properties Panel to manage effects on video/image clips (add, remove, toggle, reorder). * Implemented dynamic parameter fields for effects. * Added support for keyframing effect parameters. * **Assets Panel**: * Added sorting options: Name, Type, Duration, and File Size. * Persisted view preferences (grid/list mode, sort order) to local storage. * Refactored media item rendering and drag interactions. * **Timeline & Interaction**: * **Keyframe Dragging**: Added ability to drag keyframes directly on the timeline element. * **Resizing**: Improved resize logic to respect neighboring clips (prevents overlaps). * **Visuals**: Implemented tiled background rendering for video/image clips on the timeline. * **Shortcuts**: Added "Deselect All" action bound to the `Escape` key. * **Fixes**: Corrected drag-and-drop coordinate calculations when the timeline track area is scrolled. * **Text Elements**: * Refactored text background storage to use an explicit `enabled` flag. * Added `V8toV9` storage migration to update existing projects. * **Architecture**: * Moved export state management to `ProjectManager` for better lifecycle handling. * Refactored `PropertiesPanel` sections to be more composable (custom headers, borders). --- apps/web/src/core/managers/timeline-manager.ts | 170 +++++++++++++++++++++++++ 1 file changed, 170 insertions(+) (limited to 'apps/web/src/core/managers/timeline-manager.ts') diff --git a/apps/web/src/core/managers/timeline-manager.ts b/apps/web/src/core/managers/timeline-manager.ts index f6a1744a..53007cf9 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 { EffectParamValues } from "@/types/effects"; import type { TrackType, TimelineTrack, @@ -32,6 +33,13 @@ import { UpsertKeyframeCommand, RemoveKeyframeCommand, RetimeKeyframeCommand, + AddClipEffectCommand, + RemoveClipEffectCommand, + UpdateClipEffectParamsCommand, + ToggleClipEffectCommand, + ReorderClipEffectsCommand, + UpsertEffectParamKeyframeCommand, + RemoveEffectParamKeyframeCommand, } from "@/lib/commands/timeline"; import { BatchCommand, PreviewTracker } from "@/lib/commands"; import type { InsertElementParams } from "@/lib/commands/timeline/element/insert-element"; @@ -62,17 +70,23 @@ export class TimelineManager { elementId, trimStart, trimEnd, + startTime, + duration, pushHistory = true, }: { elementId: string; trimStart: number; trimEnd: number; + startTime?: number; + duration?: number; pushHistory?: boolean; }): void { const command = new UpdateElementTrimCommand({ elementId, trimStart, trimEnd, + startTime, + duration, }); if (pushHistory) { this.editor.command.execute({ command }); @@ -124,12 +138,14 @@ export class TimelineManager { elementId, newStartTime, createTrack, + rippleEnabled = false, }: { sourceTrackId: string; targetTrackId: string; elementId: string; newStartTime: number; createTrack?: { type: TrackType; index: number }; + rippleEnabled?: boolean; }): void { const command = new MoveElementCommand({ sourceTrackId, @@ -137,6 +153,7 @@ export class TimelineManager { elementId, newStartTime, createTrack, + rippleEnabled, }); this.editor.command.execute({ command }); } @@ -253,6 +270,104 @@ export class TimelineManager { } } + addClipEffect({ + trackId, + elementId, + effectType, + }: { + trackId: string; + elementId: string; + effectType: string; + }): string { + const command = new AddClipEffectCommand({ + trackId, + elementId, + effectType, + }); + this.editor.command.execute({ command }); + return command.getEffectId() ?? ""; + } + + removeClipEffect({ + trackId, + elementId, + effectId, + }: { + trackId: string; + elementId: string; + effectId: string; + }): void { + const command = new RemoveClipEffectCommand({ + trackId, + elementId, + effectId, + }); + this.editor.command.execute({ command }); + } + + updateClipEffectParams({ + trackId, + elementId, + effectId, + params, + pushHistory = true, + }: { + trackId: string; + elementId: string; + effectId: string; + params: Partial; + pushHistory?: boolean; + }): void { + const command = new UpdateClipEffectParamsCommand({ + trackId, + elementId, + effectId, + params, + }); + if (pushHistory) { + this.editor.command.execute({ command }); + } else { + command.execute(); + } + } + + toggleClipEffect({ + trackId, + elementId, + effectId, + }: { + trackId: string; + elementId: string; + effectId: string; + }): void { + const command = new ToggleClipEffectCommand({ + trackId, + elementId, + effectId, + }); + this.editor.command.execute({ command }); + } + + reorderClipEffects({ + trackId, + elementId, + fromIndex, + toIndex, + }: { + trackId: string; + elementId: string; + fromIndex: number; + toIndex: number; + }): void { + const command = new ReorderClipEffectsCommand({ + trackId, + elementId, + fromIndex, + toIndex, + }); + this.editor.command.execute({ command }); + } + upsertKeyframes({ keyframes, }: { @@ -346,6 +461,61 @@ export class TimelineManager { this.editor.command.execute({ command }); } + upsertEffectParamKeyframe({ + trackId, + elementId, + effectId, + paramKey, + time, + value, + interpolation, + keyframeId, + }: { + trackId: string; + elementId: string; + effectId: string; + paramKey: string; + time: number; + value: number; + interpolation?: "linear" | "hold"; + keyframeId?: string; + }): void { + const command = new UpsertEffectParamKeyframeCommand({ + trackId, + elementId, + effectId, + paramKey, + time, + value, + interpolation, + keyframeId, + }); + this.editor.command.execute({ command }); + } + + removeEffectParamKeyframe({ + trackId, + elementId, + effectId, + paramKey, + keyframeId, + }: { + trackId: string; + elementId: string; + effectId: string; + paramKey: string; + keyframeId: string; + }): void { + const command = new RemoveEffectParamKeyframeCommand({ + trackId, + elementId, + effectId, + paramKey, + keyframeId, + }); + this.editor.command.execute({ command }); + } + isPreviewActive(): boolean { return this.previewTracker.isActive(); } -- cgit v1.3.1