graflow: tangents of go-around finally OK

bzGraflow.js

@@ -1,4 +1,11 @@
 class BZgraflow extends Buildoz{
+    dirVect = {
+        n: { x:  0, y: -1 },
+        s: { x:  0, y:  1 },
+        e: { x:  1, y:  0 },
+        w: { x: -1, y:  0 },
+    }
+    static _loadedNodeStyles = new Set() // Allow multi instances or re-loadNodes, but avoid reinjecting same styles !
 
     constructor(){
         super()
@@ -7,7 +14,6 @@ class BZgraflow extends Buildoz{
         this.stagedWires = { }
         this.arrowDefs = null
     }
-    static _loadedNodeStyles = new Set() // Allow multi instances or re-loadNodes, but avoid reinjecting same styles !
 
     connectedCallback() { 
         super.connectedCallback()
@@ -266,16 +272,11 @@ testEl.classList.add('eic')
         let tension = dist * 0.4
         if(tension < tensionMin) tension = parseInt(tensionMin)
 
-        const dirVect = {
+
-            n: { x:  0, y: -1 },
+        let c1x =  Math.floor(x1 + (this.dirVect[port1.direction].x * tension))
-            s: { x:  0, y:  1 },
+        let c1y =  Math.floor(y1 + (this.dirVect[port1.direction].y * tension))
-            e: { x:  1, y:  0 },
+        let c2x =  Math.floor(x2 + (this.dirVect[port2.direction].x * tension))
-            w: { x: -1, y:  0 },
+        let c2y =  Math.floor(y2 + (this.dirVect[port2.direction].y * tension))
-        }
-        let c1x = x1 + (dirVect[port1.direction].x * tension)
-        let c1y = y1 + (dirVect[port1.direction].y * tension)
-        let c2x = x2 + (dirVect[port2.direction].x * tension)
-        let c2y = y2 + (dirVect[port2.direction].y * tension)
         if(loop){ 
             if(['n', 's'].includes(port1.direction)) {
                 c1x += tension
@@ -291,21 +292,28 @@ testEl.classList.add('eic')
 
     bezierInterNodes(idNode1, idPort1, idNode2, idPort2, interNodes, orientation='horizontal', tensionMin=60) {
         const svgRect = this.wiresContainer.getBoundingClientRect()
-        const makeCubicBezier = (x1, y1, x2, y2, orientation) => {
+        const node1 = this.stagedNodes[idNode1]
+        let port1 = node1.ports[idPort1]
+
+        const makeCubicBezier = (x1, y1, x2, y2, orientation1, orientation2) => {
             const dist = Math.abs(x2 - x1) + Math.abs(y2 - y1)
             let tension = dist * 0.4
-            if(tension < tensionMin) tension = parseInt(tensionMin)     
+            // if(tension < tensionMin) 
+                tension = parseInt(tensionMin)     
             let c1x, c1y, c2x, c2y       
-            if(orientation=='horizontal'){
+            if(orientation1=='horizontal'){
-                c1x = x1 + tension
+                c1x = Math.floor(x1 + tension)
                 c1y = y1 
-                c2x = x2 - tension
-                c2y = y2 
             } else {
                 c1x = x1 
-                c1y = y1 + tension
+                c1y = Math.floor(y1 + tension)
+            }                
+            if(orientation2=='horizontal'){
+                c2x = Math.floor(x2 - tension)
+                c2y = y2 
+            } else {
                 c2x = x2 
-                c2y = y2 - tension                
+                c2y = Math.floor(y2 - tension)                
             }
             return(`C ${c1x} ${c1y}, ${c2x} ${c2y}, ${x2} ${y2}`)
         }
@@ -322,32 +330,40 @@ testEl.classList.add('eic')
             if(orientation=='horizontal'){
                 x2 = bb.x -svgRect.left
                 y2 =Math.floor(bb.y + (bb.height/2)) - svgRect.top
-                path += makeCubicBezier(x1, y1, x2, y2, orientation)
-                x2 += bb.width
-                path += ` L ${x2} ${y2} `
             } else {
                 x2 = Math.floor(bb.x + (bb.width/2)) - svgRect.left
                 y2 = bb.y - svgRect.top
-                path += makeCubicBezier(x1, y1, x2, y2, orientation)
+            }
+
+            if(port1){
+                path += makeCubicBezier(x1, y1, x2, y2, ['w','e'].includes(port1.direction) ? 'horizontal' : 'vertical', orientation)
+                port1 = false
+            } else {
+                path += makeCubicBezier(x1, y1, x2, y2, orientation, orientation)
+            }
+
+            if(orientation=='horizontal'){
+                x2 += bb.width
+                path += ` L ${x2} ${y2} `
+            } else {
                 y2 += bb.height
                 path += ` L ${x2} ${y2} `
             }
+
             x1 = x2
             y1 = y2
         }
         let [x2, y2] = endPath.split(' ')
         x2 = parseInt(x2)
         y2 = parseInt(y2)
-        path += ' '+makeCubicBezier(x1, y1, x2, y2, orientation)
+        path += ' '+makeCubicBezier(x1, y1, x2, y2, orientation, orientation)
         return(path)
     }
 
     autoPlace(orientation = 'horizontal', gapx = 80, gapy = 80, tween=1000){
-
         // Loops create infinite recursion in dfs for getting parents & adjacency lists: Remove them !
         let linksWithoutBackEdges
         if(this.hasAnyLoop(this.flow.nodes, this.flow.links)){
-            console.warn('Loop(s) detected... Cannot auto-place !')
             const backEdges = this.findBackEdges(this.flow.nodes, this.flow.links)
             linksWithoutBackEdges = this.flow.links.filter((link, idx) => (!backEdges.includes(idx)) && (link.from[0] != link.to[0]))
         } else {
@@ -401,7 +417,7 @@ testEl.classList.add('eic')
                         this.moveNode(nid, x, y, orientation, tween)
                         y +=  gapy + bb.height
                     } else {
-                        this.addFakeNode(nid, x, y, wMax, 10)
+                        this.addFakeNode(nid, x, y, wMax*0.75, 10)
                         this.moveNode(nid, x, y, orientation, tween)
                         y +=  gapy + 10 //TODO
                     }
@@ -419,7 +435,7 @@ testEl.classList.add('eic')
                         this.moveNode(nid, x, y, orientation, tween)
                         x +=  gapx + bb.width
                     } else {
-                        this.addFakeNode(nid, x, y, 10, hMax)
+                        this.addFakeNode(nid, x, y, 10, hMax*0.75)
                         this.moveNode(nid, x, y, orientation, tween)
                         x +=  gapx + 10 //TODO
                     }
@@ -649,7 +665,6 @@ testEl.classList.add('eic')
     findLongLinks(links) {
         let linksWithoutBackEdges
         if(this.hasAnyLoop(this.flow.nodes, this.flow.links)){
-            console.warn('Loop(s) detected... Cannot auto-place !')
             const backEdges = this.findBackEdges(this.flow.nodes, this.flow.links)
             linksWithoutBackEdges = this.flow.links.filter((link, idx) => (!backEdges.includes(idx)) && (link.from[0] != link.to[0]))
         } else {