graflow: improving ortho
This commit is contained in:
60
bzGraflow.js
60
bzGraflow.js
@@ -459,9 +459,10 @@ class BZgraflow extends Buildoz{
|
|||||||
return({ x: x - r.left, y: y - r.top })
|
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
|
if(loop) wireType = 'bezier' // loops only use bezier to look good
|
||||||
|
|
||||||
|
const startAxis = ['n', 's'].includes(dir1) ? 'v' : 'h'
|
||||||
if(wireType == 'bezier'){
|
if(wireType == 'bezier'){
|
||||||
return(`C ${c1x} ${c1y}, ${c2x} ${c2y}, ${x2} ${y2}`)
|
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}`)
|
return(`L ${c1x} ${c1y} L ${c2x} ${c2y} L ${x2} ${y2}`)
|
||||||
}
|
}
|
||||||
if(wireType == 'ortho'){
|
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('')
|
return('')
|
||||||
}
|
}
|
||||||
@@ -510,8 +529,7 @@ class BZgraflow extends Buildoz{
|
|||||||
c2y -= 1*tension
|
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('')
|
if(!seg) return('')
|
||||||
return(`M ${x1} ${y1} ${seg}`)
|
return(`M ${x1} ${y1} ${seg}`)
|
||||||
}
|
}
|
||||||
@@ -528,24 +546,12 @@ class BZgraflow extends Buildoz{
|
|||||||
return('')
|
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)
|
// 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)
|
const yEnd = Math.floor(ep.y)
|
||||||
let path = `M ${x1} ${y1} `
|
let path = `M ${x1} ${y1} `
|
||||||
|
|
||||||
|
const entryDir = (orientation == 'horizontal') ? 'w' : 'n'
|
||||||
|
const exitDir = (orientation == 'horizontal') ? 'e' : 's'
|
||||||
let firstPort = port1
|
let firstPort = port1
|
||||||
for(const interNode of interNodes){
|
for(const interNode of interNodes){
|
||||||
const bb = this.stagedNodes[interNode].getBoundingClientRect()
|
const bb = this.stagedNodes[interNode].getBoundingClientRect()
|
||||||
@@ -577,10 +585,10 @@ class BZgraflow extends Buildoz{
|
|||||||
let y2 = Math.floor(entry.y)
|
let y2 = Math.floor(entry.y)
|
||||||
|
|
||||||
if(firstPort){
|
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
|
firstPort = null
|
||||||
} else {
|
} else {
|
||||||
path += makeSegment(x1, y1, x2, y2, orientation, orientation)
|
path += makeSegment(x1, y1, x2, y2, exitDir, entryDir)
|
||||||
}
|
}
|
||||||
|
|
||||||
const x3 = Math.floor(exit.x)
|
const x3 = Math.floor(exit.x)
|
||||||
@@ -590,7 +598,7 @@ class BZgraflow extends Buildoz{
|
|||||||
x1 = x3
|
x1 = x3
|
||||||
y1 = y3
|
y1 = y3
|
||||||
}
|
}
|
||||||
path += ' ' + makeSegment(x1, y1, xEnd, yEnd, orientation, orientation)
|
path += ' ' + makeSegment(x1, y1, xEnd, yEnd, exitDir, port2.direction)
|
||||||
return(path)
|
return(path)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user