Merge branch 'develop' into enhancement/standardized_naming

src/config.js

@@ -8,7 +8,7 @@ import config from './defaultConfig';
 export const defaultConfig = Object.freeze(config);
 
 let siteConfig = assignWithDepth({}, defaultConfig);
-let siteConfigDelta;
+let configFromInitialize;
 let directives = [];
 let currentConfig = assignWithDepth({}, defaultConfig);
 
@@ -30,20 +30,14 @@ export const updateCurrentConfig = (siteCfg, _directives) => {
   cfg = assignWithDepth(cfg, sumOfDirectives);
 
   if (sumOfDirectives.theme) {
+    const tmpConfigFromInitialize = assignWithDepth({}, configFromInitialize);
     const themeVariables = assignWithDepth(
-      siteConfigDelta.themeVariables || {},
+      tmpConfigFromInitialize.themeVariables || {},
       sumOfDirectives.themeVariables
     );
     cfg.themeVariables = theme[cfg.theme].getThemeVariables(themeVariables);
   }
 
-  // if (cfg.theme && theme[cfg.theme]) {
-  //   let tVars = assignWithDepth({}, cfg.themeVariables);
-  //   tVars = assignWithDepth(tVars, themeVariables);
-  //   const variables = theme[cfg.theme].getThemeVariables(tVars);
-  //   cfg.themeVariables = variables;
-  // }
-
   currentConfig = cfg;
   return cfg;
 };
@@ -73,9 +67,10 @@ export const setSiteConfig = conf => {
   return siteConfig;
 };
 
