Merge pull request #1582 from cmmoran/develop

Directive support for many diagrams, config bugfix

cypress/integration/rendering/theme.spec.js

@@ -224,6 +224,7 @@ erDiagram
       it('should render a user journey diagram', () => {
         imgSnapshotTest(
           `
+        %%{init: { 'logLevel': 0, 'theme': '${theme}'} }%%
         journey
             title My working day
             section Go to work
@@ -232,7 +233,8 @@ erDiagram
               Do work: 1: Me, Cat
             section Go home
               Go downstairs: 5: Me
-              Sit down: 5: Me          `,
+              Sit down: 5: Me
+                        `,
           {theme}
         );
         cy.get('svg');

docs/Setup.md

@@ -526,7 +526,7 @@ This might need adjustment to match your locale and preferences
 
 ## journey
 
-The object containing configurations specific for sequence diagrams
+The object containing configurations specific for journey diagrams
 
 ### diagramMarginX
 

src/config.js

@@ -593,7 +593,7 @@ const config = {
     axisFormat: '%Y-%m-%d'
   },
   /**
-   * The object containing configurations specific for sequence diagrams
+   * The object containing configurations specific for journey diagrams
    */
   journey: {
     /**

src/dagre-wrapper/GraphObjects.md

@@ -113,16 +113,16 @@ Required edgeData for proper rendering:
 | label      | overlap between label and labelText?     |
 | labelPos   |                                          |
 | labelType  | overlap between label and labelText?     |
-| thickness  | Sets the thinkess of the edge. Can be ['normal', 'thick'] |
-| pattern    | Sets the pattern of the edge. Can be ['solid', 'dotted', 'dashed']    |
+| thickness  | Sets the thinkess of the edge. Can be \['normal', 'thick'\] |
+| pattern    | Sets the pattern of the edge. Can be \['solid', 'dotted', 'dashed'\]    |
 
 
 # Markers
 
 Define what markers that should be included in the diagram with the insert markers function. The function takes two arguments, first the element in which the markers should be included and a list of the markers that should be added.
 
 Ex:
-insertMarkers(el, ['point', 'circle'])
+insertMarkers(el, \['point', 'circle'\])
 
 The example above adds the markers point and cross. This means that edges with the arrowTypes arrow_cross, double_arrow_cross, arrow_point and double_arrow_cross will get the corresponding markers but arrowType arrow_cross will have no impact.
 
@@ -136,4 +136,4 @@ Current markers:
 # Common functions used by the renderer to be implemented by the Db
 
 getDirection
-getClasses
+getClasses

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/class/classDb.js

@@ -1,8 +1,9 @@
 import { select } from 'd3';
 import { logger } from '../../logger';
-import { getConfig } from '../../config';
+import configApi, { getConfig } from '../../config';
 import common from '../common/common';
 import utils from '../../utils';
+import mermaidAPI from '../../mermaidAPI';
 
 const MERMAID_DOM_ID_PREFIX = 'classid-';
 
@@ -14,6 +15,10 @@ let classCounter = 0;
 
 let funs = [];
 
+export const parseDirective = function(statement, context, type) {
+  mermaidAPI.parseDirective(this, statement, context, type);
+};
+
 const splitClassNameAndType = function(id) {
   let genericType = '';
   let className = id;
@@ -288,6 +293,8 @@ const setupToolTips = function(element) {
 funs.push(setupToolTips);
 
 export default {
+  parseDirective,
+  getConfig: () => configApi.getConfig().class,
   addClass,
   bindFunctions,
   clear,

src/diagrams/class/classDiagram.spec.js

@@ -242,69 +242,74 @@ describe('class diagram, ', function () {
 
     it('should handle comments at the start', function () {
       const str =
-        '%% Comment\n' +
-        'classDiagram\n' +
-        'class Class1 {\n' +
-        'int : test\n' +
-        'string : foo\n' +
-        'test()\n' +
-        'foo()\n' +
-        '}';
+        `%% Comment
+        classDiagram
+        class Class1 {
+          int : test
+          string : foo
+          test()
+          foo()
+        }`;
       parser.parse(str);
     });
 
     it('should handle comments at the end', function () {
       const str =
-        'classDiagram\n' +
-        'class Class1 {\n' +
-        'int : test\n' +
-        'string : foo\n' +
-        'test()\n' +
-        'foo()\n' +
-        '\n}' +
-        '%% Comment\n';
+        `classDiagram
+class Class1 {
+int : test
+string : foo
+test()
+foo()
+
+}
+%% Comment
+`;
 
       parser.parse(str);
     });
 
     it('should handle comments at the end no trailing newline', function () {
       const str =
-      'classDiagram\n' +
-      'class Class1 {\n' +
-        'int : test\n' +
-        'string : foo\n' +
-        'test()\n' +
-        'foo()\n' +
-        '}\n' +
-        '%% Comment';
+      `classDiagram
+class Class1 {
+int : test
+string : foo
+test()
+foo()
+}
+%% Comment`;
 
       parser.parse(str);
     });
 
     it('should handle a comment with multiple line feeds', function () {
       const str =
-        'classDiagram\n\n\n' +
-        '%% Comment\n\n' +
-        'class Class1 {\n' +
-        'int : test\n' +
-        'string : foo\n' +
-        'test()\n' +
-        'foo()\n' +
-        '}';
+        `classDiagram
+
+
+%% Comment
+
+class Class1 {
+int : test
+string : foo
+test()
+foo()
+}`;
 
       parser.parse(str);
     });
 
     it('should handle a comment with mermaid class diagram code in them', function () {
       const str =
-        'classDiagram\n' +
-        '%% Comment Class01 <|-- Class02\n' +
-        'class Class1 {\n' +
-        'int : test\n' +
-        'string : foo\n' +
-        'test()\n' +
-        'foo()\n' +
-        '}';
+        `classDiagram
+%% Comment Class01 <|-- Class02
+class Class1 {
+int : test
+string : foo
+test()
+foo()
+}`;
 
       parser.parse(str);
     });
@@ -640,7 +645,7 @@ describe('class diagram, ', function () {
       expect(testClass.cssClasses.length).toBe(1);
       expect(testClass.cssClasses[0]).toBe('clickable');
     });
-    
+
     it('should associate link with tooltip', function () {
       const str = 'classDiagram\n' + 'class Class1\n' + 'Class1 : someMethod()\n' + 'link Class1 "google.com" "A tooltip"';
       parser.parse(str);

src/diagrams/class/parser/classDiagram.jison

@@ -6,25 +6,31 @@
 
 /* lexical grammar */
 %lex
-%x string generic struct
+%x string generic struct open_directive type_directive arg_directive
 
 %%
-\%\%[^\n]*\n*           /* do nothing */
-\n+                     return 'NEWLINE';
+\%\%\{                                                          { 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]*(\r?\n)+                                       /* skip comments */
+\%\%[^\n]*(\r?\n)*                                              /* skip comments */
+(\r?\n)+                return 'NEWLINE';
 \s+                     /* skip whitespace */
 "classDiagram-v2"       return 'CLASS_DIAGRAM';
 "classDiagram"          return 'CLASS_DIAGRAM';
-[\{]                    { this.begin("struct"); /*console.log('Starting struct');*/return 'STRUCT_START';}
+[{]                     { this.begin("struct"); /*console.log('Starting struct');*/ return 'STRUCT_START';}
 <struct><<EOF>>         return "EOF_IN_STRUCT";
-<struct>[\{]            return "OPEN_IN_STRUCT";
-<struct>\}              { /*console.log('Ending struct');*/this.popState(); return 'STRUCT_STOP';}}
-<struct>[\n]              /* nothing */
-<struct>[^\{\}\n]*      { /*console.log('lex-member: ' + yytext);*/  return "MEMBER";}
+<struct>[{]             return "OPEN_IN_STRUCT";
+<struct>[}]             { /*console.log('Ending struct');*/this.popState(); return 'STRUCT_STOP';}}
+<struct>[\n]            /* nothing */
+<struct>[^{}\n]*        { /*console.log('lex-member: ' + yytext);*/  return "MEMBER";}
 
 
 
 "class"               return 'CLASS';
-//"click"               return 'CLICK';
+//"click"             return 'CLICK';
 "callback"            return 'CALLBACK';
 "link"                return 'LINK';
 "<<"                  return 'ANNOTATION_START';
@@ -126,11 +132,39 @@
 
 %left '^'
 
-%start mermaidDoc
+%start start
 
 %% /* language grammar */
 
-mermaidDoc: graphConfig;
+start
+    : mermaidDoc
+    | directive start
+    ;
+
+mermaidDoc
+    : graphConfig
+    ;
+
+directive
+  : openDirective typeDirective closeDirective NEWLINE
+  | openDirective typeDirective ':' argDirective closeDirective NEWLINE
+  ;
+
+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', 'class'); }
+  ;
 
 graphConfig
     : CLASS_DIAGRAM NEWLINE statements EOF
@@ -156,6 +190,7 @@ statement
     | methodStatement
     | annotationStatement
     | clickStatement
+    | directive
     ;
 
 classStatement

src/diagrams/common/common.js

@@ -35,13 +35,14 @@ export const sanitizeText = (text, config) => {
   if (
     config.flowchart &&
     (config.flowchart.htmlLabels === false || config.flowchart.htmlLabels === 'false')
-  )
+  ) {
     htmlLabels = false;
+  }
 
   if (htmlLabels) {
-    var level = config.securityLevel;
+    const level = config.securityLevel;
 
-    if (level == 'antiscript') {
+    if (level === 'antiscript') {
       txt = removeScript(txt);
     } else if (level !== 'loose') {
       // eslint-disable-line

src/diagrams/er/erDb.js

@@ -2,6 +2,8 @@
  *
  */
 import { logger } from '../../logger';
+import mermaidAPI from '../../mermaidAPI';
+import configApi from '../../config';
 
 let entities = {};
 let relationships = [];
@@ -19,6 +21,10 @@ const Identification = {
   IDENTIFYING: 'IDENTIFYING'
 };
 
+export const parseDirective = function(statement, context, type) {
+  mermaidAPI.parseDirective(this, statement, context, type);
+};
+
 const addEntity = function(name) {
   if (typeof entities[name] === 'undefined') {
     entities[name] = name;
@@ -67,6 +73,8 @@ const clear = function() {
 export default {
   Cardinality,
   Identification,
+  parseDirective,
+  getConfig: () => configApi.getConfig().er,
   addEntity,
   getEntities,
   addRelationship,