intiated a layout module

Author: wassfila

README.md

@@ -5,43 +5,68 @@ Graph with Physics, No nodes overlap, morph nodes to properties and groups
 https://networkgraphs.github.io/graphysics/
 
 # Features
+What is already available
+* Layout
+  * stochastic cost driven centrality placement
+  * Nodes physical collisions, no overlap
+  * Neighborhood interaction forces
+* 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
 
-# Features details
-* Update Graph
-  * startup Demo
-* stochastic centrality placement
-* Mouse actions
-  * highlight neighbors
+## Features Details
+* Node
+  * hover : highlight neighbors
   * drag node
+* Node context menu
+  * pin / unpin
+  * re-layout pinning current node
 * edges
   * labels on path
 
-# Features Plan
+# Plan
+What is planned to be implemented in the Future
+* Grouping
+  * Hierarchical
+  * cross Grouping
+* Swap between :
+  * proprties
+  * nodes
+  * groups
+* Properties visualisation
+  * shape
+  * color
+  * light
+  * filter effect
 * Update Graph
-  * Right click and select samples
   * Drag and drop .graphml .Graphson
   * Query Gremlin server
-* svg full screen
-  * vertices menu
-  * context menu
+* Global hierarchical context menu
 * Mouse actions
   * bring neighbors closer
-  * reference node centrality layout of the whole graph
   * reference node / edge Gremlin query
-* Swap between :
-  * proprties
-  * nodes
-  * groups
-* Hierarchical and cross Grouping
+* Performance
+  * Analysis
+  * Acceleration (wasm)
 
-## Plan details
+## Plan Details
+* configure sampling number
+* notify edges crossing cost failure
 * edges with polylines and arrows
 * multi-edges
 * graph direction placement left to right for edge labels read
 
