From 06a91d85648cc32d06811920e2b54f27349cfe0e Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Mon, 26 Aug 2019 20:10:44 +0200
Subject: [PATCH] #835 Backwords compatible syntax for associating classes with
 nodes/vertices

---
 e2e/platform/subgraph.html                 |  5 +++--
 src/diagrams/flowchart/parser/flow.jison   | 11 ++++++-----
 src/diagrams/flowchart/parser/flow.spec.js |  8 ++++----
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/e2e/platform/subgraph.html b/e2e/platform/subgraph.html
index 2241153d03..c22de76f18 100644
--- 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
index 90c2fc83c6..ff02bb4e1e 100644
--- 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
index 0c055faa38..de2f71f8e2 100644
--- 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()