#1295 Arrow head start

cypress/platform/current.html

@@ -87,7 +87,7 @@
         end
         b-->id1
       </div>
-      <div class="mermaid" style="width: 100%; height: 100%">
+      <div class="mermaid2" style="width: 100%; height: 100%">
         flowchart RL
 
         subgraph id1 [Test1]
@@ -101,6 +101,10 @@
         b-->id1
         id1 --> id2
       </div>
+      <div class="mermaid" style="width: 100%; height: 100%">
+        flowchart LR
+          a o--o b
+      </div>
 
 </div>
   <script src="./mermaid.js"></script>

src/dagre-wrapper/GraphObjects.md

@@ -36,3 +36,8 @@ This is set by the renderer of the diagram and insert the data that the wrapper
 | id         | id of the shape                                                                                             |
 | type       | if set to group then this node indicates a cluster.                                                         |
 | padding    | Padding. Passed from the renderr as this might differ between react for different diagrams. Maybe obsolete. |
+
+
+#edge
+
+arrowType sets the type of arrows to use

src/dagre-wrapper/edges.js

@@ -169,7 +169,7 @@ export const insertEdge = function(elem, edge, clusterDb) {
     points = updatedPoints;
   }
 
-  logger.info('Points', points);
+  logger.info('Edge', edge);
 
   // The data for our line
   const lineData = points.filter(p => !Number.isNaN(p.y));
@@ -212,7 +212,13 @@ export const insertEdge = function(elem, edge, clusterDb) {
     url = url.replace(/\(/g, '\\(');
     url = url.replace(/\)/g, '\\)');
   }
-
-  svgPath.attr('marker-end', 'url(' + url + '#' + 'normalEnd' + ')');
-  // svgPath.attr('marker-start', 'url(' + url + '#' + 'normalStart' + ')');
+  switch (edge.arrowType) {
+    case 'double_arrow_circle':
+      svgPath.attr('marker-end', 'url(' + url + '#' + 'circleEnd' + ')');
+      svgPath.attr('marker-start', 'url(' + url + '#' + 'circleStart' + ')');
+      break;
+    case 'arrow_circle':
+      svgPath.attr('marker-end', 'url(' + url + '#' + 'circleEnd' + ')');
+      break;
+  }
 };

src/dagre-wrapper/markers.js

@@ -132,6 +132,43 @@ const insertMarkers = elem => {
     .attr('class', 'arrowheadPath')
     .style('stroke-width', 1)
     .style('stroke-dasharray', '1,0');
+  elem
+    .append('marker')
+    .attr('id', 'circleEnd')
+    .attr('viewBox', '0 0 10 10')
+    .attr('refX', 10)
+    .attr('refY', 5)
+    .attr('markerUnits', 'strokeWidth')
+    .attr('markerWidth', 7)
+    .attr('markerHeight', 7)
+    .attr('orient', 'auto')
+    .append('circle')
+    .attr('cx', '5')
+    .attr('cy', '5')
+    .attr('r', '5')
+    .attr('fill', 'red')
+    .attr('class', 'arrowheadPath')
+    .style('stroke-width', 1)
+    .style('stroke-dasharray', '1,0');
+
+  elem
+    .append('marker')
+    .attr('id', 'circleStart')
+    .attr('viewBox', '0 0 10 10')
+    .attr('refX', 0)
+    .attr('refY', 5)
+    .attr('markerUnits', 'strokeWidth')
+    .attr('markerWidth', 7)
+    .attr('markerHeight', 7)
+    .attr('orient', 'auto')
+    .append('circle')
+    .attr('cx', '5')
+    .attr('cy', '5')
+    .attr('r', '5')
+    .attr('fill', 'red')
+    .attr('class', 'arrowheadPath')
+    .style('stroke-width', 1)
+    .style('stroke-dasharray', '1,0');
 };
 
 export default insertMarkers;

src/diagrams/flowchart/flowRenderer-v2.js

@@ -174,6 +174,7 @@ export const addEdges = function(edges, g) {
     } else {
       edgeData.arrowhead = 'normal';
     }
+    edgeData.arrowType = edge.type;
 
     let style = '';
     let labelStyle = '';
@@ -311,6 +312,7 @@ export const draw = function(text, id) {
 
   const edges = flowDb.getEdges();
 
+  logger.info(edges);
   let i = 0;
   for (i = subGraphs.length - 1; i >= 0; i--) {
     subG = subGraphs[i];