Hide the left border notch in layers when a wire isn't entering from the layer's left

Author: Keavon

editor/src/messages/frontend/frontend_message.rs

@@ -158,6 +158,8 @@ pub enum FrontendMessage {
 		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")]

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

@@ -1076,12 +1076,16 @@ impl<'a> MessageHandler<NodeGraphMessage, NodeGraphHandlerData<'a>> for NodeGrap
 					// TODO: Implement culling of nodes and wires whose bounding boxes are outside of the viewport
 					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) = network_interface.collect_layer_widths(breadcrumb_network_path);
+					let (layer_widths, chain_widths, has_left_input_wire) = network_interface.collect_layer_widths(breadcrumb_network_path);
 					let imports = network_interface.frontend_imports(breadcrumb_network_path).unwrap_or_default();
 					let exports = network_interface.frontend_exports(breadcrumb_network_path).unwrap_or_default();
 					responses.add(FrontendMessage::UpdateImportsExports { imports, exports });
 					responses.add(FrontendMessage::UpdateNodeGraph { nodes, wires });
-					responses.add(FrontendMessage::UpdateLayerWidths { layer_widths, chain_widths });
+					responses.add(FrontendMessage::UpdateLayerWidths {
+						layer_widths,
+						chain_widths,
+						has_left_input_wire,
+					});
 					responses.add(NodeGraphMessage::SendSelectedNodes);
 				}
 			}

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

@@ -2783,24 +2783,36 @@ 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>) {
+	pub fn collect_layer_widths(&mut self, network_path: &[NodeId]) -> (HashMap<NodeId, u32>, HashMap<NodeId, u32>, HashMap<NodeId, bool>) {
 		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());
+			return (HashMap::new(), HashMap::new(), HashMap::new());
 		};
 		let nodes = network_metadata
 			.persistent_metadata
 			.node_metadata
 			.iter()
 			.filter_map(|(node_id, _)| if self.is_layer(node_id, network_path) { Some(*node_id) } else { None })
 			.collect::<Vec<_>>();
-		(
-			nodes
-				.iter()
-				.filter_map(|node_id| self.layer_width(node_id, network_path).map(|layer_width| (*node_id, layer_width)))
-				.collect::<HashMap<NodeId, u32>>(),
-			nodes.iter().map(|node_id| (*node_id, self.chain_width(node_id, network_path))).collect::<HashMap<NodeId, u32>>(),
-		)
+		let layer_widths = nodes
+			.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
+						.upstream_flow_back_from_nodes(vec![*node_id], network_path, FlowType::HorizontalFlow)
+						.skip(1)
+						.all(|node_id| self.is_chain(&node_id, network_path)),
+				)
+			})
+			.collect::<HashMap<NodeId, bool>>();
+
+		(layer_widths, chain_widths, has_left_input_wire)
 	}
 
 	pub fn compute_modified_vector(&self, layer: LayerNodeIdentifier) -> Option<VectorData> {

frontend/src/components/views/Graph.svelte

@@ -231,7 +231,7 @@
 		return borderMask(boxes, nodeWidth, nodeHeight);
 	}
 
-	function layerBorderMask(nodeWidthFromThumbnail: number, nodeChainAreaLeftExtension: number): string {
+	function layerBorderMask(nodeWidthFromThumbnail: number, nodeChainAreaLeftExtension: number, hasLeftInputWire: boolean): string {
 		const NODE_HEIGHT = 2 * 24;
 		const THUMBNAIL_WIDTH = 72 + 8 * 2;
 		const FUDGE_HEIGHT_BEYOND_LAYER_HEIGHT = 2;
@@ -241,7 +241,7 @@
 		const boxes: { x: number; y: number; width: number; height: number }[] = [];
 
 		// Left input
-		if (nodeChainAreaLeftExtension > 0) {
+		if (hasLeftInputWire && nodeChainAreaLeftExtension > 0) {
 			boxes.push({ x: -8, y: 16, width: 16, height: 16 });
 		}
 
@@ -461,6 +461,7 @@
 			{@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}
 			<div
 				class="layer"
@@ -576,7 +577,7 @@
 					<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)} />
+							<path clip-rule="evenodd" d={layerBorderMask(24 * layerAreaWidth - 12, layerChainWidth ? (0.5 + layerChainWidth) * 24 : 0, hasLeftInputWire)} />
 						</clipPath>
 					</defs>
 				</svg>

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

@@ -33,6 +33,7 @@ export function createNodeGraphState(editor: Editor) {
 		contextMenuInformation: undefined as ContextMenuInformation | undefined,
 		layerWidths: new Map<bigint, number>(),
 		chainWidths: new Map<bigint, number>(),
+		hasLeftInputWire: new Map<bigint, boolean>(),
 		imports: [] as { outputMetadata: FrontendGraphOutput; position: { x: number; y: number } }[],
 		exports: [] as { inputMetadata: FrontendGraphInput; position: { x: number; y: number } }[],
 		nodes: new Map<bigint, FrontendNode>(),
@@ -92,6 +93,7 @@ export function createNodeGraphState(editor: Editor) {
 		update((state) => {
 			state.layerWidths = updateLayerWidths.layerWidths;
 			state.chainWidths = updateLayerWidths.chainWidths;
+			state.hasLeftInputWire = updateLayerWidths.hasLeftInputWire;
 			return state;
 		});
 	});

frontend/src/wasm-communication/messages.ts

@@ -69,12 +69,15 @@ export class UpdateInSelectedNetwork 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 UpdateNodeGraph extends JsMessage {