fireEvent + graflow uses new-style fireEvent

bzGraflow.js

@@ -125,11 +125,7 @@ class BZgraflow extends Buildoz{
         await this.loadNodes(flowObj.nodesFile)
         this.flow = flowObj.flow
         this.refresh()
-        this.dispatchEvent(new CustomEvent('flowLoaded', {
-            detail: { url },
-            bubbles: true,
-            composed: true,
-        }))
+        this.fireEvent('flowLoaded', { url: url })
     }
 
     async loadNodes(url) {
@@ -172,11 +168,7 @@ class BZgraflow extends Buildoz{
                 BZgraflow._loadedNodeStyles.add(url)
             }
         }
-        this.dispatchEvent(new CustomEvent('nodesLoaded', {
-            detail: { url },
-            bubbles: true,
-            composed: true,
-        }))
+        this.fireEvent('nodesLoaded', { url: url })
     }
 
     addNode(node){ 
@@ -238,7 +230,7 @@ class BZgraflow extends Buildoz{
         this.invade(this, childEl)
         childEl.hostContainer.appendChild(btnExitSubflow)
 
-        childEl.addEventListener('flowLoaded', (e) => {
+        childEl.addEventListener('bz:graflow:flowLoaded', (e) => {
             for(const portLink of flowNode.subflow.portLinks){
                 const nid = crypto.randomUUID()
                 childEl.addNode({   
@@ -302,12 +294,8 @@ class BZgraflow extends Buildoz{
             this.hostContainer.style.visibility = 'hidden'
             childEl.style.transform = 'none' // Important for nested subflows to position correctly
             childEl.style.willChange = ''
-            newEl.style.overflow = 'auto'
-            this.dispatchEvent(new CustomEvent('subflowLoaded', {
-                detail: { subflow: childEl },
-                bubbles: true,
-                composed: true,
-            }))
+            childEl.style.overflow = 'auto'
+            this.fireEvent('subflowLoaded', { subflow: childEl })
         }, { once:true })
     }
 
@@ -382,11 +370,7 @@ class BZgraflow extends Buildoz{
             this.hostContainer.style.opacity = '1'
             this.hostContainer.style.visibility = 'visible'
             childEl.style.willChange = ''
-            this.dispatchEvent(new CustomEvent('subflowExited', {
-                detail: { subflow: childEl },
-                bubbles: true,
-                composed: true,
-            }))
+            this.fireEvent('subflowExited', { subflow: childEl })
         }, { once:true })
     }
     
@@ -450,11 +434,7 @@ class BZgraflow extends Buildoz{
             else this.currentOrientation = 'vertical'
         }
         if(forceAutoplace) this.autoPlace(this.currentOrientation) 
-        this.dispatchEvent(new CustomEvent('refreshed', {
-            detail: { },
-            bubbles: true,
-            composed: true,
-        }))            
+        this.fireEvent('refreshed', { })
     }
 
     // Convert viewport (client) coordinates to this instance's SVG local coordinates.
@@ -993,11 +973,7 @@ class BZgraflow extends Buildoz{
             
             if(p < 1) requestAnimationFrame(frame.bind(this))
             else{
-                this.dispatchEvent(new CustomEvent('nodeMoved', {
-                    detail: { nid, x, y },
-                    bubbles: true,
-                    composed: true,
-                }))
+                this.fireEvent('nodeMoved', { nid, x, y })
             }
         }    
         requestAnimationFrame(frame.bind(this))
@@ -1021,11 +997,7 @@ class BZgraflow extends Buildoz{
                 wire.setAttribute('d', path)
             }
         }
-        this.dispatchEvent(new CustomEvent('wiresUpdated', {
-            detail: { nid, orientation, LondLinkfix },
-            bubbles: true,
-            composed: true,
-        }))
+        this.fireEvent('wiresUpdated', { nid, orientation, LondLinkfix })
     }
     
     getLink(nid1, nid2){
@@ -1200,7 +1172,7 @@ class MovingNodes{
         this._boundPointerDown = this.pointerDown.bind(this)
         this._boundPointerMove = this.pointerMove.bind(this)
         this._boundPointerUp = this.pointerUp.bind(this)
-        this.graflow.addEventListener('refreshed', this.enableMovingNodes.bind(this))
+        this.graflow.addEventListener('bz:graflow:refreshed', this.enableMovingNodes.bind(this))
     }
     
     enableMovingNodes() { 
@@ -1285,6 +1257,8 @@ class MovingNodes{
         this.state.node.releasePointerCapture(e.pointerId)
         this.state.node.style.pointerEvents = ''
         this.state = null
+
+        this.graflow.fireEvent('nodeMoved', { nodeId: this.state.node.dataset.id, x: this.state.x, y: this.state.y })
     }
 }
 
@@ -1295,9 +1269,9 @@ class EditWires{
         this.state = null
         this.graflow.tabIndex = 0 // Make keyboard reactive
         this._boundPointerMove = this.pointerMove.bind(this)
-        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('bz:graflow:refreshed', this.enableEditWires.bind(this))
+        this.graflow.addEventListener('bz:graflow:refreshed', this.enableSelectPorts.bind(this))
+        this.graflow.addEventListener('bz:graflow:wiresUpdated', this.enableEditWires.bind(this))
         this.graflow.addEventListener('keyup', this.onKeyUp.bind(this))
     }
 
@@ -1422,6 +1396,7 @@ class EditWires{
             return('')
         }
         this.graflow.addWire({ from: [idNode1, idPort1], to: [idNode2, idPort2] })
+        this.graflow.fireEvent('wireAdded', { from: [idNode1, idPort1], to: [idNode2, idPort2], id: `${idNode1}_${idNode2}` })
     }
 
     onSelectWire(e){
@@ -1446,6 +1421,7 @@ class EditWires{
             delete this.graflow.stagedWires[wireId]
             this.currentlySelectedWire.remove()
             this.currentlySelectedWire = null
+            this.graflow.fireEvent('wireRemoved', { wireId })
             return
         }
         if(e.key == 'Escape') {