graflow: improving ortho

app/assets/html/test6.html

@@ -53,6 +53,8 @@
         <script>
             window.addEventListener('load',()=>{
                 let grflw1 = document.querySelector('bz-graflow.compunet')
+                grflw1.setAttribute('tension', document.querySelector('input[data-id="compunet"]').value)
+                grflw1.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)
                 grflw1.addEventListener('subflowLoaded',
                     (evt) => { grflw1 = evt.detail.subflow }
                 )
@@ -91,7 +93,7 @@
                     <option value="straight">Straight</option>
                     <option value="bezier" selected>Bezier</option>
                 </select>
-                <div class-"cols-2"=""><label>tension</label><input data-id="compunet" type="number" size="2" value="60"></div>
+                <div class-"cols-2"=""><label>tension</label><input data-id="compunet" type="number" size="2" value="20"></div>
             </div>
         </bz-graflow>
 

app/assets/json/bzGraflow/testFlow16ports.json

@@ -4,7 +4,7 @@
         "nodes":[
             {   "nodeType": "square",
                 "id": "p1center",
-                "coords": { "x": 500, "y": 200},
+                "coords": { "x": 300, "y": 200},
                 "markup": { 
                     "title": "Center",
                     "subtitle": "."
@@ -12,7 +12,7 @@
             },
             {   "nodeType": "square",
                 "id": "p1west",
-                "coords": { "x": 400, "y": 200},
+                "coords": { "x": 200, "y": 200},
                 "markup": { 
                     "title": "West",
                     "subtitle": "."
@@ -20,7 +20,7 @@
             }, 
             {   "nodeType": "square",
                 "id": "p1north",
-                "coords": { "x": 500, "y": 100},
+                "coords": { "x": 300, "y": 100},
                 "markup": { 
                     "title": "North",
                     "subtitle": "."
@@ -28,7 +28,7 @@
             },
             {   "nodeType": "square",
                 "id": "p1east",
-                "coords": { "x": 600, "y": 200},
+                "coords": { "x": 400, "y": 200},
                 "markup": { 
                     "title": "East",
                     "subtitle": "."
@@ -36,7 +36,49 @@
             },
             {   "nodeType": "square",
                 "id": "p1south",
-                "coords": { "x": 500, "y": 300},
+                "coords": { "x": 300, "y": 300},
+                "markup": { 
+                    "title": "South",
+                    "subtitle": "."
+                }
+            },
+
+
+        {   "nodeType": "square",
+            "id": "p2center",
+            "coords": { "x": 800, "y": 200},
+            "markup": { 
+                "title": "Center",
+                "subtitle": "."
+            }
+        },
+        {   "nodeType": "square",
+            "id": "p2west",
+            "coords": { "x": 700, "y": 200},
+            "markup": { 
+                "title": "West",
+                "subtitle": "."
+            }
+        }, 
+        {   "nodeType": "square",
+            "id": "p2north",
+            "coords": { "x": 800, "y": 100},
+            "markup": { 
+                "title": "North",
+                "subtitle": "."
+            }
+        },
+        {   "nodeType": "square",
+            "id": "p2east",
+            "coords": { "x": 900, "y": 200},
+            "markup": { 
+                "title": "East",
+                "subtitle": "."
+            }
+        },
+        {   "nodeType": "square",
+            "id": "p2south",
+            "coords": { "x": 800, "y": 300},
             "markup": { 
                 "title": "South",
                 "subtitle": "."
@@ -47,7 +89,12 @@
             { "from": ["p1center", "s"], "to": ["p1south", "n"] },
             { "from": ["p1center", "e"], "to": ["p1east", "w"] },
             { "from": ["p1center", "n"], "to": ["p1north", "s"] },
-            { "from": ["p1center", "w"], "to": ["p1west", "e"] }
+            { "from": ["p1center", "w"], "to": ["p1west", "e"] },
+
+            { "from": ["p2center", "s"], "to": ["p2south", "e"] },
+            { "from": ["p2center", "e"], "to": ["p2east", "n"] },
+            { "from": ["p2center", "n"], "to": ["p2north", "w"] },
+            { "from": ["p2center", "w"], "to": ["p2west", "s"] }
         ]
     }
 }

app/thirdparty/buildoz/bzGraflow.js

@@ -459,9 +459,10 @@ class BZgraflow extends Buildoz{
         return({ x: x - r.left, y: y - r.top })
     }
 
-    buildSegment(x1, y1, c1x, c1y, c2x, c2y, x2, y2, wireType, startAxis, loop=false){
+    buildSegment(x1, y1, c1x, c1y, c2x, c2y, x2, y2, wireType, dir1, dir2, loop=false){        
         if(loop) wireType = 'bezier' // loops only use bezier to look good
         
+        const startAxis = ['n', 's'].includes(dir1) ? 'v' : 'h'
         if(wireType == 'bezier'){
             return(`C ${c1x} ${c1y}, ${c2x} ${c2y}, ${x2} ${y2}`)
         }
@@ -469,8 +470,26 @@ class BZgraflow extends Buildoz{
             return(`L ${c1x} ${c1y} L ${c2x} ${c2y} L ${x2} ${y2}`)
         }
         if(wireType == 'ortho'){
-            if(startAxis == 'v') return(`V ${(c1y + c2y) / 2} H ${c2x} V ${y2}`)
+            const medianx = (x1 + x2) / 2
-            else return(`H ${(c1x + c2x) / 2} V ${c2y} H ${x2}`)
+            const mediany = (y1 + y2) / 2
+            if(startAxis == 'v') {
+                if( ((dir1 == 's') && (c1y < mediany)) || ((dir1 == 'n') && (c1y > mediany)) ){ 
+                    if( (dir2=='e') && (c2x > x1) || (dir2=='w') && (c2x < x1)) return(`V ${mediany} H ${c2x} V ${y2} H ${x2}`)
+                    else if((dir2=='e') || (dir2=='w')) return(`V ${y2} H ${x2}`)
+                    else return(`V ${mediany} H ${c2x} V ${y2} H ${x2}`)
+                } else {
+                    return(`V ${c1y} H ${medianx} V ${c2y} H ${x2} V ${y2}`)
+                }
+            } 
+            else {   
+                if( ((dir1 == 'e') && (c1x <medianx)) || ((dir1 == 'w') && (c1x > medianx)) ){                     
+                    if( (dir2=='s') && (c2y > y1) || (dir2=='n') && (c2y < y1)) return(`H ${medianx} V ${c2y} H ${x2} V ${y2}`)
+                    else if((dir2=='n') || (dir2=='s')) return(`H ${x2} V ${y2}`)
+                    else return(`H ${medianx} V ${c2y} H ${x2} V ${y2}`)
+                } else {  
+                    return(`H ${c1x} V ${mediany} H ${c2x} V ${y2} H ${x2}`)
+                }
+            }
         }
         return('')
     }
@@ -510,8 +529,7 @@ class BZgraflow extends Buildoz{
                 c2y -= 1*tension
             }
         }
-        const startAxis = ['n', 's'].includes(port1.direction) ? 'v' : 'h'
+        const seg = this.buildSegment(x1, y1, c1x, c1y, c2x, c2y, x2, y2, wireType, port1.direction, port2.direction, loop)
-        const seg = this.buildSegment(x1, y1, c1x, c1y, c2x, c2y, x2, y2, wireType, startAxis, loop)
         if(!seg) return('')
         return(`M ${x1} ${y1} ${seg}`)
     }
@@ -528,24 +546,12 @@ class BZgraflow extends Buildoz{
             return('')
         }
 
-        const makeSegment = (x1, y1, x2, y2, orientation1, orientation2) => {
+        const makeSegment = (x1, y1, x2, y2, dir1, dir2) => {
-            let c1x, c1y, c2x, c2y
+            const c1x = Math.floor(x1 + (this.dirVect[dir1].x * tension))
-            if(orientation1=='horizontal') {
+            const c1y = Math.floor(y1 + (this.dirVect[dir1].y * tension))
-                c1x = Math.floor(x1 + tension)
+            const c2x = Math.floor(x2 + (this.dirVect[dir2].x * tension))
-                c1y = y1
+            const c2y = Math.floor(y2 + (this.dirVect[dir2].y * tension))
-            } else {
+            return(this.buildSegment(x1, y1, c1x, c1y, c2x, c2y, x2, y2, wireType, dir1, dir2, false))
-                c1x = x1
-                c1y = Math.floor(y1 + tension)
-            }
-            if(orientation2=='horizontal') {
-                c2x = Math.floor(x2 - tension)
-                c2y = y2
-            } else {
-                c2x = x2
-                c2y = Math.floor(y2 - tension)
-            }
-            const startAxis = (orientation1=='vertical') ? 'v' : 'h'
-            return(this.buildSegment(x1, y1, c1x, c1y, c2x, c2y, x2, y2, wireType, startAxis, false))
         }
 
         // Start/end points in SVG coords (works for both bezier and line)
@@ -559,6 +565,8 @@ class BZgraflow extends Buildoz{
         const yEnd = Math.floor(ep.y)
         let path = `M ${x1} ${y1} `
 
+        const entryDir = (orientation == 'horizontal') ? 'w' : 'n'
+        const exitDir = (orientation == 'horizontal') ? 'e' : 's'
         let firstPort = port1
         for(const interNode of interNodes){
             const bb = this.stagedNodes[interNode].getBoundingClientRect()
@@ -577,10 +585,10 @@ class BZgraflow extends Buildoz{
             let y2 = Math.floor(entry.y)
 
             if(firstPort){
-                path += makeSegment(x1, y1, x2, y2, ['w','e'].includes(firstPort.direction) ? 'horizontal' : 'vertical', orientation)
+                path += makeSegment(x1, y1, x2, y2, firstPort.direction, entryDir)
                 firstPort = null
             } else {
-                path += makeSegment(x1, y1, x2, y2, orientation, orientation)
+                path += makeSegment(x1, y1, x2, y2, exitDir, entryDir)
             }
 
             const x3 = Math.floor(exit.x)
@@ -590,7 +598,7 @@ class BZgraflow extends Buildoz{
             x1 = x3
             y1 = y3
         }
-        path += ' ' + makeSegment(x1, y1, xEnd, yEnd, orientation, orientation)
+        path += ' ' + makeSegment(x1, y1, xEnd, yEnd, exitDir, port2.direction)
         return(path)
     }