diff --git a/buildoz.css b/buildoz.css index 0b5faf0..90db086 100644 --- a/buildoz.css +++ b/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 */ diff --git a/bzGraflow.js b/bzGraflow.js index 30c616b..3076f1f 100644 --- a/bzGraflow.js +++ b/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 diff --git a/graflow_examples/test5.html b/graflow_examples/test5.html index 46d9c64..4019f0d 100644 --- a/graflow_examples/test5.html +++ b/graflow_examples/test5.html @@ -76,7 +76,7 @@
-