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": ["aze2", "inout2"], "to": ["qsd", "inp1"] },
-            { "from": ["qsd", "out1"], "to": ["aze2", "inout3"] },
-            { "from": ["qsd", "out2"], "to": ["qsd2", "inp1"] },
-            { "from": ["qsd2", "out1"], "to": ["wcx", "inout1"] },
-            { "from": ["wcx", "inout2"], "to": ["ert", "inp1"] }
+            { "from": ["aze", "out1"], "to": ["aze2", "inout1"], "endArrow":true },
+            { "from": ["aze2", "inout2"], "to": ["qsd", "inp1"], "endArrow":true  },
+            { "from": ["qsd", "out1"], "to": ["aze2", "inout3"], "endArrow":true  },
+            { "from": ["qsd", "out2"], "to": ["qsd2", "inp1"], "endArrow":true  },
+            { "from": ["qsd2", "inout2"], "to": ["wcx", "inout3"], "startArrow":true , "endArrow":true  },
+            { "from": ["qsd2", "out1"], "to": ["ert", "inp1"], "endArrow":true  }
         ]
     }
 }