diff --git a/bzGraflow.js b/bzGraflow.js index 8d2909c..73e6d61 100644 --- a/bzGraflow.js +++ b/bzGraflow.js @@ -459,7 +459,7 @@ class BZgraflow extends Buildoz{ return({ x: x - r.left, y: y - r.top }) } - buildSegment(x1, y1, c1x, c1y, c2x, c2y, x2, y2, wireType, dir1, dir2, loop=false){ + buildSegment(x1, y1, c1x, c1y, c2x, c2y, x2, y2, wireType, node1, node2, dir1, dir2, tension, loop=false){ if(loop) wireType = 'bezier' // loops only use bezier to look good const startAxis = ['n', 's'].includes(dir1) ? 'v' : 'h' @@ -476,6 +476,16 @@ class BZgraflow extends Buildoz{ 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 if(dir2 == dir1) { // walk-around node + const deviation = node2.offsetWidth / 2 + if(x1>x2) { + if(x1>x2+deviation+tension) return(`V ${c2y} H ${x2} V ${y2}`) + else return(`V ${c1y} H ${x1+deviation+tension} V ${c2y} H ${x2} V ${y2}`) + } else { + if(x1 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 if(dir2 == dir1) { // walk-around node + const deviation = node2.offsetHeight / 2 + if(y1>y2) { + if(y1>y2+deviation+tension) return(`H ${c2x} V ${y2} H ${x2}`) + else return(`H ${c1x} V ${y1+deviation+tension} H ${c2x} V ${y2} H ${x2}`) + } else { + if(y1 { + const makeSegment = (x1, y1, x2, y2, node1, node2, dir1, dir2, tension) => { 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)) + return(this.buildSegment(x1, y1, c1x, c1y, c2x, c2y, x2, y2, wireType, node1, node2, dir1, dir2, tension, false)) } // Start/end points in SVG coords (works for both bezier and line) @@ -585,10 +604,10 @@ class BZgraflow extends Buildoz{ let y2 = Math.floor(entry.y) if(firstPort){ - path += makeSegment(x1, y1, x2, y2, firstPort.direction, entryDir) + path += makeSegment(x1, y1, x2, y2, node1, node2, firstPort.direction, entryDir, tension) firstPort = null } else { - path += makeSegment(x1, y1, x2, y2, exitDir, entryDir) + path += makeSegment(x1, y1, x2, y2, node1, node2, exitDir, entryDir, tension) } const x3 = Math.floor(exit.x) @@ -598,7 +617,7 @@ class BZgraflow extends Buildoz{ x1 = x3 y1 = y3 } - path += ' ' + makeSegment(x1, y1, xEnd, yEnd, exitDir, port2.direction) + path += ' ' + makeSegment(x1, y1, xEnd, yEnd, node1, node2, exitDir, port2.direction, tension) return(path) } @@ -1101,6 +1120,7 @@ class MovingNodes{ pointerDown(e){ this.graflow.clearFakeNodes() const node = (e.target.classList.contains(this.itemSelector)) ? e.target : e.target.closest(this.itemSelector) + if(!node) return const handle = (node.classList.contains(this.handleSelector)) ? node : node.querySelector(this.handleSelector) const rect = node.getBoundingClientRect()