#2050 Adding possibility to render subgrapgs in different directions

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

@@ -0,0 +1,95 @@
+import flowDb from '../flowDb';
+import flow from './flow';
+import filter from 'lodash/filter';
+import { setConfig } from '../../../config';
+
+setConfig({
+  securityLevel: 'strict'
+});
+
+describe('when parsing directions', function() {
+  beforeEach(function() {
+    flow.parser.yy = flowDb;
+    flow.parser.yy.clear();
+    flow.parser.yy.setGen('gen-2');
+  });
+
+
+  fit('should use default direction from top level', function() {
+    const res = flow.parser.parse(`flowchart TB
+    subgraph A
+      a --> b
+    end`);
+
+    const subgraphs = flow.parser.yy.getSubGraphs();
+    expect(subgraphs.length).toBe(1);
+    const subgraph = subgraphs[0];
+    expect(subgraph.nodes.length).toBe(2);
+    expect(subgraph.nodes[0]).toBe('b');
+    expect(subgraph.nodes[1]).toBe('a');
+    expect(subgraph.id).toBe('A');
+    expect(subgraph.dir).toBe('TB');
+  });
+  fit('should handle a subgraph with a direction', function() {
+    const res = flow.parser.parse(`flowchart TB
+    subgraph A
+      direction BT
+      a --> b
+    end`);
+
+    const subgraphs = flow.parser.yy.getSubGraphs();
+    expect(subgraphs.length).toBe(1);
+    const subgraph = subgraphs[0];
+    expect(subgraph.nodes.length).toBe(2);
+    expect(subgraph.nodes[0]).toBe('b');
+    expect(subgraph.nodes[1]).toBe('a');
+    expect(subgraph.id).toBe('A');
+    expect(subgraph.dir).toBe('BT');
+  });
+  fit('should use the last defined direction', function() {
+    const res = flow.parser.parse(`flowchart TB
+    subgraph A
+      direction BT
+      a --> b
+      direction RL
+    end`);
+
+    const subgraphs = flow.parser.yy.getSubGraphs();
+    expect(subgraphs.length).toBe(1);
+    const subgraph = subgraphs[0];
+    expect(subgraph.nodes.length).toBe(2);
+    expect(subgraph.nodes[0]).toBe('b');
+    expect(subgraph.nodes[1]).toBe('a');
+    expect(subgraph.id).toBe('A');
+    expect(subgraph.dir).toBe('RL');
+  });
+
+  fit('should handle nested subgraphs 1', function() {
+    const res = flow.parser.parse(`flowchart TB
+    subgraph A
+      direction RL
+      b-->B
+      a
+    end
+    a-->c
+    subgraph B
+      direction LR
+      c
+    end`);
+
+    const subgraphs = flow.parser.yy.getSubGraphs();
+    expect(subgraphs.length).toBe(2);
+
+    const subgraphA = filter(subgraphs,o => o.id === 'A')[0];
+    const subgraphB = filter(subgraphs,o => o.id === 'B')[0];
+
+    expect(subgraphB.nodes[0]).toBe('c');
+    expect(subgraphB.dir).toBe('LR');
+    expect(subgraphA.nodes).toContain('B');
+    expect(subgraphA.nodes).toContain('b');
+    expect(subgraphA.nodes).toContain('a');
+    expect(subgraphA.nodes).not.toContain('c');
+    expect(subgraphA.dir).toBe('RL');
+  });
+
+});

src/diagrams/flowchart/parser/flow.jison

@@ -92,6 +92,12 @@ that id.
 <dir>\s*">"              {   this.popState();  return 'DIR'; }
 <dir>\s*"^"              {   this.popState();  return 'DIR'; }
 <dir>\s*"v"              {   this.popState();  return 'DIR'; }
+
+.*direction\s+TB[^\n]*                                      return 'direction_tb';
+.*direction\s+BT[^\n]*                                      return 'direction_bt';
+.*direction\s+RL[^\n]*                                      return 'direction_rl';
+.*direction\s+LR[^\n]*                                      return 'direction_lr';
+
 [0-9]+                { return 'NUM';}
 \#                    return 'BRKT';
 ":::"                 return 'STYLE_SEPARATOR';
@@ -327,6 +333,7 @@ statement
     // {$$=yy.addSubGraph($3,$5,$3);}
     | subgraph separator document end
     {$$=yy.addSubGraph(undefined,$3,undefined);}
+    | direction
     ;
 
 separator: NEWLINE | SEMI | EOF ;
@@ -537,6 +544,17 @@ alphaNumStatement
         {$$='-';}
     ;
 
+direction
+    : direction_tb
+    { $$={stmt:'dir', value:'TB'};}
+    | direction_bt
+    { $$={stmt:'dir', value:'BT'};}
+    | direction_rl
+    { $$={stmt:'dir', value:'RL'};}
+    | direction_lr
+    { $$={stmt:'dir', value:'LR'};}
+    ;
+
 alphaNumToken  : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ;
 
 idStringToken  : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM|  COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP;