Add preference for wire style

Author: Keavon

editor/src/messages/dialog/preferences_dialog/preferences_dialog_message_handler.rs

@@ -1,4 +1,5 @@
 use crate::messages::layout::utility_types::widget_prelude::*;
+use crate::messages::portfolio::document::node_graph::utility_types::GraphWireStyle;
 use crate::messages::preferences::SelectionMode;
 use crate::messages::prelude::*;
 
@@ -32,6 +33,29 @@ impl PreferencesDialogMessageHandler {
 	const TITLE: &'static str = "Editor Preferences";
 
 	fn layout(&self, preferences: &PreferencesMessageHandler) -> Layout {
+		// =====
+		// INPUT
+		// =====
+
+		let zoom_with_scroll_tooltip = "Use the scroll wheel for zooming instead of vertically panning (not recommended for trackpads)";
+		let input_section = vec![TextLabel::new("Input").italic(true).widget_holder()];
+		let zoom_with_scroll = vec![
+			CheckboxInput::new(preferences.zoom_with_scroll)
+				.tooltip(zoom_with_scroll_tooltip)
+				.on_update(|checkbox_input: &CheckboxInput| {
+					PreferencesMessage::ModifyLayout {
+						zoom_with_scroll: checkbox_input.checked,
+					}
+					.into()
+				})
+				.widget_holder(),
+			TextLabel::new("Zoom with Scroll").table_align(true).tooltip(zoom_with_scroll_tooltip).widget_holder(),
+		];
+
+		// =========
+		// SELECTION
+		// =========
+
 		let selection_section = vec![TextLabel::new("Selection").italic(true).widget_holder()];
 		let selection_mode = RadioInput::new(vec![
 			RadioEntryData::new(SelectionMode::Touched.to_string())
@@ -65,20 +89,28 @@ impl PreferencesDialogMessageHandler {
 		.selected_index(Some(preferences.selection_mode as u32))
 		.widget_holder();
 
-		let zoom_with_scroll_tooltip = "Use the scroll wheel for zooming instead of vertically panning (not recommended for trackpads)";
-		let input_section = vec![TextLabel::new("Input").italic(true).widget_holder()];
-		let zoom_with_scroll = vec![
-			CheckboxInput::new(preferences.zoom_with_scroll)
-				.tooltip(zoom_with_scroll_tooltip)
-				.on_update(|checkbox_input: &CheckboxInput| {
-					PreferencesMessage::ModifyLayout {
-						zoom_with_scroll: checkbox_input.checked,
-					}
-					.into()
-				})
-				.widget_holder(),
-			TextLabel::new("Zoom with Scroll").table_align(true).tooltip(zoom_with_scroll_tooltip).widget_holder(),
-		];
+		// ================
+		// NODE GRAPH WIRES
+		// ================
+
+		let node_graph_section_tooltip = "Display wires in the node graph as grid-aligned straight lines or as smooth curves";
+		let node_graph_section = vec![TextLabel::new("Node Graph Wires").tooltip(node_graph_section_tooltip).italic(true).widget_holder()];
+		let graph_wire_style = RadioInput::new(vec![
+			RadioEntryData::new(GraphWireStyle::Straight.to_string())
+				.label(GraphWireStyle::Straight.to_string())
+				.tooltip(GraphWireStyle::Straight.tooltip_description())
+				.on_update(move |_| PreferencesMessage::GraphWireStyle { style: GraphWireStyle::Straight }.into()),
+			RadioEntryData::new(GraphWireStyle::Curved.to_string())
+				.label(GraphWireStyle::Curved.to_string())
+				.tooltip(GraphWireStyle::Curved.tooltip_description())
+				.on_update(move |_| PreferencesMessage::GraphWireStyle { style: GraphWireStyle::Curved }.into()),
+		])
+		.selected_index(Some(preferences.graph_wire_style as u32))
+		.widget_holder();
+
+		// ============
+		// EXPERIMENTAL
+		// ============
 
 		let vello_tooltip = "Use the experimental Vello renderer (your browser must support WebGPU)";
 		let renderer_section = vec![TextLabel::new("Experimental").italic(true).widget_holder()];
@@ -126,10 +158,12 @@ impl PreferencesDialogMessageHandler {
 		// ];
 
 		Layout::WidgetLayout(WidgetLayout::new(vec![
-			LayoutGroup::Row { widgets: selection_section },
-			LayoutGroup::Row { widgets: vec![selection_mode] },
 			LayoutGroup::Row { widgets: input_section },
 			LayoutGroup::Row { widgets: zoom_with_scroll },
+			LayoutGroup::Row { widgets: selection_section },
+			LayoutGroup::Row { widgets: vec![selection_mode] },
+			LayoutGroup::Row { widgets: node_graph_section },
+			LayoutGroup::Row { widgets: vec![graph_wire_style] },
 			LayoutGroup::Row { widgets: renderer_section },
 			LayoutGroup::Row { widgets: use_vello },
 			LayoutGroup::Row { widgets: vector_meshes },

editor/src/messages/frontend/frontend_message.rs

@@ -250,6 +250,8 @@ pub enum FrontendMessage {
 	UpdateNodeGraph {
 		nodes: Vec<FrontendNode>,
 		wires: Vec<FrontendNodeWire>,
+		#[serde(rename = "wiresCurvedNotStraight")]
+		wires_curved_not_straight: bool,
 	},
 	UpdateNodeGraphControlBarLayout {
 		#[serde(rename = "layoutTarget")]

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

@@ -42,6 +42,7 @@ pub struct DocumentMessageData<'a> {
 	pub persistent_data: &'a PersistentData,
 	pub executor: &'a mut NodeGraphExecutor,
 	pub current_tool: &'a ToolType,
+	pub preferences: &'a PreferencesMessageHandler,
 }
 
 #[derive(Clone, Debug, serde::Serialize, serde::Deserialize)]
@@ -172,6 +173,7 @@ impl MessageHandler<DocumentMessage, DocumentMessageData<'_>> for DocumentMessag
 			persistent_data,
 			executor,
 			current_tool,
+			preferences,
 		} = data;
 
 		let selected_nodes_bounding_box_viewport = self.network_interface.selected_nodes_bounding_box_viewport(&self.breadcrumb_network_path);
@@ -222,6 +224,7 @@ impl MessageHandler<DocumentMessage, DocumentMessageData<'_>> for DocumentMessag
 						graph_view_overlay_open: self.graph_view_overlay_open,
 						graph_fade_artwork_percentage: self.graph_fade_artwork_percentage,
 						navigation_handler: &self.navigation_handler,
+						preferences,
 					},
 				);
 			}

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

@@ -35,6 +35,7 @@ pub struct NodeGraphHandlerData<'a> {
 	pub graph_view_overlay_open: bool,
 	pub graph_fade_artwork_percentage: f64,
 	pub navigation_handler: &'a NavigationMessageHandler,
+	pub preferences: &'a PreferencesMessageHandler,
 }
 
 #[derive(Debug, Clone)]
@@ -93,6 +94,7 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphHandlerData<'a>> for NodeGrap
 			graph_view_overlay_open,
 			graph_fade_artwork_percentage,
 			navigation_handler,
+			preferences,
 		} = data;
 
 		match message {
@@ -1293,8 +1295,14 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphHandlerData<'a>> for NodeGrap
 					let wires = Self::collect_wires(network_interface, breadcrumb_network_path);
 					let nodes = self.collect_nodes(network_interface, breadcrumb_network_path);
 					let (layer_widths, chain_widths, has_left_input_wire) = network_interface.collect_layer_widths(breadcrumb_network_path);
+					let wires_curved_not_straight = preferences.graph_wire_style.is_curved();
+
 					responses.add(NodeGraphMessage::UpdateImportsExports);
-					responses.add(FrontendMessage::UpdateNodeGraph { nodes, wires });
+					responses.add(FrontendMessage::UpdateNodeGraph {
+						nodes,
+						wires,
+						wires_curved_not_straight,
+					});
 					responses.add(FrontendMessage::UpdateLayerWidths {
 						layer_widths,
 						chain_widths,

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

@@ -200,3 +200,32 @@ pub enum Direction {
 	Left,
 	Right,
 }
+
+#[derive(Copy, Clone, Debug, PartialEq, Default, serde::Serialize, serde::Deserialize, specta::Type)]
+pub enum GraphWireStyle {
+	#[default]
+	Straight = 0,
+	Curved = 1,
+}
+
+impl std::fmt::Display for GraphWireStyle {
+	fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+		match self {
+			GraphWireStyle::Straight => write!(f, "Straight"),
+			GraphWireStyle::Curved => write!(f, "Curved"),
+		}
+	}
+}
+
+impl GraphWireStyle {
+	pub fn tooltip_description(&self) -> &'static str {
+		match self {
+			GraphWireStyle::Straight => "Wires follow the grid in straight line runs",
+			GraphWireStyle::Curved => "Wires bend smoothly between nodes",
+		}
+	}
+
+	pub fn is_curved(&self) -> bool {
+		*self == GraphWireStyle::Curved
+	}
+}

editor/src/messages/portfolio/portfolio_message_handler.rs

@@ -106,6 +106,7 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageData<'_>> for PortfolioMes
 							persistent_data: &self.persistent_data,
 							executor: &mut self.executor,
 							current_tool,
+							preferences,
 						};
 						document.process_message(message, responses, document_inputs)
 					}
@@ -121,6 +122,7 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageData<'_>> for PortfolioMes
 						persistent_data: &self.persistent_data,
 						executor: &mut self.executor,
 						current_tool,
+						preferences,
 					};
 					document.process_message(message, responses, document_inputs)
 				}

editor/src/messages/preferences/preferences_message.rs

@@ -1,3 +1,4 @@
+use crate::messages::portfolio::document::node_graph::utility_types::GraphWireStyle;
 use crate::messages::preferences::SelectionMode;
 use crate::messages::prelude::*;
 
@@ -13,6 +14,7 @@ pub enum PreferencesMessage {
 	SelectionMode { selection_mode: SelectionMode },
 	VectorMeshes { enabled: bool },
 	ModifyLayout { zoom_with_scroll: bool },
+	GraphWireStyle { style: GraphWireStyle },
 	// ImaginateRefreshFrequency { seconds: f64 },
 	// ImaginateServerHostname { hostname: String },
 }

editor/src/messages/preferences/preferences_message_handler.rs

@@ -1,4 +1,5 @@
 use crate::messages::input_mapper::key_mapping::MappingVariant;
+use crate::messages::portfolio::document::node_graph::utility_types::GraphWireStyle;
 use crate::messages::preferences::SelectionMode;
 use crate::messages::prelude::*;
 
@@ -12,6 +13,7 @@ pub struct PreferencesMessageHandler {
 	pub zoom_with_scroll: bool,
 	pub use_vello: bool,
 	pub vector_meshes: bool,
+	pub graph_wire_style: GraphWireStyle,
 }
 
 impl PreferencesMessageHandler {
@@ -37,13 +39,15 @@ impl Default for PreferencesMessageHandler {
 			imaginate_hostname: host_name,
 			use_vello,
 		} = Default::default();
+
 		Self {
 			imaginate_server_hostname: host_name,
 			imaginate_refresh_frequency: 1.,
 			selection_mode: SelectionMode::Touched,
 			zoom_with_scroll: matches!(MappingVariant::default(), MappingVariant::ZoomWithScroll),
 			use_vello,
 			vector_meshes: false,
+			graph_wire_style: GraphWireStyle::default(),
 		}
 	}
 }
