draw dot edge long paths until next layout

Author: wassfila

README.md

@@ -52,18 +52,23 @@ In this project, the initial layout is performed with a cost based optimisation
 What is already available
 * Layout
   * stochastic cost driven centrality placement
+  * cost based edge intersection avoidance
   * Nodes physical collisions, no overlap
   * Neighborhood interaction forces
   * step by step demo layout with colred cost samples
+* Grouping
+  * group is a vertex with special edge relation "group"
+  * allows all sorts of grouping, hierarchical and cross groups
+  * Graph mutation to group and ungroup vertices
+* Update Graph
+  * Drag and drop .graphml and .json in Graphson Format
 * SVG
   * shadows and light filters
   * inline html and css with classes
 * Mouse and Touch
   * Drag Node position with touch
   * Context menu (touch empty area, then second touch on Node)
   * Hover states with touch Node then touch empty area
-* Update Graph
-  * Drag and drop .graphml and .json in Graphson Format
 
 ## Features Details
 * Node
@@ -84,9 +89,6 @@ What is already available
 
 # Plan
 What is planned to be implemented in the Future
-* Grouping
-  * Hierarchical
-  * cross Grouping
 * Swap between :
   * proprties
   * nodes
@@ -96,12 +98,13 @@ What is planned to be implemented in the Future
   * color
   * light
   * filter effect
-* Update Graph
+* Graph Layout
+  * use dot engine as a menu option
+* Graph Explore
   * Query Gremlin server
+  * reference node / edge Gremlin query
 * Global hierarchical context menu
   * text input for queries
-* Update Graph
-  * reference node / edge Gremlin query
 * Mouse and Touch
   * Pan zoom whole graph
   * Zoom vertices labels
@@ -110,6 +113,10 @@ What is planned to be implemented in the Future
   * Acceleration (wasm)
 
 ## Plan Details
+* move the whole group when gragging the group vertex
+* apply dot edge path (as long as no updates performed)
+* highlight all path on edge hover
+* multi points edge routing. In case an edge could shift to a certain extent in order to avoid intersection with vertices
 * configure sampling number (in config file)
 * polyline edges (complex concept, unclear and improvement might not be noticable)
 Style in js :

src/graph_io.js

@@ -268,6 +268,17 @@ function import_dot_graph(dot){
         if(defined(dot_e.label)){
             edge.label = dot_e.label
         }
+        let path = dot_e.pos.split(' ')
+        if(path.length > 5){
+            edge.dot_path = []
+            path[0] = path[0].replace("e,","")
+            path.forEach((point,id)=>{
+                if(id!=0){
+                    let [x,y] = point.split(',')
+                    edge.dot_path.push({x:parseFloat(x),y:dot_height-parseFloat(y)})
+                }
+            })
+        }
         return edge
     }
 

src/layout.js

@@ -97,8 +97,21 @@ function show_edges_if(v){
     }
 }
 
