Consolidate frontend node

editor/src/dispatcher.rs

@@ -41,6 +41,7 @@ impl DispatcherMessageHandlers {
 /// The last occurrence of the message in the message queue is sufficient to ensure correct behavior.
 /// In addition, these messages do not change any state in the backend (aside from caches).
 const SIDE_EFFECT_FREE_MESSAGES: &[MessageDiscriminant] = &[
+	MessageDiscriminant::Portfolio(PortfolioMessageDiscriminant::Document(DocumentMessageDiscriminant::NodeGraph(NodeGraphMessageDiscriminant::SendGraph))),
 	MessageDiscriminant::Portfolio(PortfolioMessageDiscriminant::Document(DocumentMessageDiscriminant::PropertiesPanel(
 		PropertiesPanelMessageDiscriminant::Refresh,
 	))),

editor/src/messages/frontend/frontend_message.rs

@@ -2,13 +2,12 @@ use super::utility_types::{DocumentDetails, MouseCursorIcon, OpenDocument};
 use crate::messages::app_window::app_window_message_handler::AppWindowPlatform;
 use crate::messages::layout::utility_types::widget_prelude::*;
 use crate::messages::portfolio::document::node_graph::utility_types::{
-	BoxSelection, ContextMenuInformation, FrontendClickTargets, FrontendGraphInput, FrontendGraphOutput, FrontendNode, FrontendNodeType, Transform,
+	BoxSelection, ContextMenuInformation, FrontendClickTargets, FrontendGraphInput, FrontendGraphOutput, FrontendNode, FrontendNodeType, FrontendXY, Transform,
 };
 use crate::messages::portfolio::document::utility_types::nodes::{JsRawBuffer, LayerPanelEntry, RawBuffer};
 use crate::messages::portfolio::document::utility_types::wires::{WirePath, WirePathUpdate};
 use crate::messages::prelude::*;
 use crate::messages::tool::utility_types::HintData;
-use glam::IVec2;
 use graph_craft::document::NodeId;
 use graphene_std::raster::Image;
 use graphene_std::raster::color::Color;
@@ -133,18 +132,14 @@ pub enum FrontendMessage {
 		exports: Vec<Option<FrontendGraphInput>>,
 		/// The primary import location.
 		#[serde(rename = "importPosition")]
-		import_position: IVec2,
+		import_position: FrontendXY,
 		/// The primary export location.
 		#[serde(rename = "exportPosition")]
-		export_position: IVec2,
+		export_position: FrontendXY,
 		/// The document network does not have an add import or export button.
 		#[serde(rename = "addImportExport")]
 		add_import_export: bool,
 	},
-	UpdateInSelectedNetwork {
-		#[serde(rename = "inSelectedNetwork")]
-		in_selected_network: bool,
-	},
 	UpdateBox {
 		#[serde(rename = "box")]
 		box_selection: Option<BoxSelection>,
@@ -185,10 +180,6 @@ pub enum FrontendMessage {
 	UpdateLayerWidths {
 		#[serde(rename = "layerWidths")]
 		layer_widths: HashMap<NodeId, u32>,
-		#[serde(rename = "chainWidths")]
-		chain_widths: HashMap<NodeId, u32>,
-		#[serde(rename = "hasLeftInputWire")]
-		has_left_input_wire: HashMap<NodeId, bool>,
 	},
 	UpdateDialogButtons {
 		#[serde(rename = "layoutTarget")]
@@ -284,7 +275,13 @@ pub enum FrontendMessage {
 		cursor: MouseCursorIcon,
 	},
 	UpdateNodeGraphNodes {
-		nodes: Vec<FrontendNode>,
+		#[serde(rename = "nodesToRender")]
+		nodes_to_render: Vec<FrontendNode>,
+		#[serde(rename = "inSelectedNetwork")]
+		in_selected_network: bool,
+		// Displays a dashed border around the node
+		#[serde(rename = "previewedNode")]
+		previewed_node: Option<NodeId>,
 	},
 	UpdateVisibleNodes {
 		nodes: Vec<NodeId>,
@@ -298,9 +295,6 @@ pub enum FrontendMessage {
 		layout_target: LayoutTarget,
 		diff: Vec<WidgetDiff>,
 	},
-	UpdateNodeGraphSelection {
-		selected: Vec<NodeId>,
-	},
 	UpdateNodeGraphTransform {
 		transform: Transform,
 	},

editor/src/messages/portfolio/document/document_message_handler.rs

@@ -1191,7 +1191,7 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
 				}
 				responses.add(PropertiesPanelMessage::Refresh);
 				responses.add(NodeGraphMessage::UpdateLayerPanel);
-				responses.add(NodeGraphMessage::UpdateInSelectedNetwork);
+				responses.add(NodeGraphMessage::SendGraph);
 			}
 			DocumentMessage::SetBlendModeForSelectedLayers { blend_mode } => {
 				for layer in self.network_interface.selected_nodes().selected_layers_except_artboards(&self.network_interface) {

editor/src/messages/portfolio/document/node_graph/node_graph_message.rs

@@ -231,7 +231,5 @@ pub enum NodeGraphMessage {
 	},
 	UpdateActionButtons,
 	UpdateGraphBarRight,
-	UpdateInSelectedNetwork,
 	UpdateHints,
-	SendSelectedNodes,
 }

editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs

@@ -6,7 +6,7 @@ use crate::messages::layout::utility_types::widget_prelude::*;
 use crate::messages::portfolio::document::document_message_handler::navigation_controls;
 use crate::messages::portfolio::document::graph_operation::utility_types::ModifyInputsContext;
 use crate::messages::portfolio::document::node_graph::document_node_definitions::NodePropertiesContext;
-use crate::messages::portfolio::document::node_graph::utility_types::{ContextMenuData, Direction, FrontendGraphDataType};
+use crate::messages::portfolio::document::node_graph::utility_types::{ContextMenuData, Direction, FrontendGraphDataType, FrontendXY};
 use crate::messages::portfolio::document::utility_types::document_metadata::LayerNodeIdentifier;
 use crate::messages::portfolio::document::utility_types::misc::GroupFolderType;
 use crate::messages::portfolio::document::utility_types::network_interface::{
@@ -192,7 +192,7 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 				responses.add(MenuBarMessage::SendLayout);
 				responses.add(NodeGraphMessage::UpdateLayerPanel);
 				responses.add(PropertiesPanelMessage::Refresh);
-				responses.add(NodeGraphMessage::SendSelectedNodes);
+				responses.add(NodeGraphMessage::SendGraph);
 				responses.add(ArtboardToolMessage::UpdateSelectedArtboard);
 				responses.add(DocumentMessage::DocumentStructureChanged);
 				responses.add(OverlaysMessage::Draw);
@@ -1633,21 +1633,22 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 				responses.add(NodeGraphMessage::UpdateLayerPanel);
 				responses.add(DocumentMessage::DocumentStructureChanged);
 				responses.add(PropertiesPanelMessage::Refresh);
-				if breadcrumb_network_path == selection_network_path && graph_view_overlay_open {
-					let nodes = network_interface.collect_nodes(&self.node_graph_errors, breadcrumb_network_path);
-					self.frontend_nodes = nodes.iter().map(|node| node.id).collect();
-					responses.add(FrontendMessage::UpdateNodeGraphNodes { nodes });
+				responses.add(NodeGraphMessage::UpdateActionButtons);
+				if graph_view_overlay_open {
+					let nodes_to_render = network_interface.collect_nodes(&self.node_graph_errors, breadcrumb_network_path);
+					self.frontend_nodes = nodes_to_render.iter().map(|node| node.id).collect();
+					let previewed_node = network_interface.previewed_node(breadcrumb_network_path);
+					responses.add(FrontendMessage::UpdateNodeGraphNodes {
+						nodes_to_render,
+						in_selected_network: selection_network_path == breadcrumb_network_path,
+						previewed_node,
+					});
 					responses.add(NodeGraphMessage::UpdateVisibleNodes);
 
-					let (layer_widths, chain_widths, has_left_input_wire) = network_interface.collect_layer_widths(breadcrumb_network_path);
+					let layer_widths = network_interface.collect_layer_widths(breadcrumb_network_path);
 
 					responses.add(NodeGraphMessage::UpdateImportsExports);
-					responses.add(FrontendMessage::UpdateLayerWidths {
-						layer_widths,
-						chain_widths,
-						has_left_input_wire,
-					});
-					responses.add(NodeGraphMessage::SendSelectedNodes);
+					responses.add(FrontendMessage::UpdateLayerWidths { layer_widths });
 					responses.add(NodeGraphMessage::SendWires);
 					self.update_node_graph_hints(responses);
 				}
@@ -1956,6 +1957,15 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 					return;
 				};
 
+				let import_position = FrontendXY {
+					x: import_position.x,
+					y: import_position.y,
+				};
+				let export_position = FrontendXY {
+					x: export_position.x,
+					y: export_position.y,
+				};
+
 				// Do not show the add import or add export button in the document network;
 				let add_import_export = !breadcrumb_network_path.is_empty();
 
@@ -2000,22 +2010,9 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 				self.update_graph_bar_right(graph_fade_artwork_percentage, network_interface, breadcrumb_network_path, navigation_handler);
 				self.send_node_bar_layout(responses);
 			}
-			NodeGraphMessage::UpdateInSelectedNetwork => responses.add(FrontendMessage::UpdateInSelectedNetwork {
-				in_selected_network: selection_network_path == breadcrumb_network_path,
-			}),
 			NodeGraphMessage::UpdateHints => {
 				self.update_node_graph_hints(responses);
 			}
-			NodeGraphMessage::SendSelectedNodes => {
-				let Some(selected_nodes) = network_interface.selected_nodes_in_nested_network(breadcrumb_network_path) else {
-					log::error!("Could not get selected nodes in NodeGraphMessage::SendSelectedNodes");
-					return;
-				};
-				responses.add(NodeGraphMessage::UpdateActionButtons);
-				responses.add(FrontendMessage::UpdateNodeGraphSelection {
-					selected: selected_nodes.selected_nodes().cloned().collect::<Vec<_>>(),
-				});
-			}
 		}
 		let Some(selected_nodes) = network_interface.selected_nodes_in_nested_network(selection_network_path) else {
 			log::error!("Could not get selected nodes in NodeGraphMessageHandler");

editor/src/messages/portfolio/document/node_graph/utility_types.rs

@@ -1,4 +1,3 @@
-use glam::IVec2;
 use graph_craft::document::NodeId;
 use graph_craft::document::value::TaggedValue;
 use graphene_std::Type;
@@ -51,6 +50,12 @@ impl FrontendGraphDataType {
 	}
 }
 
+#[derive(Clone, Debug, Eq, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]
+pub struct FrontendXY {
+	pub x: i32,
+	pub y: i32,
+}
+
 #[derive(Clone, Debug, Eq, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]
 pub struct FrontendGraphInput {
 	#[serde(rename = "dataType")]
@@ -85,6 +90,7 @@ pub struct FrontendNode {
 	pub is_layer: bool,
 	#[serde(rename = "canBeLayer")]
 	pub can_be_layer: bool,
+	pub selected: bool,
 	pub reference: Option<String>,
 	#[serde(rename = "displayName")]
 	pub display_name: String,
@@ -96,11 +102,15 @@ pub struct FrontendNode {
 	pub primary_output: Option<FrontendGraphOutput>,
 	#[serde(rename = "exposedOutputs")]
 	pub exposed_outputs: Vec<FrontendGraphOutput>,
+	#[serde(rename = "chainWidth")]
+	pub chain_width: u32,
+	#[serde(rename = "layerHasLeftBorderGap")]
+	pub layer_has_left_border_gap: bool,
 	#[serde(rename = "primaryOutputConnectedToLayer")]
 	pub primary_output_connected_to_layer: bool,
 	#[serde(rename = "primaryInputConnectedToLayer")]
 	pub primary_input_connected_to_layer: bool,
-	pub position: IVec2,
+	pub position: FrontendXY,
 	pub visible: bool,
 	pub locked: bool,
 	pub previewed: bool,

editor/src/messages/portfolio/document/utility_types/network_interface.rs

@@ -2853,10 +2853,11 @@ impl NodeNetworkInterface {
 		bounding_box_subpath.bounding_box_with_transform(network_metadata.persistent_metadata.navigation_metadata.node_graph_to_viewport)
 	}
 
-	pub fn collect_layer_widths(&mut self, network_path: &[NodeId]) -> (HashMap<NodeId, u32>, HashMap<NodeId, u32>, HashMap<NodeId, bool>) {
+	// TODO: Remove and get layer click targets from render output
+	pub fn collect_layer_widths(&mut self, network_path: &[NodeId]) -> HashMap<NodeId, u32> {
 		let Some(network_metadata) = self.network_metadata(network_path) else {
 			log::error!("Could not get nested network_metadata in collect_layer_widths");
-			return (HashMap::new(), HashMap::new(), HashMap::new());
+			return HashMap::new();
 		};
 		let nodes = network_metadata
 			.persistent_metadata
@@ -2868,13 +2869,8 @@ impl NodeNetworkInterface {
 			.iter()
 			.filter_map(|node_id| self.layer_width(node_id, network_path).map(|layer_width| (*node_id, layer_width)))
 			.collect::<HashMap<NodeId, u32>>();
-		let chain_widths = nodes.iter().map(|node_id| (*node_id, self.chain_width(node_id, network_path))).collect::<HashMap<NodeId, u32>>();
-		let has_left_input_wire = nodes
-			.iter()
-			.map(|node_id| (*node_id, self.layer_has_left_border_gap(node_id, network_path)))
-			.collect::<HashMap<NodeId, bool>>();
 
-		(layer_widths, chain_widths, has_left_input_wire)
+		layer_widths
 	}
 
 	pub fn compute_modified_vector(&self, layer: LayerNodeIdentifier) -> Option<Vector> {

editor/src/messages/portfolio/document/utility_types/network_interface/node_graph.rs

@@ -5,7 +5,7 @@ use graphene_std::uuid::NodeId;
 use crate::{
 	consts::{EXPORTS_TO_RIGHT_EDGE_PIXEL_GAP, EXPORTS_TO_TOP_EDGE_PIXEL_GAP, GRID_SIZE, IMPORTS_TO_LEFT_EDGE_PIXEL_GAP, IMPORTS_TO_TOP_EDGE_PIXEL_GAP},
 	messages::portfolio::document::{
-		node_graph::utility_types::{FrontendGraphDataType, FrontendGraphInput, FrontendGraphOutput, FrontendNode},
+		node_graph::utility_types::{FrontendGraphDataType, FrontendGraphInput, FrontendGraphOutput, FrontendNode, FrontendXY},
 		utility_types::network_interface::{FlowType, InputConnector, NodeNetworkInterface, OutputConnector},
 	},
 };
@@ -17,6 +17,7 @@ impl NodeNetworkInterface {
 			log::error!("Could not get nested network when collecting nodes");
 			return Vec::new();
 		};
+		let selected_nodes = self.selected_nodes_in_nested_network(network_path).unwrap_or_default();
 		let mut nodes = Vec::new();
 		for (node_id, visible) in network.nodes.iter().map(|(node_id, node)| (*node_id, node.visible)).collect::<Vec<_>>() {
 			let node_id_path = [network_path, &[node_id]].concat();
@@ -37,19 +38,12 @@ impl NodeNetworkInterface {
 			let exposed_outputs = (1..self.number_of_outputs(&node_id, network_path))
 				.filter_map(|output_index| self.frontend_output_from_connector(&OutputConnector::node(node_id, output_index), network_path))
 				.collect();
-			let (primary_output_connected_to_layer, primary_input_connected_to_layer) = if self.is_layer(&node_id, network_path) {
-				(
-					self.primary_output_connected_to_layer(&node_id, network_path),
-					self.primary_input_connected_to_layer(&node_id, network_path),
-				)
-			} else {
-				(false, false)
-			};
 
 			let Some(position) = self.position(&node_id, network_path) else {
 				log::error!("Could not get position for node: {node_id}");
 				continue;
 			};
+			let position = FrontendXY { x: position.x, y: position.y };
 			let previewed = self.previewed_node(network_path) == Some(node_id);
 
 			let locked = self.is_locked(&node_id, network_path);
@@ -70,19 +64,24 @@ impl NodeNetworkInterface {
 				id: node_id,
 				is_layer: self.node_metadata(&node_id, network_path).is_some_and(|node_metadata| node_metadata.persistent_metadata.is_layer()),
 				can_be_layer: self.is_eligible_to_be_layer(&node_id, network_path),
+				selected: selected_nodes.0.contains(&node_id),
 				reference: self.reference(&node_id, network_path).cloned().unwrap_or_default(),
 				display_name: self.display_name(&node_id, network_path),
+				previewed,
+				visible,
+				errors,
+
 				primary_input,
 				exposed_inputs,
 				primary_output,
 				exposed_outputs,
-				primary_output_connected_to_layer,
-				primary_input_connected_to_layer,
 				position,
-				previewed,
-				visible,
+
 				locked,
-				errors,
+				chain_width: self.chain_width(&node_id, network_path),
+				layer_has_left_border_gap: self.layer_has_left_border_gap(&node_id, network_path),
+				primary_input_connected_to_layer: self.primary_output_connected_to_layer(&node_id, network_path),
+				primary_output_connected_to_layer: self.primary_input_connected_to_layer(&node_id, network_path),
 			});
 		}
 
@@ -259,9 +258,12 @@ impl NodeNetworkInterface {
 
 	/// Checks if a layer should display a gap in its left border
 	pub fn layer_has_left_border_gap(&self, node_id: &NodeId, network_path: &[NodeId]) -> bool {
-		self.upstream_flow_back_from_nodes(vec![*node_id], network_path, FlowType::HorizontalFlow)
-			.skip(1)
-			.any(|node_id| !self.is_chain(&node_id, network_path))
+		self.upstream_flow_back_from_nodes(vec![*node_id], network_path, FlowType::HorizontalFlow).skip(1).any(|node_id| {
+			!self.is_chain(&node_id, network_path)
+				|| self
+					.upstream_output_connector(&InputConnector::node(node_id, 0), network_path)
+					.is_some_and(|output_connector| matches!(output_connector, OutputConnector::Import(_)))
+		})
 	}
 
 	/// Returns the node which should have a dashed border drawn around it

frontend/src/components/views/Graph.svelte

@@ -116,12 +116,11 @@
 	}
 
 	function toggleLayerDisplay(displayAsLayer: boolean, toggleId: bigint) {
-		let node = $nodeGraph.nodes.get(toggleId);
-		if (node) editor.handle.setToNodeOrLayer(node.id, displayAsLayer);
+		editor.handle.setToNodeOrLayer(toggleId, displayAsLayer);
 	}
 
 	function canBeToggledBetweenNodeAndLayer(toggleDisplayAsLayerNodeId: bigint) {
-		return $nodeGraph.nodes.get(toggleDisplayAsLayerNodeId)?.canBeLayer || false;
+		return $nodeGraph.nodesToRender.get(toggleDisplayAsLayerNodeId)?.canBeLayer || false;
 	}
 
 	function createNode(nodeType: string) {
@@ -148,7 +147,7 @@
 		return borderMask(boxes, nodeWidth, nodeHeight);
 	}
 
-	function layerBorderMask(nodeWidthFromThumbnail: number, nodeChainAreaLeftExtension: number, hasLeftInputWire: boolean): string {
+	function layerBorderMask(nodeWidthFromThumbnail: number, nodeChainAreaLeftExtension: number, layerHasLeftBorderGap: boolean): string {
 		const NODE_HEIGHT = 2 * 24;
 		const THUMBNAIL_WIDTH = 72 + 8 * 2;
 		const FUDGE_HEIGHT_BEYOND_LAYER_HEIGHT = 2;
@@ -158,7 +157,7 @@
 		const boxes: { x: number; y: number; width: number; height: number }[] = [];
 
 		// Left input
-		if (hasLeftInputWire && nodeChainAreaLeftExtension > 0) {
+		if (layerHasLeftBorderGap && nodeChainAreaLeftExtension > 0) {
 			boxes.push({ x: -8, y: 16, width: 16, height: 16 });
 		}
 
@@ -318,8 +317,6 @@
 						xmlns="http://www.w3.org/2000/svg"
 						viewBox="0 0 8 8"
 						class="connector"
-						data-connector="output"
-						data-datatype={frontendOutput.dataType}
 						style:--data-color={`var(--color-data-${frontendOutput.dataType.toLowerCase()})`}
 						style:--data-color-dim={`var(--color-data-${frontendOutput.dataType.toLowerCase()}-dim)`}
 						style:--offset-left={($nodeGraph.updateImportsExports.importPosition.x - 8) / 24}
@@ -390,8 +387,6 @@
 						xmlns="http://www.w3.org/2000/svg"
 						viewBox="0 0 8 8"
 						class="connector"
-						data-connector="input"
-						data-datatype={frontendInput.dataType}
 						style:--data-color={`var(--color-data-${frontendInput.dataType.toLowerCase()})`}
 						style:--data-color-dim={`var(--color-data-${frontendInput.dataType.toLowerCase()}-dim)`}
 						style:--offset-left={($nodeGraph.updateImportsExports.exportPosition.x - 8) / 24}
@@ -492,54 +487,47 @@
 	<!-- Layers and nodes -->
 	<div class="layers-and-nodes" style:transform-origin="0 0" style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
 		<!-- Layers -->
-		{#each Array.from($nodeGraph.nodes)
-			.filter(([nodeId, node]) => node.isLayer && $nodeGraph.visibleNodes.has(nodeId))
-			.map(([_, node], nodeIndex) => ({ node, nodeIndex })) as { node, nodeIndex } (nodeIndex)}
+		{#each Array.from($nodeGraph.nodesToRender).filter(([nodeId, node]) => node.isLayer && $nodeGraph.visibleNodes.has(nodeId)) as [nodeId, layer]}
 			{@const clipPathId = String(Math.random()).substring(2)}
-			{@const stackDataInput = node.exposedInputs[0]}
-			{@const layerAreaWidth = $nodeGraph.layerWidths.get(node.id) || 8}
-			{@const layerChainWidth = $nodeGraph.chainWidths.get(node.id) || 0}
-			{@const hasLeftInputWire = $nodeGraph.hasLeftInputWire.get(node.id) || false}
-			{@const description = (node.reference && $nodeGraph.nodeDescriptions.get(node.reference)) || undefined}
+			{@const layerAreaWidth = $nodeGraph.layerWidths.get(layer.id) || 8}
+			{@const layerChainWidth = layer.chainWidth !== 0 ? layer.chainWidth + 0.5 : 0}
+			{@const description = (layer.reference && $nodeGraph.nodeDescriptions.get(layer.reference)) || undefined}
 			<div
 				class="layer"
-				class:selected={$nodeGraph.selected.includes(node.id)}
+				class:selected={layer.selected}
 				class:in-selected-network={$nodeGraph.inSelectedNetwork}
-				class:previewed={node.previewed}
-				class:disabled={!node.visible}
-				style:--offset-left={node.position?.x || 0}
-				style:--offset-top={node.position?.y || 0}
+				class:previewed={layer.previewed}
+				class:disabled={!layer.visible}
+				style:--offset-left={layer.position.x}
+				style:--offset-top={layer.position.y}
 				style:--clip-path-id={`url(#${clipPathId})`}
-				style:--data-color={`var(--color-data-${(node.primaryOutput?.dataType || "General").toLowerCase()})`}
-				style:--data-color-dim={`var(--color-data-${(node.primaryOutput?.dataType || "General").toLowerCase()}-dim)`}
+				style:--data-color={`var(--color-data-${(layer.primaryOutput?.dataType || "General").toLowerCase()})`}
+				style:--data-color-dim={`var(--color-data-${(layer.primaryOutput?.dataType || "General").toLowerCase()}-dim)`}
 				style:--layer-area-width={layerAreaWidth}
-				style:--node-chain-area-left-extension={layerChainWidth !== 0 ? layerChainWidth + 0.5 : 0}
-				title={`${node.displayName}\n\n${description || ""}`.trim() + (editor.handle.inDevelopmentMode() ? `\n\nNode ID: ${node.id}` : "")}
-				data-node={node.id}
+				style:--node-chain-area-left-extension={layerChainWidth}
+				title={`${layer.displayName}\n\n${description || ""}`.trim() + (editor.handle.inDevelopmentMode() ? `\n\nNode ID: ${nodeId}` : "")}
 			>
-				{#if node.errors}
-					<span class="node-error faded" transition:fade={FADE_TRANSITION} title="" data-node-error>{node.errors}</span>
-					<span class="node-error hover" transition:fade={FADE_TRANSITION} title="" data-node-error>{node.errors}</span>
+				{#if layer.errors}
+					<span class="node-error faded" transition:fade={FADE_TRANSITION} title="" data-node-error>{layer.errors}</span>
+					<span class="node-error hover" transition:fade={FADE_TRANSITION} title="" data-node-error>{layer.errors}</span>
 				{/if}
 				<div class="thumbnail">
-					{#if $nodeGraph.thumbnails.has(node.id)}
-						{@html $nodeGraph.thumbnails.get(node.id)}
+					{#if $nodeGraph.thumbnails.has(nodeId)}
+						{@html $nodeGraph.thumbnails.get(nodeId)}
 					{/if}
 					<!-- Layer stacking top output -->
-					{#if node.primaryOutput}
+					{#if layer.primaryOutput}
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							viewBox="0 0 8 12"
 							class="connector top"
-							data-connector="output"
-							data-datatype={node.primaryOutput.dataType}
-							style:--data-color={`var(--color-data-${node.primaryOutput.dataType.toLowerCase()})`}
-							style:--data-color-dim={`var(--color-data-${node.primaryOutput.dataType.toLowerCase()}-dim)`}
+							style:--data-color={`var(--color-data-${layer.primaryOutput.dataType.toLowerCase()})`}
+							style:--data-color-dim={`var(--color-data-${layer.primaryOutput.dataType.toLowerCase()}-dim)`}
 						>
-							<title>{outputTooltip(node.primaryOutput)}</title>
-							{#if node.primaryOutput.connectedTo.length > 0}
+							<title>{outputTooltip(layer.primaryOutput)}</title>
+							{#if layer.primaryOutput.connectedTo.length > 0}
 								<path d="M0,6.953l2.521,-1.694a2.649,2.649,0,0,1,2.959,0l2.52,1.694v5.047h-8z" fill="var(--data-color)" />
-								{#if node.primaryOutputConnectedToLayer}
+								{#if layer.primaryOutputConnectedToLayer}
 									<path d="M0,-3.5h8v8l-2.521,-1.681a2.666,2.666,0,0,0,-2.959,0l-2.52,1.681z" fill="var(--data-color-dim)" />
 								{/if}
 							{:else}
@@ -552,17 +540,15 @@
 						xmlns="http://www.w3.org/2000/svg"
 						viewBox="0 0 8 12"
 						class="connector bottom"
-						data-connector="input"
-						data-datatype={node.primaryInput?.dataType}
-						style:--data-color={`var(--color-data-${(node.primaryInput?.dataType || "General").toLowerCase()})`}
-						style:--data-color-dim={`var(--color-data-${(node.primaryInput?.dataType || "General").toLowerCase()}-dim)`}
+						style:--data-color={`var(--color-data-${(layer.primaryInput?.dataType || "General").toLowerCase()})`}
+						style:--data-color-dim={`var(--color-data-${(layer.primaryInput?.dataType || "General").toLowerCase()}-dim)`}
 					>
-						{#if node.primaryInput}
-							<title>{inputTooltip(node.primaryInput)}</title>
+						{#if layer.primaryInput}
+							<title>{inputTooltip(layer.primaryInput)}</title>
 						{/if}
-						{#if node.primaryInput?.connectedTo !== "nothing"}
+						{#if layer.primaryInput?.connectedTo !== "nothing"}
 							<path d="M0,0H8V8L5.479,6.319a2.666,2.666,0,0,0-2.959,0L0,8Z" fill="var(--data-color)" />
-							{#if node.primaryInputConnectedToLayer}
+							{#if layer.primaryInputConnectedToLayer}
 								<path d="M0,10.95l2.52,-1.69c0.89,-0.6,2.06,-0.6,2.96,0l2.52,1.69v5.05h-8v-5.05z" fill="var(--data-color-dim)" />
 							{/if}
 						{:else}
@@ -571,19 +557,17 @@
 					</svg>
 				</div>
 				<!-- Layer input connector (from left) -->
-				{#if node.exposedInputs.length > 0}
+				{#if layer.exposedInputs.length > 0}
 					<div class="input connectors">
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							viewBox="0 0 8 8"
 							class="connector"
-							data-connector="input"
-							data-datatype={stackDataInput.dataType}
-							style:--data-color={`var(--color-data-${stackDataInput.dataType.toLowerCase()})`}
-							style:--data-color-dim={`var(--color-data-${stackDataInput.dataType.toLowerCase()}-dim)`}
+							style:--data-color={`var(--color-data-${layer.exposedInputs[0].dataType.toLowerCase()})`}
+							style:--data-color-dim={`var(--color-data-${layer.exposedInputs[0].dataType.toLowerCase()}-dim)`}
 						>
-							<title>{inputTooltip(stackDataInput)}</title>
-							{#if stackDataInput.connectedTo !== undefined}
+							<title>{inputTooltip(layer.exposedInputs[0])}</title>
+							{#if layer.exposedInputs[0].connectedTo !== undefined}
 								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color)" />
 							{:else}
 								<path d="M0,6.306A1.474,1.474,0,0,0,2.356,7.724L7.028,5.248c1.3-.687,1.3-1.809,0-2.5L2.356.276A1.474,1.474,0,0,0,0,1.694Z" fill="var(--data-color-dim)" />
@@ -593,25 +577,25 @@
 				{/if}
 				<div class="details">
 					<!-- TODO: Allow the user to edit the name, just like in the Layers panel -->
-					<TextLabel>{node.displayName}</TextLabel>
+					<TextLabel>{layer.displayName}</TextLabel>
 				</div>
 				<div class="solo-drag-grip" title="Drag only this layer without pushing others outside the stack"></div>
 				<IconButton
 					class="visibility"
 					data-visibility-button
 					size={24}
-					icon={node.visible ? "EyeVisible" : "EyeHidden"}
+					icon={layer.visible ? "EyeVisible" : "EyeHidden"}
 					action={() => {
 						/* Button is purely visual, clicking is handled in NodeGraphMessage::PointerDown */
 					}}
-					tooltip={node.visible ? "Visible" : "Hidden"}
+					tooltip={layer.visible ? "Visible" : "Hidden"}
 				/>
 
 				<svg class="border-mask" width="0" height="0">
 					<defs>
 						<clipPath id={clipPathId}>
 							<!-- Keep this equation in sync with the equivalent one in the CSS rule for `.layer { width: ... }` below -->
-							<path clip-rule="evenodd" d={layerBorderMask(24 * layerAreaWidth - 12, layerChainWidth ? (0.5 + layerChainWidth) * 24 : 0, hasLeftInputWire)} />
+							<path clip-rule="evenodd" d={layerBorderMask(24 * layerAreaWidth - 12, layerChainWidth * 24, layer.layerHasLeftBorderGap)} />
 						</clipPath>
 					</defs>
 				</svg>
@@ -647,15 +631,13 @@
 		</div>
 
 		<!-- Nodes -->
-		{#each Array.from($nodeGraph.nodes)
-			.filter(([nodeId, node]) => !node.isLayer && $nodeGraph.visibleNodes.has(nodeId))
-			.map(([_, node], nodeIndex) => ({ node, nodeIndex })) as { node, nodeIndex } (nodeIndex)}
+		{#each Array.from($nodeGraph.nodesToRender).filter(([nodeId, node]) => !node.isLayer && $nodeGraph.visibleNodes.has(nodeId)) as [nodeId, node]}
 			{@const exposedInputsOutputs = zipWithUndefined(node.exposedInputs, node.exposedOutputs)}
 			{@const clipPathId = String(Math.random()).substring(2)}
 			{@const description = (node.reference && $nodeGraph.nodeDescriptions.get(node.reference)) || undefined}
 			<div
 				class="node"
-				class:selected={$nodeGraph.selected.includes(node.id)}
+				class:selected={node.selected}
 				class:previewed={node.previewed}
 				class:disabled={!node.visible}
 				style:--offset-left={node.position?.x || 0}
@@ -663,8 +645,7 @@
 				style:--clip-path-id={`url(#${clipPathId})`}
 				style:--data-color={`var(--color-data-${(node.primaryOutput?.dataType || "General").toLowerCase()})`}
 				style:--data-color-dim={`var(--color-data-${(node.primaryOutput?.dataType || "General").toLowerCase()}-dim)`}
-				title={`${node.displayName}\n\n${description || ""}`.trim() + (editor.handle.inDevelopmentMode() ? `\n\nNode ID: ${node.id}` : "")}
-				data-node={node.id}
+				title={`${node.displayName}\n\n${description || ""}`.trim() + (editor.handle.inDevelopmentMode() ? `\n\nNode ID: ${nodeId}` : "")}
 			>
 				{#if node.errors}
 					<span class="node-error faded" transition:fade={FADE_TRANSITION} title="" data-node-error>{node.errors}</span>
@@ -695,8 +676,6 @@
 							xmlns="http://www.w3.org/2000/svg"
 							viewBox="0 0 8 8"
 							class="connector primary-connector"
-							data-connector="input"
-							data-datatype={node.primaryInput?.dataType}
 							style:--data-color={`var(--color-data-${node.primaryInput.dataType.toLowerCase()})`}
 							style:--data-color-dim={`var(--color-data-${node.primaryInput.dataType.toLowerCase()}-dim)`}
 						>
@@ -714,8 +693,6 @@
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 8 8"
 								class="connector"
-								data-connector="input"
-								data-datatype={secondary.dataType}
 								style:--data-color={`var(--color-data-${secondary.dataType.toLowerCase()})`}
 								style:--data-color-dim={`var(--color-data-${secondary.dataType.toLowerCase()}-dim)`}
 							>
@@ -736,8 +713,6 @@
 							xmlns="http://www.w3.org/2000/svg"
 							viewBox="0 0 8 8"
 							class="connector primary-connector"
-							data-connector="output"
-							data-datatype={node.primaryOutput.dataType}
 							style:--data-color={`var(--color-data-${node.primaryOutput.dataType.toLowerCase()})`}
 							style:--data-color-dim={`var(--color-data-${node.primaryOutput.dataType.toLowerCase()}-dim)`}
 						>
@@ -754,8 +729,6 @@
 							xmlns="http://www.w3.org/2000/svg"
 							viewBox="0 0 8 8"
 							class="connector"
-							data-connector="output"
-							data-datatype={secondary.dataType}
 							style:--data-color={`var(--color-data-${secondary.dataType.toLowerCase()})`}
 							style:--data-color-dim={`var(--color-data-${secondary.dataType.toLowerCase()}-dim)`}
 						>
@@ -784,7 +757,6 @@
 </div>
 
 <!-- Box selection widget -->
-<!-- TODO: Make its initial corner stay put (in graph space) when panning around -->
 {#if $nodeGraph.box}
 	<div
 		class="box-selection"

frontend/src/messages.ts

@@ -55,19 +55,13 @@ export class UpdateImportsExports extends JsMessage {
 
 	readonly exports!: (FrontendGraphInput | undefined)[];
 
-	@TupleToVec2
 	readonly importPosition!: XY;
 
-	@TupleToVec2
 	readonly exportPosition!: XY;
 
 	readonly addImportExport!: boolean;
 }
 
-export class UpdateInSelectedNetwork extends JsMessage {
-	readonly inSelectedNetwork!: boolean;
-}
-
 export class UpdateImportReorderIndex extends JsMessage {
 	readonly importIndex!: number | undefined;
 }
@@ -77,21 +71,18 @@ export class UpdateExportReorderIndex extends JsMessage {
 }
 
 const LayerWidths = Transform(({ obj }) => obj.layerWidths);
-const ChainWidths = Transform(({ obj }) => obj.chainWidths);
-const HasLeftInputWire = Transform(({ obj }) => obj.hasLeftInputWire);
 
 export class UpdateLayerWidths extends JsMessage {
 	@LayerWidths
 	readonly layerWidths!: Map<bigint, number>;
-	@ChainWidths
-	readonly chainWidths!: Map<bigint, number>;
-	@HasLeftInputWire
-	readonly hasLeftInputWire!: Map<bigint, boolean>;
 }
 
 export class UpdateNodeGraphNodes extends JsMessage {
-	@Type(() => FrontendNode)
-	readonly nodes!: FrontendNode[];
+	readonly nodesToRender!: FrontendNode[];
+
+	readonly inSelectedNetwork!: boolean;
+
+	readonly previewedNode!: bigint | undefined;
 }
 
 export class UpdateVisibleNodes extends JsMessage {
@@ -123,11 +114,6 @@ export class UpdateNodeThumbnail extends JsMessage {
 	readonly value!: string;
 }
 
-export class UpdateNodeGraphSelection extends JsMessage {
-	@Type(() => BigInt)
-	readonly selected!: bigint[];
-}
-
 export class UpdateOpenDocumentsList extends JsMessage {
 	@Type(() => OpenDocument)
 	readonly openDocuments!: OpenDocument[];
@@ -211,11 +197,13 @@ export class FrontendGraphOutput {
 }
 
 export class FrontendNode {
+	readonly id!: bigint;
+
 	readonly isLayer!: boolean;
 
 	readonly canBeLayer!: boolean;
 
-	readonly id!: bigint;
+	readonly selected!: boolean;
 
 	readonly reference!: string | undefined;
 
@@ -229,6 +217,10 @@ export class FrontendNode {
 
 	readonly exposedOutputs!: FrontendGraphOutput[];
 
+	readonly chainWidth!: number;
+
+	readonly layerHasLeftBorderGap!: boolean;
+
 	readonly primaryInputConnectedToLayer!: boolean;
 
 	readonly primaryOutputConnectedToLayer!: boolean;
@@ -1672,7 +1664,6 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateImportReorderIndex,
 	UpdateImportsExports,
 	UpdateInputHints,
-	UpdateInSelectedNetwork,
 	UpdateLayersPanelBottomBarLayout,
 	UpdateLayersPanelControlBarLeftLayout,
 	UpdateLayersPanelControlBarRightLayout,
@@ -1682,7 +1673,6 @@ export const messageMakers: Record<string, MessageMaker> = {
 	UpdateMouseCursor,
 	UpdateNodeGraphControlBarLayout,
 	UpdateNodeGraphNodes,
-	UpdateNodeGraphSelection,
 	UpdateNodeGraphTransform,
 	UpdateNodeGraphWires,
 	UpdateNodeThumbnail,

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

@@ -13,7 +13,6 @@ import {
 	UpdateBox,
 	UpdateClickTargets,
 	UpdateContextMenuInformation,
-	UpdateInSelectedNetwork,
 	UpdateImportReorderIndex,
 	UpdateExportReorderIndex,
 	UpdateImportsExports,
@@ -21,7 +20,6 @@ import {
 	UpdateNodeGraphNodes,
 	UpdateVisibleNodes,
 	UpdateNodeGraphWires,
-	UpdateNodeGraphSelection,
 	UpdateNodeGraphTransform,
 	UpdateNodeThumbnail,
 	UpdateWirePathInProgress,
@@ -33,10 +31,9 @@ export function createNodeGraphState(editor: Editor) {
 		clickTargets: undefined as FrontendClickTargets | undefined,
 		contextMenuInformation: undefined as ContextMenuInformation | undefined,
 		layerWidths: new Map<bigint, number>(),
-		chainWidths: new Map<bigint, number>(),
-		hasLeftInputWire: new Map<bigint, boolean>(),
 		updateImportsExports: undefined as UpdateImportsExports | undefined,
-		nodes: new Map<bigint, FrontendNode>(),
+		nodesToRender: new Map<bigint, FrontendNode>(),
+
 		visibleNodes: new Set<bigint>(),
 		/// The index is the exposed input index. The exports have a first key value of u32::MAX.
 		wires: new Map<bigint, Map<number, WirePath>>(),
@@ -44,9 +41,9 @@ export function createNodeGraphState(editor: Editor) {
 		nodeDescriptions: new Map<string, string>(),
 		nodeTypes: [] as FrontendNodeType[],
 		thumbnails: new Map<bigint, string>(),
-		selected: [] as bigint[],
 		transform: { scale: 1, x: 0, y: 0 },
 		inSelectedNetwork: true,
+		previewedNode: undefined as bigint | undefined,
 		reorderImportIndex: undefined as number | undefined,
 		reorderExportIndex: undefined as number | undefined,
 	});
@@ -95,26 +92,20 @@ export function createNodeGraphState(editor: Editor) {
 			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;
-			state.hasLeftInputWire = updateLayerWidths.hasLeftInputWire;
 			return state;
 		});
 	});
 	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphNodes, (updateNodeGraphNodes) => {
 		update((state) => {
-			state.nodes.clear();
-			updateNodeGraphNodes.nodes.forEach((node) => {
-				state.nodes.set(node.id, node);
+			state.nodesToRender.clear();
+			updateNodeGraphNodes.nodesToRender.forEach((node) => {
+				state.nodesToRender.set(node.id, node);
 			});
+			state.inSelectedNetwork = updateNodeGraphNodes.inSelectedNetwork;
+			state.previewedNode = updateNodeGraphNodes.previewedNode;
 			return state;
 		});
 	});
@@ -148,12 +139,6 @@ export function createNodeGraphState(editor: Editor) {
 			return state;
 		});
 	});
-	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphSelection, (updateNodeGraphSelection) => {
-		update((state) => {
-			state.selected = updateNodeGraphSelection.selected;
-			return state;
-		});
-	});
 	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphTransform, (updateNodeGraphTransform) => {
 		update((state) => {
 			state.transform = updateNodeGraphTransform.transform;