graflow, autoplacement 1.6, wires with arrows

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,10 +59,15 @@ class BZgraflow extends Buildoz{
         const doc = new DOMParser().parseFromString(html, 'text/html')
         this.nodesRegistry = {}
         for(const tpl of doc.querySelectorAll('template')){
+            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)
         if(!BZgraflow._loadedNodeStyles.has(url)) { 
@@ -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)
+