Merge branch 'develop' into sidv/v8Coverage

* develop:
  Update docs
  Cleanup
  Clean up some spacing in examples
  Correct the Gantt milestones example
  fix(class): keep members in namespace classes

demos/classchart.html

@@ -154,6 +154,29 @@
     </pre>
     <hr />
 
+    <pre class="mermaid">
+    classDiagram
+      A1 --> B1
+      namespace A {
+        class A1 {
+          +foo : string
+        }
+        class A2 {
+          +bar : int
+        }
+      }
+      namespace B {
+        class B1 {
+          +foo : bool
+        }
+        class B2 {
+          +bar : float
+        }
+      }
+      A2 --> B2
+    </pre>
+    <hr />
+
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({

docs/syntax/gantt.md

@@ -30,7 +30,7 @@ gantt
         A task          :a1, 2014-01-01, 30d
         Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
+        Task in Another :2014-01-12, 12d
         another task    :24d
 ```
 
@@ -42,7 +42,7 @@ gantt
         A task          :a1, 2014-01-01, 30d
         Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
+        Task in Another :2014-01-12, 12d
         another task    :24d
 ```
 
@@ -148,20 +148,20 @@ You can add milestones to the diagrams. Milestones differ from tasks as they rep
 gantt
     dateFormat HH:mm
     axisFormat %H:%M
-Initial milestone : milestone, m1, 17:49,2min
-taska2 : 10min
-taska3 : 5min
-Final milestone : milestone, m2, 18:14, 2min
+    Initial milestone : milestone, m1, 17:49, 2m
+    Task A : 10m
+    Task B : 5m
+    Final milestone : milestone, m2, 18:08, 4m
 ```
 
 ```mermaid
 gantt
     dateFormat HH:mm
     axisFormat %H:%M
-Initial milestone : milestone, m1, 17:49,2min
-taska2 : 10min
-taska3 : 5min
-Final milestone : milestone, m2, 18:14, 2min
+    Initial milestone : milestone, m1, 17:49, 2m
+    Task A : 10m
+    Task B : 5m
+    Final milestone : milestone, m2, 18:08, 4m
 ```
 
 ## Setting dates
@@ -296,29 +296,27 @@ Comments can be entered within a gantt chart, which will be ignored by the parse
 ```mermaid-example
 gantt
     title A Gantt Diagram
-    %% this is a comment
+    %% This is a comment
     dateFormat YYYY-MM-DD
     section Section
         A task          :a1, 2014-01-01, 30d
         Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
+        Task in Another :2014-01-12, 12d
         another task    :24d
-
 ```
 
 ```mermaid
 gantt
     title A Gantt Diagram
-    %% this is a comment
+    %% This is a comment
     dateFormat YYYY-MM-DD
     section Section
         A task          :a1, 2014-01-01, 30d
         Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
+        Task in Another :2014-01-12, 12d
         another task    :24d
-
 ```
 
 ## Styling

packages/mermaid/src/diagrams/class/classDb.ts

@@ -448,9 +448,8 @@ const getNamespaces = function (): NamespaceMap {
 export const addClassesToNamespace = function (id: string, classNames: string[]) {
   if (namespaces[id] !== undefined) {
     classNames.map((className) => {
+      classes[className].parent = id;
       namespaces[id].classes[className] = classes[className];
-      delete classes[className];
-      classCounter--;
     });
   }
 };

packages/mermaid/src/diagrams/class/classDiagram.spec.ts

@@ -1373,9 +1373,54 @@ class Class2
       parser.parse(str);
 
       const testNamespace = parser.yy.getNamespace('Namespace1');
+      const testClasses = parser.yy.getClasses();
       expect(Object.keys(testNamespace.classes).length).toBe(2);
       expect(Object.keys(testNamespace.children).length).toBe(0);
       expect(testNamespace.classes['Class1'].id).toBe('Class1');
+      expect(Object.keys(testClasses).length).toBe(2);
+    });
+
+    it('should add relations between classes of different namespaces', function () {
+      const str = `classDiagram
+      A1 --> B1
+      namespace A {
+        class A1 {
+          +foo : string
+        }
+        class A2 {
+          +bar : int
+        }
+      }
+      namespace B {
+        class B1 {
+          +foo : bool
+        }
+        class B2 {
+          +bar : float
+        }
+      }
+      A2 --> B2`;
+
+      parser.parse(str);
+      const testNamespaceA = parser.yy.getNamespace('A');
+      const testNamespaceB = parser.yy.getNamespace('B');
+      const testClasses = parser.yy.getClasses();
+      const testRelations = parser.yy.getRelations();
+      expect(Object.keys(testNamespaceA.classes).length).toBe(2);
+      expect(testNamespaceA.classes['A1'].members[0]).toBe('+foo : string');
+      expect(testNamespaceA.classes['A2'].members[0]).toBe('+bar : int');
+      expect(Object.keys(testNamespaceB.classes).length).toBe(2);
+      expect(testNamespaceB.classes['B1'].members[0]).toBe('+foo : bool');
+      expect(testNamespaceB.classes['B2'].members[0]).toBe('+bar : float');
+      expect(Object.keys(testClasses).length).toBe(4);
+      expect(testClasses['A1'].parent).toBe('A');
+      expect(testClasses['A2'].parent).toBe('A');
+      expect(testClasses['B1'].parent).toBe('B');
+      expect(testClasses['B2'].parent).toBe('B');
+      expect(testRelations[0].id1).toBe('A1');
+      expect(testRelations[0].id2).toBe('B1');
+      expect(testRelations[1].id1).toBe('A2');
+      expect(testRelations[1].id2).toBe('B2');
     });
   });
 

packages/mermaid/src/diagrams/class/classRenderer-v2.ts

@@ -93,16 +93,15 @@ export const addClasses = function (
   log.info(classes);
 
   // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition
-  keys.forEach(function (id) {
+  keys
+    .filter((id) => classes[id].parent == parent)
+    .forEach(function (id) {
       const vertex = classes[id];
 
       /**
        * Variable for storing the classes for the vertex
        */
-    let cssClassStr = '';
-    if (vertex.cssClasses.length > 0) {
-      cssClassStr = cssClassStr + ' ' + vertex.cssClasses.join(' ');
-    }
+      const cssClassStr = vertex.cssClasses.join(' ');
 
       const styles = { labelStyle: '', style: '' }; //getStylesFromArray(vertex.styles);
 

packages/mermaid/src/diagrams/class/classTypes.ts

@@ -7,6 +7,7 @@ export interface ClassNode {
   members: string[];
   annotations: string[];
   domId: string;
+  parent?: string;
   link?: string;
   linkTarget?: string;
   haveCallback?: boolean;

packages/mermaid/src/docs/syntax/gantt.md

@@ -24,7 +24,7 @@ gantt
         A task          :a1, 2014-01-01, 30d
         Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
+        Task in Another :2014-01-12, 12d
         another task    :24d
 ```
 
@@ -90,10 +90,10 @@ You can add milestones to the diagrams. Milestones differ from tasks as they rep
 gantt
     dateFormat HH:mm
     axisFormat %H:%M
-Initial milestone : milestone, m1, 17:49,2min
-taska2 : 10min
-taska3 : 5min
-Final milestone : milestone, m2, 18:14, 2min
+    Initial milestone : milestone, m1, 17:49, 2m
+    Task A : 10m
+    Task B : 5m
+    Final milestone : milestone, m2, 18:08, 4m
 ```
 
 ## Setting dates
@@ -214,15 +214,14 @@ Comments can be entered within a gantt chart, which will be ignored by the parse
 ```mermaid
 gantt
     title A Gantt Diagram
-    %% this is a comment
+    %% This is a comment
     dateFormat YYYY-MM-DD
     section Section
         A task          :a1, 2014-01-01, 30d
         Another task    :after a1, 20d
     section Another
-    Task in sec      :2014-01-12  , 12d
+        Task in Another :2014-01-12, 12d
         another task    :24d
-
 ```
 
 ## Styling