Improve wire path in progress

editor/src/messages/frontend/frontend_message.rs

@@ -3,10 +3,11 @@ use crate::messages::app_window::app_window_message_handler::AppWindowPlatform;
 use crate::messages::input_mapper::utility_types::misc::ActionShortcut;
 use crate::messages::layout::utility_types::widget_prelude::*;
 use crate::messages::portfolio::document::node_graph::utility_types::{
-	BoxSelection, ContextMenuInformation, FrontendClickTargets, FrontendGraphInput, FrontendGraphOutput, FrontendNode, FrontendNodeType, NodeGraphErrorDiagnostic, Transform,
+	ContextMenuInformation, FrontendClickTargets, FrontendGraphInput, FrontendGraphOutput, FrontendNode, FrontendNodeType, NodeGraphErrorDiagnostic, NodeGraphSelectionBox, NodeGraphTransform,
+	WirePathInProgress,
 };
 use crate::messages::portfolio::document::utility_types::nodes::{JsRawBuffer, LayerPanelEntry, RawBuffer};
-use crate::messages::portfolio::document::utility_types::wires::{WirePath, WirePathUpdate};
+use crate::messages::portfolio::document::utility_types::wires::WirePathUpdate;
 use crate::messages::prelude::*;
 use glam::IVec2;
 use graph_craft::document::NodeId;
@@ -167,9 +168,9 @@ pub enum FrontendMessage {
 		#[serde(rename = "inSelectedNetwork")]
 		in_selected_network: bool,
 	},
