Merge pull request mermaid-js#346 from AlanHohn/line-interpolation

add line interpolation to linkStyle in flowchart

src/diagrams/flowchart/flowRenderer.js

@@ -151,23 +151,22 @@ exports.addVertices = function (vert, g) {
  */
 exports.addEdges = function (edges, g) {
     var cnt=0;
-    var aHead;
 
     var defaultStyle;
     if(typeof edges.defaultStyle !== 'undefined'){
         defaultStyle = edges.defaultStyle.toString().replace(/,/g , ';');
-
     }
 
     edges.forEach(function (edge) {
         cnt++;
+        var edgeData = {};
 
         // Set link type for rendering
         if(edge.type === 'arrow_open'){
-            aHead = 'none';
+            edgeData.arrowhead = 'none';
         }
         else{
-            aHead = 'normal';
+            edgeData.arrowhead = 'normal';
         }
 
         var style = '';
@@ -194,32 +193,38 @@ exports.addEdges = function (edges, g) {
                     break;
             }
         }
+        edgeData.style = style;
+
+        if (typeof edge.interpolate !== 'undefined') {
+            edgeData.lineInterpolate = edge.interpolate;
+        } else {
+            if (typeof edges.defaultInterpolate !== 'undefined') {
+                edgeData.lineInterpolate = edges.defaultInterpolate;
+            }
+        }
 
-        // Add the edge to the graph
         if (typeof edge.text === 'undefined') {
-            if(typeof edge.style === 'undefined'){
-                g.setEdge(edge.start, edge.end,{ style: style, arrowhead: aHead},cnt);
-            }else{
-                g.setEdge(edge.start, edge.end, {
-                    style: style, arrowheadStyle: 'fill: #333', arrowhead: aHead
-                },cnt);
+            if (typeof edge.style !== 'undefined') {
+                edgeData.arrowheadStyle = 'fill: #333';
             }
-        }
-        // Edge with text
-        else {
-            var edgeText = edge.text.replace(/<br>/g, '\n');
-            if(typeof edge.style === 'undefined'){
-                if (conf.htmlLabels){
-                    g.setEdge(edge.start, edge.end,{labelType: 'html',style: style, labelpos:'c', label: '<span class="edgeLabel">'+edge.text+'</span>', arrowheadStyle: 'fill: #333', arrowhead: aHead},cnt);
-                }else{
-                    g.setEdge(edge.start, edge.end,{labelType: 'text', style: 'stroke: #333; stroke-width: 1.5px;fill:none', labelpos:'c', label: edgeText, arrowheadStyle: 'fill: #333', arrowhead: aHead},cnt);
+        } else {
+            edgeData.arrowheadStyle = 'fill: #333';
+            if(typeof edge.style === 'undefined') {
+                edgeData.labelpos = 'c';
+                if (conf.htmlLabels) {
+                    edgeData.labelType = 'html';
+                    edgeData.label = '<span class="edgeLabel">'+edge.text+'</span>';
+                } else {
+                    edgeData.labelType = 'text';
+                    edgeData.style = 'stroke: #333; stroke-width: 1.5px;fill:none';
+                    edgeData.label = edge.text.replace(/<br>/g, '\n');
                 }
-             }else{
-                g.setEdge(edge.start, edge.end, {
-                    labelType: 'text', style: style, arrowheadStyle: 'fill: #333', label: edgeText, arrowhead: aHead
-                },cnt);
+             } else {
+                edgeData.label = edge.text.replace(/<br>/g, '\n');
             }
         }
+        // Add the edge to the graph
+        g.setEdge(edge.start, edge.end, edgeData, cnt);
     });
 };
 

src/diagrams/flowchart/graphDb.js

@@ -86,6 +86,20 @@ exports.addLink = function (start, end, type, linktext) {
     }
     edges.push(edge);
 };
+
+/**
+ * Updates a link's line interpolation algorithm
+ * @param pos
+ * @param interpolate
+ */
+exports.updateLinkInterpolate = function (pos, interp) {
+    if(pos === 'default'){
+        edges.defaultInterpolate = interp;
+    }else{
+        edges[pos].interpolate = interp;
+    }
+};
+
 /**
  * Updates a link with a style
  * @param pos

src/diagrams/flowchart/parser/flow.jison

@@ -16,6 +16,7 @@
 "style"               return 'STYLE';
 "default"             return 'DEFAULT';
 "linkStyle"           return 'LINKSTYLE';
+"interpolate"         return 'INTERPOLATE';
 "classDef"            return 'CLASSDEF';
 "class"               return 'CLASS';
 "click"               return 'CLICK';
@@ -412,6 +413,14 @@ linkStyleStatement
           {$$ = $1;yy.updateLink($3,$5);}
     | LINKSTYLE SPACE NUM SPACE stylesOpt
           {$$ = $1;yy.updateLink($3,$5);}
+    | LINKSTYLE SPACE DEFAULT SPACE INTERPOLATE SPACE alphaNum SPACE stylesOpt
+          {$$ = $1;yy.updateLinkInterpolate($3,$7);yy.updateLink($3,$9);}
+    | LINKSTYLE SPACE NUM SPACE INTERPOLATE SPACE alphaNum SPACE stylesOpt
+          {$$ = $1;yy.updateLinkInterpolate($3,$7);yy.updateLink($3,$9);}
+    | LINKSTYLE SPACE DEFAULT SPACE INTERPOLATE SPACE alphaNum
+          {$$ = $1;yy.updateLinkInterpolate($3,$7);}
+    | LINKSTYLE SPACE NUM SPACE INTERPOLATE SPACE alphaNum
+          {$$ = $1;yy.updateLinkInterpolate($3,$7);}
     ;
 
 commentStatement: PCT PCT commentText;

src/diagrams/flowchart/parser/flow.spec.js

@@ -455,6 +455,58 @@ describe('when parsing ',function(){
         expect(edges[0].type).toBe('arrow');
     });
 
+    it('should handle line interpolation default definitions',function(){
+        var res = flow.parser.parse('graph TD\n' +
+        'A-->B\n' +
+        'linkStyle default interpolate basis');
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+
+        expect(edges.defaultInterpolate).toBe('basis');
+    });
+
+    it('should handle line interpolation numbered definitions',function(){
+        var res = flow.parser.parse('graph TD\n' +
+        'A-->B\n' +
+        'A-->C\n' +
+        'linkStyle 0 interpolate basis\n' +
+        'linkStyle 1 interpolate cardinal');
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+        expect(edges[0].interpolate).toBe('basis');
+        expect(edges[1].interpolate).toBe('cardinal');
+    });
+
+    it('should handle line interpolation default with style',function(){
+        var res = flow.parser.parse('graph TD\n' +
+        'A-->B\n' +
+        'linkStyle default interpolate basis stroke-width:1px;');
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+
+        expect(edges.defaultInterpolate).toBe('basis');
+    });
+
+    it('should handle line interpolation numbered with style',function(){
+        var res = flow.parser.parse('graph TD\n' +
+        'A-->B\n' +
+        'A-->C\n' +
+        'linkStyle 0 interpolate basis stroke-width:1px;\n' +
+        'linkStyle 1 interpolate cardinal stroke-width:1px;');
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+        expect(edges[0].interpolate).toBe('basis');
+        expect(edges[1].interpolate).toBe('cardinal');
+    });
+
     describe('it should handle interaction, ',function(){
 
         it('it should be possible to use click to a callback',function(){

src/mermaid.spec.js

@@ -156,6 +156,22 @@ describe('when using mermaid and ',function() {
 
             flowRend.addEdges(edges,mockG);
         });
+        it('should handle edges with interpolation defined', function () {
+            flow.parser.parse('graph TD;A---B; linkStyle 0 interpolate basis');
+            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.lineInterpolate).toBe('basis');
+                }
+            };
+
+            flowRend.addEdges(edges,mockG);
+        });
         it('should handle edges with text and styles defined', function () {
             flow.parser.parse('graph TD;A---|the text|B; linkStyle 0 stroke:val1,stroke-width:val2;');
             flow.parser.yy.getVertices();

test/web_interpolate.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="../dist/mermaid.forest.css"/>
+    <script src="../dist/mermaid.js"></script>
+    <script>
+        var config = {
+            startOnLoad:true,
+            callback:function(id){
+                console.log(id,' rendered');
+            },
+            flowchart:{
+                    useMaxWidth:false,
+                    htmlLabels:true
+                },
+            logLevel:5
+        };
+        mermaid.initialize(config);
+    </script>
+
+</head>
+    <body>
+
+    <h1>Line Interpolation Linear (default)</h1>
+    <div class="mermaid" id="linear">
+
+        graph TB
+        A --> B
+        B --> C
+        C --> D
+        D --> A
+
+    </div>
+    <h1>Line Interpolation Basis</h1>
+    <div class="mermaid" id="basis">
+
+        graph TB
+        linkStyle default interpolate basis fill:none;
+        A --> B
+        B --> C
+        C --> D
+        D --> A
+
+    </div>
+    <h1>Line Interpolation Step-After</h1>
+    <div class="mermaid" id="step-after">
+
+        graph TB
+        linkStyle default interpolate step-after fill:none;
+        A --> B
+        B --> C
+        C --> D
+        D --> A
+
+    </div>
+    <h1>Hierarchy Using Defaults</h1>
+    <div class="mermaid" id="default-hier">
+
+        graph TB
+        A --> B
+        A --> C
+        A --> D
+        A --> E
+        B --> B1
+        B --> B2
+
+    </div>
+    <h1>Hierarchy Using step-after</h1>
+    <div class="mermaid" id="hierarchy">
+
+        graph TB
+        linkStyle default interpolate step-after fill:none;
+        A --> B
+        A --> C
+        A --> D
+        A --> E
+        B --> B1
+        B --> B2
+
+    </div>
+    <h1>LR Hierarchy Using step-before</h1>
+    <div>step-after works here too</div>
+    <div class="mermaid" id="hierarchy">
+
+        graph LR
+        linkStyle default interpolate step-before fill:none;
+        A --> B
+        A --> C
+        A --> D
+        A --> E
+        B --> B1
+        B --> B2
+
+    </div>
+    <h1>Line Interpolation Cardinal</h1>
+    <div class="mermaid" id="cardinal">
+
+        graph TB
+        linkStyle default interpolate cardinal fill:none;
+        A --> B
+        A --> C
+        A --> D
+        D --> A
+
+    </div>
+    <h1>Line Interpolation Monotone</h1>
+    <div>Monotone is monotonic in y, so it only looks good LR</div>
+    <div class="mermaid" id="monotone">
+
+        graph LR
+        linkStyle default interpolate monotone fill:none;
+        A --> B
+        B --> C
+        C --> D
+        D --> A
+
+    </div>
+    <h1>Mixing Line Interpolation Types</h1>
+    <div>Specify the link number; the link must be defined first</div>
+    <div class="mermaid" id="mixed">
+
+        graph TB
+        A -- basis --> B
+        A -- linear --> C
+        C -- step-after --> D
+        D -- cardinal --> A
+        linkStyle 0 interpolate basis fill:none;
+        linkStyle 1 interpolate linear fill:none;
+        linkStyle 2 interpolate step-after fill:none;
+        linkStyle 3 interpolate cardinal fill:none;
+
+    </div>
+
+    </body>
+</html>