graflow: select unselect & delete wires

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 */

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,8 +1282,13 @@ 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(){ 
         this.graflow.wiresContainer.querySelectorAll('.bzgf-wirecoat').forEach(item => item.remove())
         for(const ref in this.graflow.stagedWires ){
@@ -1286,11 +1296,34 @@ class EditWires{
             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
+        }
     }
 }