-# Development details
-* Matter js as physics engine
-* svr render base, no update
+
+# Development
+* Physics engine : Matter.js
+* SVG : Raw, no libraries, only trensparent utils
+
+## Limitations and issues
+* centrality algo does not necessarily match neighborhood propagation which could result in cross edges cost inconsistencies
 
 # References
 Follow project up from [NetworkGraphs/graph2d](https://github.com/NetworkGraphs/graph2d)
@@ -52,6 +77,10 @@ Follow project up from [NetworkGraphs/graph2d](https://github.com/NetworkGraphs/
 * [SVG Animations](https://svgwg.org/specs/animations/)
 * [CSS Filters](https://developer.mozilla.org/en-US/docs/Web/CSS/filter)
 
-## Graph javasctipt libraries
+## Graph tools and libraries
+### Javascript
 * [Cytoscape](https://js.cytoscape.org/) : Graph theory (network) library for visualisation and analysis
 * [Sigma.js](http://sigmajs.org/) : Sigma is a JavaScript library dedicated to graph drawing. It makes easy to publish networks on Web pages, and allows developers to integrate network exploration in rich Web applications.
+### Java
+* [Gephi](https://gephi.org/) : State of the art graph editing and analysis, focus on big graphs
+

src/layout.js

@@ -0,0 +1,37 @@
+import { defined } from "../libs/web-js-utils.js";
+import {centrality,select_vertex_position} from "./layout/sampling.js"
+
+function remove_add_pinned(g,central_order,already_placed){
+    for(let [vid,v] of Object.entries(g.vertices)){
+        if(defined(v.pinned) && v.pinned){
+            already_placed.push(v)
+            central_order.splice(central_order.indexOf(v),1)
+        }
+    }
+}
+
+class Layout{
+    centrals_first(g,params){
+        let central_order = centrality(g.vertices)
+        let already_placed = []
+        remove_add_pinned(g,central_order,already_placed)
+        
+        for(let [vid,v] of Object.entries(central_order)){
+            [v.viewBox.x,v.viewBox.y] = select_vertex_position(v,already_placed,params.width,params.height)//for debug : ,(v.id==6)
+            already_placed.push(v)
+        }
+    }
+    propagate_neighbors(g,params){
+        let central_order = centrality(g.vertices)
+        let already_placed = []
+        remove_add_pinned(g,central_order,already_placed)
+        
+        for(let [vid,v] of Object.entries(central_order)){
+            [v.viewBox.x,v.viewBox.y] = select_vertex_position(v,already_placed,params.width,params.height)//for debug : ,(v.id==6)
+            already_placed.push(v)
+        }
+    }
+}
+
+
+export{Layout};

src/layout/sampling.js

@@ -178,6 +178,7 @@ function select_vertex_position(v,placed,width,height,debug=false){
     g_debug = debug
     let best_index = -1
     let best_cost = Number.MAX_VALUE;
+    let i_costs = []
     const nb_samples = 100
     let samples = samples_in_rect(nb_samples,width,height,v.viewBox.width,v.viewBox.height)
     for(let i=0;i<nb_samples;i++){
@@ -188,6 +189,7 @@ function select_vertex_position(v,placed,width,height,debug=false){
         v.viewBox.x = s.x
         v.viewBox.y = s.y
         const i_cost = interset_cost(v,placed)
+        i_costs.push(i_cost)
         const cost = dist_cost + i_cost
         if(debug){
             console.log(`total:${cost.toFixed(2)} , dist_cost: ${dist_cost.toFixed(2)} , i_cost:${i_cost}`)
@@ -207,6 +209,14 @@ function select_vertex_position(v,placed,width,height,debug=false){
                     ]
         return [x,y]
     }else{
+        //console.log(`best_index for  ${v.label} : ${best_index}`)
+        //let msg = "placed : "
+        //placed.forEach((p)=>{msg += `${p.label} `})
+        //console.log(msg)
+        //console.log(i_costs)
+        if(i_costs[best_index] == 1){
+            console.log(`i_cost failed for ${v.label}`)
+        }
         let best_sample = samples[best_index]
         v.viewBox.x = best_sample.x
         v.viewBox.y = best_sample.y

src/menu.js

@@ -45,7 +45,6 @@ function onPointerDown(e){
     if(pointer_2 || (!e.target.classList.contains("svg_menu"))){
         remove()
     }
-    console.log(e.target.tagName)
 }
 
 function onContext(e){

src/physics.js

@@ -1,5 +1,5 @@
-import {centrality,select_vertex_position} from "./layout/sampling.js"
 import { defined } from "../libs/web-js-utils.js";
+import { Layout } from "./layout.js";
 
 let g = null;
 let engine = null;
@@ -8,6 +8,7 @@ let last_run = 0;
 let last_delta = 0;
 let drag = {}
 let to_run_layout = false
+let layout = new Layout()
 
 function get_delta_correction(){
     let delta = 1000/60;            //used as default for first interations only
@@ -69,35 +70,30 @@ function onMenuAction(e){
     if(e.detail.action == "layout"){
         e.detail.v.pinned = true
         e.detail.v.svg.shape.classList.add("pinned")
-        layout(false)
+        layout.propagate_neighbors(g,{width:width,height:height,v:e.detail.v})
+        place_bodies()
     }
 }
 
-function layout(create = true){
-    let central_order = centrality(g.vertices)
-    let already_placed = []
+function create_bodies(){
     for(let [vid,v] of Object.entries(g.vertices)){
-        if(defined(v.pinned) && v.pinned){
-            already_placed.push(v)
-            central_order.splice(central_order.indexOf(v),1)
-        }
+        v.body = Matter.Bodies.rectangle(v.viewBox.x,v.viewBox.y,v.viewBox.width,v.viewBox.height,
+            {id:v.id,label:v.label,mass:5,frictionAir:0.3}
+            )
+        Matter.World.addBody(engine.world,v.body)
+        v.viewBox.moved = true
     }
-    
-    for(let [vid,v] of Object.entries(central_order)){
-        [v.viewBox.x,v.viewBox.y] = select_vertex_position(v,already_placed,width,height)//for debug : ,(v.id==6)
-        already_placed.push(v)
-        if(create){
-            v.body = Matter.Bodies.rectangle(v.viewBox.x,v.viewBox.y,v.viewBox.width,v.viewBox.height,
-                {id:v.id,label:v.label,mass:5,frictionAir:0.3}
-                )
-            Matter.World.addBody(engine.world,v.body)
-            v.viewBox.moved = true
-        }else{
+}
+
+function place_bodies(){
+    for(let [vid,v] of Object.entries(g.vertices)){
+        if(!defined(v.pinned) || !v.pinned){
             Matter.Body.setPosition(v.body,Matter.Vector.create(v.viewBox.x,v.viewBox.y))
             v.viewBox.moved |= true
         }
     }
 }
+
 class Physics{
     constructor(graph_data){
         g = graph_data
@@ -111,7 +107,8 @@ class Physics{
     create(parent_div){
         width = parent_div.offsetWidth
         height = parent_div.offsetHeight
-        layout(true)
+        layout.centrals_first(g,{width:width,height:height})
+        create_bodies()
     }
 
     run(){