nike/buildoz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

graflow: improved landing of temp-wire on hovering dest port + improved test5 example to test it

Browse Source
This commit is contained in:
STEINNI
2026-03-15 18:04:51 +00:00
parent 5de7699182
commit 46a344db74
3 changed files with 63 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
bzGraflow.js
View File

@@ -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
}