Initial work migrating vector layers to document graph

* Fix pen tool (except overlays)
* Thumbnail of only the layer and not the composite
* Fix occasional transform breakages
* Constrain size of thumbnail
* Insert new layers at the top
* Broken layer tree
* Fix crash when drawing
* Reduce calls to send graph
* Reduce calls to updating properties
* Store cached transforms upon the document
* Fix missing node UI updates
* Fix fill tool and clean up imports and indentation
* Error on overide existing layer
* Fix pen tool (partially)
* Fix some lints

frontend/src/components/views/Graph.svelte

@@ -652,8 +652,8 @@
 					</svg>
 				</div>
 				<div class="thumbnail">
-					{#if node.thumbnailSvg}
-						{@html node.thumbnailSvg}
+					{#if $nodeGraph.thumbnails.has(node.id)}
+						{@html $nodeGraph.thumbnails.get(node.id) }
 					{/if}
 					{#if node.primaryOutput}
 						<svg
@@ -702,7 +702,7 @@
 				class:selected={selected.includes(node.id)}
 				class:previewed={node.previewed}
 				class:disabled={node.disabled}
-				class:is-layer={node.thumbnailSvg !== undefined}
+				class:is-layer={node.displayName === "Layer"}
 				style:--offset-left={(node.position?.x || 0) + (selected.includes(node.id) ? draggingNodes?.roundX || 0 : 0)}
 				style:--offset-top={(node.position?.y || 0) + (selected.includes(node.id) ? draggingNodes?.roundY || 0 : 0)}
 				style:--clip-path-id={`url(#${clipPathId})`}
@@ -1173,6 +1173,10 @@
 						.expand-arrow {
 							margin-right: 4px;
 						}
+						svg {
+							width: 30px;
+							height: 20px;
+						}
 					}
 				}
 

frontend/src/state-providers/node-graph.ts

@@ -7,6 +7,7 @@ import {
 	type FrontendNodeType,
 	UpdateNodeGraph,
 	UpdateNodeTypes,
+	UpdateNodeThumbnail,
 	UpdateZoomWithScroll,
 } from "@graphite/wasm-communication/messages";
 
@@ -17,6 +18,7 @@ export function createNodeGraphState(editor: Editor) {
 		links: [] as FrontendNodeLink[],
 		nodeTypes: [] as FrontendNodeType[],
 		zoomWithScroll: false as boolean,
+		thumbnails: new Map<bigint, string>(),
 	});
 
 	// Set up message subscriptions on creation
@@ -24,6 +26,13 @@ export function createNodeGraphState(editor: Editor) {
 		update((state) => {
 			state.nodes = updateNodeGraph.nodes;
 			state.links = updateNodeGraph.links;
+			let newThumbnails = new Map<bigint, string>();
+			state.nodes.forEach((node) => {
+				const thumbnail = state.thumbnails.get(node.id);
+				if (thumbnail)
+					newThumbnails.set(node.id, thumbnail);
+			});
+			state.thumbnails = newThumbnails;
 			return state;
 		});
 	});
@@ -33,6 +42,12 @@ export function createNodeGraphState(editor: Editor) {
 			return state;
 		});
 	});
+	editor.subscriptions.subscribeJsMessage(UpdateNodeThumbnail, (updateNodeThumbnail) => {
+		update((state) => {
+			state.thumbnails.set(updateNodeThumbnail.id, updateNodeThumbnail.value);
+			return state;
+		});
+	});
 	editor.subscriptions.subscribeJsMessage(UpdateZoomWithScroll, (updateZoomWithScroll) => {
 		update((state) => {
 			state.zoomWithScroll = updateZoomWithScroll.zoomWithScroll;

frontend/src/wasm-communication/messages.ts

@@ -37,6 +37,12 @@ export class UpdateNodeTypes extends JsMessage {
 	readonly nodeTypes!: FrontendNodeType[];
 }
 
+export class UpdateNodeThumbnail extends JsMessage {
+	readonly id!: bigint;
+
+	readonly value!: string;
+}
+
 export class UpdateNodeGraphSelection extends JsMessage {
 	@Type(() => BigInt)
 	readonly selected!: bigint[];
@@ -106,8 +112,6 @@ export class FrontendNode {
 	readonly previewed!: boolean;
 
 	readonly disabled!: boolean;
-
-	readonly thumbnailSvg!: string | undefined;
 }
 
 export class FrontendNodeLink {
@@ -1435,6 +1439,7 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateNodeGraph,
 	UpdateNodeGraphBarLayout,
 	UpdateNodeGraphSelection,
+	UpdateNodeThumbnail,
 	UpdateNodeTypes,
 	UpdateOpenDocumentsList,
 	UpdatePropertyPanelOptionsLayout,