From 4ff40582440f61de82df93ca18de4fbd38f91459 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Sun, 15 Dec 2019 13:34:35 +0100
Subject: [PATCH] #1142 Simplified arrows/edges in the grammar

---
 cypress/platform/current.html                 |  26 ++-
 src/diagrams/flowchart/flowDb.js              | 125 +++++++++++++
 .../flowchart/parser/flow-edges.spec.js       |   2 +-
 .../flowchart/parser/flow-text.spec.js        |   4 +-
 src/diagrams/flowchart/parser/flow.jison      | 170 +++++-------------
 src/mermaid.js                                |   2 +-
 6 files changed, 186 insertions(+), 143 deletions(-)
diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index 9e5267768..d2e48875c 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -5,7 +5,7 @@
       rel="stylesheet"
     />
     <style>
-      body {background: white}
+      body {background: black}
       h1 { color: white;}
       .arrowheadPath {fill: red;}
 
@@ -17,26 +17,24 @@
   <body>
     <h1>info below</h1>
     <div style="display: flex;width: 100%; height: 100%">
-      <div class="mermaid" style="width: 100%; height: 100%">gantt
-        dateFormat  YYYY-MM-DD
-        axisFormat  %d/%m
-        title Adding GANTT diagram to mermaid
-        excludes weekdays 2014-01-10
-
-        apple :a, 2017-07-20, 1w
-        banana :crit, b, 2017-07-23, 1d
-        cherry :active, c, after b a, 1d
-
-
+      <div class="mermaid" style="width: 100%; height: 100%">
+        graph TB
+          A --> B
+          A ==> C
+          A .-> D
+          A === E
+          A -.- F
+          D -- Hello --> a
+          D-- text including R TD space --xb
       </div>
 </div>
   <script src="./mermaid.js"></script>
     <script>
       mermaid.initialize({
-        // theme: 'dark',
+        theme: 'dark',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        logLevel: 3,
+        logLevel: 0,
         flowchart: { curve: 'linear', "htmlLabels": false },
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50 },
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
index a0162b3c9..9b1cfac6b 100644
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@@ -501,6 +501,130 @@ export const firstGraph = () => {
   return false;
 };
 
+const destructStartLink = _str => {
+  const str = _str.trim();
+
+  switch (str) {
+    case '<--':
+      return { type: 'arrow', stroke: 'normal' };
+    case 'x--':
+      return { type: 'arrow_cross', stroke: 'normal' };
+    case 'o--':
+      return { type: 'arrow_circle', stroke: 'normal' };
+    case '<-.':
+      return { type: 'arrow', stroke: 'dotted' };
+    case 'x-.':
+      return { type: 'arrow_cross', stroke: 'dotted' };
+    case 'o-.':
+      return { type: 'arrow_circle', stroke: 'dotted' };
+    case '<==':
+      return { type: 'arrow', stroke: 'thick' };
+    case 'x==':
+      return { type: 'arrow_cross', stroke: 'thick' };
+    case 'o==':
+      return { type: 'arrow_circle', stroke: 'thick' };
+    case '--':
+      return { type: 'arrow_open', stroke: 'normal' };
+    case '==':
+      return { type: 'arrow_open', stroke: 'thick' };
+    case '-.':
+      return { type: 'arrow_open', stroke: 'dotted' };
+  }
+};
+
+const destructEndLink = _str => {
+  const str = _str.trim();
+
+  switch (str) {
+    case '--x':
+      return { type: 'arrow_cross', stroke: 'normal' };
+    case '-->':
+      return { type: 'arrow', stroke: 'normal' };
+    case '<-->':
+      return { type: 'double_arrow_point', stroke: 'normal' };
+    case 'x--x':
+      return { type: 'double_arrow_cross', stroke: 'normal' };
+    case 'o--o':
+      return { type: 'double_arrow_circle', stroke: 'normal' };
+    case 'o.-o':
+      return { type: 'double_arrow_circle', stroke: 'dotted' };
+    case '<==>':
+      return { type: 'double_arrow_point', stroke: 'thick' };
+    case 'o==o':
+      return { type: 'double_arrow_circle', stroke: 'thick' };
+    case 'x==x':
+      return { type: 'double_arrow_cross', stroke: 'thick' };
+    case 'x.-x':
+      return { type: 'double_arrow_cross', stroke: 'dotted' };
+    case 'x-.-x':
+      return { type: 'double_arrow_cross', stroke: 'dotted' };
+    case '<.->':
+      return { type: 'double_arrow_point', stroke: 'dotted' };
+    case '<-.->':
+      return { type: 'double_arrow_point', stroke: 'dotted' };
+    case 'o-.-o':
+      return { type: 'double_arrow_circle', stroke: 'dotted' };
+    case '--o':
+      return { type: 'arrow_circle', stroke: 'normal' };
+    case '---':
+      return { type: 'arrow_open', stroke: 'normal' };
+    case '-.-x':
+      return { type: 'arrow_cross', stroke: 'dotted' };
+    case '-.->':
+      return { type: 'arrow', stroke: 'dotted' };
+    case '-.-o':
+      return { type: 'arrow_circle', stroke: 'dotted' };
+    case '-.-':
+      return { type: 'arrow_open', stroke: 'dotted' };
+    case '.-x':
+      return { type: 'arrow_cross', stroke: 'dotted' };
+    case '.->':
+      return { type: 'arrow', stroke: 'dotted' };
+    case '.-o':
+      return { type: 'arrow_circle', stroke: 'dotted' };
+    case '.-':
+      return { type: 'arrow_open', stroke: 'dotted' };
+    case '==x':
+      return { type: 'arrow_cross', stroke: 'thick' };
+    case '==>':
+      return { type: 'arrow', stroke: 'thick' };
+    case '==o':
+      return { type: 'arrow_circle', stroke: 'thick' };
+    case '===':
+      return { type: 'arrow_open', stroke: 'thick' };
+  }
+};
+
+const destructLink = (_str, _startStr) => {
+  const info = destructEndLink(_str);
+  let startInfo;
+  if (_startStr) {
+    startInfo = destructStartLink(_startStr);
+    console.log(startInfo, info);
+    if (startInfo.stroke !== info.stroke) {
+      return { type: 'INVALID', stroke: 'INVALID' };
+    }
+
+    if (startInfo.type === 'arrow_open') {
+      // -- xyz -->  - take arrow type form ending
+      startInfo.type = info.type;
+    } else {
+      // x-- xyz -->  - not supported
+      if (startInfo.type !== info.type) return { type: 'INVALID', stroke: 'INVALID' };
+
+      startInfo.type = 'double_' + startInfo.type;
+    }
+
+    if (startInfo.type === 'double_arrow') {
+      startInfo.type = 'double_arrow_point';
+    }
+
+    return startInfo;
+  }
+
+  return info;
+};
+
 export default {
   addVertex,
   addLink,
@@ -523,6 +647,7 @@ export default {
   getDepthFirstPos,
   indexNodes,
   getSubGraphs,
+  destructLink,
   lex: {
     firstGraph
   }
diff --git a/src/diagrams/flowchart/parser/flow-edges.spec.js b/src/diagrams/flowchart/parser/flow-edges.spec.js
index 87bf7730d..111dee9e0 100644
--- a/src/diagrams/flowchart/parser/flow-edges.spec.js
+++ b/src/diagrams/flowchart/parser/flow-edges.spec.js
@@ -87,7 +87,7 @@ describe('[Edges] when parsing', () => {
       expect(edges[0].text).toBe('');
     });
 
-    it('should handle double edged nodes with text on thick arrows', function() {
+    it('should handle double edged nodes with text on thick arrows XYZ1', function() {
       const res = flow.parser.parse('graph TD;\nA x== text ==x B;');
 
       const vert = flow.parser.yy.getVertices();
diff --git a/src/diagrams/flowchart/parser/flow-text.spec.js b/src/diagrams/flowchart/parser/flow-text.spec.js
index 518aa3710..29979ce54 100644
--- a/src/diagrams/flowchart/parser/flow-text.spec.js
+++ b/src/diagrams/flowchart/parser/flow-text.spec.js
@@ -182,7 +182,7 @@ describe('[Text] when parsing', () => {
 
       expect(edges[0].stroke).toBe('normal');
     });
-    it('it should handle dotted text on lines', function() {
+    it('it should handle dotted text on lines (TD3)', function() {
       const res = flow.parser.parse('graph TD;A-. test text with == .->B;');
 
       const vert = flow.parser.yy.getVertices();
@@ -265,7 +265,7 @@ describe('[Text] when parsing', () => {
       expect(edges[0].text).toBe('text including URL space');
     });
 
-    it('should handle space and dir (TD)', function() {
+    it('should handle space and dir (TD2)', function() {
       const res = flow.parser.parse('graph TD;A-- text including R TD space --xB;');
 
       const vert = flow.parser.yy.getVertices();
diff --git a/src/diagrams/flowchart/parser/flow.jison b/src/diagrams/flowchart/parser/flow.jison
index ec67972cf..aec09ee93 100644
--- a/src/diagrams/flowchart/parser/flow.jison
+++ b/src/diagrams/flowchart/parser/flow.jison
@@ -40,46 +40,46 @@
 ";"                   return 'SEMI';
 ","                   return 'COMMA';
 "*"                   return 'MULT';
-\s*\-\-[x]\s*            return 'ARROW_CROSS';
-\s*\-\-\>\s*             return 'ARROW_POINT';
-\s*\<\-\-\>\s*           return 'DOUBLE_ARROW_POINT';
-\s*[x]\-\-[x]\s*         return 'DOUBLE_ARROW_CROSS';
-\s*[o]\-\-[o]\s*         return 'DOUBLE_ARROW_CIRCLE';
-\s*[o]\.\-[o]\s*         return 'DOUBLE_DOTTED_ARROW_CIRCLE';
-\s*\<\=\=\>\s*           return 'DOUBLE_THICK_ARROW_POINT';
-\s*[o]\=\=[o]\s*         return 'DOUBLE_THICK_ARROW_CIRCLE';
-\s*[x]\=\=[x]\s*         return 'DOUBLE_THICK_ARROW_CROSS';
-\s*[x].\-[x]\s*          return 'DOUBLE_DOTTED_ARROW_CROSS';
-\s*[x]\-\.\-[x]\s*       return 'DOUBLE_DOTTED_ARROW_CROSS';
-\s*\<\.\-\>\s*           return 'DOUBLE_DOTTED_ARROW_POINT';
-\s*\<\-\.\-\>\s*         return 'DOUBLE_DOTTED_ARROW_POINT';
-\s*[o]\-\.\-[o]\s*       return 'DOUBLE_DOTTED_ARROW_CIRCLE';
-\s*\-\-[o]\s*            return 'ARROW_CIRCLE';
-\s*\-\-\-\s*             return 'ARROW_OPEN';
-\s*\-\.\-[x]\s*          return 'DOTTED_ARROW_CROSS';
-\s*\-\.\-\>\s*           return 'DOTTED_ARROW_POINT';
-\s*\-\.\-[o]\s*          return 'DOTTED_ARROW_CIRCLE';
-\s*\-\.\-\s*             return 'DOTTED_ARROW_OPEN';
-\s*.\-[x]\s*             return 'DOTTED_ARROW_CROSS';
-\s*\.\-\>\s*             return 'DOTTED_ARROW_POINT';
-\s*\.\-[o]\s*            return 'DOTTED_ARROW_CIRCLE';
-\s*\.\-\s*               return 'DOTTED_ARROW_OPEN';
-\s*\=\=[x]\s*            return 'THICK_ARROW_CROSS';
-\s*\=\=\>\s*             return 'THICK_ARROW_POINT';
-\s*\=\=[o]\s*            return 'THICK_ARROW_CIRCLE';
-\s*\=\=[\=]\s*           return 'THICK_ARROW_OPEN';
-\s*\<\-\-\s*             return 'START_DOUBLE_ARROW_POINT';
-\s*[x]\-\-\s*            return 'START_DOUBLE_ARROW_CROSS';
-\s*[o]\-\-\s*            return 'START_DOUBLE_ARROW_CIRCLE';
-\s*\<\-\.\s*             return 'START_DOUBLE_DOTTED_ARROW_POINT';
-\s*[x]\-\.\s*            return 'START_DOUBLE_DOTTED_ARROW_CROSS';
-\s*[o]\-\.\s*            return 'START_DOUBLE_DOTTED_ARROW_CIRCLE';
-\s*\<\=\=\s*             return 'START_DOUBLE_THICK_ARROW_POINT';
-\s*[x]\=\=\s*            return 'START_DOUBLE_THICK_ARROW_CROSS';
-\s*[o]\=\=\s*            return 'START_DOUBLE_THICK_ARROW_CIRCLE';
-\s*\-\-\s*               return '--';
-\s*\-\.\s*               return '-.';
-\s*\=\=\s*               return '==';
+\s*\-\-[x]\s*            return 'LINK';
+\s*\-\-\>\s*             return 'LINK';
+\s*\<\-\-\>\s*           return 'LINK';
+\s*[x]\-\-[x]\s*         return 'LINK';
+\s*[o]\-\-[o]\s*         return 'LINK';
+\s*[o]\.\-[o]\s*         return 'LINK';
+\s*\<\=\=\>\s*           return 'LINK';
+\s*[o]\=\=[o]\s*         return 'LINK';
+\s*[x]\=\=[x]\s*         return 'LINK';
+\s*[x].\-[x]\s*          return 'LINK';
+\s*[x]\-\.\-[x]\s*       return 'LINK';
+\s*\<\.\-\>\s*           return 'LINK';
+\s*\<\-\.\-\>\s*         return 'LINK';
+\s*[o]\-\.\-[o]\s*       return 'LINK';
+\s*\-\-[o]\s*            return 'LINK';
+\s*\-\-\-\s*             return 'LINK';
+\s*\-\.\-[x]\s*          return 'LINK';
+\s*\-\.\-\>\s*           return 'LINK';
+\s*\-\.\-[o]\s*          return 'LINK';
+\s*\-\.\-\s*             return 'LINK';
+\s*.\-[x]\s*             return 'LINK';
+\s*\.\-\>\s*             return 'LINK';
+\s*\.\-[o]\s*            return 'LINK';
+\s*\.\-\s*               return 'LINK';
+\s*\=\=[x]\s*            return 'LINK';
+\s*\=\=\>\s*             return 'LINK';
+\s*\=\=[o]\s*            return 'LINK';
+\s*\=\=[\=]\s*           return 'LINK';
+\s*\<\-\-\s*             return 'START_LINK';
+\s*[x]\-\-\s*            return 'START_LINK';
+\s*[o]\-\-\s*            return 'START_LINK';
+\s*\<\-\.\s*             return 'START_LINK';
+\s*[x]\-\.\s*            return 'START_LINK';
+\s*[o]\-\.\s*            return 'START_LINK';
+\s*\<\=\=\s*             return 'START_LINK';
+\s*[x]\=\=\s*            return 'START_LINK';
+\s*[o]\=\=\s*            return 'START_LINK';
+\s*\-\-\s*               return 'START_LINK';
+\s*\-\.\s*               return 'START_LINK';
+\s*\=\=\s*               return 'START_LINK';
 "(-"                  return '(-';
 "-)"                  return '-)';
 "(["                  return 'STADIUMSTART';
@@ -363,92 +363,12 @@ link: linkStatement arrowText
     {$1.text = $2;$$ = $1;}
     | linkStatement
     {$$ = $1;}
-    | '--' text ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"normal","text":$2};}
-    | 'START_DOUBLE_ARROW_POINT' text ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"normal","text":$2};}
-    | '--' text ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"normal","text":$2};}
-    | 'START_DOUBLE_ARROW_CIRCLE' text ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"normal","text":$2};}
-    | '--' text ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"normal","text":$2};}
-    | 'START_DOUBLE_ARROW_CROSS' text ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"normal","text":$2};}
-    | '--' text ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"normal","text":$2};}
-    | '-.' text DOTTED_ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"dotted","text":$2};}
-    | 'START_DOUBLE_DOTTED_ARROW_POINT' text DOTTED_ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"dotted","text":$2};}
-    | '-.' text DOTTED_ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"dotted","text":$2};}
-    | 'START_DOUBLE_DOTTED_ARROW_CIRCLE' text DOTTED_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"dotted","text":$2};}
-    | '-.' text DOTTED_ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"dotted","text":$2};}
-    | 'START_DOUBLE_DOTTED_ARROW_CROSS' text DOTTED_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"dotted","text":$2};}
-    | '-.' text DOTTED_ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"dotted","text":$2};}
-    | '==' text THICK_ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"thick","text":$2};}
-    | 'START_DOUBLE_THICK_ARROW_POINT' text THICK_ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"thick","text":$2};}
-    | '==' text THICK_ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"thick","text":$2};}
-    | 'START_DOUBLE_THICK_ARROW_CIRCLE' text THICK_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"thick","text":$2};}
-    | '==' text THICK_ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"thick","text":$2};}
-    | 'START_DOUBLE_THICK_ARROW_CROSS' text THICK_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"thick","text":$2};}
-    | '==' text THICK_ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"thick","text":$2};}
+    | START_LINK text LINK
+        {var inf = yy.destructLink($3, $1); $$ = {"type":inf.type,"stroke":inf.stroke,"text":$2};}
     ;
 
