git.lucas.co / cce-ui
GPU-accelerated UI toolkit (Vulkan)
git clone https://git.lucas.co/cce-ui.git

commit90972078a285191988be5a32fd85c4cc808223c1
parente8b44fc2b7
authorLucas Galante <[email protected]>
date2026-07-01 18:04
Add size and color settings for node wire connectors

 src/color.rs                | 31 +++++++++++++++++++++++++++++++
 src/layout.rs               | 21 +++++++++++++++++++++
 src/widget/display/graph.rs | 20 ++++++++++----------
 3 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/src/color.rs b/src/color.rs
index 8528b0a..72c5700 100644
--- a/src/color.rs
+++ b/src/color.rs
@@ -84,6 +84,9 @@ static GRAPH_NODE_DRAG_COLOR: RwLock<[f32; 4]> = RwLock::new(NODE_DRAG);
 static GRAPH_WIRE_COLOR: RwLock<[f32; 4]> = RwLock::new([0.1, 0.8, 0.4, 1.0]);
 static GRAPH_WIRE_HIGHLIGHT_COLOR: RwLock<[f32; 4]> = RwLock::new([0.0, 1.0, 0.9, 1.0]);
 
+static GRAPH_CONNECTOR_COLOR: RwLock<[f32; 4]> = RwLock::new([0.1, 0.8, 0.4, 1.0]);
+static GRAPH_CONNECTOR_HIGHLIGHT_COLOR: RwLock<[f32; 4]> = RwLock::new([0.0, 1.0, 0.9, 1.0]);
+
 pub fn button_background_color() -> [f32; 4] {
     *BUTTON_BACKGROUND_COLOR.read().unwrap()
 }
@@ -311,6 +314,12 @@ fn parse_and_set_colors(content: &str) {
     if let Some(c) = get_color("/style/surface/graph/node/wire_highlight_color") {
         if let Ok(mut lock) = GRAPH_WIRE_HIGHLIGHT_COLOR.write() { *lock = c; }
     }
+    if let Some(c) = get_color("/style/surface/graph/node/connector_color") {
+        if let Ok(mut lock) = GRAPH_CONNECTOR_COLOR.write() { *lock = c; }
+    }
+    if let Some(c) = get_color("/style/surface/graph/node/connector_highlight_color") {
+        if let Ok(mut lock) = GRAPH_CONNECTOR_HIGHLIGHT_COLOR.write() { *lock = c; }
+    }
     if let Some(opacity) = val.pointer("/style/surface/graph/opacity").and_then(|v| v.as_f64()) {
         if let Ok(mut lock) = GRAPH_OPACITY.write() { *lock = opacity as f32; }
     }
@@ -407,6 +416,28 @@ pub fn set_graph_wire_highlight_color(color: [f32; 4]) {
     }
 }
 
