From 6d72f6ef8ed3152f4b69f116d97c3345674d1be3 Mon Sep 17 00:00:00 2001 From: STEINNI Date: Sun, 8 Feb 2026 12:42:46 +0000 Subject: [PATCH] graflow: tangents of go-around finally OK --- bzGraflow.js | 75 +++++++++++++++++++++++++++++++--------------------- 1 file changed, 45 insertions(+), 30 deletions(-) diff --git a/bzGraflow.js b/bzGraflow.js index 9a512e0..c367072 100644 --- a/bzGraflow.js +++ b/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 }, - s: { x: 0, y: 1 }, - e: { x: 1, y: 0 }, - w: { x: -1, y: 0 }, - } - 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) + + let c1x = Math.floor(x1 + (this.dirVect[port1.direction].x * tension)) + let c1y = Math.floor(y1 + (this.dirVect[port1.direction].y * tension)) + let c2x = Math.floor(x2 + (this.dirVect[port2.direction].x * tension)) + let c2y = Math.floor(y2 + (this.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'){ - c1x = x1 + tension + if(orientation1=='horizontal'){ + 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 } @@ -527,7 +543,7 @@ testEl.classList.add('eic') requestAnimationFrame(frame.bind(this)) } - updateWires(nid, orientation){ + updateWires(nid, orientation){ const wires = Object.keys(this.stagedWires) .filter(id => (id.startsWith(nid+'_')||id.endsWith('_'+nid))) .map(id => this.stagedWires[id]) @@ -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 {