#937 Handling direction keywords in node ids

src/diagrams/flowchart/flowDb.js

@@ -12,6 +12,7 @@ let subGraphs = [];
 let subGraphLookup = {};
 let tooltips = {};
 let subCount = 0;
+let firstGraphFlag = true;
 let direction;
 // Functions to be run after graph rendering
 let funs = [];
@@ -171,6 +172,18 @@ export const addClass = function(id, style) {
  */
 export const setDirection = function(dir) {
   direction = dir;
+  if (direction.match(/.*</)) {
+    direction = 'RL';
+  }
+  if (direction.match(/.*\^/)) {
+    direction = 'BT';
+  }
+  if (direction.match(/.*>/)) {
+    direction = 'LR';
+  }
+  if (direction.match(/.*v/)) {
+    direction = 'TB';
+  }
 };
 
 /**
@@ -353,6 +366,7 @@ export const clear = function() {
   subGraphLookup = {};
   subCount = 0;
   tooltips = [];
+  firstGraphFlag = true;
 };
 /**
  *
@@ -470,6 +484,14 @@ export const getSubGraphs = function() {
   return subGraphs;
 };
 
+export const firstGraph = () => {
+  if (firstGraphFlag) {
+    firstGraphFlag = false;
+    return true;
+  }
+  return false;
+};
+
 export default {
   addVertex,
   addLink,
@@ -491,5 +513,8 @@ export default {
   addSubGraph,
   getDepthFirstPos,
   indexNodes,
-  getSubGraphs
+  getSubGraphs,
+  lex: {
+    firstGraph
+  }
 };

src/diagrams/flowchart/parser/flow.jison

@@ -7,7 +7,7 @@
 /* lexical grammar */
 %lex
 %x string
-
+%x dir
 %%
 \%\%[^\n]*            /* do nothing */
 ["]                     this.begin("string");
@@ -20,15 +20,19 @@
 "classDef"            return 'CLASSDEF';
 "class"               return 'CLASS';
 "click"               return 'CLICK';
-"graph"               return 'GRAPH';
+"graph"      {if(yy.lex.firstGraph()){this.begin("dir");console.log('First graph')}  return 'GRAPH';}
 "subgraph"            return 'subgraph';
 "end"\b\s*            return 'end';
-"LR"                  return 'DIR';
+<dir>\s*"LR"             {   this.popState();  return 'DIR'; }
-"RL"                  return 'DIR';
+<dir>\s*"RL"             {   this.popState();  return 'DIR'; }
-"TB"                  return 'DIR';
+<dir>\s*"TB"             {   this.popState();  return 'DIR'; }
-"BT"                  return 'DIR';
+<dir>\s*"BT"             {   this.popState();  return 'DIR'; }
-"TD"                  return 'DIR';
+<dir>\s*"TD"             {   this.popState();  return 'DIR'; }
-"BR"                  return 'DIR';
+<dir>\s*"BR"             {   this.popState();  return 'DIR'; }
+<dir>\s*"<"              {   this.popState();  return 'DIR'; }
+<dir>\s*">"              {   this.popState();  return 'DIR'; }
+<dir>\s*"^"              {   this.popState();  return 'DIR'; }
+<dir>\s*"v"              {   this.popState();  return 'DIR'; }
 [0-9]+                { return 'NUM';}
 \#                    return 'BRKT';
 ":::"                 return 'STYLE_SEPARATOR';
@@ -204,16 +208,16 @@ line
 graphConfig
     : SPACE graphConfig
     | NEWLINE graphConfig
-    | GRAPH SPACE DIR FirstStmtSeperator
+    | GRAPH DIR FirstStmtSeperator
-        { yy.setDirection($3);$$ = $3;}
+        { yy.setDirection($2);$$ = $2;}
-    | GRAPH SPACE TAGEND FirstStmtSeperator
+    // | GRAPH SPACE TAGEND FirstStmtSeperator
-        { yy.setDirection("LR");$$ = $3;}
+    //     { yy.setDirection("LR");$$ = $3;}
-    | GRAPH SPACE TAGSTART FirstStmtSeperator
+    // | GRAPH SPACE TAGSTART FirstStmtSeperator
-        { yy.setDirection("RL");$$ = $3;}
+    //     { yy.setDirection("RL");$$ = $3;}
-    | GRAPH SPACE UP FirstStmtSeperator
+    // | GRAPH SPACE UP FirstStmtSeperator
-        { yy.setDirection("BT");$$ = $3;}
+    //     { yy.setDirection("BT");$$ = $3;}
-    | GRAPH SPACE DOWN FirstStmtSeperator
+    // | GRAPH SPACE DOWN FirstStmtSeperator
-        { yy.setDirection("TB");$$ = $3;}
+    //     { yy.setDirection("TB");$$ = $3;}
     ;
 
 ending: endToken ending

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

@@ -1562,6 +1562,7 @@ describe('when parsing ', function() {
       } else {
         expect(vert['A'].text).toBe(char);
       }
+      flow.parser.yy.clear();
     };
 
     it("it should be able to parse a '.'", function() {
@@ -1764,4 +1765,27 @@ describe('when parsing ', function() {
     expect(vertices['a'].classes[0]).toBe('exClass');
     expect(vertices['b'].classes[0]).toBe('exClass');
   });
+
+  it('should be possible to use direction in node ids', function() {
+    let statement = '';
+
+    statement = statement + 'graph TD;' + '\n';
+    statement = statement + '  node1TB\n';
+
+    const res = flow.parser.parse(statement);
+    const vertices = flow.parser.yy.getVertices();
+    console.log(vertices);
+    const classes = flow.parser.yy.getClasses();
+    expect(vertices['node1TB'].id).toBe('node1TB');
+  });
+  it('should be possible to use direction in node ids', function() {
+    let statement = '';
+
+    statement = statement + 'graph TD;A--x|text including URL space|B;';
+    const res = flow.parser.parse(statement);
+    const vertices = flow.parser.yy.getVertices();
+    console.log(vertices);
+    const classes = flow.parser.yy.getClasses();
+    expect(vertices['A'].id).toBe('A');
+  });
 });

src/mermaid.spec.js

@@ -181,6 +181,10 @@ describe('when using mermaid and ', function() {
   });
 
   describe('checking validity of input ', function() {
+    beforeEach(function() {
+      flowParser.parser.yy = flowDb;
+      flowDb.clear();
+    });
     it('it should throw for an invalid definiton', function() {
       expect(() => mermaid.parse('this is not a mermaid diagram definition')).toThrow();
     });