diff --git a/buildoz.css b/buildoz.css index 0bcda5d..0b5faf0 100644 --- a/buildoz.css +++ b/buildoz.css @@ -253,6 +253,6 @@ bz-graflow path.bzgf-wirecoat{ stroke: #0000!important; } bz-graflow path.bzgf-wirecoat:hover{ - stroke: #FF0F!important; + stroke: #FF08!important; } /* BZGRAFLOW_CORE_END */ diff --git a/bzGraflow.js b/bzGraflow.js index 6b327b0..65a593c 100644 --- a/bzGraflow.js +++ b/bzGraflow.js @@ -1012,6 +1012,11 @@ class BZgraflow extends Buildoz{ wire.setAttribute('d', path) } } + this.dispatchEvent(new CustomEvent('wiresUpdated', { + detail: { nid, orientation, LondLinkfix }, + bubbles: true, + composed: true, + })) } getLink(nid1, nid2){ @@ -1277,20 +1282,48 @@ class EditWires{ this.graflow = graflow this.nodesContainer = this.graflow.mainContainer.querySelector('.bzgf-nodes-container') this.state = null + this.graflow.tabIndex = 0 // Make keyboard reactive + this.graflow.addEventListener('refreshed', this.enableEditWires.bind(this)) + this.graflow.addEventListener('wiresUpdated', this.enableEditWires.bind(this)) + this.graflow.addEventListener('keyup', this.onKeyUp.bind(this)) } - enableEditWires(){ + + enableEditWires(){ this.graflow.wiresContainer.querySelectorAll('.bzgf-wirecoat').forEach(item => item.remove()) for(const ref in this.graflow.stagedWires ){ const clone = this.graflow.stagedWires[ref].cloneNode(true) clone.classList.add('bzgf-wirecoat') this.graflow.wiresContainer.appendChild(clone) clone.addEventListener('click', this.onSelectWire.bind(this)) + if(clone.dataset.id == this.currentlySelectedWire?.dataset.id) this.onSelectWire({target: clone}) } } + onSelectWire(e){ const wire = e.target - console.log('wire', wire) + if(this.currentlySelectedWire) this.currentlySelectedWire.style.setProperty('stroke', '#0000', 'important') + if(wire==this.currentlySelectedWire) { + this.currentlySelectedWire = null + return + } + this.currentlySelectedWire = wire + wire.style.setProperty('stroke', '#FF0F', 'important') + } + + onKeyUp(e){ + if((e.key == 'Delete') && this.currentlySelectedWire) { + this.graflow.flow.links = this.graflow.flow.links.filter(link => link.id != this.currentlySelectedWire.dataset.id) + this.graflow.stagedWires[this.currentlySelectedWire.dataset.id].remove() + this.currentlySelectedWire.remove() + this.currentlySelectedWire = null + return + } + if(e.key == 'Escape') { + if(this.currentlySelectedWire) this.currentlySelectedWire.style.setProperty('stroke', '#0000', 'important') + this.currentlySelectedWire = null + return + } } }