Merge pull request mermaid-js#4534 from mermaid-js/UpdateClassMemberH…

…andling

Update class member handling

cSpell.json

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

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

@@ -38,12 +38,14 @@ <h1>Class diagram demos</h1>
         +quack()
       }
       class Fish{
-        -int sizeInFeet
+        -Listint sizeInFeet
         -canEat()
       }
       class Zebra{
         +bool is_wild
-        +run()
+        +run(List~T~, List~OT~)
+        %% +run-composite(List~T, K~)
+        +run-nested(List~List~OT~~)
       }
 
     </pre>
@@ -80,6 +82,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 +125,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 +156,7 @@ <h1>Class diagram demos</h1>
         ~InternalProperty : string
         ~AnotherInternalProperty : List~List~string~~
       }
+      class People List~List~Person~~
     </pre>
     <hr />
 

packages/mermaid-zenuml/README.md

@@ -1 +1 @@
-../mermaid/src/docs/syntax/zenuml.md
+../mermaid/src/docs/syntax/zenuml.md

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 formatClass = (str) => {
@@ -880,8 +879,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;');
@@ -914,8 +913,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/classDb.ts

@@ -15,6 +15,7 @@ import {
   setDiagramTitle,
   getDiagramTitle,
 } from '../../commonDb.js';
+import { ClassMember } from './classTypes.js';
 import type {
   ClassRelation,
   ClassNode,
@@ -115,11 +116,11 @@ export const clear = function () {
   commonClear();
 };
 
-export const getClass = function (id: string) {
+export const getClass = function (id: string): ClassNode {
   return classes[id];
 };
 
-export const getClasses = function () {
+export const getClasses = function (): ClassMap {
   return classes;
 };
 
@@ -187,9 +188,9 @@ export const addMember = function (className: string, member: string) {
       theClass.annotations.push(sanitizeText(memberString.substring(2, memberString.length - 2)));
     } else if (memberString.indexOf(')') > 0) {
       //its a method
-      theClass.methods.push(sanitizeText(memberString));
+      theClass.methods.push(new ClassMember(memberString, 'method'));
     } else if (memberString) {
-      theClass.members.push(sanitizeText(memberString));
+      theClass.members.push(new ClassMember(memberString, 'attribute'));
     }
   }
 };
@@ -256,6 +257,7 @@ export const getTooltip = function (id: string, namespace?: string) {
 
   return classes[id].tooltip;
 };
+
 /**
  * Called by parser when a link is found. Adds the URL to the vertex data.
  *