Integrate the node graph as a Node Graph Frame layer type (#812)

* Add node graph frame tool

* Add a brighten

* Use the node graph

* Fix topological_sort

* Update UI

* Add icons for the tool and layer type

* Avoid serde & use bitmaps to improve performance

* Allow serialising a node graph

* Fix missing ..Default::default()

* Fix incorrect comments

* Cache node graph output image

* Suppress no-cycle import warning

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

frontend/src/wasm-communication/editor.ts

@@ -9,6 +9,20 @@ 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: WasmRawInstance | undefined;
+let editorInstance: WasmEditorInstance | undefined;
+
+export async function updateImage(path: BigUint64Array, mime: string, imageData: Uint8Array, documentId: bigint): Promise<void> {
+	const blob = new Blob([imageData], { type: mime });
+
+	const blobURL = URL.createObjectURL(blob);
+
+	// Pre-decode the image so it is ready to be drawn instantly once it's placed into the viewport SVG
+	const image = new Image();
+	image.src = blobURL;
+	await image.decode();
+
+	editorInstance?.setImageBlobURL(documentId, path, blobURL, image.naturalWidth, image.naturalHeight);
+}
 
 // Should be called asynchronously before `createEditor()`
 export async function initWasm(): Promise<void> {
@@ -16,6 +30,7 @@ export async function initWasm(): Promise<void> {
 	if (wasmImport !== undefined) return;
 
 	// Import the WASM module JS bindings and wrap them in the panic proxy
+	// eslint-disable-next-line import/no-cycle
 	wasmImport = await import("@/../wasm/pkg").then(panicProxy);
 
 	// Provide a random starter seed which must occur after initializing the WASM module, since WASM can't generate its own random numbers
@@ -36,6 +51,7 @@ export function createEditor() {
 		// We pass along the first two arguments then add our own `raw` and `instance` context for the last two arguments
 		subscriptions.handleJsMessage(messageType, messageData, raw, instance);
 	});
+	editorInstance = instance;
 
 	// Subscriptions: Allows subscribing to messages in JS that are sent from the WASM backend
 	const subscriptions: SubscriptionRouter = createSubscriptionRouter();