Added directive support to state diagrams

Fixed an issue with markerUnits: (default is 'strokeWidth' not 0

src/dagre-wrapper/markers.js

@@ -240,7 +240,7 @@ const barb = (elem, type) => {
     .attr('refY', 7)
     .attr('markerWidth', 20)
     .attr('markerHeight', 14)
-    .attr('markerUnits', 0)
+    .attr('markerUnits', 'strokeWidth')
     .attr('orient', 'auto')
     .append('path')
     .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');

src/diagrams/state/parser/stateDiagram.jison

@@ -26,16 +26,27 @@
 %x FLOATING_NOTE
 %x FLOATING_NOTE_ID
 %x struct
+%x open_directive
+%x type_directive
+%x arg_directive
+%x close_directive
 
 // A special state for grabbing text up to the first comment/newline
 %x LINE
 
 %%
+\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
+<open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
+<type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
+<type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
+<arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
+\%\%(?!\{)[^\n]*                                                /* skip comments */
+[^\}]\%\%[^\n]*                                                 /* skip comments */{ console.log('Crap after close'); }
 
 [\n]+                            return 'NL';
-\s+                              /* skip all whitespace */
+[\s]+                              /* skip all whitespace */
-<ID,STATE,struct,LINE>((?!\n)\s)+       /* skip same-line whitespace */
+<ID,STATE,struct,LINE,open_directive,type_directive,arg_directive,close_directive>((?!\n)\s)+       /* skip same-line whitespace */
-<INITIAL,ID,STATE,struct,LINE>\#[^\n]*  /* skip comments */
+<INITIAL,ID,STATE,struct,LINE,open_directive,type_directive,arg_directive,close_directive>\#[^\n]*  /* skip comments */
 \%%[^\n]*                        /* skip comments */
 
 "scale"\s+            { this.pushState('SCALE'); /* console.log('Got scale', yytext);*/ return 'scale'; }
@@ -93,6 +104,7 @@
 start
 	: SPACE start
 	| NL start
+	| directive start
 	| SD document { /*console.warn('Root document', $2);*/ yy.setRootDoc($2);return $2; }
 	;
 
@@ -165,6 +177,17 @@ statement
         $$={ stmt: 'state', id: $3.trim(), note:{position: $2.trim(), text: $4.trim()}};
     }
     | note NOTE_TEXT AS ID
+  	| directive
+    ;
+
+directive
+    : openDirective typeDirective closeDirective
+    | openDirective typeDirective ':' argDirective closeDirective
+    ;
+
+eol
+    : NL
+    | ';'
     ;
 
 idStatement
@@ -177,4 +200,20 @@ notePosition
     | right_of
     ;
 
+openDirective
+  : open_directive { yy.parseDirective('%%{', 'open_directive'); }
+  ;
+
+typeDirective
+  : type_directive { yy.parseDirective($1, 'type_directive'); }
+  ;
+
+argDirective
+  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
+  ;
+
+closeDirective
+  : close_directive { yy.parseDirective('}%%', 'close_directive', 'state'); }
+  ;
+
 %%

src/diagrams/state/stateDb.js

@@ -1,9 +1,16 @@
 import { logger } from '../../logger';
 import { generateId } from '../../utils';
+import mermaidAPI from '../../mermaidAPI';
+import configApi from '../../config';
 
 const clone = o => JSON.parse(JSON.stringify(o));
 
 let rootDoc = [];
+
+export const parseDirective = function(statement, context, type) {
+  mermaidAPI.parseDirective(this, statement, context, type);
+};
+
 const setRootDoc = o => {
   logger.info('Setting root doc', o);
   // rootDoc = { id: 'root', doc: o };
@@ -235,6 +242,8 @@ export const relationType = {
 const trimColon = str => (str && str[0] === ':' ? str.substr(1).trim() : str.trim());
 
 export default {
+  parseDirective,
+  getConfig: () => configApi.getConfig().state,
   addState,
   clear,
   getState,

src/diagrams/state/stateDiagram.spec.js

@@ -26,6 +26,16 @@ describe('state diagram, ', function() {
 
       parser.parse(str);
     });
+    it('simple with directive', function() {
+      const str = `%%{init: {'logLevel': 0 }}%%
+      stateDiagram\n
+          State1 : this is another string
+          [*] --> State1
+          State1 --> [*]
+      `;
+
+      parser.parse(str);
+    });
     it('should handle relation definitions', function() {
       const str = `stateDiagram\n
         [*] --> State1
@@ -337,6 +347,9 @@ describe('state diagram, ', function() {
 
       parser.parse(str);
     });
+  });
+  describe('when parsing an ignored info graph it', function() {
+
     xit('should handle if statements', function() {
       const str = `stateDiagram\n
       [*] --> "Order Submitted"