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>

Author: 3 people

demo-artwork/isometric-fountain.graphite

@@ -1,3 +1,6 @@
+// Graph
+pub const GRID_SIZE: u32 = 24;
+
 // Viewport
 pub const VIEWPORT_ZOOM_WHEEL_RATE: f64 = (1. / 600.) * 3.;
 pub const VIEWPORT_ZOOM_MOUSE_RATE: f64 = 1. / 400.;

demo-artwork/painted-dreams.graphite

@@ -165,9 +165,10 @@ impl Dispatcher {
 					self.message_handlers.preferences_message_handler.process_message(message, &mut queue, ());
 				}
 				Message::Tool(message) => {
-					if let Some(document) = self.message_handlers.portfolio_message_handler.active_document() {
+					let document_id = self.message_handlers.portfolio_message_handler.active_document_id().unwrap();
+					if let Some(document) = self.message_handlers.portfolio_message_handler.documents.get_mut(&document_id) {
 						let data = ToolMessageData {
-							document_id: self.message_handlers.portfolio_message_handler.active_document_id().unwrap(),
+							document_id,
 							document,
 							input: &self.message_handlers.input_preprocessor_message_handler,
 							persistent_data: &self.message_handlers.portfolio_message_handler.persistent_data,
@@ -308,12 +309,12 @@ mod test {
 		editor.handle_message(PortfolioMessage::PasteIntoFolder {
 			clipboard: Clipboard::Internal,
 			parent: LayerNodeIdentifier::ROOT_PARENT,
-			insert_index: -1,
+			insert_index: 0,
 		});
 		let document_after_copy = editor.dispatcher.message_handlers.portfolio_message_handler.active_document().unwrap().clone();
 
-		let layers_before_copy = document_before_copy.metadata.all_layers().collect::<Vec<_>>();
-		let layers_after_copy = document_after_copy.metadata.all_layers().collect::<Vec<_>>();
+		let layers_before_copy = document_before_copy.metadata().all_layers().collect::<Vec<_>>();
+		let layers_after_copy = document_after_copy.metadata().all_layers().collect::<Vec<_>>();
 
 		assert_eq!(layers_before_copy.len(), 3);
 		assert_eq!(layers_after_copy.len(), 4);
@@ -337,20 +338,20 @@ mod test {
 		let mut editor = create_editor_with_three_layers();
 
 		let document_before_copy = editor.dispatcher.message_handlers.portfolio_message_handler.active_document().unwrap().clone();
-		let shape_id = document_before_copy.metadata.all_layers().nth(1).unwrap();
+		let shape_id = document_before_copy.metadata().all_layers().nth(1).unwrap();
 
 		editor.handle_message(NodeGraphMessage::SelectedNodesSet { nodes: vec![shape_id.to_node()] });
 		editor.handle_message(PortfolioMessage::Copy { clipboard: Clipboard::Internal });
 		editor.handle_message(PortfolioMessage::PasteIntoFolder {
 			clipboard: Clipboard::Internal,
 			parent: LayerNodeIdentifier::ROOT_PARENT,
-			insert_index: -1,
+			insert_index: 0,
 		});
 
 		let document_after_copy = editor.dispatcher.message_handlers.portfolio_message_handler.active_document().unwrap().clone();
 
-		let layers_before_copy = document_before_copy.metadata.all_layers().collect::<Vec<_>>();
-		let layers_after_copy = document_after_copy.metadata.all_layers().collect::<Vec<_>>();
+		let layers_before_copy = document_before_copy.metadata().all_layers().collect::<Vec<_>>();
+		let layers_after_copy = document_after_copy.metadata().all_layers().collect::<Vec<_>>();
 
 		assert_eq!(layers_before_copy.len(), 3);
 		assert_eq!(layers_after_copy.len(), 4);
@@ -376,7 +377,7 @@ mod test {
 		let mut editor = create_editor_with_three_layers();
 
 		let document_before_copy = editor.dispatcher.message_handlers.portfolio_message_handler.active_document().unwrap().clone();
-		let mut layers = document_before_copy.metadata.all_layers();
+		let mut layers = document_before_copy.metadata().all_layers();
 		let rect_id = layers.next().expect("rectangle");
 		let shape_id = layers.next().expect("shape");
 		let ellipse_id = layers.next().expect("ellipse");
@@ -385,23 +386,23 @@ mod test {
 			nodes: vec![rect_id.to_node(), ellipse_id.to_node()],
 		});
 		editor.handle_message(PortfolioMessage::Copy { clipboard: Clipboard::Internal });
-		editor.handle_message(DocumentMessage::DeleteSelectedLayers);
+		editor.handle_message(NodeGraphMessage::DeleteSelectedNodes { reconnect: true });
 		editor.draw_rect(0., 800., 12., 200.);
 		editor.handle_message(PortfolioMessage::PasteIntoFolder {
 			clipboard: Clipboard::Internal,
 			parent: LayerNodeIdentifier::ROOT_PARENT,
-			insert_index: -1,
+			insert_index: 0,
 		});
 		editor.handle_message(PortfolioMessage::PasteIntoFolder {
 			clipboard: Clipboard::Internal,
 			parent: LayerNodeIdentifier::ROOT_PARENT,
-			insert_index: -1,
+			insert_index: 0,
 		});
 
 		let document_after_copy = editor.dispatcher.message_handlers.portfolio_message_handler.active_document().unwrap().clone();
 
-		let layers_before_copy = document_before_copy.metadata.all_layers().collect::<Vec<_>>();
-		let layers_after_copy = document_after_copy.metadata.all_layers().collect::<Vec<_>>();
+		let layers_before_copy = document_before_copy.metadata().all_layers().collect::<Vec<_>>();
+		let layers_after_copy = document_after_copy.metadata().all_layers().collect::<Vec<_>>();
 
 		assert_eq!(layers_before_copy.len(), 3);
 		assert_eq!(layers_after_copy.len(), 6);

demo-artwork/procedural-string-lights.graphite

@@ -70,22 +70,25 @@ impl MessageHandler<DialogMessage, DialogMessageData<'_>> for DialogMessageHandl
 			DialogMessage::RequestExportDialog => {
 				if let Some(document) = portfolio.active_document() {
 					let artboards = document
-						.metadata
+						.metadata()
 						.all_layers()
-						.filter(|&layer| document.metadata.is_artboard(layer))
+						.filter(|&layer| document.network_interface.is_artboard(&layer.to_node(), &[]))
 						.map(|layer| {
 							let name = document
-								.network
-								.nodes
-								.get(&layer.to_node())
-								.and_then(|node| if node.alias.is_empty() { None } else { Some(node.alias.clone()) })
+								.network_interface
+								.node_metadata(&layer.to_node(), &[])
+								.map(|node| node.persistent_metadata.display_name.clone())
+								.and_then(|name| if name.is_empty() { None } else { Some(name) })
 								.unwrap_or_else(|| "Artboard".to_string());
 							(layer, name)
 						})
 						.collect();
 
 					self.export_dialog.artboards = artboards;
-					self.export_dialog.has_selection = document.selected_nodes.selected_layers(document.metadata()).next().is_some();
+					self.export_dialog.has_selection = document
+						.network_interface
+						.selected_nodes(&[])
+						.is_some_and(|selected_nodes| selected_nodes.selected_layers(document.metadata()).next().is_some());
 					self.export_dialog.send_dialog_to_frontend(responses);
 				}
 			}

demo-artwork/red-dress.graphite

@@ -1,6 +1,8 @@
 use super::utility_types::{FrontendDocumentDetails, MouseCursorIcon};
 use crate::messages::layout::utility_types::widget_prelude::*;
-use crate::messages::portfolio::document::node_graph::utility_types::{BoxSelection, ContextMenuInformation, FrontendNode, FrontendNodeType, FrontendNodeWire, Transform, WirePath};
+use crate::messages::portfolio::document::node_graph::utility_types::{
+	BoxSelection, ContextMenuInformation, FrontendClickTargets, FrontendGraphInput, FrontendGraphOutput, FrontendNode, FrontendNodeType, FrontendNodeWire, Transform, WirePath,
+};
 use crate::messages::portfolio::document::utility_types::nodes::{JsRawBuffer, LayerPanelEntry, RawBuffer};
 use crate::messages::prelude::*;
 use crate::messages::tool::utility_types::HintData;
@@ -121,6 +123,14 @@ pub enum FrontendMessage {
 		#[serde(rename = "documentId")]
 		document_id: DocumentId,
 	},
+	UpdateImportsExports {
+		imports: Vec<(FrontendGraphOutput, i32, i32)>,
+		exports: Vec<(FrontendGraphInput, i32, i32)>,
+	},
+	UpdateInSelectedNetwork {
+		#[serde(rename = "inSelectedNetwork")]
+		in_selected_network: bool,
+	},
 	UpdateBox {
 		#[serde(rename = "box")]
 		box_selection: Option<BoxSelection>,
@@ -129,9 +139,15 @@ pub enum FrontendMessage {
 		#[serde(rename = "contextMenuInformation")]
 		context_menu_information: Option<ContextMenuInformation>,
 	},
+	UpdateClickTargets {
+		#[serde(rename = "clickTargets")]
+		click_targets: Option<FrontendClickTargets>,
+	},
 	UpdateLayerWidths {
 		#[serde(rename = "layerWidths")]
 		layer_widths: HashMap<NodeId, u32>,
+		#[serde(rename = "chainWidths")]
+		chain_widths: HashMap<NodeId, u32>,
 	},
 	UpdateDialogButtons {
 		#[serde(rename = "layoutTarget")]

demo-artwork/valley-of-spires.graphite

@@ -69,10 +69,12 @@ pub fn input_mappings() -> Mapping {
 		entry!(KeyDown(KeyX); modifiers=[Accel], action_dispatch=NodeGraphMessage::Cut),
 		entry!(KeyDown(KeyC); modifiers=[Accel], action_dispatch=NodeGraphMessage::Copy),
 		entry!(KeyDown(KeyD); modifiers=[Accel], action_dispatch=NodeGraphMessage::DuplicateSelectedNodes),
-		entry!(KeyDown(KeyH); modifiers=[Accel], action_dispatch=GraphOperationMessage::ToggleSelectedVisibility),
-		entry!(KeyDown(KeyL); modifiers=[Accel], action_dispatch=GraphOperationMessage::ToggleSelectedLocked),
+		entry!(KeyDown(KeyH); modifiers=[Accel], action_dispatch=NodeGraphMessage::ToggleSelectedVisibility),
+		entry!(KeyDown(KeyL); modifiers=[Accel], action_dispatch=NodeGraphMessage::ToggleSelectedLocked),
 		entry!(KeyDown(KeyL); modifiers=[Alt], action_dispatch=NodeGraphMessage::ToggleSelectedAsLayersOrNodes),
 		entry!(KeyDown(KeyC); modifiers=[Shift], action_dispatch=NodeGraphMessage::PrintSelectedNodeCoordinates),
+		entry!(KeyDown(KeyC); modifiers=[Alt], action_dispatch=NodeGraphMessage::SendClickTargets),
+		entry!(KeyUp(KeyC); action_dispatch=NodeGraphMessage::EndSendClickTargets),
 		//
 		// TransformLayerMessage
 		entry!(KeyDown(Enter); action_dispatch=TransformLayerMessage::ApplyTransformOperation),