Merge branch 'release/8.4.0'

src/diagrams/class/classDb.js

@@ -80,9 +80,10 @@ export const addMember = function(className, member) {
   }
 };
 
-export const addMembers = function(className, MembersArr) {
-  if (Array.isArray(MembersArr)) {
-    MembersArr.forEach(member => addMember(className, member));
+export const addMembers = function(className, members) {
+  if (Array.isArray(members)) {
+    members.reverse();
+    members.forEach(member => addMember(className, member));
   }
 };
 

src/diagrams/class/classDiagram.spec.js

@@ -262,5 +262,25 @@ describe('class diagram, ', function() {
       expect(testClass.methods.length).toBe(1);
       expect(testClass.annotations[0]).toBe('interface');
     });
+
+    it('should add bracket members in right order', function() {
+      const str =
+        'classDiagram\n' +
+        'class Class1 {\n' +
+        'int : test\n' +
+        'string : foo\n' +
+        'test()\n' +
+        'foo()\n' +
+        '}';
+      parser.parse(str);
+
+      const testClass = parser.yy.getClass('Class1');
+      expect(testClass.members.length).toBe(2);
+      expect(testClass.methods.length).toBe(2);
+      expect(testClass.members[0]).toBe('int : test');
+      expect(testClass.members[1]).toBe('string : foo');
+      expect(testClass.methods[0]).toBe('test()');
+      expect(testClass.methods[1]).toBe('foo()');
+    });
   });
 });

src/diagrams/flowchart/flowRenderer.js

@@ -36,9 +36,10 @@ export const addVertices = function(vert, g, svgId) {
         }
       }
     } else {
+      // create the style definition for the text, if property is a text-property
       for (let i = 0; i < arr.length; i++) {
         if (typeof arr[i] !== 'undefined') {
-          if (arr[i].match('^color:')) styleStr = styleStr + arr[i] + ';';
+          if (arr[i].match('^color:|^text-align:')) styleStr = styleStr + arr[i] + ';';
         }
       }
     }

src/diagrams/flowchart/flowRenderer.spec.js

@@ -54,4 +54,43 @@ describe('the flowchart renderer', function() {
       });
     });
   });
+
+  [
+    [['fill:#fff'], 'fill:#fff;', ''],
+    [['color:#ccc'], 'color:#ccc;', 'color:#ccc;'],
+    [['fill:#fff', 'color:#ccc'], 'fill:#fff;color:#ccc;', 'color:#ccc;'],
+    [
+      ['fill:#fff', 'color:#ccc', 'text-align:center'],
+      'fill:#fff;color:#ccc;text-align:center;',
+      'color:#ccc;text-align:center;'
+    ]
+  ].forEach(function([style, expectedStyle, expectedLabelStyle]) {
+    it(`should add the styles to style and/or labelStyle for style ${style}`, function() {
+      const addedNodes = [];
+      const mockG = {
+        setNode: function(id, object) {
+          addedNodes.push([id, object]);
+        }
+      };
+      addVertices(
+        {
+          v1: {
+            type: 'rect',
+            id: 'my-node-id',
+            classes: [],
+            styles: style,
+            text: 'my vertex text'
+          }
+        },
+        mockG,
+        'svg-id'
+      );
+      expect(addedNodes).toHaveLength(1);
+      expect(addedNodes[0][0]).toEqual('my-node-id');
+      expect(addedNodes[0][1]).toHaveProperty('id', 'my-node-id');
+      expect(addedNodes[0][1]).toHaveProperty('labelType', 'svg');
+      expect(addedNodes[0][1]).toHaveProperty('style', expectedStyle);
+      expect(addedNodes[0][1]).toHaveProperty('labelStyle', expectedLabelStyle);
+    });
+  });
 });

src/diagrams/state/stateRenderer.js

@@ -101,7 +101,7 @@ export const draw = function(text, id) {
     `${conf.padding * -1} ${conf.padding * -1} ` +
       (bounds.width * 1.5 + conf.padding * 2) +
       ' ' +
-      (bounds.height * 1.5 + conf.padding * 2)
+      (bounds.height + conf.padding * 5)
   );
 };
 const getLabelWidth = text => {

src/mermaidAPI.js

@@ -463,6 +463,10 @@ const render = function(id, txt, cb, container) {
       .attr('xmlns', 'http://www.w3.org/2000/svg')
       .append('g');
   } else {
+    const existingSvg = document.getElementById(id);
+    if (existingSvg) {
+      existingSvg.remove();
+    }
     const element = document.querySelector('#' + 'd' + id);
     if (element) {
       element.innerHTML = '';

src/themes/gantt.scss

@@ -86,10 +86,12 @@
 
 .taskText {
   text-anchor: middle;
-  font-size: 11px;
   font-family: 'trebuchet ms', verdana, arial;
   font-family: var(--mermaid-font-family);
+}
 
+.taskText:not([font-size]) {
+  font-size: 11px;
 }
 
 .taskTextOutsideRight {

src/themes/state.scss

@@ -59,4 +59,6 @@ g.stateGroup line {
   fill: $labelColor;
   font-size: 10px;
   font-weight: bold;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
 }