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/types/animation.ts | 15 ++++++++------- apps/web/src/types/effects.ts | 38 +++++++++++++++++++++++++++++++------- apps/web/src/types/export.ts | 8 ++++++-- apps/web/src/types/timeline.ts | 19 +++++++++++-------- 4 files changed, 56 insertions(+), 24 deletions(-) (limited to 'apps/web/src/types') diff --git a/apps/web/src/types/animation.ts b/apps/web/src/types/animation.ts index b9ca91af..3985c5b2 100644 --- a/apps/web/src/types/animation.ts +++ b/apps/web/src/types/animation.ts @@ -13,12 +13,10 @@ export type AnimationValueKind = "number" | "color" | "discrete"; export type DiscreteValue = boolean | string; export type AnimationValue = number | string | boolean; -export type NumberKeyframeInterpolation = "linear" | "hold"; -export type ColorKeyframeInterpolation = "linear" | "hold"; +export type ContinuousKeyframeInterpolation = "linear" | "hold"; export type DiscreteKeyframeInterpolation = "hold"; export type AnimationInterpolation = - | NumberKeyframeInterpolation - | ColorKeyframeInterpolation + | ContinuousKeyframeInterpolation | DiscreteKeyframeInterpolation; interface BaseAnimationKeyframe< @@ -32,15 +30,18 @@ interface BaseAnimationKeyframe< } export interface NumberKeyframe - extends BaseAnimationKeyframe {} + extends BaseAnimationKeyframe {} export interface ColorKeyframe - extends BaseAnimationKeyframe {} + extends BaseAnimationKeyframe {} export interface DiscreteKeyframe extends BaseAnimationKeyframe {} -export type AnimationKeyframe = NumberKeyframe | ColorKeyframe | DiscreteKeyframe; +export type AnimationKeyframe = + | NumberKeyframe + | ColorKeyframe + | DiscreteKeyframe; interface BaseAnimationChannel< TValueKind extends AnimationValueKind, diff --git a/apps/web/src/types/effects.ts b/apps/web/src/types/effects.ts index cc369450..6c96dfb2 100644 --- a/apps/web/src/types/effects.ts +++ b/apps/web/src/types/effects.ts @@ -9,17 +9,41 @@ export type EffectParamType = "number" | "boolean" | "select" | "color"; export type EffectParamValues = Record; -export interface EffectParamDefinition { +interface BaseEffectParamDefinition { key: string; label: string; - type: EffectParamType; - default: number | string | boolean; - min?: number; - max?: number; - step?: number; - options?: Array<{ value: string; label: string }>; } +export interface NumberEffectParamDefinition extends BaseEffectParamDefinition { + type: "number"; + default: number; + min: number; + max: number; + step: number; +} + +interface BooleanEffectParamDefinition extends BaseEffectParamDefinition { + type: "boolean"; + default: boolean; +} + +interface SelectEffectParamDefinition extends BaseEffectParamDefinition { + type: "select"; + default: string; + options: Array<{ value: string; label: string }>; +} + +interface ColorEffectParamDefinition extends BaseEffectParamDefinition { + type: "color"; + default: string; +} + +export type EffectParamDefinition = + | NumberEffectParamDefinition + | BooleanEffectParamDefinition + | SelectEffectParamDefinition + | ColorEffectParamDefinition; + export interface WebGLEffectPass { fragmentShader: string; uniforms(params: { diff --git a/apps/web/src/types/export.ts b/apps/web/src/types/export.ts index 351f5fc4..2c2408d8 100644 --- a/apps/web/src/types/export.ts +++ b/apps/web/src/types/export.ts @@ -15,8 +15,6 @@ export interface ExportOptions { quality: ExportQuality; fps?: number; includeAudio?: boolean; - onProgress?: ({ progress }: { progress: number }) => void; - onCancel?: () => boolean; } export interface ExportResult { @@ -25,3 +23,9 @@ export interface ExportResult { error?: string; cancelled?: boolean; } + +export interface ExportState { + isExporting: boolean; + progress: number; + result: ExportResult | null; +} diff --git a/apps/web/src/types/timeline.ts b/apps/web/src/types/timeline.ts index 0c138f56..15696b34 100644 --- a/apps/web/src/types/timeline.ts +++ b/apps/web/src/types/timeline.ts @@ -118,20 +118,23 @@ export interface ImageElement extends BaseTimelineElement { effects?: Effect[]; } +export interface TextBackground { + enabled: boolean; + color: string; + cornerRadius?: number; + paddingX?: number; + paddingY?: number; + offsetX?: number; + offsetY?: number; +} + export interface TextElement extends BaseTimelineElement { type: "text"; content: string; fontSize: number; fontFamily: string; color: string; - background: { - color: string; - cornerRadius?: number; - paddingX?: number; - paddingY?: number; - offsetX?: number; - offsetY?: number; - }; + background: TextBackground; textAlign: "left" | "center" | "right"; fontWeight: "normal" | "bold"; fontStyle: "normal" | "italic"; -- cgit v1.3.1