From 6ffdb790010f70070b8b8174d20979215a76988e Mon Sep 17 00:00:00 2001 From: STEINNI Date: Wed, 4 Mar 2026 20:48:50 +0000 Subject: [PATCH] graflow: improving ortho --- bzGraflow.js | 62 +++++++++++++++++++++++++++++----------------------- 1 file changed, 35 insertions(+), 27 deletions(-) diff --git a/bzGraflow.js b/bzGraflow.js index 7431b5a..8d2909c 100644 --- a/bzGraflow.js +++ b/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}`) - else return(`H ${(c1x + c2x) / 2} V ${c2y} H ${x2}`) + const medianx = (x1 + x2) / 2 + 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)) ){ + 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, startAxis, loop) + const seg = this.buildSegment(x1, y1, c1x, c1y, c2x, c2y, x2, y2, wireType, port1.direction, port2.direction, 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) => { - let c1x, c1y, c2x, c2y - if(orientation1=='horizontal') { - c1x = Math.floor(x1 + tension) - c1y = y1 - } else { - 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)) + const makeSegment = (x1, y1, x2, y2, dir1, dir2) => { + const c1x = Math.floor(x1 + (this.dirVect[dir1].x * tension)) + const c1y = Math.floor(y1 + (this.dirVect[dir1].y * tension)) + const c2x = Math.floor(x2 + (this.dirVect[dir2].x * tension)) + const c2y = Math.floor(y2 + (this.dirVect[dir2].y * tension)) + return(this.buildSegment(x1, y1, c1x, c1y, c2x, c2y, x2, y2, wireType, dir1, dir2, 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) }