diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index 0f5d69915..56f2c3257 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -87,7 +87,7 @@
end
b-->id1
-
+
flowchart RL
subgraph id1 [Test1]
@@ -101,6 +101,10 @@
b-->id1
id1 --> id2
+
+ flowchart LR
+ a o--o b
+
diff --git a/src/dagre-wrapper/GraphObjects.md b/src/dagre-wrapper/GraphObjects.md
index 9a982feb8..d073515b8 100644
--- a/src/dagre-wrapper/GraphObjects.md
+++ b/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
diff --git a/src/dagre-wrapper/edges.js b/src/dagre-wrapper/edges.js
index c2135abf0..e3c372220 100644
--- a/src/dagre-wrapper/edges.js
+++ b/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;
+ }
};
diff --git a/src/dagre-wrapper/markers.js b/src/dagre-wrapper/markers.js
index c9c6cd703..0515defc4 100644
--- a/src/dagre-wrapper/markers.js
+++ b/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;
diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js
index 29f599fe8..b4a278bcd 100644
--- a/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/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];