Update class member handling

cSpell.json

@@ -38,7 +38,10 @@
     "docsy",
     "doku",
     "dompurify",
+    "dont",
+    "doublecircle",
     "edgechromium",
+    "elems",
     "elkjs",
     "faber",
     "flatmap",

cypress/integration/rendering/classDiagram-v2.spec.js

@@ -386,12 +386,11 @@ describe('Class diagram V2', () => {
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
   });
-
-  it('18: should handle the direction statement with LR', () => {
+  it('17a: should handle the direction statement with BT', () => {
     imgSnapshotTest(
       `
       classDiagram
-        direction LR
+        direction BT
         class Student {
           -idCard : IdCard
         }
@@ -410,11 +409,11 @@ describe('Class diagram V2', () => {
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
   });
-  it('17a: should handle the direction statement with BT', () => {
+  it('17b: should handle the direction statement with RL', () => {
     imgSnapshotTest(
       `
       classDiagram
-        direction BT
+        direction RL
         class Student {
           -idCard : IdCard
         }
@@ -433,11 +432,12 @@ describe('Class diagram V2', () => {
       { logLevel: 1, flowchart: { htmlLabels: false } }
     );
   });
-  it('17b: should handle the direction statement with RL', () => {
+
+  it('18a: should handle the direction statement with LR', () => {
     imgSnapshotTest(
       `
       classDiagram
-        direction RL
+        direction LR
         class Student {
           -idCard : IdCard
         }
@@ -457,7 +457,7 @@ describe('Class diagram V2', () => {
     );
   });
 
-  it('18: should render a simple class diagram with notes', () => {
+  it('18b: should render a simple class diagram with notes', () => {
     imgSnapshotTest(
       `
       classDiagram-v2
@@ -562,4 +562,13 @@ class C13["With Città foreign language"]
       `
     );
   });
+  it('should render a simple class diagram with no members', () => {
+    imgSnapshotTest(
+      `
+      classDiagram-v2
+        class Class10
+        `,
+      { logLevel: 1, flowchart: { htmlLabels: false } }
+    );
+  });
 });

demos/classchart.html

@@ -80,6 +80,7 @@ <h1>Class diagram demos</h1>
     Class01 : #size()
     Class01 : -int chimp
     Class01 : +int gorilla
+    Class01 : +abstractAttribute string*
     class Class10~T~ {
     &lt;&lt;service&gt;&gt;
     int id
@@ -122,6 +123,8 @@ <h1>Class diagram demos</h1>
     classDiagram
     direction LR
     Animal ()-- Dog
+    Animal ()-- Cat
+    note for Cat "should have no members area"
     Dog : bark()
     Dog : species()
     </pre>
@@ -151,6 +154,7 @@ <h1>Class diagram demos</h1>
         ~InternalProperty : string
         ~AnotherInternalProperty : List~List~string~~
       }
+      class People~List~Person~~
     </pre>
     <hr />
 

packages/mermaid/src/dagre-wrapper/nodes.js

@@ -5,7 +5,6 @@ import { getConfig } from '../config.js';
 import intersect from './intersect/index.js';
 import createLabel from './createLabel.js';
 import note from './shapes/note.js';
-import { parseMember } from '../diagrams/class/svgDraw.js';
 import { evaluate } from '../diagrams/common/common.js';
 
 const question = async (parent, node) => {
@@ -806,8 +805,8 @@ const class_box = (parent, node) => {
     maxWidth = classTitleBBox.width;
   }
   const classAttributes = [];
-  node.classData.members.forEach((str) => {
-    const parsedInfo = parseMember(str);
+  node.classData.members.forEach((member) => {
+    const parsedInfo = member.getDisplayDetails();
     let parsedText = parsedInfo.displayText;
     if (getConfig().flowchart.htmlLabels) {
       parsedText = parsedText.replace(/</g, '&lt;').replace(/>/g, '&gt;');
@@ -840,8 +839,8 @@ const class_box = (parent, node) => {
   maxHeight += lineHeight;
 
   const classMethods = [];
-  node.classData.methods.forEach((str) => {
-    const parsedInfo = parseMember(str);
+  node.classData.methods.forEach((member) => {
+    const parsedInfo = member.getDisplayDetails();
     let displayText = parsedInfo.displayText;
     if (getConfig().flowchart.htmlLabels) {
       displayText = displayText.replace(/</g, '&lt;').replace(/>/g, '&gt;');

packages/mermaid/src/diagrams/class/classDiagram-styles.spec.js

@@ -1,10 +1,10 @@
 import { parser } from './parser/classDiagram.jison';
-import classDb from './classDb.js';
+import classParser from './classParser.js';
 
 describe('class diagram, ', function () {
   describe('when parsing data from a classDiagram it', function () {
     beforeEach(function () {
-      parser.yy = classDb;
+      parser.yy = classParser;
       parser.yy.clear();
     });
 

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

@@ -1,7 +1,7 @@
 import { DiagramDefinition } from '../../diagram-api/types.js';
 // @ts-ignore: TODO Fix ts errors
 import parser from './parser/classDiagram.jison';
-import db from './classDb.js';
+import db from './classParser.js';
 import styles from './styles.js';
 import renderer from './classRenderer-v2.js';