@@ -95,6 +99,10 @@ impl MessageHandler<PreferencesMessage, ()> for PreferencesMessageHandler {
 			PreferencesMessage::SelectionMode { selection_mode } => {
 				self.selection_mode = selection_mode;
 			}
+			PreferencesMessage::GraphWireStyle { style } => {
+				self.graph_wire_style = style;
+				responses.add(NodeGraphMessage::SendGraph);
+			}
 		}
 		// TODO: Reenable when Imaginate is restored (and move back up one line since the auto-formatter doesn't like it in that block)
 		// PreferencesMessage::ImaginateRefreshFrequency { seconds } => {

frontend/src/components/views/Graph.svelte

@@ -159,11 +159,13 @@
 		return { nodeOutput, nodeInput };
 	}
 
-	function createWirePath(outputPort: SVGSVGElement, inputPort: SVGSVGElement, verticalOut: boolean, verticalIn: boolean, dashed: boolean): WirePath {
+	function createWirePath(outputPort: SVGSVGElement, inputPort: SVGSVGElement, verticalOut: boolean, verticalIn: boolean, dashed: boolean, curvedNotStraight: boolean): WirePath {
 		const inputPortRect = inputPort.getBoundingClientRect();
 		const outputPortRect = outputPort.getBoundingClientRect();
 
-		const pathString = buildWirePathString(outputPortRect, inputPortRect, verticalOut, verticalIn);
+		const pathString = curvedNotStraight
+			? buildCurvedWirePathString(outputPortRect, inputPortRect, verticalOut, verticalIn)
+			: buildStraightWirePathString(outputPortRect, inputPortRect, verticalOut, verticalIn);
 		const dataType = (outputPort.getAttribute("data-datatype") as FrontendGraphDataType) || "General";
 		const thick = verticalIn && verticalOut;
 
@@ -184,7 +186,7 @@
 			const wireEndNode = wire.wireEnd.nodeId !== undefined ? $nodeGraph.nodes.get(wire.wireEnd.nodeId) : undefined;
 			const wireEnd = (wireEndNode?.isLayer && Number(wire.wireEnd.index) === 0) || false;
 
-			return [createWirePath(nodeOutput, nodeInput, wireStart, wireEnd, wire.dashed)];
+			return [createWirePath(nodeOutput, nodeInput, wireStart, wireEnd, wire.dashed, $nodeGraph.wiresCurvedNotStraight)];
 		});
 	}
 
