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];