refactor: unify element params

3 files changed, 31 insertions, 15 deletions

diff --git a/apps/web/src/services/renderer/nodes/text-node.ts b/apps/web/src/services/renderer/nodes/text-node.ts
index 7bdf135c..6635a031 100644
--- a/apps/web/src/services/renderer/nodes/text-node.ts
+++ b/apps/web/src/services/renderer/nodes/text-node.ts
@@ -1,11 +1,14 @@
 import { BaseNode } from "./base-node";
 import type { TextElement } from "@/timeline";
 import type { EffectPass } from "@/effects/types";
-import type { Transform } from "@/rendering";
+import type { BlendMode, Transform } from "@/rendering";
 import { drawMeasuredTextLayout } from "@/text/primitives";
 import type { MeasuredTextElement } from "@/text/measure-element";
 
 export type TextNodeParams = TextElement & {
+	transform: Transform;
+	opacity: number;
+	blendMode?: BlendMode;
 	canvasCenter: { x: number; y: number };
 	canvasHeight: number;
 	textBaseline?: CanvasTextBaseline;
diff --git a/apps/web/src/services/renderer/resolve.ts b/apps/web/src/services/renderer/resolve.ts
index 4637df8d..5335de2d 100644
--- a/apps/web/src/services/renderer/resolve.ts
+++ b/apps/web/src/services/renderer/resolve.ts
@@ -13,6 +13,7 @@ import {
 	resolveGraphicElementParamsAtTime,
 } from "@/graphics";
 import {
+	buildTextBackgroundFromElement,
 	getTextMeasurementContext,
 	measureTextElement,
 } from "@/text/measure-element";
@@ -330,6 +331,7 @@ function resolveTextNode({
 		elementStartTime: node.params.startTime,
 		elementDuration: node.params.duration,
 	});
+	const background = buildTextBackgroundFromElement({ element: node.params });
 
 	return {
 		transform: resolveTransformAtTime({
@@ -343,13 +345,16 @@ function resolveTextNode({
 			localTime,
 		}),
 		textColor: resolveColorAtTime({
-			baseColor: node.params.color,
+			baseColor:
+				typeof node.params.params.color === "string"
+					? node.params.params.color
+					: "#ffffff",
 			animations: node.params.animations,
 			propertyPath: "color",
 			localTime,
 		}),
 		backgroundColor: resolveColorAtTime({
-			baseColor: node.params.background.color,
+			baseColor: background.color,
 			animations: node.params.animations,
 			propertyPath: "background.color",
 			localTime,
diff --git a/apps/web/src/services/renderer/scene-builder.ts b/apps/web/src/services/renderer/scene-builder.ts
index e79c62d4..431b8269 100644
--- a/apps/web/src/services/renderer/scene-builder.ts
+++ b/apps/web/src/services/renderer/scene-builder.ts
@@ -12,6 +12,11 @@ import { EffectLayerNode } from "./nodes/effect-layer-node";
 import type { AnyBaseNode } from "./nodes/base-node";
 import type { TBackground, TCanvasSize } from "@/project/types";
 import { DEFAULT_BACKGROUND_BLUR_INTENSITY } from "@/background/blur";
+import {
+	buildTransformFromParams,
+	readBlendModeFromParams,
+	readOpacityFromParams,
+} from "@/rendering";
 
 const PREVIEW_MAX_IMAGE_SIZE = 2048;
 
@@ -71,10 +76,10 @@ function buildTrackNodes({
 							trimStart: element.trimStart,
 							trimEnd: element.trimEnd,
 							retime: element.retime,
-							transform: element.transform,
+							transform: buildTransformFromParams({ params: element.params }),
 							animations: element.animations,
-							opacity: element.opacity,
-							blendMode: element.blendMode,
+							opacity: readOpacityFromParams({ params: element.params }),
+							blendMode: readBlendModeFromParams({ params: element.params }),
 							effects: element.effects ?? [],
 							masks: element.masks ?? [],
 						}),
@@ -88,10 +93,10 @@ function buildTrackNodes({
 							timeOffset: element.startTime,
 							trimStart: element.trimStart,
 							trimEnd: element.trimEnd,
-							transform: element.transform,
+							transform: buildTransformFromParams({ params: element.params }),
 							animations: element.animations,
-							opacity: element.opacity,
-							blendMode: element.blendMode,
+							opacity: readOpacityFromParams({ params: element.params }),
+							blendMode: readBlendModeFromParams({ params: element.params }),
 							effects: element.effects ?? [],
 							masks: element.masks ?? [],
 							...(isPreview && {
@@ -106,6 +111,9 @@ function buildTrackNodes({
 				nodes.push(
 					new TextNode({
 						...element,
+						transform: buildTransformFromParams({ params: element.params }),
+						opacity: readOpacityFromParams({ params: element.params }),
+						blendMode: readBlendModeFromParams({ params: element.params }),
 						canvasCenter: { x: canvasSize.width / 2, y: canvasSize.height / 2 },
 						canvasHeight: canvasSize.height,
 						textBaseline: "middle",
@@ -124,10 +132,10 @@ function buildTrackNodes({
 						timeOffset: element.startTime,
 						trimStart: element.trimStart,
 						trimEnd: element.trimEnd,
-						transform: element.transform,
+						transform: buildTransformFromParams({ params: element.params }),
 						animations: element.animations,
-						opacity: element.opacity,
-						blendMode: element.blendMode,
+						opacity: readOpacityFromParams({ params: element.params }),
+						blendMode: readBlendModeFromParams({ params: element.params }),
 						effects: element.effects ?? [],
 					}),
 				);
@@ -142,10 +150,10 @@ function buildTrackNodes({
 						timeOffset: element.startTime,
 						trimStart: element.trimStart,
 						trimEnd: element.trimEnd,
-						transform: element.transform,
+						transform: buildTransformFromParams({ params: element.params }),
 						animations: element.animations,
-						opacity: element.opacity,
-						blendMode: element.blendMode,
+						opacity: readOpacityFromParams({ params: element.params }),
+						blendMode: readBlendModeFromParams({ params: element.params }),
 						effects: element.effects ?? [],
 						masks: element.masks ?? [],
 					}),