@@ -198,7 +200,7 @@
 		return iconMap[icon] || "NodeNodes";
 	}
 
-	function buildWirePathLocations(outputBounds: DOMRect, inputBounds: DOMRect, verticalOut: boolean, verticalIn: boolean): { x: number; y: number }[] {
+	function buildStraightWirePathLocations(outputBounds: DOMRect, inputBounds: DOMRect, verticalOut: boolean, verticalIn: boolean): { x: number; y: number }[] {
 		if (!nodesContainer) return [];
 
 		const VERTICAL_WIRE_OVERLAP_ON_SHAPED_CAP = 1;
@@ -426,8 +428,8 @@
 		return construct([x1, y1], [x20, y1], [x20, y3], [x4, y3]);
 	}
 
-	function buildWirePathString(outputBounds: DOMRect, inputBounds: DOMRect, verticalOut: boolean, verticalIn: boolean): string {
-		const locations = buildWirePathLocations(outputBounds, inputBounds, verticalOut, verticalIn);
+	function buildStraightWirePathString(outputBounds: DOMRect, inputBounds: DOMRect, verticalOut: boolean, verticalIn: boolean): string {
+		const locations = buildStraightWirePathLocations(outputBounds, inputBounds, verticalOut, verticalIn);
 		if (locations.length === 0) return "[error]";
 		if (locations.length === 2) return `M${locations[0].x},${locations[0].y} L${locations[1].x},${locations[1].y}`;
 
@@ -461,6 +463,62 @@
 		return path;
 	}
 
+	function buildCurvedWirePathLocations(outputBounds: DOMRect, inputBounds: DOMRect, verticalOut: boolean, verticalIn: boolean): { x: number; y: number }[] {
+		if (!nodesContainer) return [];
+
+		const VERTICAL_WIRE_OVERLAP_ON_SHAPED_CAP = 1;
+
+		const containerBounds = nodesContainer.getBoundingClientRect();
+
+		const outX = verticalOut ? outputBounds.x + outputBounds.width / 2 : outputBounds.x + outputBounds.width - 1;
+		const outY = verticalOut ? outputBounds.y + VERTICAL_WIRE_OVERLAP_ON_SHAPED_CAP : outputBounds.y + outputBounds.height / 2;
+		const outConnectorX = (outX - containerBounds.x) / $nodeGraph.transform.scale;
+		const outConnectorY = (outY - containerBounds.y) / $nodeGraph.transform.scale;
+
+		const inX = verticalIn ? inputBounds.x + inputBounds.width / 2 : inputBounds.x + 1;
+		const inY = verticalIn ? inputBounds.y + inputBounds.height - VERTICAL_WIRE_OVERLAP_ON_SHAPED_CAP : inputBounds.y + inputBounds.height / 2;
+		const inConnectorX = (inX - containerBounds.x) / $nodeGraph.transform.scale;
+		const inConnectorY = (inY - containerBounds.y) / $nodeGraph.transform.scale;
+		const horizontalGap = Math.abs(outConnectorX - inConnectorX);
+		const verticalGap = Math.abs(outConnectorY - inConnectorY);
+
+		const curveLength = 24;
+		const curveFalloffRate = curveLength * Math.PI * 2;
+
+		const horizontalCurveAmount = -(2 ** ((-10 * horizontalGap) / curveFalloffRate)) + 1;
+		const verticalCurveAmount = -(2 ** ((-10 * verticalGap) / curveFalloffRate)) + 1;
+		const horizontalCurve = horizontalCurveAmount * curveLength;
+		const verticalCurve = verticalCurveAmount * curveLength;
+
+		return [
+			{ x: outConnectorX, y: outConnectorY },
+			{ x: verticalOut ? outConnectorX : outConnectorX + horizontalCurve, y: verticalOut ? outConnectorY - verticalCurve : outConnectorY },
+			{ x: verticalIn ? inConnectorX : inConnectorX - horizontalCurve, y: verticalIn ? inConnectorY + verticalCurve : inConnectorY },
+			{ x: inConnectorX, y: inConnectorY },
+		];
+	}
+
+	function buildCurvedWirePathString(outputBounds: DOMRect, inputBounds: DOMRect, verticalOut: boolean, verticalIn: boolean): string {
+		const locations = buildCurvedWirePathLocations(outputBounds, inputBounds, verticalOut, verticalIn);
+		if (locations.length === 0) return "[error]";
+
+		const SMOOTHING = 0.5;
+		const delta01 = { x: (locations[1].x - locations[0].x) * SMOOTHING, y: (locations[1].y - locations[0].y) * SMOOTHING };
+		const delta23 = { x: (locations[3].x - locations[2].x) * SMOOTHING, y: (locations[3].y - locations[2].y) * SMOOTHING };
+
+		return `
+			M${locations[0].x},${locations[0].y}
+			L${locations[1].x},${locations[1].y}
+			C${locations[1].x + delta01.x},${locations[1].y + delta01.y}
+			${locations[2].x - delta23.x},${locations[2].y - delta23.y}
+			${locations[2].x},${locations[2].y}
+			L${locations[3].x},${locations[3].y}
+			`
+			.split("\n")
+			.map((line) => line.trim())
+			.join(" ");
+	}
+
 	function toggleLayerDisplay(displayAsLayer: boolean, toggleId: bigint) {
 		let node = $nodeGraph.nodes.get(toggleId);
 		if (node) editor.handle.setToNodeOrLayer(node.id, displayAsLayer);

frontend/src/messages.ts

@@ -100,6 +100,8 @@ export class UpdateNodeGraph extends JsMessage {
 
 	@Type(() => FrontendNodeWire)
 	readonly wires!: FrontendNodeWire[];
+
+	readonly wiresCurvedNotStraight!: boolean;
 }
 
 export class UpdateNodeGraphTransform extends JsMessage {