-export const setSiteConfigDelta = conf => {
-  siteConfigDelta = assignWithDepth({}, conf);
+export const saveConfigFromInitilize = conf => {
+  configFromInitialize = assignWithDepth({}, conf);
 };
+
 export const updateSiteConfig = conf => {
   siteConfig = assignWithDepth(siteConfig, conf);
   updateCurrentConfig(siteConfig, directives);

src/dagre-wrapper/createLabel.js

@@ -65,7 +65,15 @@ function addHtmlLabel(node) {
 
   const label = node.label;
   const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
-  div.html('<span class="' + labelClass + '">' + label + '</span>');
+  div.html(
+    '<span class="' +
+      labelClass +
+      '" ' +
+      (node.labelStyle ? 'style="' + node.labelStyle + '"' : '') +
+      '>' +
+      label +
+      '</span>'
+  );
 
   applyStyle(div, node.labelStyle);
   div.style('display', 'inline-block');

src/dagre-wrapper/nodes.js

@@ -23,7 +23,9 @@ const question = (parent, node) => {
   log.info('Question main (Circle)');
 
   const questionElem = insertPolygonShape(shapeSvg, s, s, points);
+  questionElem.attr('style', node.style);
   updateNodeBounds(node, questionElem);
+
   node.intersect = function(point) {
     log.warn('Intersect called');
     return intersect.polygon(node, points, point);
@@ -47,11 +49,13 @@ const hexagon = (parent, node) => {
     { x: m, y: -h },
     { x: 0, y: -h / 2 }
   ];
+
   const hex = insertPolygonShape(shapeSvg, w, h, points);
+  hex.attr('style', node.style);
   updateNodeBounds(node, hex);
 
   node.intersect = function(point) {
-    return intersect.polygon(node, point);
+    return intersect.polygon(node, points, point);
   };
 
   return shapeSvg;
@@ -71,14 +75,18 @@ const rect_left_inv_arrow = (parent, node) => {
   ];
 
   const el = insertPolygonShape(shapeSvg, w, h, points);
-  updateNodeBounds(node, el);
+  el.attr('style', node.style);
+
+  node.width = w + h;
+  node.height = h;
 
   node.intersect = function(point) {
-    return intersect.polygon(node, point);
+    return intersect.polygon(node, points, point);
   };
 
   return shapeSvg;
 };
+
 const lean_right = (parent, node) => {
   const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
@@ -92,10 +100,11 @@ const lean_right = (parent, node) => {
   ];
 
   const el = insertPolygonShape(shapeSvg, w, h, points);
+  el.attr('style', node.style);
   updateNodeBounds(node, el);
 
   node.intersect = function(point) {
-    return intersect.polygon(node, point);
+    return intersect.polygon(node, points, point);
   };
 
   return shapeSvg;
@@ -114,10 +123,11 @@ const lean_left = (parent, node) => {
   ];
 
   const el = insertPolygonShape(shapeSvg, w, h, points);
+  el.attr('style', node.style);
   updateNodeBounds(node, el);
 
   node.intersect = function(point) {
-    return intersect.polygon(node, point);
+    return intersect.polygon(node, points, point);
   };
 
   return shapeSvg;
@@ -134,11 +144,13 @@ const trapezoid = (parent, node) => {
     { x: w - h / 6, y: -h },
     { x: h / 6, y: -h }
   ];
+
   const el = insertPolygonShape(shapeSvg, w, h, points);
+  el.attr('style', node.style);
   updateNodeBounds(node, el);
 
   node.intersect = function(point) {
-    return intersect.polygon(node, point);
+    return intersect.polygon(node, points, point);
   };
 
   return shapeSvg;
@@ -155,15 +167,18 @@ const inv_trapezoid = (parent, node) => {
     { x: w + (2 * h) / 6, y: -h },
     { x: (-2 * h) / 6, y: -h }
   ];
+
   const el = insertPolygonShape(shapeSvg, w, h, points);
+  el.attr('style', node.style);
   updateNodeBounds(node, el);
 
   node.intersect = function(point) {
-    return intersect.polygon(node, point);
+    return intersect.polygon(node, points, point);
   };
 
   return shapeSvg;
 };
+
 const rect_right_inv_arrow = (parent, node) => {
   const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
@@ -176,15 +191,18 @@ const rect_right_inv_arrow = (parent, node) => {
     { x: w + h / 2, y: -h },
     { x: 0, y: -h }
   ];
+
   const el = insertPolygonShape(shapeSvg, w, h, points);
+  el.attr('style', node.style);
   updateNodeBounds(node, el);
 
   node.intersect = function(point) {
-    return intersect.polygon(node, point);
+    return intersect.polygon(node, points, point);
   };
 
   return shapeSvg;
 };
+
 const cylinder = (parent, node) => {
   const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);
 
@@ -222,6 +240,7 @@ const cylinder = (parent, node) => {
   const el = shapeSvg
     .attr('label-offset-y', ry)
     .insert('path', ':first-child')
+    .attr('style', node.style)
     .attr('d', shape)
     .attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')');
 
@@ -277,6 +296,7 @@ const rect = (parent, node) => {
 
   return shapeSvg;
 };
+
 const rectWithTitle = (parent, node) => {
   // const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes);
 
@@ -389,6 +409,7 @@ const stadium = (parent, node) => {
   // add the rect
   const rect = shapeSvg
     .insert('rect', ':first-child')
+    .attr('style', node.style)
     .attr('rx', h / 2)
     .attr('ry', h / 2)
     .attr('x', -w / 2)
@@ -404,12 +425,14 @@ const stadium = (parent, node) => {
 
   return shapeSvg;
 };
+
 const circle = (parent, node) => {
   const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);
   const circle = shapeSvg.insert('circle', ':first-child');
 
   // center the circle around its coordinate
   circle
+    .attr('style', node.style)
     .attr('rx', node.rx)
     .attr('ry', node.ry)
     .attr('r', bbox.width / 2 + halfPadding)
@@ -445,11 +468,13 @@ const subroutine = (parent, node) => {
     { x: -8, y: -h },
     { x: -8, y: 0 }
   ];
+
   const el = insertPolygonShape(shapeSvg, w, h, points);
+  el.attr('style', node.style);
   updateNodeBounds(node, el);
 
   node.intersect = function(point) {
-    return intersect.polygon(node, point);
+    return intersect.polygon(node, points, point);
   };
 
   return shapeSvg;

src/diagrams/class/classDiagram.spec.js

@@ -8,6 +8,14 @@ describe('class diagram, ', function () {
       parser.yy = classDb;
     });
 
+    it('should handle backquoted class names', function() {
+      const str =
+        'classDiagram\n' +
+        'class `Car`';
+
+      parser.parse(str);
+    });
+
     it('should handle relation definitions', function () {
       const str =
         'classDiagram\n' +
@@ -20,6 +28,18 @@ describe('class diagram, ', function () {
       parser.parse(str);
     });
 
+    it('should handle backquoted relation definitions', function () {
+      const str =
+        'classDiagram\n' +
+        '`Class01` <|-- Class02\n' +
+        'Class03 *-- Class04\n' +
+        'Class05 o-- Class06\n' +
+        'Class07 .. Class08\n' +
+        'Class09 -- Class1';
+
+      parser.parse(str);
+    });
+
     it('should handle relation definition of different types and directions', function () {
       const str =
         'classDiagram\n' +
@@ -67,6 +87,17 @@ describe('class diagram, ', function () {
       parser.parse(str);
     });
 
+    it('should handle generic class with a literal name', function() {
+      const str =
+        'classDiagram\n' +
+        'class `Car`~T~\n' +
+        'Driver -- `Car` : drives >\n' +
+        '`Car` *-- Wheel : have 4 >\n' +
+        '`Car` -- Person : < owns';
+
+      parser.parse(str);
+    });
+
     it('should break when another `{`is encountered before closing the first one while defining generic class with brackets', function() {
       const str =
         'classDiagram\n' +
@@ -125,6 +156,22 @@ describe('class diagram, ', function () {
         parser.parse(str);
     });
 
+    it('should handle generic class with brackets and a literal name', function() {
+      const str =
+        'classDiagram\n' +
+        'class `Dummy_Class`~T~ {\n' +
+        'String data\n' +
+        '  void methods()\n' +
+        '}\n' +
+        '\n' +
+        'class Flight {\n' +
+        '   flightNumber : Integer\n' +
+        '   departureTime : Date\n' +
+        '}';
+
+        parser.parse(str);
+    });
+
     it('should handle class definitions', function() {
       const str =
         'classDiagram\n' +

src/diagrams/class/parser/classDiagram.jison

@@ -7,6 +7,7 @@
 /* lexical grammar */
 %lex
 %x string
+%x bqstring
 %x generic
 %x struct
 %x href
@@ -49,6 +50,10 @@
 <string>["]           this.popState();
 <string>[^"]*         return "STR";
 
+[`]                   this.begin("bqstring");
+<bqstring>[`]         this.popState();
+<bqstring>[^`]+       return "BQUOTE_STR";
+
 /*
 ---interactivity command---
 'href' adds a link to the specified node. 'href' can only be specified when the
@@ -214,10 +219,15 @@ statements
     ;
 
 className
-    : alphaNumToken { $$=$1; }
+    : 
+    | alphaNumToken { $$=$1; }
+    | classLiteralName { $$=$1; }
     | alphaNumToken className { $$=$1+$2; }
+    | classLiteralName className { $$=$1+$2; }
     | alphaNumToken GENERICTYPE className { $$=$1+'~'+$2+$3; }
+    | classLiteralName GENERICTYPE className { $$=$1+'~'+$2+$3; }
     | alphaNumToken GENERICTYPE { $$=$1+'~'+$2; }
+    | classLiteralName GENERICTYPE { $$=$1+'~'+$2; }
     ;
 
 statement
@@ -309,4 +319,6 @@ textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;
 
 alphaNumToken  : UNICODE_TEXT | NUM | ALPHA;
 
+classLiteralName : BQUOTE_STR;
+
 %%

src/diagrams/flowchart/styles.js

@@ -3,9 +3,16 @@ const getStyles = options =>
     font-family: ${options.fontFamily};
     color: ${options.nodeTextColor || options.textColor};
   }
+  .cluster-label text {
+    fill: ${options.titleColor};
+  }
+  .cluster-label span {
+    color: ${options.titleColor};
+  }
 
-  .label text {
+  .label text,span {
     fill: ${options.nodeTextColor || options.textColor};
+    color: ${options.nodeTextColor || options.textColor};
   }
 
   .node rect,
@@ -59,6 +66,13 @@ const getStyles = options =>
     fill: ${options.titleColor};
   }
 
+  .cluster span {
+    color: ${options.titleColor};
+  }
+  // .cluster div {
+  //   color: ${options.titleColor};
+  // }
+
   div.mermaidTooltip {
     position: absolute;
     text-align: center;

src/mermaidAPI.js

@@ -223,12 +223,6 @@ const render = function(id, _txt, cb, container) {
   // console.warn('Render fetching config');
 
   const cnf = configApi.getConfig();
-  // console.warn('Render with config after adding new directives', cnf.sequence);
-  // console.warn(
-  //   'Render with config after adding new directives',
-  //   cnf.fontFamily,
-  //   cnf.themeVariables.fontFamily
-  // );
   // Check the maximum allowed text size
   if (_txt.length > cnf.maxTextSize) {
     txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
@@ -577,7 +571,7 @@ function initialize(options) {
     }
   }
   // Set default options
-  configApi.setSiteConfigDelta(options);
+  configApi.saveConfigFromInitilize(options);
 
   if (options && options.theme && theme[options.theme]) {
     // Todo merge with user options

src/styles.js

@@ -65,6 +65,7 @@ const getStyles = (type, userStyles, options) => {
 
   .marker {
     fill: ${options.lineColor};
+    stroke: ${options.lineColor};
   }
   .marker.cross {
     stroke: ${options.lineColor};