Merge of feat: sequence diagram background rect #889

e2e/README.md

@@ -5,5 +5,5 @@ These tests are end to end tests in the sense that they actually render a full d
 Apart from beeing rendered in a browser the tests perform image snapshots of the diagrams. The tests is handled in the same way as regular jest snapshots tests with the difference that an image comparison is performed instead of a comparison of the generated code.
 
 ## To run the tests
-1. Start the dev server by running **yarn dev**
+1. Start the dev server by running ***yarn dev***
 2. Run yarn e2e to run the tests

src/diagrams/flowchart/parser/flow.jison

@@ -79,6 +79,7 @@
 "-)"                  return '-)';
 \-                    return 'MINUS';
 "."                   return 'DOT';
+[\_]                  return 'UNDERSCORE';
 \+                    return 'PLUS';
 \%                    return 'PCT';
 "="                   return 'EQUALS';
@@ -263,79 +264,71 @@ statement
 separator: NEWLINE | SEMI | EOF ;
 
 verticeStatement:
-     vertex link vertex
+    vertex link vertex
         { yy.addLink($1,$3,$2);$$ = [$1,$3];}  
-     | vertex
+    | vertex link vertex DOT idString
+       { yy.addLink($1,$3,$2);$$ = [$1,$3];yy.setClass($3,$5);}
+    | vertex DOT idString link vertex 
+       { yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($1,$3);}
+    | vertex DOT idString link vertex DOT idString
+       { yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($5,$7);yy.setClass($1,$3);}   
+    |vertex
         {$$ = [$1];}
+    |vertex DOT idString
+        {$$ = [$1];yy.setClass($1,$3)}    
     ;
 
-vertex:  alphaNum SQS text SQE
+vertex:  idString SQS text SQE 
         {$$ = $1;yy.addVertex($1,$3,'square');}
-    |  alphaNum SQS text SQE spaceList
+    |  idString SQS text SQE spaceList
         {$$ = $1;yy.addVertex($1,$3,'square');}
-    | alphaNum PS PS text PE PE
+    | idString PS PS text PE PE
         {$$ = $1;yy.addVertex($1,$4,'circle');}
-    | alphaNum PS PS text PE PE spaceList
+    | idString PS PS text PE PE spaceList
         {$$ = $1;yy.addVertex($1,$4,'circle');}
-    | alphaNum '(-' text '-)'
+    | idString '(-' text '-)'
         {$$ = $1;yy.addVertex($1,$3,'ellipse');}
-    | alphaNum '(-' text '-)' spaceList
+    | idString '(-' text '-)' spaceList
         {$$ = $1;yy.addVertex($1,$3,'ellipse');}
-    | alphaNum PS text PE
+    | idString PS text PE
         {$$ = $1;yy.addVertex($1,$3,'round');}
-    | alphaNum PS text PE spaceList
+    | idString PS text PE spaceList
         {$$ = $1;yy.addVertex($1,$3,'round');}
-    | alphaNum DIAMOND_START text DIAMOND_STOP
+    | idString DIAMOND_START text DIAMOND_STOP
         {$$ = $1;yy.addVertex($1,$3,'diamond');}
-    | alphaNum DIAMOND_START text DIAMOND_STOP spaceList
+    | idString DIAMOND_START text DIAMOND_STOP spaceList
         {$$ = $1;yy.addVertex($1,$3,'diamond');}
-    | alphaNum TAGEND text SQE
+    | idString TAGEND text SQE
         {$$ = $1;yy.addVertex($1,$3,'odd');}
-    | alphaNum TAGEND text SQE spaceList
+    | idString TAGEND text SQE spaceList
         {$$ = $1;yy.addVertex($1,$3,'odd');}
-    | alphaNum TRAPSTART text TRAPEND
+    | idString TRAPSTART text TRAPEND
         {$$ = $1;yy.addVertex($1,$3,'trapezoid');}
