Graflow: unique refs for arrows to fix arrows in subflows

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
     }
 
@@ -184,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')
@@ -463,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.endArrow) this.stagedWires[id].setAttribute('marker-end',`url(#${this.arrowMarkerId})`)
-        if(this.arrowDefs && link.startArrow) this.stagedWires[id].setAttribute('marker-start','url(#arrow)')
+        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