diff --git a/bzGraflow.js b/bzGraflow.js index 466c45d..cb7e024 100644 --- a/bzGraflow.js +++ b/bzGraflow.js @@ -15,7 +15,6 @@ class BZgraflow extends Buildoz{ console.warn('BZgraflow: No flow URL !?') return } - this.loadFlow(flowUrl) // Let it load async while we coat this.mainContainer = document.createElement('div') this.mainContainer.classList.add('bzgf-main-container') this.shadow = this.mainContainer.attachShadow({ mode: 'open' }) @@ -28,6 +27,7 @@ class BZgraflow extends Buildoz{ this.shadow.append(this.wiresContainer) this.shadow.append(this.nodesContainer) this.append(this.mainContainer) + this.loadFlow(flowUrl) // Let it load async } async loadFlow(url){ @@ -59,9 +59,14 @@ class BZgraflow extends Buildoz{ const doc = new DOMParser().parseFromString(html, 'text/html') this.nodesRegistry = {} for(const tpl of doc.querySelectorAll('template')){ - const rootEl = tpl.content.querySelector('.bzgf-node') - if(!rootEl) continue - this.nodesRegistry[rootEl.dataset.nodetype] = rootEl + if(tpl.id=='svg-arrows'){ + this.wiresContainer.appendChild(tpl.querySelector('defs').cloneNode(true)) + this.arrowDefined = true + } else { + const rootEl = tpl.content.querySelector('.bzgf-node') + if(!rootEl) continue + this.nodesRegistry[rootEl.dataset.nodetype] = rootEl + } } // Now load styles (once) @@ -88,12 +93,16 @@ class BZgraflow extends Buildoz{ return(this.stagedNodes[id]) } - addWire(idNode1, idPort1, idNode2, idPort2){ + addWire(link){ + const [idNode1, idPort1] = link.from + const [idNode2, idPort2] = link.to const path = this.bezier(idNode1, idPort1, idNode2, idPort2, this.getBZAttribute('tension')) const id = `${idNode1}_${idNode2}` 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.arrowDefined && link.endArrow) this.stagedWires[id].setAttribute('marker-end','url(#arrow)') + if(this.arrowDefined && link.startArrow) this.stagedWires[id].setAttribute('marker-start','url(#arrow)') this.stagedWires[id].classList.add('bzgf-wire') this.stagedWires[id].dataset.id = id this.wiresContainer.append(this.stagedWires[id]) @@ -107,9 +116,7 @@ class BZgraflow extends Buildoz{ const nodeEl = this.addNode(node.nodeType, node.id , node.coords.x, node.coords.y) } for(const link of this.flow.links){ - const [nodeId1, portId1] = link.from - const [nodeId2, portId2] = link.to - this.addWire(nodeId1, portId1, nodeId2, portId2) + this.addWire(link) } } @@ -330,3 +337,4 @@ class BZgraflow extends Buildoz{ } Buildoz.define('graflow', BZgraflow) +