Merge pull request #376 from dodoinblue/enhance-arrowhead-style

override normal flowchart arrowhead to allow css styling

src/diagrams/flowchart/flowRenderer.js

@@ -425,6 +425,25 @@ exports.draw = function (text, id,isDot) {
         dagreD3.util.applyStyle(path, edge[type + 'Style']);
     };
 
+    // Override normal arrowhead defined in d3. Remove style & add class to allow css styling.
+    render.arrows().normal = function normal(parent, id, edge, type) {
+        var marker = parent.append("marker")
+        .attr("id", id)
+        .attr("viewBox", "0 0 10 10")
+        .attr("refX", 9)
+        .attr("refY", 5)
+        .attr("markerUnits", "strokeWidth")
+        .attr("markerWidth", 8)
+        .attr("markerHeight", 6)
+        .attr("orient", "auto")
+
+        var path = marker.append("path")
+        .attr("d", "M 0 0 L 10 5 L 0 10 z")
+        .attr("class", "arrowheadPath")
+        .style("stroke-width", 1)
+        .style("stroke-dasharray", "1,0");
+    };
+
     // Set up an SVG group so that we can translate the final graph.
     var svg = d3.select('#' + id);
     //svgGroup = d3.select('#' + id + ' g');

src/less/dark/flow.less

@@ -9,6 +9,11 @@
   stroke-width: 1px;
 }
 
+
+.arrowheadPath {
+  fill: @arrowheadColor;
+}
+
 .edgePath .path {
   stroke: @lineColor;
 }

src/less/dark/variables.less

@@ -5,6 +5,7 @@
 @lineColor: @mainContrastColor;
 @border1: #81B1DB;
 @border2: rgba(255, 255, 255, 0.25);
+@arrowheadColor: @mainContrastColor;
 
 
 /* Flowchart variables */

src/less/default/flow.less

@@ -9,6 +9,10 @@
   stroke-width: 1px;
 }
 
+.arrowheadPath {
+  fill: @arrowheadColor;
+}
+
 .edgePath .path {
   stroke: @lineColor;
 }

src/less/default/variables.less

@@ -3,6 +3,7 @@
 @lineColor: #333333;
 @border1:#CCCCFF;
 @border2:#aaaa33;
+@arrowheadColor: #333333;
 
 /* Flowchart variables */
 @nodeBkg:@mainBkg;

src/less/forest/flow.less

@@ -12,6 +12,10 @@ color:#333
   stroke-width: 1px;
 }
 
+.arrowheadPath {
+  fill: @arrowheadColor;
+}
+
 .edgePath .path {
   stroke: @lineColor;
   stroke-width: 1.5px;

src/less/forest/variables.less

@@ -4,6 +4,7 @@
 @lineColor: green;
 @border1: #13540c;
 @border2: #6eaa49;
+@arrowheadColor: green;
 
 /* Flowchart variables */
 @nodeBkg:@mainBkg;