graflow: add wires ok

buildoz.css

@@ -255,4 +255,9 @@ bz-graflow path.bzgf-wirecoat{
 bz-graflow path.bzgf-wirecoat:hover{
     stroke: #FF08!important;
 }
+bz-graflow .bzgf-nodes-container .port.selectable:hover{
+    border: 5px solid #FF08!important;
+    cursor: pointer;
+}
+
 /* BZGRAFLOW_CORE_END */

bzGraflow.js

@@ -91,7 +91,7 @@ class BZgraflow extends Buildoz{
             if(edit.includes('nodesmove')){
                 this.nodesMover = new MovingNodes(this, '.bzgf-node')
             }
-            if(edit.includes('wires')){
+            if(edit.includes('editwires')){
                 this.WiresEditor = new EditWires(this, '.bzgf-wire')
             }
             if(edit.includes('dropnodes')){
@@ -402,7 +402,7 @@ class BZgraflow extends Buildoz{
         return(this.stagedNodes[nid])
     }
 
-    addWire(link){
+    addWire(link){ console.log('addWire', link)
         const [idNode1, idPort1] = link.from
         const [idNode2, idPort2] = link.to
         const path = this.linkNodes(idNode1, idPort1, idNode2, idPort2)
@@ -1186,6 +1186,7 @@ class MovingNodes{
         this.state = null
 
         this.interactiveElementsSelector = `
+            .port,
             input,
             textarea,
             select,
@@ -1198,7 +1199,8 @@ class MovingNodes{
     enableMovingNodes() { 
         if(!this._handleCursorStyle){
             const style = document.createElement('style')
-            style.textContent = `${this.handleSelector}{ cursor: move }`
+            const selector = `${this.handleSelector}:not(${this.interactiveElementsSelector.replace(/\s+/g, ' ').trim()})`
+            style.textContent = `${selector}{ cursor: move }`
             this.nodesContainer.appendChild(style)
             this._handleCursorStyle = style
         }
@@ -1287,6 +1289,7 @@ class EditWires{
         this.graflow.tabIndex = 0 // Make keyboard reactive
 
         this.graflow.addEventListener('refreshed', this.enableEditWires.bind(this))
+        this.graflow.addEventListener('refreshed', this.enableSelectPorts.bind(this))
         this.graflow.addEventListener('wiresUpdated', this.enableEditWires.bind(this))
         this.graflow.addEventListener('keyup', this.onKeyUp.bind(this))
     }
@@ -1302,9 +1305,49 @@ class EditWires{
         }
     }
 
+    enableSelectPorts(){
+        const portEls = this.graflow.nodesContainer.querySelectorAll('.port')
+        for(const port of portEls){
+            port.addEventListener('click', this.onSelectPort.bind(this))
+            port.classList.add('selectable')
+        }
+    }
+    
+    onSelectPort(e){
+        const port = e.target
+        if(this.currentlySelectedPort == port) {
+            this.currentlySelectedPort.style.removeProperty('border') 
+            this.currentlySelectedPort = null
+            return
+        }
+        if(this.currentlySelectedPort) {
+            this.makeWireBetweenPorts(this.currentlySelectedPort, port)
+            this.enableEditWires()
+            this.currentlySelectedPort.style.removeProperty('border') 
+            this.currentlySelectedPort = null
+        } else {
+            this.currentlySelectedPort = port
+            port.style.setProperty('border', '5px solid #FF0', 'important')
+        }
+    }
+
+    makeWireBetweenPorts(port1, port2){
+        const node1 = port1.closest('.bzgf-node')
+        const node2 = port2.closest('.bzgf-node')
+        const idNode1 = node1.dataset.id
+        const idNode2 = node2.dataset.id
+        const idPort1 = port1.dataset.id
+        const idPort2 = port2.dataset.id
+        if(!node1 || !node2 || !port1 || !port2) {
+            console.warn('Link on bad node / port ', idNode1, idPort1, idNode2, idPort2)
+            return('')
+        }
+        this.graflow.addWire({ from: [idNode1, idPort1], to: [idNode2, idPort2] })
+    }
+
     onSelectWire(e){
         const wire = e.target
-        if(this.currentlySelectedWire) this.currentlySelectedWire.style.setProperty('stroke', '#0000', 'important')
+        if(this.currentlySelectedWire) this.currentlySelectedWire.style.removeProperty('stroke') //this.currentlySelectedWire.style.setProperty('stroke', '#0000', 'important')
         if(wire==this.currentlySelectedWire) {
             this.currentlySelectedWire = null
             return

graflow_examples/test5.html

@@ -76,7 +76,7 @@
 	</head>
 
 	<body>
-        <bz-graflow class="compunet" flow="./flows/testFlow1.json" tension="60" isolated edit="nodesmove,wires,dropnodes" >
+        <bz-graflow class="compunet" flow="./flows/testFlow1.json" tension="60" isolated edit="nodesmove,editwires,dropnodes" >
             <div class="demooptions"> <!-- just for demo purposes -->
                 <button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
                 <button data-trigger="onAutoplace1V">Auto-place Vertical</button>