diff --git a/bzGraflow.js b/bzGraflow.js index 1aa6cff..289278a 100644 --- a/bzGraflow.js +++ b/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.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