Migrate node graph UI interaction from frontend to backend (#1768)

* Click node using click targets based

* Display graph transform based on state stored in Rust, fix zoom and pan.

* Migrate node selection logic

* Move click targets and transform to NodeNetwork

* Keep click targets in sync with changes to node shape

* Click targets for import/export, add dragging

* Basic wire dragging

* complete wire dragging

* Add node selection box when dragging

* Fix zoom operations and dragging nodes

* Remove click targets from serialized data, fix EnterNestedNetwork

* WIP: Auto connect node when dragged on wire

* Finish auto connect node when dragged on wire

* Add context menus

* Improve layer width calculations and state

* Improve context menu state, various other improvements

* Close menu on escape

* Cleanup Graph.svelte

* Fix lock/hide tool tip shortcuts

* Clean up editor_api.rs, fix lock/hide layers

* Start transferring network and node metadata from NodeNetwork to the editor

* Transfer click targets to NodeGraphMessageHandler

* Fix infinite canvas

* Fix undo/redo, scrollbars, and fix warnings

* Unicode-3.0 license and code cleanup

* License fix

* formatting issue

* Enable DomRect

* Fix layer move crash

* Remove tests

* Ignore test

* formatting

* remove white dot

---------

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

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

@@ -2,30 +2,62 @@ import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/wasm-communication/editor";
 import {
+	type Box,
+	type ContextMenuInformation,
 	type FrontendNode,
 	type FrontendNodeWire as FrontendNodeWire,
 	type FrontendNodeType,
+	type WirePath,
+	UpdateBox,
+	UpdateContextMenuInformation,
+	UpdateLayerWidths,
 	UpdateNodeGraph,
 	UpdateNodeGraphSelection,
+	UpdateNodeGraphTransform,
 	UpdateNodeTypes,
 	UpdateNodeThumbnail,
 	UpdateSubgraphPath,
+	UpdateWirePathInProgress,
 	UpdateZoomWithScroll,
 } from "@graphite/wasm-communication/messages";
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createNodeGraphState(editor: Editor) {
 	const { subscribe, update } = writable({
+		box: undefined as Box | undefined,
+		contextMenuInformation: undefined as ContextMenuInformation | undefined,
+		layerWidths: new Map<bigint, number>(),
 		nodes: [] as FrontendNode[],
 		wires: [] as FrontendNodeWire[],
+		wirePathInProgress: undefined as WirePath | undefined,
 		nodeTypes: [] as FrontendNodeType[],
 		zoomWithScroll: false as boolean,
 		thumbnails: new Map<bigint, string>(),
 		selected: [] as bigint[],
 		subgraphPath: [] as string[],
+		transform: { scale: 1, x: 0, y: 0 },
 	});
 
 	// Set up message subscriptions on creation
+	editor.subscriptions.subscribeJsMessage(UpdateBox, (updateBox) => {
+		update((state) => {
+			state.box = updateBox.box;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateContextMenuInformation, (updateContextMenuInformation) => {
+		update((state) => {
+			state.contextMenuInformation = updateContextMenuInformation.contextMenuInformation;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateLayerWidths, (updateLayerWidths) => {
+		update((state) => {
+			state.layerWidths = updateLayerWidths.layerWidths;
+			return state;
+		});
+	});
+	// TODO: Add a way to only update the nodes that have changed
 	editor.subscriptions.subscribeJsMessage(UpdateNodeGraph, (updateNodeGraph) => {
 		update((state) => {
 			state.nodes = updateNodeGraph.nodes;
@@ -39,6 +71,12 @@ export function createNodeGraphState(editor: Editor) {
 			return state;
 		});
 	});
+	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphTransform, (updateNodeGraphTransform) => {
+		update((state) => {
+			state.transform = updateNodeGraphTransform.transform;
+			return state;
+		});
+	});
 	editor.subscriptions.subscribeJsMessage(UpdateNodeTypes, (updateNodeTypes) => {
 		update((state) => {
 			state.nodeTypes = updateNodeTypes.nodeTypes;
@@ -57,6 +95,12 @@ export function createNodeGraphState(editor: Editor) {
 			return state;
 		});
 	});
+	editor.subscriptions.subscribeJsMessage(UpdateWirePathInProgress, (updateWirePathInProgress) => {
+		update((state) => {
+			state.wirePathInProgress = updateWirePathInProgress.wirePath;
+			return state;
+		});
+	});
 	editor.subscriptions.subscribeJsMessage(UpdateZoomWithScroll, (updateZoomWithScroll) => {
 		update((state) => {
 			state.zoomWithScroll = updateZoomWithScroll.zoomWithScroll;