Graflow: unique refs for arrows to fix arrows in subflows

buildoz.css

@@ -254,7 +254,7 @@ bz-graflow .bzgf-nodes-container{ /* used to keep the nodes container pointer-ev
 }
 bz-graflow .bzgf-nodes-container > * { /* allow the nodes to be moved ! */
     pointer-events: auto;
-  }
+}
 
 bz-graflow .bzgf-nodes-container .bzgf-node{ position:absolute; }
 bz-graflow .bzgf-nodes-container .bzgf-fake-node{

bzGraflow.js

@@ -30,6 +30,7 @@ class BZgraflow extends Buildoz{
         this.stagedNodes = { }
         this.stagedWires = { }
         this.arrowDefs = null
+        this.arrowMarkerId = `arrow-${crypto.randomUUID()}`
         this.currentOrientation = null
     }
 
@@ -98,6 +99,28 @@ class BZgraflow extends Buildoz{
         else this.initFlow()
     }
 
+    static get observedAttributes(){ 
+        return([...super.observedAttributes, 'disabled'])
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue)
+        if(name == 'disabled'){
+            if(newValue === null) {
+                this.disabled = false
+                this.style.opacity = 1
+                this.style.pointerEvents = 'auto'
+            } else {
+                this.disabled = true
+                this.style.opacity = 0.5
+                this.style.pointerEvents = 'none'
+            }
+            this.querySelectorAll('.bzgf-zoom-in, .bzgf-zoom-out').forEach((btn) => {
+                btn.disabled = this.disabled
+            })
+        }
+    }
+
     error(msg, err){
         this.querySelector('.graflow-error')?.remove()
         const errorEl = document.createElement('div')
@@ -162,6 +185,8 @@ class BZgraflow extends Buildoz{
         for(const tpl of doc.querySelectorAll('template')){
             if(tpl.id=='svg-arrows'){
                 this.arrowDefs = tpl.querySelector('defs').cloneNode(true)
+                const defaultArrow = this.arrowDefs.querySelector('#arrow')
+                if(defaultArrow) defaultArrow.id = this.arrowMarkerId
                 this.wiresContainer.appendChild(this.arrowDefs)
             } else {
                 const rootEl = tpl.content.querySelector('.bzgf-node')
@@ -227,6 +252,7 @@ class BZgraflow extends Buildoz{
     }
 
     enterSubflow(id){
+        if(this.disabled || this.hasAttribute('disabled')) return
         const nodeEl = this.stagedNodes[id]
         if(!nodeEl) return
 
@@ -406,7 +432,9 @@ class BZgraflow extends Buildoz{
             this.hostContainer.style.opacity = '1'
             this.hostContainer.style.visibility = 'visible'
             childEl.style.willChange = ''
-            this.fireEvent('subflowExited', { subflow: childEl })
+            this.fireEvent('subflowExited', {
+                component: this 
+            })
         }, { once:true })
     }
     
@@ -438,8 +466,8 @@ class BZgraflow extends Buildoz{
         this.stagedWires[id] = document.createElementNS('http://www.w3.org/2000/svg', 'path')
         this.stagedWires[id].setAttribute('d', path)
         this.stagedWires[id].setAttribute('fill', 'none')
-        if(this.arrowDefs && link.endArrow) this.stagedWires[id].setAttribute('marker-end','url(#arrow)')
-        if(this.arrowDefs && link.startArrow) this.stagedWires[id].setAttribute('marker-start','url(#arrow)')
+        if(this.arrowDefs && link.endArrow) this.stagedWires[id].setAttribute('marker-end',`url(#${this.arrowMarkerId})`)
+        if(this.arrowDefs && link.startArrow) this.stagedWires[id].setAttribute('marker-start',`url(#${this.arrowMarkerId})`)
         this.stagedWires[id].classList.add('bzgf-wire')
         this.stagedWires[id].dataset.id = id
         this.stagedWires[id].link = link