tawasuyu/brahman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gioser-graph: exaggerated thickness & brightness, edges behind with pointer-events:none

Browse Source 
- Stroke width: 1.5 + w*8.0 (range 3-10px) for dramatic variation
- Brightness: w*0.7 factor, low weight = pure blended color, high weight ≈ white
- Opacity: 0.40 + w*0.55 (40-95%)
- Edges group gets .gb-edge-group { pointer-events: none } so clicks pass to nodes
- Visual layer: edges_group (behind) → nodes_group (front) in SVG
This commit is contained in:
Sergio
2026-05-23 16:00:28 +00:00
parent 906e5f639c
commit ac894390f9
2 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/apps/gioser-web/pkg/gioser_web_bg.wasm
BIN
View File
Binary file not shown.
crates/modules/gioser/gioser-graph-web/src/lib.rs
+13 -9
View File
@@ -203,6 +203,7 @@ impl GraphWidget {
.gb-svg { animation: graph-breathe 5s ease-in-out infinite; }\ .gb-svg { animation: graph-breathe 5s ease-in-out infinite; }\
.gb-node { transition: filter 250ms ease, opacity 200ms ease; }\ .gb-node { transition: filter 250ms ease, opacity 200ms ease; }\
.gb-node:hover { filter: drop-shadow(0 0 14px rgba(255,255,255,0.2)); }\ .gb-node:hover { filter: drop-shadow(0 0 14px rgba(255,255,255,0.2)); }\
.gb-edge-group { pointer-events: none; }\
.gb-line { transition: opacity 400ms ease; }", .gb-line { transition: opacity 400ms ease; }",
)); ));
svg.append_child(&style_el).ok(); svg.append_child(&style_el).ok();
@@ -214,6 +215,7 @@ impl GraphWidget {
.unwrap() .unwrap()
.dyn_into() .dyn_into()
.unwrap(); .unwrap();
edges_group.set_attribute("class", "gb-edge-group").ok();
// Grupo para nodos (con respiración, encima) // Grupo para nodos (con respiración, encima)
let nodes_group: web_sys::SvgElement = self let nodes_group: web_sys::SvgElement = self
@@ -251,19 +253,21 @@ impl GraphWidget {
let c2 = color_map.get(edge.target.as_str()).copied().unwrap_or("#888"); let c2 = color_map.get(edge.target.as_str()).copied().unwrap_or("#888");
let w = edge.weight.unwrap_or(0.7); let w = edge.weight.unwrap_or(0.7);
// Sin normalización por max — usar weight directamente con más rango // EXAGERADO: grosor 1 a 10px, máximo contraste
// weight 0.5→0.8 suele ser el rango real; mapeamos a grosor visible // weight 0.50 → 3px, weight 0.95 → 9px
let thick = 0.6 + w * 4.0; // w=0.5→2.6, w=0.9→4.2, w=1.0→4.6 let thick = 1.5 + w * 8.0;
// Mezclar colores: 50/50 + brillo según weight // Color más saturado: mezcla sin gris, cada canal al extremo
let blended = blend_colors(c1, c2, 0.5); let blended = blend_colors(c1, c2, 0.5);
let (br, bg, bb) = parse_hex(&blended); let (br, bg, bb) = parse_hex(&blended);
let bright_factor = 0.2 + w * 0.5; // más brillo directo // Brillo exagerado: peso bajo = color puro; peso alto → blanco
let r = (br as f64 + (255.0 - br as f64) * bright_factor) as u32; let bright_factor = w * 0.7;
let g = (bg as f64 + (255.0 - bg as f64) * bright_factor) as u32; let r = (br as f64 + (255.0 - br as f64) * bright_factor).min(255.0) as u32;
let b = (bb as f64 + (255.0 - bb as f64) * bright_factor) as u32; let g = (bg as f64 + (255.0 - bg as f64) * bright_factor).min(255.0) as u32;
let b = (bb as f64 + (255.0 - bb as f64) * bright_factor).min(255.0) as u32;
let alpha = 0.15 + w * 0.75; // Opacidad: peso bajo = 40%, peso alto = 95%
let alpha = 0.40 + w * 0.55;
let line: SvgLineElement = self let line: SvgLineElement = self
.document .document