add transform + few fixes

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

1 files changed, 10 insertions, 57 deletions

diff --git a/apps/web/src/services/renderer/nodes/video-node.ts b/apps/web/src/services/renderer/nodes/video-node.ts
index 841eb459..8e2ddccd 100644
--- a/apps/web/src/services/renderer/nodes/video-node.ts
+++ b/apps/web/src/services/renderer/nodes/video-node.ts
@@ -1,37 +1,14 @@
 import type { CanvasRenderer } from "../canvas-renderer";
-import { BaseNode } from "./base-node";
+import { VisualNode, type VisualNodeParams } from "./visual-node";
 import { videoCache } from "@/services/video-cache/service";
 
-const VIDEO_EPSILON = 1 / 1000;
-
-export interface VideoNodeParams {
+export interface VideoNodeParams extends VisualNodeParams {
 	url: string;
 	file: File;
 	mediaId: string;
-	duration: number;
-	timeOffset: number;
-	trimStart: number;
-	trimEnd: number;
-	x?: number;
-	y?: number;
-	width?: number;
-	height?: number;
-	opacity?: number;
 }
 
-export class VideoNode extends BaseNode<VideoNodeParams> {
-	private getVideoTime(time: number) {
-		return time - this.params.timeOffset + this.params.trimStart;
-	}
-
-	private isInRange(time: number) {
-		const videoTime = this.getVideoTime(time);
-		return (
-			videoTime >= this.params.trimStart - VIDEO_EPSILON &&
-			videoTime < this.params.trimStart + this.params.duration
-		);
-	}
-
+export class VideoNode extends VisualNode<VideoNodeParams> {
 	async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {
 		await super.render({ renderer, time });
 
@@ -39,7 +16,7 @@ export class VideoNode extends BaseNode<VideoNodeParams> {
 			return;
 		}
 
-		const videoTime = this.getVideoTime(time);
+		const videoTime = this.getLocalTime(time);
 		const frame = await videoCache.getFrameAt({
 			mediaId: this.params.mediaId,
 			file: this.params.file,
@@ -47,36 +24,12 @@ export class VideoNode extends BaseNode<VideoNodeParams> {
 		});
 
 		if (frame) {
-			renderer.context.save();
-
-			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(
-					frame.canvas,
-					this.params.x,
-					this.params.y,
-					this.params.width,
-					this.params.height,
-				);
-			} else {
-				renderer.context.drawImage(
-					frame.canvas,
-					0,
-					0,
-					renderer.width,
-					renderer.height,
-				);
-			}
-
-			renderer.context.restore();
+			this.renderVisual({
+				renderer,
+				source: frame.canvas,
+				sourceWidth: frame.canvas.width,
+				sourceHeight: frame.canvas.height,
+			});
 		}
 	}
 }