feat: masks, properties refactor, shaders, storage migrations, and more

1 files changed, 14 insertions, 6 deletions

diff --git a/apps/web/src/services/renderer/nodes/sticker-node.ts b/apps/web/src/services/renderer/nodes/sticker-node.ts
index da271685..71cb37b5 100644
--- a/apps/web/src/services/renderer/nodes/sticker-node.ts
+++ b/apps/web/src/services/renderer/nodes/sticker-node.ts
@@ -4,6 +4,8 @@ import { VisualNode, type VisualNodeParams } from "./visual-node";
 
 export interface StickerNodeParams extends VisualNodeParams {
 	stickerId: string;
+	intrinsicWidth?: number;
+	intrinsicHeight?: number;
 }
 
 interface CachedStickerSource {
@@ -14,7 +16,7 @@ interface CachedStickerSource {
 
 const stickerSourceCache = new Map<string, Promise<CachedStickerSource>>();
 
-function loadStickerSource(stickerId: string): Promise<CachedStickerSource> {
+function loadStickerSource({ stickerId }: { stickerId: string }): Promise<CachedStickerSource> {
 	const cached = stickerSourceCache.get(stickerId);
 	if (cached) return cached;
 
@@ -33,7 +35,7 @@ function loadStickerSource(stickerId: string): Promise<CachedStickerSource> {
 			image.src = url;
 		});
 
-		return { source: image, width: 200, height: 200 };
+		return { source: image, width: image.naturalWidth, height: image.naturalHeight };
 	})();
 
 	stickerSourceCache.set(stickerId, promise);
@@ -45,7 +47,7 @@ export class StickerNode extends VisualNode<StickerNodeParams> {
 
 	constructor(params: StickerNodeParams) {
 		super(params);
-		this.cachedSource = loadStickerSource(params.stickerId);
+		this.cachedSource = loadStickerSource({ stickerId: params.stickerId });
 	}
 
 	async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {
@@ -55,13 +57,19 @@ export class StickerNode extends VisualNode<StickerNodeParams> {
 			return;
 		}
 
-		const { source, width, height } = await this.cachedSource;
+		const { source, width: loadedWidth, height: loadedHeight } =
+			await this.cachedSource;
+
+		// Prefer element-stored intrinsic dimensions as the geometry authority.
+		// The loaded image is only the drawable source.
+		const sourceWidth = this.params.intrinsicWidth ?? loadedWidth;
+		const sourceHeight = this.params.intrinsicHeight ?? loadedHeight;
 
 		this.renderVisual({
 			renderer,
 			source,
-			sourceWidth: width,
-			sourceHeight: height,
+			sourceWidth,
+			sourceHeight,
 			timelineTime: time,
 		});
 	}