-	UpdateBox {
-		#[serde(rename = "box")]
-		box_selection: Option<BoxSelection>,
+	UpdateNodeGraphSelectionBox {
+		#[serde(rename = "selectionBox")]
+		selection_box: Option<NodeGraphSelectionBox>,
 	},
 	UpdateContextMenuInformation {
 		#[serde(rename = "contextMenuInformation")]
@@ -298,7 +299,7 @@ pub enum FrontendMessage {
 		selected: Vec<NodeId>,
 	},
 	UpdateNodeGraphTransform {
-		transform: Transform,
+		transform: NodeGraphTransform,
 	},
 	UpdateNodeThumbnail {
 		id: NodeId,
@@ -318,8 +319,8 @@ pub enum FrontendMessage {
 		diff: Vec<WidgetDiff>,
 	},
 	UpdateWirePathInProgress {
-		#[serde(rename = "wirePath")]
-		wire_path: Option<WirePath>,
+		#[serde(rename = "wirePathInProgress")]
+		wire_path_in_progress: Option<WirePathInProgress>,
 	},
 	UpdateWelcomeScreenButtonsLayout {
 		diff: Vec<WidgetDiff>,

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

@@ -1,5 +1,5 @@
 use super::node_graph::document_node_definitions;
-use super::node_graph::utility_types::Transform;
+use super::node_graph::utility_types::NodeGraphTransform;
 use super::utility_types::error::EditorError;
 use super::utility_types::misc::{GroupFolderType, SNAP_FUNCTIONS_FOR_BOUNDING_BOXES, SNAP_FUNCTIONS_FOR_PATHS, SnappingOptions, SnappingState};
 use super::utility_types::network_interface::{self, NodeNetworkInterface, TransactionStatus};
@@ -485,15 +485,15 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
 					responses.add(NodeGraphMessage::SelectedNodesSet {
 						nodes: self.node_graph_handler.selection_before_pointer_down.clone(),
 					});
-					responses.add(FrontendMessage::UpdateBox { box_selection: None });
+					responses.add(FrontendMessage::UpdateNodeGraphSelectionBox { selection_box: None });
 				}
 				// Abort wire in progress of being connected
 				else if self.node_graph_handler.wire_in_progress_from_connector.is_some() {
 					self.node_graph_handler.wire_in_progress_from_connector = None;
 					self.node_graph_handler.wire_in_progress_to_connector = None;
 					self.node_graph_handler.wire_in_progress_type = FrontendGraphDataType::General;
 
-					responses.add(FrontendMessage::UpdateWirePathInProgress { wire_path: None });
+					responses.add(FrontendMessage::UpdateWirePathInProgress { wire_path_in_progress: None });
 					responses.add(DocumentMessage::AbortTransaction);
 				}
 				// Close the context menu if it's open
@@ -1525,7 +1525,7 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
 					responses.add(NodeGraphMessage::UpdateImportsExports);
 
 					responses.add(FrontendMessage::UpdateNodeGraphTransform {
-						transform: Transform {
+						transform: NodeGraphTransform {
 							scale: transform.matrix2.x_axis.x,
 							x: transform.translation.x,
 							y: transform.translation.y,

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

@@ -1,5 +1,5 @@
 use super::node_properties;
-use super::utility_types::{BoxSelection, ContextMenuInformation, DragStart, FrontendNode};
+use super::utility_types::{ContextMenuInformation, DragStart, FrontendNode, NodeGraphSelectionBox};
 use crate::consts::GRID_SIZE;
 use crate::messages::clipboard::utility_types::ClipboardContent;
 use crate::messages::input_mapper::utility_types::macros::{action_shortcut, action_shortcut_manual};
@@ -9,14 +9,14 @@ use crate::messages::portfolio::document::graph_operation::utility_types::Modify
 use crate::messages::portfolio::document::node_graph::document_node_definitions::{
 	DefinitionIdentifier, NodePropertiesContext, resolve_document_node_type, resolve_network_node_type, resolve_proto_node_type,
 };
-use crate::messages::portfolio::document::node_graph::utility_types::{ContextMenuData, Direction, FrontendGraphDataType, NodeGraphErrorDiagnostic};
+use crate::messages::portfolio::document::node_graph::utility_types::{ContextMenuData, Direction, FrontendGraphDataType, NodeGraphErrorDiagnostic, WirePathInProgress};
 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::{
 	self, FlowType, InputConnector, NodeNetworkInterface, NodeTemplate, NodeTypePersistentMetadata, OutputConnector, Previewing,
 };
 use crate::messages::portfolio::document::utility_types::nodes::{CollapsedLayers, LayerPanelEntry};
-use crate::messages::portfolio::document::utility_types::wires::{GraphWireStyle, WirePath, WirePathUpdate, build_vector_wire};
+use crate::messages::portfolio::document::utility_types::wires::{GraphWireStyle, WirePathUpdate, build_vector_wire};
 use crate::messages::prelude::*;
 use crate::messages::tool::common_functionality::auto_panning::AutoPanning;
 use crate::messages::tool::common_functionality::graph_modification_utils::get_clip_mode;
@@ -79,6 +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 endpoint should be displayed as a vertical or horizontal connection.
+	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.
@@ -329,7 +331,7 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 					self.wire_in_progress_to_connector = None;
 					self.wire_in_progress_type = FrontendGraphDataType::General;
 				}
-				responses.add(FrontendMessage::UpdateWirePathInProgress { wire_path: None });
+				responses.add(FrontendMessage::UpdateWirePathInProgress { wire_path_in_progress: None });
 				responses.add(FrontendMessage::UpdateContextMenuInformation {
 					context_menu_information: self.context_menu.clone(),
 				});
@@ -790,7 +792,7 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 						responses.add(NodeGraphMessage::SelectedNodesSet {
 							nodes: self.selection_before_pointer_down.clone(),
 						});
-						responses.add(FrontendMessage::UpdateBox { box_selection: None });
+						responses.add(FrontendMessage::UpdateNodeGraphSelectionBox { selection_box: None });
 						return;
 					}
 					// Abort dragging a wire
@@ -800,7 +802,8 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 						self.wire_in_progress_type = FrontendGraphDataType::General;
 
 						responses.add(DocumentMessage::AbortTransaction);
-						responses.add(FrontendMessage::UpdateWirePathInProgress { wire_path: None });
+						responses.add(FrontendMessage::UpdateWirePathInProgress { wire_path_in_progress: None });
+
 						return;
 					}
 
@@ -885,7 +888,7 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 					responses.add(FrontendMessage::UpdateContextMenuInformation {
 						context_menu_information: self.context_menu.clone(),
 					});
-					responses.add(FrontendMessage::UpdateWirePathInProgress { wire_path: None });
+					responses.add(FrontendMessage::UpdateWirePathInProgress { wire_path_in_progress: None });
 				}
 
 				// Toggle visibility of clicked node and return
@@ -1036,6 +1039,12 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 							return;
 						};
 						self.wire_in_progress_to_connector = Some(input_position);
+						// 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
+						};
 					}
 					// Not hovering over a node input or node output, update with the mouse position.
 					else {
@@ -1080,28 +1089,21 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 									false
 								}
 							});
-						let to_connector_is_layer = to_connector.is_some_and(|to_connector| {
-							if let InputConnector::Node { node_id, input_index } = to_connector {
-								input_index == 0 && network_interface.is_layer(&node_id, selection_network_path)
-							} else {
-								false
-							}
-						});
 						let vector_wire = build_vector_wire(
 							wire_in_progress_from_connector,
 							wire_in_progress_to_connector,
 							from_connector_is_layer,
-							to_connector_is_layer,
+							self.wire_in_connector_is_layer,
 							GraphWireStyle::Direct,
 						);
