Initial code review

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

@@ -22,7 +22,6 @@ use crate::messages::portfolio::document::utility_types::network_interface::{Flo
 use crate::messages::portfolio::document::utility_types::nodes::RawBuffer;
 use crate::messages::portfolio::utility_types::{FontCatalog, PanelType, PersistentData};
 use crate::messages::prelude::*;
-
 use crate::messages::tool::common_functionality::graph_modification_utils::{self, get_blend_mode, get_fill, get_opacity};
 use crate::messages::tool::tool_messages::select_tool::SelectToolPointerKeys;
 use crate::messages::tool::tool_messages::tool_prelude::Key;

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

@@ -79,8 +79,8 @@ pub struct NodeGraphMessageHandler {
 	pub wire_in_progress_from_connector: Option<DVec2>,
 	/// The end point of the dragged line (cannot be moved), stored in node graph coordinates.
 	pub wire_in_progress_to_connector: Option<DVec2>,
-	/// If the end point should be displayed as a vertical or horizontal connection
+	/// If the endpoint should be displayed as a vertical or horizontal connection.
-	pub to_connector_is_layer: bool,
+	pub wire_in_connector_is_layer: bool,
 	/// The data type determining the color of the wire being dragged.
 	pub wire_in_progress_type: FrontendGraphDataType,
 	/// State for the context menu popups.
@@ -1039,7 +1039,8 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 							return;
 						};
 						self.wire_in_progress_to_connector = Some(input_position);
-						self.to_connector_is_layer = if let InputConnector::Node { node_id, input_index } = to_connector {
+						// Checks if we're dragging the wire to a bottom input connector of a layer node or a regular left input connector, so we can update the wire style accordingly
+						self.wire_in_connector_is_layer = if let InputConnector::Node { node_id, input_index } = to_connector {
 							*input_index == 0 && network_interface.is_layer(node_id, selection_network_path)
 						} else {
 							false
@@ -1092,13 +1093,13 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 							wire_in_progress_from_connector,
 							wire_in_progress_to_connector,
 							from_connector_is_layer,
-							self.to_connector_is_layer,
+							self.wire_in_connector_is_layer,
 							GraphWireStyle::Direct,
 						);
 						let wire_path = WirePathInProgress {
 							wire: vector_wire.to_svg(),
 							data_type: self.wire_in_progress_type,
-							thick: self.to_connector_is_layer && from_connector_is_layer,
+							for_layer_stack: self.wire_in_connector_is_layer && from_connector_is_layer,
 						};
 						responses.add(FrontendMessage::UpdateWirePathInProgress {
 							wire_path_in_progress: Some(wire_path),
@@ -2799,7 +2800,7 @@ impl Default for NodeGraphMessageHandler {
 			select_if_not_dragged: None,
 			wire_in_progress_from_connector: None,
 			wire_in_progress_to_connector: None,
-			to_connector_is_layer: false,
+			wire_in_connector_is_layer: false,
 			wire_in_progress_type: FrontendGraphDataType::General,
 			context_menu: None,
 			deselect_on_pointer_up: None,

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

@@ -142,7 +142,8 @@ pub struct WirePathInProgress {
 	pub wire: String,
 	#[serde(rename = "dataType")]
 	pub data_type: FrontendGraphDataType,
-	pub thick: bool,
+	#[serde(rename = "forLayerStack")]
+	pub for_layer_stack: bool,
 }
 
 #[derive(Clone, Debug, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]

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

@@ -2367,7 +2367,7 @@ impl NodeNetworkInterface {
 		};
 		let vertical_end = input.node_id().is_some_and(|node_id| self.is_layer(&node_id, network_path) && input.input_index() == 0);
 		let vertical_start: bool = upstream_output.node_id().is_some_and(|node_id| self.is_layer(&node_id, network_path));
-		let thick = vertical_end && vertical_start;
+		let for_layer_stack = vertical_end && vertical_start;
 		let vector_wire = build_vector_wire(output_position, input_position, vertical_start, vertical_end, graph_wire_style);
 
 		let path_string = vector_wire.to_svg();
@@ -2375,8 +2375,8 @@ impl NodeNetworkInterface {
 		let wire_path_update = Some(WirePath {
 			path_string,
 			data_type,
-			thick,
+			for_layer_stack,
-			dashed: false,
+			for_previewing: false,
 		});
 
 		Some(WirePathUpdate {
@@ -2386,7 +2386,7 @@ impl NodeNetworkInterface {
 		})
 	}
 
-	/// Returns the vector subpath and a boolean of whether the wire should be thick.
+	/// Returns the vector subpath and a boolean of whether the wire should be thick (indicating it is for a layer stack).
 	pub fn vector_wire_from_input(&mut self, input: &InputConnector, wire_style: GraphWireStyle, network_path: &[NodeId]) -> Option<(BezPath, bool)> {
 		let Some(input_position) = self.get_input_center(input, network_path) else {
 			log::error!("Could not get dom rect for wire end: {input:?}");
@@ -2402,12 +2402,12 @@ impl NodeNetworkInterface {
 		};
 		let vertical_end = input.node_id().is_some_and(|node_id| self.is_layer(&node_id, network_path) && input.input_index() == 0);
 		let vertical_start = upstream_output.node_id().is_some_and(|node_id| self.is_layer(&node_id, network_path));
-		let thick = vertical_end && vertical_start;
+		let for_layer_stack = vertical_end && vertical_start;
-		Some((build_vector_wire(output_position, input_position, vertical_start, vertical_end, wire_style), thick))
+		Some((build_vector_wire(output_position, input_position, vertical_start, vertical_end, wire_style), for_layer_stack))
 	}
 
-	pub fn wire_path_from_input(&mut self, input: &InputConnector, graph_wire_style: GraphWireStyle, dashed: bool, network_path: &[NodeId]) -> Option<WirePath> {
+	pub fn wire_path_from_input(&mut self, input: &InputConnector, graph_wire_style: GraphWireStyle, for_previewing: bool, network_path: &[NodeId]) -> Option<WirePath> {
-		let (vector_wire, thick) = self.vector_wire_from_input(input, graph_wire_style, network_path)?;
+		let (vector_wire, for_layer_stack) = self.vector_wire_from_input(input, graph_wire_style, network_path)?;
 		let path_string = vector_wire.to_svg();
 		let data_type = self
 			.upstream_output_connector(input, network_path)
@@ -2416,8 +2416,8 @@ impl NodeNetworkInterface {
 		Some(WirePath {
 			path_string,
 			data_type,
-			thick,
+			for_layer_stack,
-			dashed,
+			for_previewing,
 		})
 	}
 

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

@@ -9,8 +9,8 @@ pub struct WirePath {
 	pub path_string: String,
 	#[serde(rename = "dataType")]
 	pub data_type: FrontendGraphDataType,
-	pub thick: bool,
+	pub for_layer_stack: bool,
-	pub dashed: bool,
+	pub for_previewing: bool,
 }
 
 #[derive(Clone, Debug, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]

frontend/src/components/views/Graph.svelte

@@ -14,7 +14,9 @@
 	import TextButton from "@graphite/components/widgets/buttons/TextButton.svelte";
 	import TextLabel from "@graphite/components/widgets/labels/TextLabel.svelte";
 
-	// These components will continue to be rendered in svelte after the first stage of native node graph rendering.
+	// Note on upcoming changes for poting this component to Rust for native rendering:
+	//
+	// These components will continue to be rendered in Svelte after the first stage of native node graph rendering.
 	// - Import and export ports
 	// - Wires to import and export
 	// - Wire in progress
@@ -23,8 +25,8 @@
 	// - Error dialog
 	// - Node/Input/Output Tooltips
 	// - Solo drag grip tooltip
-
+	//
-	// These elements will be not be rendered in svelte when rendering the native node graph. They are rendered below all other components
+	// These elements will be not be rendered in Svelte when rendering with the native node graph. They are rendered below all other components.
 	// - Dot grid background
 	// - Nodes/Layers
 	// - Wires between nodes/layers
@@ -288,8 +290,8 @@
 	<div class="wires" style:transform-origin="0 0" style:transform={`translate(${$nodeGraph.transform.x}px, ${$nodeGraph.transform.y}px) scale(${$nodeGraph.transform.scale})`}>
 		<svg>
 			{#each $nodeGraph.wires.values() as map}
-				{#each map.values() as { pathString, dataType, thick, dashed }}
+				{#each map.values() as { pathString, dataType, forLayerStack, dashed }}
-					{#if thick}
+					{#if forLayerStack}
 						<path
 							d={pathString}
 							style:--data-line-width="8px"
@@ -619,8 +621,8 @@
 		<div class="wires">
 			<svg>
 				{#each $nodeGraph.wires.values() as map}
-					{#each map.values() as { pathString, dataType, thick, dashed }}
+					{#each map.values() as { pathString, dataType, forLayerStack, dashed }}
-						{#if !thick}
+						{#if !forLayerStack}
 							<path
 								d={pathString}
 								style:--data-line-width="2px"
@@ -634,7 +636,7 @@
 				{#if $nodeGraph.wirePathInProgress}
 					<path
 						d={$nodeGraph.wirePathInProgress?.wire}
-						style:--data-line-width={`${$nodeGraph.wirePathInProgress.thick ? 8 : 2}px`}
+						style:--data-line-width={`${$nodeGraph.wirePathInProgress.forLayerStack ? 8 : 2}px`}
 						style:--data-color={`var(--color-data-${$nodeGraph.wirePathInProgress.dataType.toLowerCase()})`}
 						style:--data-color-dim={`var(--color-data-${$nodeGraph.wirePathInProgress.dataType.toLowerCase()}-dim)`}
 					/>

frontend/src/messages.ts

@@ -150,7 +150,7 @@ export class UpdateOpenDocumentsList extends JsMessage {
 
 export class WirePathInProgress {
 	readonly wire!: string;
-	readonly thick!: boolean;
+	readonly forLayerStack!: boolean;
 	readonly dataType!: FrontendGraphDataType;
 }
 
@@ -277,7 +277,7 @@ export class NodeGraphTransform {
 export class WirePath {
 	readonly pathString!: string;
 	readonly dataType!: FrontendGraphDataType;
-	readonly thick!: boolean;
+	readonly forLayerStack!: boolean;
 	readonly dashed!: boolean;
 }
 

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

@@ -30,12 +30,10 @@ import {
 
 export function createNodeGraphState(editor: Editor) {
 	const { subscribe, update } = writable({
+		selectionBox: undefined as NodeGraphSelectionBox | undefined,
 		clickTargets: undefined as FrontendClickTargets | undefined,
 		contextMenuInformation: undefined as ContextMenuInformation | undefined,
 		error: undefined as NodeGraphError | undefined,
-		selectionBox: undefined as NodeGraphSelectionBox | undefined,
-		transform: { scale: 1, x: 0, y: 0 },
-		wirePathInProgress: undefined as WirePathInProgress | undefined,
 		layerWidths: new Map<bigint, number>(),
 		chainWidths: new Map<bigint, number>(),
 		hasLeftInputWire: new Map<bigint, boolean>(),
@@ -44,10 +42,12 @@ export function createNodeGraphState(editor: Editor) {
 		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>>(),
+		wirePathInProgress: undefined as WirePathInProgress | undefined,
 		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,
 		reorderImportIndex: undefined as number | undefined,
 		reorderExportIndex: undefined as number | undefined,