refactor: unify element params

2 files changed, 484 insertions, 4 deletions

diff --git a/apps/web/src/params/index.ts b/apps/web/src/params/index.ts
index 23085407..bb57a1c4 100644
--- a/apps/web/src/params/index.ts
+++ b/apps/web/src/params/index.ts
@@ -1,4 +1,7 @@
-export type ParamValues = Record<string, number | string | boolean>;
+import { snapToStep } from "@/utils/math";
+
+export type ParamValue = number | string | boolean;
+export type ParamValues = Record<string, ParamValue>;
 
 export type ParamGroup = "stroke";
 
@@ -6,6 +9,8 @@ interface BaseParamDefinition<TKey extends string = string> {
 	key: TKey;
 	label: string;
 	group?: ParamGroup;
+	keyframable?: boolean;
+	dependencies?: Array<{ param: string; equals: ParamValue }>;
 }
 
 export interface NumberParamDefinition<TKey extends string = string>
@@ -42,9 +47,92 @@ export interface SelectParamDefinition<TKey extends string = string>
 	options: Array<{ value: string; label: string }>;
 }
 
+export interface TextParamDefinition<TKey extends string = string>
+	extends BaseParamDefinition<TKey> {
+	type: "text";
+	default: string;
+}
+
+export interface FontParamDefinition<TKey extends string = string>
+	extends BaseParamDefinition<TKey> {
+	type: "font";
+	default: string;
+}
+
 export type ParamDefinition<TKey extends string = string> =
 	| NumberParamDefinition<TKey>
 	| BooleanParamDefinition<TKey>
 	| ColorParamDefinition<TKey>
-	| SelectParamDefinition<TKey>;
+	| SelectParamDefinition<TKey>
+	| TextParamDefinition<TKey>
+	| FontParamDefinition<TKey>;
+
+export function getParamValueKind({
+	param,
+}: {
+	param: ParamDefinition;
+}): "number" | "color" | "discrete" {
+	if (param.type === "number") {
+		return "number";
+	}
+	if (param.type === "color") {
+		return "color";
+	}
+	return "discrete";
+}
 