-						let path_string = vector_wire.to_svg();
-						let wire_path = WirePath {
-							path_string,
+						let wire_path = WirePathInProgress {
+							wire: vector_wire.to_svg(),
 							data_type: self.wire_in_progress_type,
-							thick: false,
-							dashed: false,
+							for_layer_stack: self.wire_in_connector_is_layer && from_connector_is_layer,
 						};
-						responses.add(FrontendMessage::UpdateWirePathInProgress { wire_path: Some(wire_path) });
+						responses.add(FrontendMessage::UpdateWirePathInProgress {
+							wire_path_in_progress: Some(wire_path),
+						});
 					}
 				} else if let Some((drag_start, dragged)) = &mut self.drag_start {
 					if drag_start.start_x != point.x || drag_start.start_y != point.y {
@@ -1431,8 +1433,8 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 				self.reordering_import = None;
 
 				responses.add(DocumentMessage::EndTransaction);
-				responses.add(FrontendMessage::UpdateWirePathInProgress { wire_path: None });
-				responses.add(FrontendMessage::UpdateBox { box_selection: None });
+				responses.add(FrontendMessage::UpdateWirePathInProgress { wire_path_in_progress: None });
+				responses.add(FrontendMessage::UpdateNodeGraphSelectionBox { selection_box: None });
 				responses.add(FrontendMessage::UpdateImportReorderIndex { index: None });
 				responses.add(FrontendMessage::UpdateExportReorderIndex { index: None });
 				self.update_node_graph_hints(responses);
@@ -1926,23 +1928,14 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 			}
 			NodeGraphMessage::UpdateBoxSelection => {
 				if let Some((box_selection_start, _)) = self.box_selection_start {
-					// The mouse button was released but we missed the pointer up event
-					// if ((e.buttons & 1) === 0) {
-					// 	completeBoxSelection();
-					// 	boxSelection = undefined;
-					// } else if ((e.buttons & 2) !== 0) {
-					// 	editor.handle.selectNodes(new BigUint64Array(previousSelection));
-					// 	boxSelection = undefined;
-					// }
-
 					let Some(network_metadata) = network_interface.network_metadata(selection_network_path) else {
 						log::error!("Could not get network metadata in UpdateBoxSelection");
 						return;
 					};
 
 					let box_selection_start_viewport = network_metadata.persistent_metadata.navigation_metadata.node_graph_to_viewport.transform_point2(box_selection_start);
 
-					let box_selection = Some(BoxSelection {
+					let selection_box = Some(NodeGraphSelectionBox {
 						start_x: box_selection_start_viewport.x.max(0.) as u32,
 						start_y: box_selection_start_viewport.y.max(0.) as u32,
 						end_x: ipp.mouse.position.x.max(0.) as u32,
@@ -1987,7 +1980,7 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphMessageContext<'a>> for NodeG
 							nodes: nodes.into_iter().collect::<Vec<_>>(),
 						});
 					}
-					responses.add(FrontendMessage::UpdateBox { box_selection })
+					responses.add(FrontendMessage::UpdateNodeGraphSelectionBox { selection_box })
 				}
 			}
 			NodeGraphMessage::UpdateImportsExports => {
@@ -2807,6 +2800,7 @@ impl Default for NodeGraphMessageHandler {
 			select_if_not_dragged: None,
 			wire_in_progress_from_connector: None,
 			wire_in_progress_to_connector: None,
+			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

@@ -119,14 +119,14 @@ pub struct DragStart {
 }
 
 #[derive(Clone, Debug, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]
-pub struct Transform {
+pub struct NodeGraphTransform {
 	pub scale: f64,
 	pub x: f64,
 	pub y: f64,
 }
 
 #[derive(Clone, Debug, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]
-pub struct BoxSelection {
+pub struct NodeGraphSelectionBox {
 	#[serde(rename = "startX")]
 	pub start_x: u32,
 	#[serde(rename = "startY")]
@@ -137,6 +137,15 @@ pub struct BoxSelection {
 	pub end_y: u32,
 }
 
+#[derive(Clone, Debug, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]
+pub struct WirePathInProgress {
+	pub wire: String,
+	#[serde(rename = "dataType")]
+	pub data_type: FrontendGraphDataType,
+	#[serde(rename = "forLayerStack")]
+	pub for_layer_stack: bool,
+}
+
 #[derive(Clone, Debug, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]
 #[serde(tag = "type", content = "data")]
 pub enum ContextMenuData {

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

@@ -2367,16 +2367,16 @@ 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();
 		let data_type = self.input_type(&input, network_path).displayed_type();
 		let wire_path_update = Some(WirePath {
 			path_string,
 			data_type,
-			thick,
-			dashed: false,
+			for_layer_stack,
+			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;
-		Some((build_vector_wire(output_position, input_position, vertical_start, vertical_end, wire_style), thick))
+		let for_layer_stack = vertical_end && vertical_start;
+		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> {
-		let (vector_wire, thick) = self.vector_wire_from_input(input, graph_wire_style, network_path)?;
+	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, 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,
-			dashed,
+			for_layer_stack,
+			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 dashed: bool,
+	pub for_layer_stack: bool,
+	pub for_previewing: bool,
 }
 
 #[derive(Clone, Debug, PartialEq, serde::Serialize, serde::Deserialize, specta::Type)]