graflow, autoplacement 1.6, wires with arrows

app/assets/html/bzGraflow/nodesTest2.html

@@ -27,6 +27,7 @@
         width: 6px;
         background: #FFF; 
         z-index: 99;
+        opacity: 0.3;
     }
 
     .bzgf-node [data-direction="w"]{ left: -7px; top: 50%; transform: translateY(-50%);}
@@ -149,9 +150,26 @@
         place-items: center;
         color: white;
     }
-    .bzgf-wire{ stroke: #AAA; stroke-width: 4; }
+    .bzgf-wire{ stroke: #FF0; stroke-width: 2; }
 </style>
 
+<svg style="display:none" aria-hidden="true">
+  <template id="svg-arrows">
+    <defs>
+      <marker id="arrow"
+              viewBox="0 0 15 15"
+              refX="15"
+              refY="7"
+              markerWidth="15"
+              markerHeight="15"
+              orient="auto-start-reverse"
+              markerUnits="userSpaceOnUse">
+        <path d="M0,0 L15,7 L0,15 Z" fill="#FF0"/>
+      </marker>
+    </defs>
+  </template>
+</svg>
+
 <template>
     <div class="bzgf-node" data-nodetype="start">
         <div class="text"></div>
@@ -209,5 +227,7 @@
         </div>
         <div class="port" data-id="inp1" data-direction="n"></div>
         <div class="port" data-id="out1" data-direction="s"></div>
+        <div class="port" data-id="inout1" data-direction="w"></div>
+        <div class="port" data-id="inout2" data-direction="e"></div>
     </div>
 </template>

app/assets/json/bzGraflow/testFlow2.json

@@ -20,20 +20,20 @@
             },           
             {   "nodeType": "database",
                 "id": "wcx",
-                "coords": { "x": 250, "y": 650}
+                "coords": { "x": 500, "y": 450}
             },
             {   "nodeType": "end",
                 "id": "ert",
-                "coords": { "x": 250, "y": 850}
+                "coords": { "x": 250, "y": 650}
             }
         ],
         "links": [
-            { "from": ["aze", "out1"], "to": ["aze2", "inout1"] },
+            { "from": ["aze", "out1"], "to": ["aze2", "inout1"], "endArrow":true },
-            { "from": ["aze2", "inout2"], "to": ["qsd", "inp1"] },
+            { "from": ["aze2", "inout2"], "to": ["qsd", "inp1"], "endArrow":true  },
-            { "from": ["qsd", "out1"], "to": ["aze2", "inout3"] },
+            { "from": ["qsd", "out1"], "to": ["aze2", "inout3"], "endArrow":true  },
-            { "from": ["qsd", "out2"], "to": ["qsd2", "inp1"] },
+            { "from": ["qsd", "out2"], "to": ["qsd2", "inp1"], "endArrow":true  },
-            { "from": ["qsd2", "out1"], "to": ["wcx", "inout1"] },
+            { "from": ["qsd2", "inout2"], "to": ["wcx", "inout3"], "startArrow":true , "endArrow":true  },
-            { "from": ["wcx", "inout2"], "to": ["ert", "inp1"] }
+            { "from": ["qsd2", "out1"], "to": ["ert", "inp1"], "endArrow":true  }
         ]
     }
 }

app/thirdparty/buildoz/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(tpl.id=='svg-arrows'){
-            if(!rootEl) continue
+                this.wiresContainer.appendChild(tpl.querySelector('defs').cloneNode(true))
-            this.nodesRegistry[rootEl.dataset.nodetype] = rootEl
+                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
+            this.addWire(link)
-            const [nodeId2, portId2] = link.to
-            this.addWire(nodeId1, portId1, nodeId2, portId2)
         }       
     }
 
@@ -330,3 +337,4 @@ class BZgraflow extends Buildoz{
     
 }
 Buildoz.define('graflow', BZgraflow)
+