#2032 Adding new statement to add choice shape in state diagrams

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,

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' }
     }

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};
 }