Thumbnails for the layer node (#1210)

* Thumbnails for the layer node

* Raster node graph frames

* Downscale to a random resolution

* Cleanup and bug fixes

* Generate paths before duplicating outputs

* Fix stable id test

* Code review changes

* Code review pass with minor changes

---------

Co-authored-by: Keavon Chambers <keavon@keavon.com>

frontend/src/components/panels/NodeGraph.svelte

@@ -548,7 +548,11 @@
 								</div>
 							{/if}
 						</div>
-						<IconLabel icon={nodeIcon(node.displayName)} />
+						{#if node.thumbnailSvg}
+							{@html node.thumbnailSvg}
+						{:else}
+							<IconLabel icon={nodeIcon(node.displayName)} />
+						{/if}
 						<TextLabel>{node.displayName}</TextLabel>
 					</div>
 					{#if exposedInputsOutputs.length > 0}

frontend/src/state-providers/portfolio.ts

@@ -128,7 +128,7 @@ export function createPortfolioState(editor: Editor) {
 			image.src = blobURL;
 			await image.decode();
 
-			editor.instance.setImageBlobURL(updateImageData.documentId, element.path, blobURL, image.naturalWidth, image.naturalHeight, element.transform);
+			editor.instance.setImageBlobURL(updateImageData.documentId, element.path, element.nodeId, blobURL, image.naturalWidth, image.naturalHeight, element.transform);
 		});
 	});
 	editor.subscriptions.subscribeJsMessage(TriggerRasterizeRegionBelowLayer, async (triggerRasterizeRegionBelowLayer) => {

frontend/src/wasm-communication/editor.ts

@@ -11,7 +11,7 @@ export type Editor = Readonly<ReturnType<typeof createEditor>>;
 // `wasmImport` starts uninitialized because its initialization needs to occur asynchronously, and thus needs to occur by manually calling and awaiting `initWasm()`
 let wasmImport: WebAssembly.Memory | undefined;
 
-export async function updateImage(path: BigUint64Array, mime: string, imageData: Uint8Array, transform: Float64Array, documentId: bigint): Promise<void> {
+export async function updateImage(path: BigUint64Array, nodeId: bigint, mime: string, imageData: Uint8Array, transform: Float64Array, documentId: bigint): Promise<void> {
 	const blob = new Blob([imageData], { type: mime });
 
 	const blobURL = URL.createObjectURL(blob);
@@ -21,10 +21,10 @@ export async function updateImage(path: BigUint64Array, mime: string, imageData:
 	image.src = blobURL;
 	await image.decode();
 
-	window["editorInstance"]?.setImageBlobURL(documentId, path, blobURL, image.naturalWidth, image.naturalHeight, transform);
+	window["editorInstance"]?.setImageBlobURL(documentId, path, nodeId, blobURL, image.naturalWidth, image.naturalHeight, transform);
 }
 
-export async function fetchImage(path: BigUint64Array, mime: string, documentId: bigint, url: string): Promise<void> {
+export async function fetchImage(path: BigUint64Array, nodeId: bigint, mime: string, documentId: bigint, url: string): Promise<void> {
 	const data = await fetch(url);
 	const blob = await data.blob();
 
@@ -35,7 +35,7 @@ export async function fetchImage(path: BigUint64Array, mime: string, documentId:
 	image.src = blobURL;
 	await image.decode();
 
-	window["editorInstance"]?.setImageBlobURL(documentId, path, blobURL, image.naturalWidth, image.naturalHeight, undefined);
+	window["editorInstance"]?.setImageBlobURL(documentId, path, nodeId, blobURL, image.naturalWidth, image.naturalHeight, undefined);
 }
 
 const tauri = "__TAURI_METADATA__" in window && import("@tauri-apps/api");

frontend/src/wasm-communication/messages.ts

@@ -105,6 +105,8 @@ export class FrontendNode {
 	readonly previewed!: boolean;
 
 	readonly disabled!: boolean;
+
+	readonly thumbnailSvg!: string | undefined;
 }
 
 export class FrontendNodeLink {
@@ -771,6 +773,8 @@ export type LayerTypeData = {
 export class ImaginateImageData {
 	readonly path!: BigUint64Array;
 
+	readonly nodeId!: bigint;
+
 	readonly mime!: string;
 
 	readonly imageData!: Uint8Array;