-linkStatement: ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"normal"};}
-    | DOUBLE_ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"normal"};}
-    | ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"normal"};}
-    | DOUBLE_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"normal"};}
-    | ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"normal"};}
-    | DOUBLE_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"normal"};}
-    | ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"normal"};}
-    | DOTTED_ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"dotted"};}
-    | DOUBLE_DOTTED_ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"dotted"};}
-    | DOTTED_ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"dotted"};}
-    | DOUBLE_DOTTED_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"dotted"};}
-    | DOTTED_ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"dotted"};}
-    | DOUBLE_DOTTED_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"dotted"};}
-    | DOTTED_ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"dotted"};}
-    | THICK_ARROW_POINT
-        {$$ = {"type":"arrow","stroke":"thick"};}
-    | DOUBLE_THICK_ARROW_POINT
-        {$$ = {"type":"double_arrow_point","stroke":"thick"};}
-    | THICK_ARROW_CIRCLE
-        {$$ = {"type":"arrow_circle","stroke":"thick"};}
-    | DOUBLE_THICK_ARROW_CIRCLE
-        {$$ = {"type":"double_arrow_circle","stroke":"thick"};}
-    | THICK_ARROW_CROSS
-        {$$ = {"type":"arrow_cross","stroke":"thick"};}
-    | DOUBLE_THICK_ARROW_CROSS
-        {$$ = {"type":"double_arrow_cross","stroke":"thick"};}
-    | THICK_ARROW_OPEN
-        {$$ = {"type":"arrow_open","stroke":"thick"};}
+linkStatement: LINK
+        {var inf = yy.destructLink($1);$$ = {"type":inf.type,"stroke":inf.stroke};}
         ;
 
 arrowText:
@@ -536,7 +456,7 @@ styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT |
 
 /* Token lists */
 
-textToken      : textNoTagsToken | TAGSTART | TAGEND | '=='  | '--' | PCT | DEFAULT;
+textToken      : textNoTagsToken | TAGSTART | TAGEND | START_LINK | PCT | DEFAULT;
 
 textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;
 
diff --git a/src/mermaid.js b/src/mermaid.js
index 76b644ef2..08bf9af19 100644
--- a/src/mermaid.js
+++ b/src/mermaid.js
@@ -116,7 +116,6 @@ const init = function() {
 };
 
 const initialize = function(config) {
-  logger.debug('Initializing mermaid ');
   if (typeof config.mermaid !== 'undefined') {
     if (typeof config.mermaid.startOnLoad !== 'undefined') {
       mermaid.startOnLoad = config.mermaid.startOnLoad;
@@ -126,6 +125,7 @@ const initialize = function(config) {
     }
   }
   mermaidAPI.initialize(config);
+  logger.debug('Initializing mermaid ');
 };
 
 /**