-    | alphaNum TRAPSTART text TRAPEND spaceList
+    | idString TRAPSTART text TRAPEND spaceList
         {$$ = $1;yy.addVertex($1,$3,'trapezoid');}
-    | alphaNum INVTRAPSTART text INVTRAPEND
+    | idString INVTRAPSTART text INVTRAPEND
         {$$ = $1;yy.addVertex($1,$3,'inv_trapezoid');}
-    | alphaNum INVTRAPSTART text INVTRAPEND spaceList
+    | idString INVTRAPSTART text INVTRAPEND spaceList
         {$$ = $1;yy.addVertex($1,$3,'inv_trapezoid');}
-    | alphaNum TRAPSTART text INVTRAPEND
+    | idString TRAPSTART text INVTRAPEND
         {$$ = $1;yy.addVertex($1,$3,'lean_right');}
-    | alphaNum TRAPSTART text INVTRAPEND spaceList
+    | idString TRAPSTART text INVTRAPEND spaceList
         {$$ = $1;yy.addVertex($1,$3,'lean_right');}
-    | alphaNum INVTRAPSTART text TRAPEND
+    | idString INVTRAPSTART text TRAPEND
         {$$ = $1;yy.addVertex($1,$3,'lean_left');}
-    | alphaNum INVTRAPSTART text TRAPEND spaceList
+    | idString INVTRAPSTART text TRAPEND spaceList
         {$$ = $1;yy.addVertex($1,$3,'lean_left');}
-/*  | alphaNum SQS text TAGSTART
+/*  | idString SQS text TAGSTART
         {$$ = $1;yy.addVertex($1,$3,'odd_right');}
-    | alphaNum SQS text TAGSTART spaceList
+    | idString SQS text TAGSTART spaceList
         {$$ = $1;yy.addVertex($1,$3,'odd_right');} */
-    | alphaNum
+    | idString
         {$$ = $1;yy.addVertex($1);}
-    | alphaNum spaceList
+    | idString spaceList
         {$$ = $1;yy.addVertex($1);}
     ;
 
-alphaNum
-    : alphaNumStatement
-    {$$=$1;}
-    | alphaNum alphaNumStatement
-    {$$=$1+''+$2;}
-    ;
 
-alphaNumStatement
-    : DIR
-        {$$=$1;}
-    | alphaNumToken
-        {$$=$1;}
-    | DOWN
-        {$$='v';}
-    | MINUS
-        {$$='-';}
-    ;
 
 link: linkStatement arrowText
     {$1.text = $2;$$ = $1;}
@@ -533,7 +526,34 @@ textToken      : textNoTagsToken | TAGSTART | TAGEND | '=='  | '--' | PCT | DEFA
 
 textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;
 
-alphaNumToken  : ALPHA | PUNCTUATION | UNICODE_TEXT | NUM | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT ;
+idString
+    :idStringToken
+    {$$=$1}
+    | idString idStringToken
+    {$$=$1+''+$2}
+    ;
+
+alphaNum
+    : alphaNumStatement
+    {$$=$1;}
+    | alphaNum alphaNumStatement
+    {$$=$1+''+$2;}
+    ;
+
+alphaNumStatement
+    : DIR
+        {$$=$1;}
+    | alphaNumToken
+        {$$=$1;}
+    | DOWN
+        {$$='v';}
+    | MINUS
+        {$$='-';}
+    ;
+
+alphaNumToken  : PUNCTUATION | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT ;
+
+idStringToken  : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM|  COLON | COMMA | PLUS |MINUS| DOWN |EQUALS | MULT | BRKT ;
 
 graphCodeTokens:  TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI ;
 %%

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

@@ -1508,6 +1508,17 @@ describe('when parsing ', function () {
     expect(edges.length).toBe(0)
     expect(vert['i-d'].styles.length).toBe(0)
   })
