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