+
+function clear_dot(g){
+    for(let [eid,e] of Object.entries(g.edges)){
+        if(defined(e.dot_path)){
+            e.svg.path.classList.add("d_arrow")
+            e.svg.path.classList.remove("dot")
+            delete e.dot_path
+            console.log(e)
+        }
+    }
+}
+
 class Layout{
     async centrals_first(g,params){
+        clear_dot(g)
         let central_order = degree_centrality(g.vertices)
         let already_placed = []
         remove_add_pinned(g,central_order,already_placed)
@@ -129,6 +142,7 @@ class Layout{
     }
 
     async propagate_neighbors(g,params){
+        clear_dot(g)
         let neighbors_order = neighbors_centrality(g.vertices,params.v)
         //neighbors_order.forEach((n)=>{console.log(n.label)})
         let already_placed = []

src/mouse.js

@@ -35,6 +35,7 @@ function get_pointers_default(e,t_id){
 
 function onMousePan(e){
     const is_vertex = e.target.classList.contains("vertex")
+    const is_edge = e.target.classList.contains("edge")
     let pointe_1 = defined(e.buttons)?(e.buttons == 1):(e.touches.length == 1)
     let pointer_2 = defined(e.buttons)?(e.buttons == 2):(e.touches.length == 2)
     let t_id = pointer_2?1:0
@@ -66,6 +67,26 @@ function onMousePan(e){
                     state.over_vertex = false
                 }
             }
+            if(is_edge){
+                if(!state.over_edge){
+                    state.id = e.target.id
+                    state.over_edge = true
+                    event("edge_hover",{type:"enter",id:state.id,x:pointer_x,y:pointer_y})
+                }else{
+                    if(e.target.id != state.id){
+                        event("edge_hover",{type:"exit",id:state.id})//exit old
+                        state.id = e.target.id
+                        event("edge_hover",{type:"enter",id:state.id,x:pointer_x,y:pointer_y})//enter new
+                    }else{
+                        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){
             //console.log(e)

src/render.js

@@ -17,9 +17,11 @@ let menu_v = null;
 let attraction = false;
 let f_hover = {main:null,pointLight:null,dropShadow:null}
 
-const select_color    = "hsl(140, 80%, 50%)"
-const default_color   = "hsl(140, 80%, 90%)"
-const darken_color    = "hsl(140, 80%, 33%)"
+const select_color      = "hsl(140, 80%, 50%)"
+const default_color     = "hsl(140, 80%, 90%)"
+const edge_color        = "hsl(130, 30%, 60%)"
+const edge_select_color = "hsl(100, 80%, 60%)"
+const darken_color      = "hsl(140, 80%, 33%)"
 
 
 
@@ -33,12 +35,8 @@ function onVertexMenuAction(e){
         e.detail.v.svg.shape.classList.remove("pinned")
         menu.update_action("unpin","pin")
     }else if(e.detail.action == "group"){
-        e.detail.v.grouped = true
-        e.detail.v.svg.shape.classList.add("grouped")
         menu.update_action("group","ungroup")
     }else if(e.detail.action == "ungroup"){
-        e.detail.v.grouped = false
-        e.detail.v.svg.shape.classList.remove("grouped")
         menu.update_action("ungroup","group")
     }
 }
@@ -56,7 +54,7 @@ function onVertexContextMenu(e){
         menu_v = g.vertices[e.detail.id]
         let vb = menu_v.viewBox
         let pin_name = menu_v.pinned?"unpin":"pin"
-        let group_name = menu_v.grouped?"ungroup":"group"
+        let group_name = menu_v.group.used?"ungroup":"group"
         let buttons = menu.call({svg:svg,menu:"Vertex",x:vb.x,y:vb.y,actions:["attract","layout",pin_name,group_name]})
         let buttonMenuclick = (e)=>{send("menu_action",{menu:"Vertex",type:"click",action:e.target.getAttribute("data-name"),v:menu_v} )}
         buttons[pin_name].addEventListener( 'click', buttonMenuclick, false );
@@ -129,6 +127,12 @@ function onVertexHover(e){
         f_hover.dropShadow.setAttribute("dy",ly/5)
     }
 }
+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}`)
+    }
+}
 
 function onVertexDrag(e){
     if(e.detail.type == "start"){
@@ -144,6 +148,7 @@ class Render{
     init(graph_data){
         g = graph_data
         window.addEventListener( 'vertex_hover', onVertexHover, false );
+        window.addEventListener( 'edge_hover', onEdgeHover, false );
         window.addEventListener( 'vertex_drag', onVertexDrag, false );
         window.addEventListener( 'context_menu', onContextMenu, false );
         window.addEventListener( 'menu_action', onMenuAction, false );
@@ -195,12 +200,25 @@ class Render{
         }`);
         this.sheet.insertRule(/*css*/`
         .edge.hover {
-            stroke: ${select_color}
+            stroke: ${edge_select_color};
+            fill: ${edge_select_color};
+        }`);
+        this.sheet.insertRule(/*css*/`
+        .edge.dot {
+            stroke-width:2;
+            stroke: ${edge_color};
+            fill:rgba(0,0,0,0)
+        }`);
+        this.sheet.insertRule(/*css*/`
+        .edge.dot.hover {
+            stroke: ${edge_select_color};
+            fill:rgba(0,0,0,0)
         }`);
         this.sheet.insertRule(/*css*/`
         .edge.default {
-            stroke: ${default_color};
-            fill: ${darken_color}
+            stroke-width:2;
+            stroke: ${edge_color};
+            fill: ${edge_color}
         }`);
         document.adoptedStyleSheets = [...document.adoptedStyleSheets, this.sheet];
     }

src/render/edge_render.js

@@ -64,6 +64,15 @@ function path_circle(center,r){
             a ${r},${r} 0,1,0 ${-2*r},0`
 }
 
+function dot_line(e){
+    let path = `M ${e.outV.viewBox.x},${e.outV.viewBox.y} `
+    e.dot_path.forEach((point)=>{
+        path += `L ${point.x},${point.y} `
+    })
+    path += `L ${e.inV.viewBox.x},${e.inV.viewBox.y}`
+    return path
+}
+
 function line_arrow(e){
     if(e.multi.used){
         let p1 = e.outV.viewBox//temporary fill with default
@@ -118,7 +127,11 @@ class Edge{
         let s_width = (1+e.weight*5)
         let svg = {}
         svg.group       = html(top_svg,/*html*/`<g id="edge_${e.label}"/>`)
-        svg.path        = html(svg.group,/*html*/`<path class="edge path default d_arrow" d="${line_arrow(e)}" stroke-width="2" />`)
+        if(e.dot_path){
+            svg.path        = html(svg.group,/*html*/`<path id="${e.id}" class="edge path default dot" d="${dot_line(e)}"  />`)
+        }else{
+            svg.path        = html(svg.group,/*html*/`<path id="${e.id}" class="edge path default d_arrow" d="${line_arrow(e)}" />`)
+        }
         if(defined(e.label)){
             svg.textpath    = html(svg.group,/*html*/`<path id="e_p_${e.id}" d="${text_path(e)}" visibility="hidden" />`)
             svg.text        = html(svg.group,/*html*/` <text class="e_text" class="edge text" >
@@ -136,7 +149,9 @@ class Edge{
         e.svg.group.setAttribute("visibility","visible")
     }
     update(e){
-        if(e.svg.path.classList.contains("d_arrow")){
+        if(e.dot_path){
+            e.svg.path.setAttribute("d",dot_line(e))
+        }else if(e.svg.path.classList.contains("d_arrow")){
             e.svg.path.setAttribute("d",line_arrow(e))
         }else if(e.svg.path.classList.contains("d_line")){
             e.svg.path.setAttribute("d",line_simple(e))