#835 Backwords compatible syntax for associating classes with nodes/v…

…ertices
mermaid-js · Aug 26, 2019 · 06a91d8 · 06a91d8
1 parent e1f0367
commit 06a91d8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/e2e/platform/subgraph.html b/e2e/platform/subgraph.html
@@ -22,11 +22,12 @@
   </div>
   <div class="mermaid">
     graph TD
-      A[Christmas] -->|Get money| B(Go shopping)
+      A.a[Christmas]:::someclass -->|Get money| B(Go shopping):::someclass
       subgraph test["id starting with number"]
-      A
+      A.a
       end
       style test fill:#F99,stroke-width:2px,stroke:#F0F
+      classDef someclass fill:#f96;
   </div>
   <div class="mermaid">
       graph TD

diff --git a/src/diagrams/flowchart/parser/flow.jison b/src/diagrams/flowchart/parser/flow.jison
@@ -31,6 +31,7 @@
 "BR"                  return 'DIR';
 [0-9]+                 return 'NUM';
 \#                    return 'BRKT';
+":::"                 return 'STYLE_SEPARATOR';
 ":"                   return 'COLON';
 ";"                   return 'SEMI';
 ","                   return 'COMMA';
@@ -266,15 +267,15 @@ separator: NEWLINE | SEMI | EOF ;
 verticeStatement:
     vertex link vertex
         { yy.addLink($1,$3,$2);$$ = [$1,$3];}
-    | vertex link vertex DOT idString
+    | vertex link vertex STYLE_SEPARATOR idString
        { yy.addLink($1,$3,$2);$$ = [$1,$3];yy.setClass($3,$5);}
-    | vertex DOT idString link vertex
+    | vertex STYLE_SEPARATOR idString link vertex
        { yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($1,$3);}
-    | vertex DOT idString link vertex DOT idString
+    | vertex STYLE_SEPARATOR idString link vertex STYLE_SEPARATOR idString
        { yy.addLink($1,$5,$4);$$ = [$1,$5];yy.setClass($5,$7);yy.setClass($1,$3);}
     |vertex
         {$$ = [$1];}
-    |vertex DOT idString
+    |vertex STYLE_SEPARATOR idString
         {$$ = [$1];yy.setClass($1,$3)}
     ;
 
@@ -553,7 +554,7 @@ alphaNumStatement
 
 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 ;
+idStringToken  : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM|  COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION;
 
 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 ;
 %%
diff --git a/src/diagrams/flowchart/parser/flow.spec.js b/src/diagrams/flowchart/parser/flow.spec.js
@@ -1618,7 +1618,7 @@ describe('when parsing ', function () {
 
     statement = statement + 'graph TD;' + '\n'
     statement = statement + 'classDef exClass background:#bbb,border:1px solid red;' + '\n'
-    statement = statement + 'a-->b[test].exClass;' + '\n'
+    statement = statement + 'a-->b[test]:::exClass;' + '\n'
 
     const res = flow.parser.parse(statement)
     const vertices = flow.parser.yy.getVertices()
@@ -1635,7 +1635,7 @@ describe('when parsing ', function () {
 
     statement = statement + 'graph TD;' + '\n'
     statement = statement + 'classDef exClass background:#bbb,border:1px solid red;' + '\n'
-    statement = statement + 'b[test].exClass;' + '\n'
+    statement = statement + 'b[test]:::exClass;' + '\n'
 
     const res = flow.parser.parse(statement)
     const vertices = flow.parser.yy.getVertices()
@@ -1652,7 +1652,7 @@ describe('when parsing ', function () {
 
     statement = statement + 'graph TD;' + '\n'
     statement = statement + 'classDef exClass background:#bbb,border:1px solid red;' + '\n'
-    statement = statement + 'A[test].exClass-->B[test2];' + '\n'
+    statement = statement + 'A[test]:::exClass-->B[test2];' + '\n'
 
     const res = flow.parser.parse(statement)
     const vertices = flow.parser.yy.getVertices()
@@ -1669,7 +1669,7 @@ describe('when parsing ', function () {
 
     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'
+    statement = statement + 'a-->b[1 a a text!.]:::exClass;' + '\n'
 
     const res = flow.parser.parse(statement)
     const vertices = flow.parser.yy.getVertices()