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

bzGraflow.js

@@ -1313,20 +1313,32 @@ 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
         if(this.currentlySelectedPort == port) {
             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 dir1 = port.dataset.direction
-        const c1x = x1 + this.tension * this.graflow.dirVect[dir].x
+        const oppositeDir = { n: 's', s: 'n', e: 'w', w: 'e' }
-        const c1y = y1 + this.tension * this.graflow.dirVect[dir].y
+        const hovered = this.currentlyHoveredPort
-        const c2x = x2 - this.tension * this.graflow.dirVect[dir].x
+
-        const c2y = y2 - this.tension * this.graflow.dirVect[dir].y
+        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
         }

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": [

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 @@
     </div>
 </template>
 
+<template>
+    <div class="bzgf-node" data-nodetype="square">
+        <div class="title">PRNG</div>
+        <div class="body"></div>
+        <div class="port" data-type="out" data-id="w" data-direction="w"></div>
+        <div class="port" data-type="out" data-id="n" data-direction="n"></div>
+        <div class="port" data-type="out" data-id="e" data-direction="e"></div>
+        <div class="port" data-type="out" data-id="s" data-direction="s"></div>
+
+    </div>
+</template>
+
+
 <template>
     <div class="bzgf-node" data-nodetype="refnodein">
             <div class="body">{parentport}</div>