From 46a344db740ffd0d2251ab93f3c259257a4f46f7 Mon Sep 17 00:00:00 2001 From: STEINNI Date: Sun, 15 Mar 2026 18:04:51 +0000 Subject: [PATCH] graflow: improved landing of temp-wire on hovering dest port + improved test5 example to test it --- bzGraflow.js | 46 ++++++++++++++++++----- graflow_examples/flows/testFlow1.json | 4 ++ graflow_examples/nodesLib/nodesTest1.html | 23 ++++++++++++ 3 files changed, 63 insertions(+), 10 deletions(-) diff --git a/bzGraflow.js b/bzGraflow.js index 7f5b05b..4659363 100644 --- a/bzGraflow.js +++ b/bzGraflow.js @@ -1313,12 +1313,23 @@ class EditWires{ } enableSelectPorts(){ + this.currentlyHoveredPort = null const portEls = this.graflow.nodesContainer.querySelectorAll('.port') for(const port of portEls){ port.addEventListener('click', this.onSelectPort.bind(this)) + port.addEventListener('pointerenter', this._onPortPointerEnter.bind(this)) + port.addEventListener('pointerleave', this._onPortPointerLeave.bind(this)) port.classList.add('selectable') } } + + _onPortPointerEnter(e){ + this.currentlyHoveredPort = e.target.closest('.port') + } + + _onPortPointerLeave(e){ + if(this.currentlyHoveredPort === e.target.closest('.port')) this.currentlyHoveredPort = null + } onSelectPort(e){ const port = e.target @@ -1326,7 +1337,8 @@ class EditWires{ this.currentlySelectedPort.style.removeProperty('border') this.currentlySelectedPort = null this.state = null - this.graflow.wiresContainer.removeEventListener('pointermove', this._boundPointerMove) + this._setWirecoatsPointerEvents('') + this.graflow.mainContainer.removeEventListener('pointermove', this._boundPointerMove) if(this.tempwire) this.tempwire.remove() return } @@ -1338,7 +1350,8 @@ class EditWires{ this.currentlySelectedPort.style.removeProperty('border') this.currentlySelectedPort = null this.state = null - this.graflow.wiresContainer.removeEventListener('pointermove', this._boundPointerMove) + this._setWirecoatsPointerEvents('') + this.graflow.mainContainer.removeEventListener('pointermove', this._boundPointerMove) } else { this.tension = parseInt(this.graflow.getBZAttribute('tension')) || 60 this.wireType = this.graflow.getBZAttribute('wiretype') || 'bezier' @@ -1350,12 +1363,20 @@ class EditWires{ port } this.tempwire = document.createElementNS('http://www.w3.org/2000/svg', 'path') + this.tempwire.setAttribute('fill', 'none') + this.tempwire.style.pointerEvents = 'none' this.graflow.wiresContainer.appendChild(this.tempwire) this.tempwire.classList.add('bzgf-wire') - this.graflow.wiresContainer.addEventListener('pointermove', this._boundPointerMove) + this._setWirecoatsPointerEvents('none') + this.graflow.mainContainer.addEventListener('pointermove', this._boundPointerMove) } } + _setWirecoatsPointerEvents(value){ + this.graflow.wiresContainer.querySelectorAll('.bzgf-wirecoat').forEach(el => { el.style.pointerEvents = value }) + } + +//TODO: Check if autoplace sees the wiring changes ! pointerMove(e){ if(!this.state) return @@ -1367,13 +1388,17 @@ class EditWires{ const y1 = Math.floor(p1.y) const x2 = Math.floor(p2.x) const y2 = Math.floor(p2.y) - const dir = port.dataset.direction - const c1x = x1 + this.tension * this.graflow.dirVect[dir].x - const c1y = y1 + this.tension * this.graflow.dirVect[dir].y - const c2x = x2 - this.tension * this.graflow.dirVect[dir].x - const c2y = y2 - this.tension * this.graflow.dirVect[dir].y + const dir1 = port.dataset.direction + const oppositeDir = { n: 's', s: 'n', e: 'w', w: 'e' } + const hovered = this.currentlyHoveredPort + + const dir2 = (hovered && hovered !== port) ? hovered.dataset.direction : oppositeDir[dir1] + const c1x = x1 + this.tension * this.graflow.dirVect[dir1].x + const c1y = y1 + this.tension * this.graflow.dirVect[dir1].y + const c2x = x2 + this.tension * this.graflow.dirVect[dir2].x + const c2y = y2 + this.tension * this.graflow.dirVect[dir2].y const node1 = port.closest('.bzgf-node') - const node2 = { offsetWidth: 0, offsetHeight: 0 } //Fake it for buildsegment + const node2 = hovered?.closest('.bzgf-node') ?? { offsetWidth: 0, offsetHeight: 0 } const seg = this.graflow.buildSegment( x1, y1, c1x, c1y, @@ -1381,7 +1406,7 @@ class EditWires{ x2, y2, this.wireType, node1, node2, - dir, dir, + dir1, dir2, this.tension) if(!seg) return this.tempwire.setAttribute('d', `M ${x1} ${y1} ${seg}`) @@ -1433,6 +1458,7 @@ class EditWires{ if(this.tempwire) { this.tempwire.remove() this.tempwire = null + this.graflow.mainContainer.removeEventListener('pointermove', this._boundPointerMove) } return } diff --git a/graflow_examples/flows/testFlow1.json b/graflow_examples/flows/testFlow1.json index 04a49a1..4c76651 100644 --- a/graflow_examples/flows/testFlow1.json +++ b/graflow_examples/flows/testFlow1.json @@ -33,6 +33,10 @@ { "nodeType": "console", "id": "9999", "coords": { "x": 800, "y": 350} + }, + { "nodeType": "square", + "id": "prng", + "coords": { "x": 250, "y": 400} } ], "links": [ diff --git a/graflow_examples/nodesLib/nodesTest1.html b/graflow_examples/nodesLib/nodesTest1.html index 07533b6..fd7e277 100644 --- a/graflow_examples/nodesLib/nodesTest1.html +++ b/graflow_examples/nodesLib/nodesTest1.html @@ -96,6 +96,16 @@ .bzgf-node[data-nodetype="input"] .title, .bzgf-node[data-nodetype="console"] .title{ background: #555; } + + + .bzgf-node[data-nodetype="square"]{ + background: #FAA; + border-color: #A00; + width: 100px; + height: 100px; + } + .bzgf-node[data-nodetype="square"] .title{ background: #555; } + .bzgf-node[data-nodetype="refnodein"], .bzgf-node[data-nodetype="refnodeout"] { width:3em; height:3em; @@ -188,6 +198,19 @@ + + +