From 12ca06035cd7463ed895671ff7eebe53fde655c6 Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Sun, 3 Nov 2024 15:33:29 -0800 Subject: [PATCH] Hide the left border notch in layers when a wire isn't entering from the layer's left --- .../src/messages/frontend/frontend_message.rs | 2 ++ .../node_graph/node_graph_message_handler.rs | 8 +++-- .../utility_types/network_interface.rs | 30 +++++++++++++------ frontend/src/components/views/Graph.svelte | 7 +++-- frontend/src/state-providers/node-graph.ts | 2 ++ frontend/src/wasm-communication/messages.ts | 3 ++ 6 files changed, 38 insertions(+), 14 deletions(-) diff --git a/editor/src/messages/frontend/frontend_message.rs b/editor/src/messages/frontend/frontend_message.rs index 9506bff9..7cc8f3d3 100644 --- a/editor/src/messages/frontend/frontend_message.rs +++ b/editor/src/messages/frontend/frontend_message.rs @@ -158,6 +158,8 @@ pub enum FrontendMessage { layer_widths: HashMap, #[serde(rename = "chainWidths")] chain_widths: HashMap, + #[serde(rename = "hasLeftInputWire")] + has_left_input_wire: HashMap, }, UpdateDialogButtons { #[serde(rename = "layoutTarget")] diff --git a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs index fda5b108..38798a05 100644 --- a/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs +++ b/editor/src/messages/portfolio/document/node_graph/node_graph_message_handler.rs @@ -1076,12 +1076,16 @@ impl<'a> MessageHandler> 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); } } diff --git a/editor/src/messages/portfolio/document/utility_types/network_interface.rs b/editor/src/messages/portfolio/document/utility_types/network_interface.rs index 4e347ef8..023829ab 100644 --- a/editor/src/messages/portfolio/document/utility_types/network_interface.rs +++ b/editor/src/messages/portfolio/document/utility_types/network_interface.rs @@ -2783,10 +2783,10 @@ 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, HashMap) { + pub fn collect_layer_widths(&mut self, network_path: &[NodeId]) -> (HashMap, HashMap, HashMap) { 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 @@ -2794,13 +2794,25 @@ impl NodeNetworkInterface { .iter() .filter_map(|(node_id, _)| if self.is_layer(node_id, network_path) { Some(*node_id) } else { None }) .collect::>(); - ( - nodes - .iter() - .filter_map(|node_id| self.layer_width(node_id, network_path).map(|layer_width| (*node_id, layer_width))) - .collect::>(), - nodes.iter().map(|node_id| (*node_id, self.chain_width(node_id, network_path))).collect::>(), - ) + let layer_widths = nodes + .iter() + .filter_map(|node_id| self.layer_width(node_id, network_path).map(|layer_width| (*node_id, layer_width))) + .collect::>(); + let chain_widths = nodes.iter().map(|node_id| (*node_id, self.chain_width(node_id, network_path))).collect::>(); + 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::>(); + + (layer_widths, chain_widths, has_left_input_wire) } pub fn compute_modified_vector(&self, layer: LayerNodeIdentifier) -> Option { diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte index 219c92fa..c9ad9ae4 100644 --- a/frontend/src/components/views/Graph.svelte +++ b/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}
- + diff --git a/frontend/src/state-providers/node-graph.ts b/frontend/src/state-providers/node-graph.ts index 7416443b..2366a30f 100644 --- a/frontend/src/state-providers/node-graph.ts +++ b/frontend/src/state-providers/node-graph.ts @@ -33,6 +33,7 @@ export function createNodeGraphState(editor: Editor) { contextMenuInformation: undefined as ContextMenuInformation | undefined, layerWidths: new Map(), chainWidths: new Map(), + hasLeftInputWire: new Map(), imports: [] as { outputMetadata: FrontendGraphOutput; position: { x: number; y: number } }[], exports: [] as { inputMetadata: FrontendGraphInput; position: { x: number; y: number } }[], nodes: new Map(), @@ -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; }); }); diff --git a/frontend/src/wasm-communication/messages.ts b/frontend/src/wasm-communication/messages.ts index 45218c28..e4240524 100644 --- a/frontend/src/wasm-communication/messages.ts +++ b/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; @ChainWidths readonly chainWidths!: Map; + @HasLeftInputWire + readonly hasLeftInputWire!: Map; } export class UpdateNodeGraph extends JsMessage {