+pub fn graph_connector_color() -> [f32; 4] {
+    load_colors_once();
+    *GRAPH_CONNECTOR_COLOR.read().unwrap()
+}
+
+pub fn set_graph_connector_color(color: [f32; 4]) {
+    if let Ok(mut lock) = GRAPH_CONNECTOR_COLOR.write() {
+        *lock = color;
+    }
+}
+
+pub fn graph_connector_highlight_color() -> [f32; 4] {
+    load_colors_once();
+    *GRAPH_CONNECTOR_HIGHLIGHT_COLOR.read().unwrap()
+}
+
+pub fn set_graph_connector_highlight_color(color: [f32; 4]) {
+    if let Ok(mut lock) = GRAPH_CONNECTOR_HIGHLIGHT_COLOR.write() {
+        *lock = color;
+    }
+}
+
 pub fn graph_node_color() -> [f32; 4] {
     load_colors_once();
     *GRAPH_NODE_COLOR.read().unwrap()
diff --git a/src/layout.rs b/src/layout.rs
index 9635daa..56ac2a4 100644
--- a/src/layout.rs
+++ b/src/layout.rs
@@ -156,6 +156,9 @@ fn flatten_json_to_flat_props(val: &serde_json::Value, prefix: &str, flat_props:
                 "style.surface.graph.node.wire_highlight_color" => "graph_wire_highlight_color",
                 "style.surface.graph.node.wire_size" => "graph_wire_size",
                 "style.surface.graph.node.wire_activation_radius" => "graph_wire_activation_radius",
+                "style.surface.graph.node.connector_color" => "graph_connector_color",
+                "style.surface.graph.node.connector_highlight_color" => "graph_connector_highlight_color",
+                "style.surface.graph.node.connector_size" => "graph_connector_size",
                 
                 other => {
                     if let Some(rest) = other.strip_prefix("layout.") {
@@ -2558,6 +2561,18 @@ pub fn set_graph_wire_activation_radius(radius: f32) {
     }
 }
 
+pub fn graph_connector_size() -> f32 {
+    lazy_init_style_registry();
+    get_style_registry().read().unwrap().get_float("graph_connector_size").unwrap_or(6.0)
+}
+
+pub fn set_graph_connector_size(size: f32) {
+    lazy_init_style_registry();
+    if let Ok(mut registry) = get_style_registry().write() {
+        registry.set_float("graph_connector_size", size);
+    }
+}
+
 pub fn font_selector_corner_radius() -> f32 {
     lazy_init_style_registry();
     get_style_registry().read().unwrap().get_float("font_selector_corner_radius").unwrap_or(4.0)
@@ -5130,6 +5145,7 @@ mod tests {
         set_graph_node_corner_radius(8.0);
         set_graph_wire_size(10.0);
         set_graph_wire_activation_radius(15.0);
+        set_graph_connector_size(12.0);
 
         assert_eq!(graph_spacing_x(), 200.0);
         assert_eq!(graph_spacing_y(), 100.0);
@@ -5138,6 +5154,7 @@ mod tests {
         assert_eq!(graph_node_corner_radius(), 8.0);
         assert_eq!(graph_wire_size(), 10.0);
         assert_eq!(graph_wire_activation_radius(), 15.0);
+        assert_eq!(graph_connector_size(), 12.0);
 
         crate::color::set_graph_cell_color([0.1, 0.2, 0.3]);
         crate::color::set_graph_gap_color([0.4, 0.5, 0.6]);
@@ -5149,6 +5166,8 @@ mod tests {
         crate::color::set_node_drag_color([0.5, 0.5, 0.5, 1.0]);
         crate::color::set_graph_wire_color([0.1, 0.1, 0.1, 1.0]);
         crate::color::set_graph_wire_highlight_color([0.2, 0.2, 0.2, 1.0]);
+        crate::color::set_graph_connector_color([0.3, 0.3, 0.3, 1.0]);
+        crate::color::set_graph_connector_highlight_color([0.4, 0.4, 0.4, 1.0]);
 
         let cell_color = crate::color::graph_cell_color();
         assert_eq!(cell_color, [0.1, 0.2, 0.3]);
@@ -5162,6 +5181,8 @@ mod tests {
         assert_eq!(crate::color::node_drag_color(), [0.5, 0.5, 0.5, 1.0]);
         assert_eq!(crate::color::graph_wire_color(), [0.1, 0.1, 0.1, 1.0]);
         assert_eq!(crate::color::graph_wire_highlight_color(), [0.2, 0.2, 0.2, 1.0]);
+        assert_eq!(crate::color::graph_connector_color(), [0.3, 0.3, 0.3, 1.0]);
+        assert_eq!(crate::color::graph_connector_highlight_color(), [0.4, 0.4, 0.4, 1.0]);
     }
 }
 
diff --git a/src/widget/display/graph.rs b/src/widget/display/graph.rs
index 5a32da1..b74a95d 100644
--- a/src/widget/display/graph.rs
+++ b/src/widget/display/graph.rs
@@ -861,16 +861,16 @@ impl Element for Graph {
             }
         };
 
-        let w_size = crate::layout::graph_wire_size();
-        let mut w_color = colors::graph_wire_color();
-        let mut w_hl_color = colors::graph_wire_highlight_color();
-        w_color[3] *= self.network_opacity;
-        w_hl_color[3] *= self.network_opacity;
+        let conn_size = crate::layout::graph_connector_size();
+        let mut conn_color = colors::graph_connector_color();
+        let mut conn_hl_color = colors::graph_connector_highlight_color();
+        conn_color[3] *= self.network_opacity;
+        conn_hl_color[3] *= self.network_opacity;
 
         for i in 0..self.nodes.len() {
             if let Some((nx, ny, nw, nh)) = self.node_rect(i) {
                 let scale_f = nw / 80.0;
-                let port_size = (w_size * scale_f).max(2.0);
+                let port_size = (conn_size * scale_f).max(2.0);
                 let base_r = port_size / 2.0;
 
                 let node = &self.nodes[i];
@@ -884,9 +884,9 @@ impl Element for Graph {
                     let is_connecting = self.connecting_from == Some((i, PortType::Input, k));
                     
                     let (r, color) = if is_hovered || is_connecting {
-                        (base_r * 1.4, w_hl_color)
+                        (base_r * 1.4, conn_hl_color)
                     } else {
-                        (base_r, w_color)
+                        (base_r, conn_color)
                     };
                     push_circle_clipped(cx, cy, r, color);
                 }
@@ -900,9 +900,9 @@ impl Element for Graph {
                     let is_connecting = self.connecting_from == Some((i, PortType::Output, k));
                     
                     let (r, color) = if is_hovered || is_connecting {
-                        (base_r * 1.4, w_hl_color)
+                        (base_r * 1.4, conn_hl_color)
                     } else {
-                        (base_r, w_color)
+                        (base_r, conn_color)
                     };
                     push_circle_clipped(cx, cy, r, color);
                 }