add transform + few fixes

feat: transform
feat: batch command
fix: slider undo
fix: timeline zoom perf
refactor: make updateElement support multiple

1 files changed, 11 insertions, 60 deletions

diff --git a/apps/web/src/services/renderer/nodes/image-node.ts b/apps/web/src/services/renderer/nodes/image-node.ts
index 5405b60b..49e84ebe 100644
--- a/apps/web/src/services/renderer/nodes/image-node.ts
+++ b/apps/web/src/services/renderer/nodes/image-node.ts
@@ -1,22 +1,11 @@
 import type { CanvasRenderer } from "../canvas-renderer";
-import { BaseNode } from "./base-node";
+import { VisualNode, type VisualNodeParams } from "./visual-node";
 
-const IMAGE_EPSILON = 1 / 1000;
-
-export interface ImageNodeParams {
+export interface ImageNodeParams extends VisualNodeParams {
 	url: string;
-	duration: number;
-	timeOffset: number;
-	trimStart: number;
-	trimEnd: number;
-	x?: number;
-	y?: number;
-	width?: number;
-	height?: number;
-	opacity?: number;
 }
 
-export class ImageNode extends BaseNode<ImageNodeParams> {
+export class ImageNode extends VisualNode<ImageNodeParams> {
 	private image?: HTMLImageElement;
 	private readyPromise: Promise<void>;
 
@@ -36,18 +25,6 @@ export class ImageNode extends BaseNode<ImageNodeParams> {
 		});
 	}
 
-	private getImageTime(time: number) {
-		return time - this.params.timeOffset + this.params.trimStart;
-	}
-
-	private isInRange(time: number) {
-		const imageTime = this.getImageTime(time);
-		return (
-			imageTime >= this.params.trimStart - IMAGE_EPSILON &&
-			imageTime < this.params.trimStart + this.params.duration
-		);
-	}
-
 	async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {
 		await super.render({ renderer, time });
 
@@ -61,40 +38,14 @@ export class ImageNode extends BaseNode<ImageNodeParams> {
 			return;
 		}
 
-		renderer.context.save();
+		const mediaW = this.image.naturalWidth || renderer.width;
+		const mediaH = this.image.naturalHeight || renderer.height;
 
-		if (this.params.opacity !== undefined) {
-			renderer.context.globalAlpha = this.params.opacity;
-		}
-
-		if (
-			this.params.x !== undefined &&
-			this.params.y !== undefined &&
-			this.params.width !== undefined &&
-			this.params.height !== undefined
-		) {
-			renderer.context.drawImage(
-				this.image,
-				this.params.x,
-				this.params.y,
-				this.params.width,
-				this.params.height,
-			);
-		} else {
-			const mediaW = this.image.naturalWidth || renderer.width;
-			const mediaH = this.image.naturalHeight || renderer.height;
-			const containScale = Math.min(
-				renderer.width / mediaW,
-				renderer.height / mediaH,
-			);
-			const drawW = mediaW * containScale;
-			const drawH = mediaH * containScale;
-			const drawX = (renderer.width - drawW) / 2;
-			const drawY = (renderer.height - drawH) / 2;
-
-			renderer.context.drawImage(this.image, drawX, drawY, drawW, drawH);
-		}
-
-		renderer.context.restore();
+		this.renderVisual({
+			renderer,
+			source: this.image,
+			sourceWidth: mediaW,
+			sourceHeight: mediaH,
+		});
 	}
 }