highlight path on edge hover

Author: wassfila

README.md

@@ -66,6 +66,8 @@ What is already available
   * shadows and light filters
   * inline html and css with classes
 * Mouse and Touch
+  * Highlight neighbors on vertex hover
+  * Highlight path on edge hover
   * Drag Node position with touch
   * Context menu (touch empty area, then second touch on Node)
   * Hover states with touch Node then touch empty area
@@ -123,6 +125,8 @@ Style in js :
 * collect muliple css rules in one litteral string
 * optionally add support for .dot import with [graphlib-dot](https://github.com/dagrejs/graphlib-dot)
 
+# Ideas
+* consider 3d interface such as [this button shadows example](https://lume.io/docs/#/examples/buttons-with-shadow)
 
 # Development
 * Physics engine : Matter.js (looking for wasm accelerated replacement)

src/graph_io.js

@@ -22,7 +22,7 @@ return res;
 }
 
 function select_label(obj){
-    if(config.name_over_label){
+    if(config.io.name_over_label){
         if(defined(obj.name)){
             obj.label = obj.name;
         }else if(defined(obj.properties)){

src/layout.js

@@ -50,6 +50,51 @@ function neighbors_centrality(vertices,center){
     return neighbors
 }
 
+function get_out_edges(edge){
+    let res = []
+    const outV_id = edge.outV.id
+    for(let [eid,e] of Object.entries(edge.outV.edges)){
+        if(e.inV.id == outV_id){
+            res.push(e)
+        }
+    }
+    return res
+}
+
+function get_in_edges(edge){
+    let res = []
+    const inV_id = edge.inV.id
+    for(let [eid,e] of Object.entries(edge.inV.edges)){
+        if(e.outV.id == inV_id){
+            res.push(e)
+        }
+    }
+    return res
+}
+
+function traverse_edges(g,edge,out_stream){
+    for(let [eid,e] of Object.entries(g.edges)){
+        e.seen = false
+    }
+
+    let path_e = new Set()
+    let todo_e = out_stream?get_out_edges(edge):get_in_edges(edge)
+    while(todo_e.length > 0){
+        let current_e = todo_e.shift()
+        if(!current_e.seen){
+            current_e.seen = true
+            path_e.add(current_e)
+            let add_e = out_stream?get_out_edges(current_e):get_in_edges(current_e)
+            todo_e.push(...add_e)
+        }
+    }
+
+    for(let [eid,e] of Object.entries(g.edges)){
+        delete e.seen
+    }
+    return path_e
+}
+
 function remove_add_pinned(g,vertices,already_placed){
     for(let [vid,v] of Object.entries(g.vertices)){
         if(defined(v.pinned) && v.pinned){
@@ -179,6 +224,11 @@ class Layout{
         edges_visibility(g,true)
 
     }
+    traverse_edge_path(graph,edge){
+        const set_up = traverse_edges(graph,edge,true)
+        const set_down = traverse_edges(graph,edge,false)
+        return new Set([...set_up, ...set_down])
+    }
 }
 
 

src/mouse.js

@@ -47,6 +47,12 @@ function onMousePan(e){
     if(["mousemove","touchmove"].includes(e.type)){
         //console.log(`dragging:${state.dragging} , over_vertex:${state.over_vertex}`)
         if(!state.dragging && !state.menu){//then no update for the hover state machine
+            if(!is_edge){
+                if(state.over_edge){
+                    event("edge_hover",{type:"exit",id:state.id})
+                    state.over_edge = false
+                }
+            }
             if(is_vertex){
                 if(!state.over_vertex){
                     state.id = e.target.id
@@ -81,11 +87,6 @@ function onMousePan(e){
                         event("edge_hover",{type:"move",id:state.id,x:pointer_x,y:pointer_y})
                     }
                 }
-            }else{
-                if(state.over_edge){
-                    event("edge_hover",{type:"exit",id:state.id})
-                    state.over_edge = false
-                }
             }
         }
         if(pointe_1 && state.dragging){

src/render.js

@@ -4,10 +4,15 @@ import {Menu} from "./menu.js"
 import {Edge} from "./render/edge_render.js"
 import {Group} from "./render/group_render.js"
 
+import { Layout } from "./layout.js";
+
+
 let utl = new Svg()
 let menu = new Menu()
 let edge = new Edge()
 let group = new Group()
+let layout = new Layout()
+
 
 let g = null;
 let svg = null;
@@ -129,8 +134,20 @@ function onVertexHover(e){
 }
 function onEdgeHover(e){
     const edge = g.edges[e.detail.id]
-    if(e.detail.type != "move"){
-        console.log(`hover over edge (${edge.outV.label},${edge.inV.label}) => ${e.detail.type}`)
+    if(e.detail.type == "enter"){
+        let path_edges_set = layout.traverse_edge_path(g,edge)
+        edge.svg.path.classList.add("hover")
+        for(let p_edge of path_edges_set){
+            p_edge.svg.path.classList.add("hover")
+        }
+        console.log(`hover enter edge (${edge.outV.label} -> ${edge.inV.label})`)
+    }else if(e.detail.type == "exit"){
+        let path_edges_set = layout.traverse_edge_path(g,edge)
+        edge.svg.path.classList.remove("hover")
+        for(let p_edge of path_edges_set){
+            p_edge.svg.path.classList.remove("hover")
+        }
+        console.log(`hover exit edge (${edge.outV.label} -> ${edge.inV.label})`)
     }
 }