+  fit('should handle a single node with alphanumerics containing a underscore sign', function () {
+    // Silly but syntactically correct
+    const res = flow.parser.parse('graph TD;i_d;')
+
+    const vert = flow.parser.yy.getVertices()
+    const edges = flow.parser.yy.getEdges()
+
+    expect(edges.length).toBe(0)
+    expect(vert['i_d'].styles.length).toBe(0)
+  })
+  
     // log.debug(flow.parser.parse('graph TD;style Q background:#fff;'));
   it('should handle styles for vertices', function () {
     const res = flow.parser.parse('graph TD;style Q background:#fff;')
@@ -1685,6 +1696,73 @@ describe('when parsing ', function () {
     expect(classes['exClass'].styles[0]).toBe('background:#bbb')
     expect(classes['exClass'].styles[1]).toBe('border:1px solid red')
   })
+  it('should be possible to apply a class to a vertex directly', function () {
+    let statement = ''
+
+    statement = statement + 'graph TD;' + '\n'
+    statement = statement + 'classDef exClass background:#bbb,border:1px solid red;' + '\n'
+    statement = statement + 'a-->b[test].exClass;' + '\n'
+
+    const res = flow.parser.parse(statement)
+    const vertices = flow.parser.yy.getVertices()
+    const classes = flow.parser.yy.getClasses()
+
+    expect(classes['exClass'].styles.length).toBe(2)
+    expect(vertices['b'].classes[0]).toBe('exClass')
+    expect(classes['exClass'].styles[0]).toBe('background:#bbb')
+    expect(classes['exClass'].styles[1]).toBe('border:1px solid red')
+  })
+
+  it('should be possible to apply a class to a vertex directly : usecase A[text].class ', function () {
+    let statement = ''
+
+    statement = statement + 'graph TD;' + '\n'
+    statement = statement + 'classDef exClass background:#bbb,border:1px solid red;' + '\n'
+    statement = statement + 'b[test].exClass;' + '\n'
+
+    const res = flow.parser.parse(statement)
+    const vertices = flow.parser.yy.getVertices()
+    const classes = flow.parser.yy.getClasses()
+
+    expect(classes['exClass'].styles.length).toBe(2)
+    expect(vertices['b'].classes[0]).toBe('exClass')
+    expect(classes['exClass'].styles[0]).toBe('background:#bbb')
+    expect(classes['exClass'].styles[1]).toBe('border:1px solid red')
+  })
+
+  it('should be possible to apply a class to a vertex directly : usecase A[text].class-->B[test2] ', function () {
+    let statement = ''
+
+    statement = statement + 'graph TD;' + '\n'
+    statement = statement + 'classDef exClass background:#bbb,border:1px solid red;' + '\n'
+    statement = statement + 'A[test].exClass-->B[test2];' + '\n'
+
+    const res = flow.parser.parse(statement)
+    const vertices = flow.parser.yy.getVertices()
+    const classes = flow.parser.yy.getClasses()
+
+    expect(classes['exClass'].styles.length).toBe(2)
+    expect(vertices['A'].classes[0]).toBe('exClass')
+    expect(classes['exClass'].styles[0]).toBe('background:#bbb')
+    expect(classes['exClass'].styles[1]).toBe('border:1px solid red')
+  })
+
+  it('should be possible to apply a class to a vertex directly 2', function () {
+    let statement = ''
+
+    statement = statement + 'graph TD;' + '\n'
+    statement = statement + 'classDef exClass background:#bbb,border:1px solid red;' + '\n'
+    statement = statement + 'a-->b[1 a a text!.].exClass;' + '\n'
+
+    const res = flow.parser.parse(statement)
+    const vertices = flow.parser.yy.getVertices()
+    const classes = flow.parser.yy.getClasses()
+
+    expect(classes['exClass'].styles.length).toBe(2)
+    expect(vertices['b'].classes[0]).toBe('exClass')
+    expect(classes['exClass'].styles[0]).toBe('background:#bbb')
+    expect(classes['exClass'].styles[1]).toBe('border:1px solid red')
+  })
   it('should be possible to apply a class to a comma separated list of vertices', function () {
     let statement = ''