mermaid-js#2032 Adding new statement to add choice shape in state dia…

…grams
beupgo · May 1, 2021 · 6dc7112 · 6dc7112
1 parent b20f866
commit 6dc7112
Show file tree

Hide file tree

Showing 11 changed files with 353 additions and 189 deletions.
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -329,6 +329,24 @@ describe('State diagram', () => {
       }
     );
   });
+  it('v2 it should be possibel to use a choice', () => {
+    imgSnapshotTest(
+      `
+  stateDiagram-v2
+    [*] --> Off
+    Off --> On
+    state MyChoice [[choice]]
+    On --> MyChoice
+    MyChoice --> Washing
+    MyChoice --> Drying
+    Washing --> Finished
+    Finished --> [*]
+    `,
+      {
+        logLevel: 0,
+      }
+    );
+  });
   it('v2 Simplest composite state', () => {
     imgSnapshotTest(
       `

diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
@@ -56,51 +56,16 @@
   linkStyle 0,1 color:orange, stroke: orange;
 </div>
       <div class="mermaid" style="width: 100%; height: 20%;">
+%% The width of composite states does not grow with the title
 stateDiagram-v2
     [*] --> Off
     Off --> On
-    On --> Select
-    Select --> Washing
+    state MyChoice [[choice]]
+    On --> MyChoice
+    MyChoice --> Washing
+    MyChoice --> Drying
     Washing --> Finished
     Finished --> [*]
-    state Select
-    {
-      [*] --> Prg1
-      Prg1 --> [*]
-      [*] --> Prg2
-      Prg2 --> [*]
-      [*] --> Prg3
-      Prg3 --> [*]
-    }
-
-    state Washing {
-      state Using_Prg1 {
-        [*] --> P1Step1
-        P1Step1 --> P1Step2
-        P1Step2 --> P1Step3
-        P1Step3 --> [*]
-      }
-      state Using_Prg2 {
-        [*] --> P2Step1
-        P2Step1 --> P2Step2
-        P2Step2 --> P2Step3
-        P2Step3 --> [*]
-      }
-
-      state Using_Prg3 {
-        [*] --> Step1
-        Step1 --> Step2
-        Step2 --> [*]
-      }
-      [*] --> Using_Prg1
-      [*] --> Using_Prg2
-      [*] --> Using_Prg3
-      Using_Prg1 --> [*]
-      Using_Prg2 --> [*]
-      Using_Prg3 --> [*]
-    }
-
-
       </div>
 <div class="mermaid2" style="width: 100%; height: 20%;">
 stateDiagram-v2

diff --git a/dist/mermaid.core.js b/dist/mermaid.core.js
diff --git a/dist/mermaid.core.js.map b/dist/mermaid.core.js.map
diff --git a/dist/mermaid.js b/dist/mermaid.js
diff --git a/dist/mermaid.js.map b/dist/mermaid.js.map
diff --git a/dist/mermaid.min.js b/dist/mermaid.min.js
diff --git a/dist/mermaid.min.js.map b/dist/mermaid.min.js.map
diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js
@@ -34,6 +34,44 @@ const question = (parent, node) => {
   return shapeSvg;
 };
 
+const choice = (parent, node) => {
+  const shapeSvg = parent
+    .insert('g')
+    .attr('class', 'node default')
+    .attr('id', node.domId || node.id);
+
+  const s = 28;
+  const points = [
+    { x: 0, y: s / 2 },
+    { x: s / 2, y: 0 },
+    { x: 0, y: -s / 2 },
+    { x: -s / 2, y: 0 }
+  ];
+
+  const choice = shapeSvg.insert('polygon', ':first-child').attr(
+    'points',
+    points
+      .map(function(d) {
+        return d.x + ',' + d.y;
+      })
+      .join(' ')
+  );
+  // center the circle around its coordinate
+  choice
+    .attr('class', 'state-start')
+    .attr('r', 7)
+    .attr('width', 28)
+    .attr('height', 28);
+  node.width = 28;
+  node.height = 28;
+
+  node.intersect = function(point) {
+    return intersect.circle(node, 14, point);
+  };
+
+  return shapeSvg;
+};
+
 const hexagon = (parent, node) => {
   const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
@@ -836,6 +874,7 @@ const shapes = {
   question,
   rect,
   rectWithTitle,
+  choice,
   circle,
   stadium,
   hexagon,

diff --git a/src/diagrams/state/parser/stateDiagram.jison b/src/diagrams/state/parser/stateDiagram.jison
@@ -56,8 +56,10 @@
 <INITIAL,struct>"state"\s+            { console.log('Starting STATE');this.pushState('STATE'); }
 <STATE>.*"<<fork>>"                   {this.popState();yytext=yytext.slice(0,-8).trim(); /*console.warn('Fork Fork: ',yytext);*/return 'FORK';}
 <STATE>.*"<<join>>"                   {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yytext);*/return 'JOIN';}
+<STATE>.*"<<choice>>"                   {this.popState();yytext=yytext.slice(0,-10).trim();/*console.warn('Fork Join: ',yytext);*/return 'CHOICE';}
 <STATE>.*"[[fork]]"                   {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Fork: ',yytext);*/return 'FORK';}
 <STATE>.*"[[join]]"                   {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yytext);*/return 'JOIN';}
+<STATE>.*"[[choice]]"                   {this.popState();yytext=yytext.slice(0,-10).trim();/*console.warn('Fork Join: ',yytext);*/return 'CHOICE';}
 <STATE>["]                   { console.log('Starting STATE_STRING');this.begin("STATE_STRING");}
 <STATE>\s*"as"\s+         {this.popState();this.pushState('STATE_ID');return "AS";}
 <STATE_ID>[^\n\{]*         {this.popState();/* console.log('STATE_ID', yytext);*/return "ID";}
@@ -168,6 +170,9 @@ statement
     | JOIN {
         $$={ stmt: 'state', id: $1, type: 'join' }
     }
+    | CHOICE {
+        $$={ stmt: 'state', id: $1, type: 'choice' }
+    }
     | CONCURRENT {
         $$={ stmt: 'state', id: yy.getDividerId(), type: 'divider' }
     }

diff --git a/src/diagrams/state/styles.js b/src/diagrams/state/styles.js
@@ -96,6 +96,11 @@ g.stateGroup line {
   stroke: ${options.nodeBorder};
   stroke-width: 1px;
 }
+.node polygon {
+  fill: ${options.mainBkg};
+  stroke: ${options.nodeBorder};
+  stroke-width: 1px;
+}
 #statediagram-barbEnd {
   fill: ${options.lineColor};
 }