Merge pull request #452 from joshuacolvin/issue416_link_style_fill_none

Fix for #416, customizing link style with any color sets `fill` property to `black` instead of `none`
mermaid-js · Jan 9, 2017 · cac960c · cac960c
2 parents 7ff87fd + 8596eb6
commit cac960c
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 2 deletions.
diff --git a/src/diagrams/flowchart/graphDb.js b/src/diagrams/flowchart/graphDb.js
@@ -3,6 +3,7 @@
  */
 var Logger = require('../../logger');
 var log = new Logger.Log();
+var utils = require('../../utils');
 
 var d3 = require('../../d3');
 var vertices = {};
@@ -109,6 +110,9 @@ exports.updateLink = function (pos, style) {
     if(pos === 'default'){
         edges.defaultStyle = style;
     }else{
+        if(utils.isSubstringInArray('fill', style) === -1) {
+            style.push('fill:none');
+        }
         edges[pos].style = style;
     }
 };

diff --git a/src/mermaid.spec.js b/src/mermaid.spec.js
@@ -150,7 +150,7 @@ describe('when using mermaid and ',function() {
                     expect(start).toBe('A');
                     expect(end).toBe('B');
                     expect(options.arrowhead).toBe('none');
-                    expect(options.style).toBe('stroke:val1;stroke-width:val2;');
+                    expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;');
                 }
             };
 
@@ -183,7 +183,40 @@ describe('when using mermaid and ',function() {
                     expect(end).toBe('B');
                     expect(options.arrowhead).toBe('none');
                     expect(options.label.match('the text')).toBeTruthy();
-                    expect(options.style).toBe('stroke:val1;stroke-width:val2;');
+                    expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;');
+                }
+            };
+
+            flowRend.addEdges(edges,mockG);
+        });
+
+        it('should set fill to "none" by default when handling edges', function () {
+            flow.parser.parse('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2;');
+            flow.parser.yy.getVertices();
+            var edges = flow.parser.yy.getEdges();
+
+            var mockG = {
+                setEdge:function(start, end,options){
+                    expect(start).toBe('A');
+                    expect(end).toBe('B');
+                    expect(options.arrowhead).toBe('none');
+                    expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:none;');
+                }
+            };
+
+            flowRend.addEdges(edges,mockG);
+        });
+
+        it('should not set fill to none if fill is set in linkStyle', function () {
+            flow.parser.parse('graph TD;A---B; linkStyle 0 stroke:val1,stroke-width:val2,fill:blue;');
+            flow.parser.yy.getVertices();
+            var edges = flow.parser.yy.getEdges();
+            var mockG = {
+                setEdge:function(start, end,options){
+                    expect(start).toBe('A');
+                    expect(end).toBe('B');
+                    expect(options.arrowhead).toBe('none');
+                    expect(options.style).toBe('stroke:val1;stroke-width:val2;fill:blue;');
                 }
             };
 

diff --git a/src/utils.js b/src/utils.js
@@ -139,3 +139,20 @@ var cloneCssStyles = function(svg, classes){
 };
 
 exports.cloneCssStyles = cloneCssStyles;
+
+
+/**
+ * @function isSubstringInArray
+ * Detects whether a substring in present in a given array
+ * @param {string} str The substring to detect
+ * @param {array} arr The array to search
+ * @returns {number} the array index containing the substring or -1 if not present
+ **/
+var isSubstringInArray = function (str, arr) {
+  for (var i = 0; i < arr.length; i++) {
+      if (arr[i].match(str)) return i;
+  }
+  return -1;
+};
+
+exports.isSubstringInArray = isSubstringInArray;
diff --git a/src/utils.spec.js b/src/utils.spec.js
@@ -200,4 +200,16 @@ describe('when cloning CSS ', function () {
             '#mermaid-01 .node-circle>rect, .node-circle>polygon, .node-circle>circle, .node-circle>ellipse { fill:#444444; stroke:#111111; }'
         ]);
     });
+
+describe('when finding substring in array ', function () {
+    it('should return the array index that contains the substring', function () {
+        var arr = ['stroke:val1', 'fill:val2'];
+        var result = utils.isSubstringInArray('fill', arr);
+        expect(result).toEqual(1);
+    });
+    it('should return -1 if the substring is not found in the array', function () {
+      var arr = ['stroke:val1', 'stroke-width:val2'];
+      var result = utils.isSubstringInArray('fill', arr);
+      expect(result).toEqual(-1);
+    });
 });