+export function getParamDefaultInterpolation({
+	param,
+}: {
+	param: ParamDefinition;
+}): "linear" | "hold" {
+	return param.type === "number" || param.type === "color" ? "linear" : "hold";
+}
+
+export function getParamNumericRange({
+	param,
+}: {
+	param: ParamDefinition;
+}): { min?: number; max?: number; step?: number } | undefined {
+	if (param.type !== "number") {
+		return undefined;
+	}
+
+	return {
+		min: param.min,
+		max: param.max,
+		step: param.step,
+	};
+}
+
+export function coerceParamValue({
+	param,
+	value,
+}: {
+	param: ParamDefinition;
+	value: unknown;
+}): ParamValue | null {
+	if (param.type === "number") {
+		if (typeof value !== "number" || Number.isNaN(value)) {
+			return null;
+		}
+
+		const steppedValue = snapToStep({ value, step: param.step });
+		const maxValue = param.max ?? Number.POSITIVE_INFINITY;
+		return Math.min(maxValue, Math.max(param.min, steppedValue));
+	}
+
+	if (param.type === "boolean") {
+		return typeof value === "boolean" ? value : null;
+	}
+
+	if (param.type === "color" || param.type === "text" || param.type === "font") {
+		return typeof value === "string" ? value : null;
+	}
+
+	if (typeof value !== "string") {
+		return null;
+	}
+
+	return param.options.some((option) => option.value === value) ? value : null;
+}
diff --git a/apps/web/src/params/registry.ts b/apps/web/src/params/registry.ts
index 3ce483e4..9e363c88 100644
--- a/apps/web/src/params/registry.ts
+++ b/apps/web/src/params/registry.ts
@@ -1,7 +1,35 @@
-import type { ParamDefinition, ParamValues } from "@/params";
+import type {
+	ParamDefinition,
+	ParamValue,
+	ParamValues,
+} from "@/params";
+import { MIN_TRANSFORM_SCALE } from "@/animation/transform";
+import type { BlendMode } from "@/rendering";
+import type {
+	ElementType,
+	TimelineElement,
+} from "@/timeline";
+import { DEFAULTS } from "@/timeline/defaults";
+import { VOLUME_DB_MAX, VOLUME_DB_MIN } from "@/timeline/audio-constants";
+import {
+	CORNER_RADIUS_MAX,
+	CORNER_RADIUS_MIN,
+} from "@/text/background";
+
+export type ElementParamDefinition<TKey extends string = string> =
+	ParamDefinition<TKey> & {
+		read?: ({ element }: { element: TimelineElement }) => ParamValue | null;
+		write?: ({
+			element,
+			value,
+		}: {
+			element: TimelineElement;
+			value: ParamValue;
+		}) => TimelineElement;
+	};
 
 export function buildDefaultParamValues(
-	params: ParamDefinition[],
+	params: readonly ParamDefinition[],
 ): ParamValues {
 	const values: ParamValues = {};
 	for (const param of params) {
@@ -44,3 +72,367 @@ export class DefinitionRegistry<TKey extends string, TDefinition> {
 		return Array.from(this.definitions.values());
 	}
 }
+
+const BLEND_MODE_OPTIONS: Array<{ value: BlendMode; label: string }> = [
+	{ value: "normal", label: "Normal" },
+	{ value: "darken", label: "Darken" },
+	{ value: "multiply", label: "Multiply" },
+	{ value: "color-burn", label: "Color Burn" },
+	{ value: "lighten", label: "Lighten" },
+	{ value: "screen", label: "Screen" },
+	{ value: "plus-lighter", label: "Plus Lighter" },
+	{ value: "color-dodge", label: "Color Dodge" },
+	{ value: "overlay", label: "Overlay" },
+	{ value: "soft-light", label: "Soft Light" },
+	{ value: "hard-light", label: "Hard Light" },
+	{ value: "difference", label: "Difference" },
+	{ value: "exclusion", label: "Exclusion" },
+	{ value: "hue", label: "Hue" },
+	{ value: "saturation", label: "Saturation" },
+	{ value: "color", label: "Color" },
+	{ value: "luminosity", label: "Luminosity" },
+];
+
+const visualElementParams: ElementParamDefinition[] = [
+	{
+		key: "transform.positionX",
+		label: "Position X",
+		type: "number",
+		default: DEFAULTS.element.transform.position.x,
+		min: -100_000,
+		step: 1,
+	},
+	{
+		key: "transform.positionY",
+		label: "Position Y",
+		type: "number",
+		default: DEFAULTS.element.transform.position.y,
+		min: -100_000,
+		step: 1,
+	},
+	{
+		key: "transform.scaleX",
+		label: "Scale X",
+		type: "number",
+		default: DEFAULTS.element.transform.scaleX,
+		min: MIN_TRANSFORM_SCALE,
+		step: 0.01,
+	},
+	{
+		key: "transform.scaleY",
+		label: "Scale Y",
+		type: "number",
+		default: DEFAULTS.element.transform.scaleY,
+		min: MIN_TRANSFORM_SCALE,
+		step: 0.01,
+	},
+	{
+		key: "transform.rotate",
+		label: "Rotate",
+		type: "number",
+		default: DEFAULTS.element.transform.rotate,
+		min: -360,
+		max: 360,
+		step: 1,
+	},
+	{
+		key: "opacity",
+		label: "Opacity",
+		type: "number",
+		default: DEFAULTS.element.opacity,
+		min: 0,
+		max: 1,
+		step: 0.01,
+	},
+	{
+		key: "blendMode",
+		label: "Blend Mode",
+		type: "select",
+		default: DEFAULTS.element.blendMode,
+		keyframable: false,
+		options: BLEND_MODE_OPTIONS,
+	},
+];
+
+const audioElementParams: ElementParamDefinition[] = [
+	{
+		key: "volume",
+		label: "Volume",
+		type: "number",
+		default: DEFAULTS.element.volume,
+		min: VOLUME_DB_MIN,
+		max: VOLUME_DB_MAX,
+		step: 0.01,
+	},
+	{
+		key: "muted",
+		label: "Muted",
+		type: "boolean",
+		default: false,
+		keyframable: false,
+	},
+];
+
+const textElementParams: ElementParamDefinition[] = [
+	{
+		key: "content",
+		label: "Content",
+		type: "text",
+		default: "Default text",
+		keyframable: false,
+	},
+	{
+		key: "fontFamily",
+		label: "Font Family",
+		type: "font",
+		default: "Arial",
+		keyframable: false,
+	},
+	{
+		key: "fontSize",
+		label: "Font Size",
+		type: "number",
+		default: 15,
+		min: 1,
+		step: 1,
+	},
+	{
+		key: "color",
+		label: "Color",
+		type: "color",
+		default: "#ffffff",
+	},
+	{
+		key: "textAlign",
+		label: "Text Align",
+		type: "select",
+		default: "center",
+		keyframable: false,
+		options: [
+			{ value: "left", label: "Left" },
+			{ value: "center", label: "Center" },
+			{ value: "right", label: "Right" },
+		],
+	},
+	{
+		key: "fontWeight",
+		label: "Font Weight",
+		type: "select",
+		default: "normal",
+		keyframable: false,
+		options: [
+			{ value: "normal", label: "Normal" },
+			{ value: "bold", label: "Bold" },
+		],
+	},
+	{
+		key: "fontStyle",
+		label: "Font Style",
+		type: "select",
+		default: "normal",
+		keyframable: false,
+		options: [
+			{ value: "normal", label: "Normal" },
+			{ value: "italic", label: "Italic" },
+		],
+	},
+	{
+		key: "textDecoration",
+		label: "Text Decoration",
+		type: "select",
+		default: "none",
+		keyframable: false,
+		options: [
+			{ value: "none", label: "None" },
+			{ value: "underline", label: "Underline" },
+			{ value: "line-through", label: "Line Through" },
+		],
+	},
+	{
+		key: "letterSpacing",
+		label: "Letter Spacing",
+		type: "number",
+		default: DEFAULTS.text.letterSpacing,
+		min: -100,
+		step: 0.1,
+	},
+	{
+		key: "lineHeight",
+		label: "Line Height",
+		type: "number",
+		default: DEFAULTS.text.lineHeight,
+		min: 0.1,
+		step: 0.1,
+	},
+	{
+		key: "background.enabled",
+		label: "Background Enabled",
+		type: "boolean",
+		default: DEFAULTS.text.background.enabled,
+		keyframable: false,
+	},
+	{
+		key: "background.color",
+		label: "Background Color",
+		type: "color",
+		default: DEFAULTS.text.background.color,
+		dependencies: [{ param: "background.enabled", equals: true }],
+	},
+	{
+		key: "background.cornerRadius",
+		label: "Background Radius",
+		type: "number",
+		default: DEFAULTS.text.background.cornerRadius,
+		min: CORNER_RADIUS_MIN,
+		max: CORNER_RADIUS_MAX,
+		step: 1,
+		dependencies: [{ param: "background.enabled", equals: true }],
+	},
+	{
+		key: "background.paddingX",
+		label: "Background Padding X",
+		type: "number",
+		default: DEFAULTS.text.background.paddingX,
+		min: 0,
+		step: 1,
+		dependencies: [{ param: "background.enabled", equals: true }],
+	},
+	{
+		key: "background.paddingY",
+		label: "Background Padding Y",
+		type: "number",
+		default: DEFAULTS.text.background.paddingY,
+		min: 0,
+		step: 1,
+		dependencies: [{ param: "background.enabled", equals: true }],
+	},
+	{
+		key: "background.offsetX",
+		label: "Background Offset X",
+		type: "number",
+		default: DEFAULTS.text.background.offsetX,
+		min: -100_000,
+		step: 1,
+		dependencies: [{ param: "background.enabled", equals: true }],
+	},
+	{
+		key: "background.offsetY",
+		label: "Background Offset Y",
+		type: "number",
+		default: DEFAULTS.text.background.offsetY,
+		min: -100_000,
+		step: 1,
+		dependencies: [{ param: "background.enabled", equals: true }],
+	},
+];
+
+export const elementParamRegistry = new DefinitionRegistry<
+	ElementType,
+	readonly ElementParamDefinition[]
+>("element params");
+
+elementParamRegistry.register({
+	key: "video",
+	definition: [...visualElementParams, ...audioElementParams],
+});
+elementParamRegistry.register({ key: "image", definition: visualElementParams });
+elementParamRegistry.register({
+	key: "text",
+	definition: [...textElementParams, ...visualElementParams],
+});
+elementParamRegistry.register({
+	key: "sticker",
+	definition: visualElementParams,
+});
+elementParamRegistry.register({
+	key: "graphic",
+	definition: visualElementParams,
+});
+elementParamRegistry.register({ key: "audio", definition: audioElementParams });
+elementParamRegistry.register({ key: "effect", definition: [] });
+
+export function getElementParams({
+	element,
+}: {
+	element: TimelineElement;
+}): readonly ElementParamDefinition[] {
+	return elementParamRegistry.has(element.type)
+		? elementParamRegistry.get(element.type)
+		: [];
+}
+
+export function getBuiltInElementParams({
+	type,
+}: {
+	type: ElementType;
+}): readonly ElementParamDefinition[] {
+	return elementParamRegistry.has(type) ? elementParamRegistry.get(type) : [];
+}
+
+export function getElementParam({
+	element,
+	key,
+}: {
+	element: TimelineElement;
+	key: string;
+}): ElementParamDefinition | null {
+	return (
+		getElementParams({ element }).find((param) => param.key === key) ?? null
+	);
+}
+
+export function readElementParamValue({
+	element,
+	param,
+}: {
+	element: TimelineElement;
+	param: ElementParamDefinition;
+}): ParamValue | null {
+	if (param.read) {
+		return param.read({ element });
+	}
+	if ("params" in element) {
+		return element.params[param.key] ?? param.default;
+	}
+	return null;
+}
+
+export function writeElementParamValue({
+	element,
+	param,
+	value,
+}: {
+	element: TimelineElement;
+	param: ElementParamDefinition;
+	value: ParamValue;
+}): TimelineElement {
+	if (param.write) {
+		return param.write({ element, value });
+	}
+	if ("params" in element) {
+		return {
+			...element,
+			params: {
+				...element.params,
+				[param.key]: value,
+			},
+		};
+	}
+	return element;
+}
+
+export function buildElementParamValues({
+	element,
+}: {
+	element: TimelineElement;
+}): ParamValues {
+	const values: ParamValues = {};
+	for (const param of getElementParams({ element })) {
+		const value = readElementParamValue({ element, param });
+		if (value !== null) {
+			values[param.key] = value;
+		}
+	}
+	return values;
+}
+