Add layer node chains, import/export edge connectors, and refactor graph editing to go thru a NodeNetworkInterface (#1794)

* WIP: NodeNetworkInterface

* Organize ModifyInputsContext to use network interface

* Improve ClickTarget and Position state

* Rework ClickTarget state

* Continue fixing NodeGraphMessageHandler

* Restructure network_metadata

* Final(?) NodeNetworkInterface struct

* Final(??) NodeNetworkInterface

* Final(???) NodeNetworkInterface. Separated persistent and transient data

* Final NodeNetworkInterface data structure. Implemented all basic getters

* Continue migrating functionality to network interface

* Migrate all NodeGraphMessage's to use network interface

* Fix all helper functions in NodeGraphMessageHandler

* Move document metadata to network interface, remove various cached fields

* Move all editor only NodeNetwork implementations to NodeNetworkInterface

* Fix all DocumentNodeDefinitions

* Rework and migrate GraphOperationMessages to network interface

* Continue migration to NodeNetworkInterface

* Save point before merging master

* Fix all errors in network_interface

* 850 -> 160 errors

* Fix all errors :D

* Render default document

* Visualize click targets

* merge conflicts

* Cache transient metadata separately, store entire interface in document history

* Start migration to storing selected nodes for each network

* Remove selected nodes from document message handler

* Move outward wires and all nodes bounding box to transient metadata

* Fix connecting/disconnecting nodes

* Layer stack organization for disconnecting/connecting nodes

* Basic chain locking

* Improve chain positioning

* Add copy/pasting

* Move upstream nodes on shift+drag

* merge conflict fixes

* Improve Graph.svelte code quality

* Final improvements to Graph.svelte

* Fix layer panel

* Performance optimizations

* Bug fixes and derived PTZ

* Chain organization improvement and bug fixes

* Bug fixes, remove all warnings

* Automatic file upgrade

* Final code review

* Fix editor tests

* Fix compile errors

* Remove select tool intersection check when panning

* WIP: Import/Exports

* Fix JS issues

* Finish simplified import/export UI

* Import/Export viewport edge UI

* Remove minimum y bound on import/export ports

* Improve performance while panning graph

* cargo fmt

* Fix CI code build

* Format the demo artwork graph with chains

* Code review

---------

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

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

@@ -1,15 +1,20 @@
 import { writable } from "svelte/store";
 
 import { type Editor } from "@graphite/wasm-communication/editor";
+import type { FrontendGraphOutput, FrontendGraphInput } from "@graphite/wasm-communication/messages";
 import {
 	type Box,
+	type FrontendClickTargets,
 	type ContextMenuInformation,
 	type FrontendNode,
 	type FrontendNodeWire as FrontendNodeWire,
 	type FrontendNodeType,
 	type WirePath,
 	UpdateBox,
+	UpdateClickTargets,
 	UpdateContextMenuInformation,
+	UpdateInSelectedNetwork,
+	UpdateImportsExports,
 	UpdateLayerWidths,
 	UpdateNodeGraph,
 	UpdateNodeGraphSelection,
@@ -24,9 +29,13 @@ import {
 export function createNodeGraphState(editor: Editor) {
 	const { subscribe, update } = writable({
 		box: undefined as Box | undefined,
+		clickTargets: undefined as FrontendClickTargets | undefined,
 		contextMenuInformation: undefined as ContextMenuInformation | undefined,
 		layerWidths: new Map<bigint, number>(),
-		nodes: [] as FrontendNode[],
+		chainWidths: new Map<bigint, number>(),
+		imports: [] as { outputMetadata: FrontendGraphOutput; position: { x: number; y: number } }[],
+		exports: [] as { inputMetadata: FrontendGraphInput; position: { x: number; y: number } }[],
+		nodes: new Map<bigint, FrontendNode>(),
 		wires: [] as FrontendNodeWire[],
 		wirePathInProgress: undefined as WirePath | undefined,
 		nodeTypes: [] as FrontendNodeType[],
@@ -34,6 +43,7 @@ export function createNodeGraphState(editor: Editor) {
 		thumbnails: new Map<bigint, string>(),
 		selected: [] as bigint[],
 		transform: { scale: 1, x: 0, y: 0 },
+		inSelectedNetwork: true,
 	});
 
 	// Set up message subscriptions on creation
@@ -43,22 +53,45 @@ export function createNodeGraphState(editor: Editor) {
 			return state;
 		});
 	});
+	editor.subscriptions.subscribeJsMessage(UpdateClickTargets, (UpdateClickTargets) => {
+		update((state) => {
+			state.clickTargets = UpdateClickTargets.clickTargets;
+			return state;
+		});
+	});
 	editor.subscriptions.subscribeJsMessage(UpdateContextMenuInformation, (updateContextMenuInformation) => {
 		update((state) => {
 			state.contextMenuInformation = updateContextMenuInformation.contextMenuInformation;
 			return state;
 		});
 	});
+	editor.subscriptions.subscribeJsMessage(UpdateImportsExports, (updateImportsExports) => {
+		update((state) => {
+			state.imports = updateImportsExports.imports;
+			state.exports = updateImportsExports.exports;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateInSelectedNetwork, (updateInSelectedNetwork) => {
+		update((state) => {
+			state.inSelectedNetwork = updateInSelectedNetwork.inSelectedNetwork;
+			return state;
+		});
+	});
 	editor.subscriptions.subscribeJsMessage(UpdateLayerWidths, (updateLayerWidths) => {
 		update((state) => {
 			state.layerWidths = updateLayerWidths.layerWidths;
+			state.chainWidths = updateLayerWidths.chainWidths;
 			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;
+			state.nodes.clear();
+			updateNodeGraph.nodes.forEach((node) => {
+				state.nodes.set(node.id, node);
+			});
 			state.wires = updateNodeGraph.wires;
 			return state;
 		});