refactor: unify element params

2 files changed, 71 insertions, 35 deletions

diff --git a/apps/web/src/preview/controllers/preview-interaction-controller.ts b/apps/web/src/preview/controllers/preview-interaction-controller.ts
index 00573662..118b48ae 100644
--- a/apps/web/src/preview/controllers/preview-interaction-controller.ts
+++ b/apps/web/src/preview/controllers/preview-interaction-controller.ts
@@ -18,7 +18,8 @@ import {
 	type SnapLine,
 } from "@/preview/preview-snap";
 import type { TCanvasSize } from "@/project/types";
-import type { Transform } from "@/rendering";
+import type { ParamValues } from "@/params";
+import { buildTransformFromParams, type Transform } from "@/rendering";
 import { isVisualElement } from "@/timeline/element-utils";
 import type {
 	ElementRef,
@@ -51,6 +52,7 @@ interface DragElementSnapshot {
 	readonly trackId: string;
 	readonly elementId: string;
 	readonly initialTransform: Transform;
+	readonly initialParams: ParamValues;
 }
 
 interface DraggingGesture extends CapturedPointerState {
@@ -218,7 +220,8 @@ function toDragElementSnapshots({
 		.map(({ track, element }) => ({
 			trackId: track.id,
 			elementId: element.id,
-			initialTransform: element.transform,
+			initialTransform: buildTransformFromParams({ params: element.params }),
+			initialParams: element.params,
 		}));
 }
 
@@ -565,16 +568,14 @@ export class PreviewInteractionController {
 			snappedPosition.y - firstElement.initialTransform.position.y;
 
 		this.deps.timeline.previewElements(
-			drag.elements.map(({ trackId, elementId, initialTransform }) => ({
+			drag.elements.map(({ trackId, elementId, initialTransform, initialParams }) => ({
 				trackId,
 				elementId,
 				updates: {
-					transform: {
-						...initialTransform,
-						position: {
-							x: initialTransform.position.x + deltaSnappedX,
-							y: initialTransform.position.y + deltaSnappedY,
-						},
+					params: {
+						...initialParams,
+						"transform.positionX": initialTransform.position.x + deltaSnappedX,
+						"transform.positionY": initialTransform.position.y + deltaSnappedY,
 					},
 				},
 			})),
diff --git a/apps/web/src/preview/controllers/transform-handle-controller.ts b/apps/web/src/preview/controllers/transform-handle-controller.ts
index 67f677f6..d9b5ef1f 100644
--- a/apps/web/src/preview/controllers/transform-handle-controller.ts
+++ b/apps/web/src/preview/controllers/transform-handle-controller.ts
@@ -23,7 +23,8 @@ import {
 	setChannel,
 } from "@/animation";
 import type { ElementAnimations } from "@/animation/types";
-import type { Transform } from "@/rendering";
+import type { ParamValues } from "@/params";
+import { buildTransformFromParams, type Transform } from "@/rendering";
 import { resolveTransformAtTime } from "@/rendering/animation-values";
 import type {
 	ElementRef,
@@ -47,6 +48,7 @@ interface CornerScaleSession extends CapturedPointerState {
 	readonly trackId: string;
 	readonly elementId: string;
 	readonly initialTransform: Transform;
+	readonly initialParams: ParamValues;
 	readonly initialDistance: number;
 	readonly initialBoundsCx: number;
 	readonly initialBoundsCy: number;
@@ -62,6 +64,7 @@ interface EdgeScaleSession extends CapturedPointerState {
 	readonly trackId: string;
 	readonly elementId: string;
 	readonly initialTransform: Transform;
+	readonly initialParams: ParamValues;
 	readonly initialBoundsCx: number;
 	readonly initialBoundsCy: number;
 	readonly baseWidth: number;
@@ -76,6 +79,7 @@ interface RotationSession extends CapturedPointerState {
 	readonly trackId: string;
 	readonly elementId: string;
 	readonly initialTransform: Transform;
+	readonly initialParams: ParamValues;
 	readonly initialAngle: number;
 	readonly initialBoundsCx: number;
 	readonly initialBoundsCy: number;
@@ -369,6 +373,7 @@ export class TransformHandleController {
 			trackId: context.trackId,
 			elementId: context.elementId,
 			initialTransform: context.resolvedTransform,
+			initialParams: context.element.params,
 			initialDistance: getCornerDistance({
 				bounds: context.bounds,
 				corner,
@@ -410,6 +415,7 @@ export class TransformHandleController {
 			trackId: context.trackId,
 			elementId: context.elementId,
 			initialTransform: context.resolvedTransform,
+			initialParams: context.element.params,
 			initialAngle,
 			initialBoundsCx: context.bounds.cx,
 			initialBoundsCy: context.bounds.cy,
@@ -447,6 +453,7 @@ export class TransformHandleController {
 			trackId: context.trackId,
 			elementId: context.elementId,
 			initialTransform: context.resolvedTransform,
+			initialParams: context.element.params,
 			initialBoundsCx: context.bounds.cx,
 			initialBoundsCy: context.bounds.cy,
 			baseWidth: context.bounds.width / context.resolvedTransform.scaleX,
@@ -561,7 +568,9 @@ export class TransformHandleController {
 			element: selectedWithBounds.element,
 			bounds: selectedWithBounds.bounds,
 			resolvedTransform: resolveTransformAtTime({
-				baseTransform: selectedWithBounds.element.transform,
+				baseTransform: buildTransformFromParams({
+					params: selectedWithBounds.element.params,
+				}),
 				animations: selectedWithBounds.element.animations,
 				localTime,
 			}),
@@ -608,15 +617,18 @@ export class TransformHandleController {
 				trackId: session.trackId,
 				elementId: session.elementId,
 				updates: {
-					transform: {
-						...session.initialTransform,
-						scaleX: clampScaleNonZero(
-							session.initialTransform.scaleX * snappedScale,
-						),
-						scaleY: clampScaleNonZero(
-							session.initialTransform.scaleY * snappedScale,
-						),
-					},
+					params: buildParamsWithTransform({
+						params: session.initialParams,
+						transform: {
+							...session.initialTransform,
+							scaleX: clampScaleNonZero(
+								session.initialTransform.scaleX * snappedScale,
+							),
+							scaleY: clampScaleNonZero(
+								session.initialTransform.scaleY * snappedScale,
+							),
+						},
+					}),
 					...(session.shouldClearScaleAnimation && {
 						animations: session.animationsWithoutScale,
 					}),
@@ -699,17 +711,20 @@ export class TransformHandleController {
 				trackId: session.trackId,
 				elementId: session.elementId,
 				updates: {
-					transform: {
-						...session.initialTransform,
-						scaleX:
-							session.edge === "right" || session.edge === "left"
-								? xSnap.snappedScale
-								: session.initialTransform.scaleX,
-						scaleY:
-							session.edge === "bottom"
-								? ySnap.snappedScale
-								: session.initialTransform.scaleY,
-					},
+					params: buildParamsWithTransform({
+						params: session.initialParams,
+						transform: {
+							...session.initialTransform,
+							scaleX:
+								session.edge === "right" || session.edge === "left"
+									? xSnap.snappedScale
+									: session.initialTransform.scaleX,
+							scaleY:
+								session.edge === "bottom"
+									? ySnap.snappedScale
+									: session.initialTransform.scaleY,
+						},
+					}),
 					...(session.shouldClearScaleAnimation && {
 						animations: session.animationsWithoutScale,
 					}),
@@ -742,12 +757,32 @@ export class TransformHandleController {
 				trackId: session.trackId,
 				elementId: session.elementId,
 				updates: {
-					transform: {
-						...session.initialTransform,
-						rotate: snappedRotation,
-					},
+					params: buildParamsWithTransform({
+						params: session.initialParams,
+						transform: {
+							...session.initialTransform,
+							rotate: snappedRotation,
+						},
+					}),
 				},
 			},
 		]);
 	}
 }
+
+function buildParamsWithTransform({
+	params,
+	transform,
+}: {
+	params: ParamValues;
+	transform: Transform;
+}): ParamValues {
+	return {
+		...params,
+		"transform.positionX": transform.position.x,
+		"transform.positionY": transform.position.y,
+		"transform.scaleX": transform.scaleX,
+		"transform.scaleY": transform.scaleY,
+		"transform.rotate": transform.rotate,
+	};
+}