From d8d1a553ca96f6bc4d78fdaf0a5697684242d24d Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Fri, 16 Jan 2026 00:03:14 -0800 Subject: [PATCH] Initial code review --- .../document/document_message_handler.rs | 1 - .../node_graph/node_graph_message_handler.rs | 13 ++++++------ .../document/node_graph/utility_types.rs | 3 ++- .../utility_types/network_interface.rs | 20 +++++++++---------- .../portfolio/document/utility_types/wires.rs | 4 ++-- frontend/src/components/views/Graph.svelte | 18 +++++++++-------- frontend/src/messages.ts | 4 ++-- frontend/src/state-providers/node-graph.ts | 6 +++--- 8 files changed, 36 insertions(+), 33 deletions(-) diff --git a/editor/src/messages/portfolio/document/document_message_handler.rs b/editor/src/messages/portfolio/document/document_message_handler.rs index 4ad632a264..84af03d091 100644 --- a/editor/src/messages/portfolio/document/document_message_handler.rs +++ b/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; 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 f79f17d60b..71541c8a92 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 @@ -79,8 +79,8 @@ pub struct NodeGraphMessageHandler { pub wire_in_progress_from_connector: Option, /// The end point of the dragged line (cannot be moved), stored in node graph coordinates. pub wire_in_progress_to_connector: Option, - /// If the end point should be displayed as a vertical or horizontal connection - pub to_connector_is_layer: bool, + /// 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. @@ -1039,7 +1039,8 @@ impl<'a> MessageHandler> 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> 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, diff --git a/editor/src/messages/portfolio/document/node_graph/utility_types.rs b/editor/src/messages/portfolio/document/node_graph/utility_types.rs index 2ec3de0135..589189d9d1 100644 --- a/editor/src/messages/portfolio/document/node_graph/utility_types.rs +++ b/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)] 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 351e632786..9427d81190 100644 --- a/editor/src/messages/portfolio/document/utility_types/network_interface.rs +++ b/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, - 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 { - 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 { + 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, }) } diff --git a/editor/src/messages/portfolio/document/utility_types/wires.rs b/editor/src/messages/portfolio/document/utility_types/wires.rs index 7aad6977db..4cf539e3de 100644 --- a/editor/src/messages/portfolio/document/utility_types/wires.rs +++ b/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)] diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte index 29c5c1578d..37991d302b 100644 --- a/frontend/src/components/views/Graph.svelte +++ b/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 @@
{#each $nodeGraph.wires.values() as map} - {#each map.values() as { pathString, dataType, thick, dashed }} - {#if thick} + {#each map.values() as { pathString, dataType, forLayerStack, dashed }} + {#if forLayerStack} {#each $nodeGraph.wires.values() as map} - {#each map.values() as { pathString, dataType, thick, dashed }} - {#if !thick} + {#each map.values() as { pathString, dataType, forLayerStack, dashed }} + {#if !forLayerStack} diff --git a/frontend/src/messages.ts b/frontend/src/messages.ts index 4f4ce9afe4..94e06c0ba1 100644 --- a/frontend/src/messages.ts +++ b/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; } diff --git a/frontend/src/state-providers/node-graph.ts b/frontend/src/state-providers/node-graph.ts index 8d716ad845..ff22fe5b17 100644 --- a/frontend/src/state-providers/node-graph.ts +++ b/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(), chainWidths: new Map(), hasLeftInputWire: new Map(), @@ -44,10 +42,12 @@ export function createNodeGraphState(editor: Editor) { visibleNodes: new Set(), /// The index is the exposed input index. The exports have a first key value of u32::MAX. wires: new Map>(), + wirePathInProgress: undefined as WirePathInProgress | undefined, nodeDescriptions: new Map(), nodeTypes: [] as FrontendNodeType[], thumbnails: new Map(), selected: [] as bigint[], + transform: { scale: 1, x: 0, y: 0 }, inSelectedNetwork: true, reorderImportIndex: undefined as number | undefined, reorderExportIndex: undefined as number | undefined,