Merge pull request #4786 from mermaid-js/sidv/2685_supportMember

Support member definition to initialize class

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

@@ -1,4 +1,3 @@
-// @ts-nocheck - don't check until handle it
 import type { Selection } from 'd3';
 import { select } from 'd3';
 import { log } from '../../logger.js';
@@ -72,21 +71,21 @@ export const setClassLabel = function (id: string, label: string) {
  * @public
  */
 export const addClass = function (id: string) {
-  const classId = splitClassNameAndType(id);
+  const { className, type } = splitClassNameAndType(id);
   // Only add class if not exists
-  if (classes[classId.className] !== undefined) {
+  if (Object.hasOwn(classes, className)) {
     return;
   }
 
-  classes[classId.className] = {
+  classes[className] = {
-    id: classId.className,
+    id: className,
-    type: classId.type,
+    type: type,
-    label: classId.className,
+    label: className,
     cssClasses: [],
     methods: [],
     members: [],
     annotations: [],
-    domId: MERMAID_DOM_ID_PREFIX + classId.className + '-' + classCounter,
+    domId: MERMAID_DOM_ID_PREFIX + className + '-' + classCounter,
   } as ClassNode;
 
   classCounter++;
@@ -176,6 +175,8 @@ export const addAnnotation = function (className: string, annotation: string) {
  * @public
  */
 export const addMember = function (className: string, member: string) {
+  addClass(className);
+
   const validatedClassName = splitClassNameAndType(className).className;
   const theClass = classes[validatedClassName];
 
@@ -370,6 +371,7 @@ export const relationType = {
 const setupToolTips = function (element: Element) {
   let tooltipElem: Selection<HTMLDivElement, unknown, HTMLElement, unknown> =
     select('.mermaidTooltip');
+  // @ts-expect-error - Incorrect types
   if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
     tooltipElem = select('body').append('div').attr('class', 'mermaidTooltip').style('opacity', 0);
   }
@@ -379,7 +381,6 @@ const setupToolTips = function (element: Element) {
   const nodes = svg.selectAll('g.node');
   nodes
     .on('mouseover', function () {
-      // @ts-expect-error - select is not part of the d3 type definition
       const el = select(this);
       const title = el.attr('title');
       // Don't try to draw a tooltip if no data is provided
@@ -389,6 +390,7 @@ const setupToolTips = function (element: Element) {
       // @ts-ignore - getBoundingClientRect is not part of the d3 type definition
       const rect = this.getBoundingClientRect();
 
+      // @ts-expect-error - Incorrect types
       tooltipElem.transition().duration(200).style('opacity', '.9');
       tooltipElem
         .text(el.attr('title'))
@@ -398,8 +400,8 @@ const setupToolTips = function (element: Element) {
       el.classed('hover', true);
     })
     .on('mouseout', function () {
+      // @ts-expect-error - Incorrect types
       tooltipElem.transition().duration(500).style('opacity', 0);
-      // @ts-expect-error - select is not part of the d3 type definition
       const el = select(this);
       el.classed('hover', false);
     });

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

@@ -813,6 +813,20 @@ describe('given a class diagram with members and methods ', function () {
       parser.parse(str);
     });
 
+    it('should handle direct member declaration', function () {
+      parser.parse('classDiagram\n' + 'Car : wheels');
+      const car = classDb.getClass('Car');
+      expect(car.members.length).toBe(1);
+      expect(car.members[0].id).toBe('wheels');
+    });
+
+    it('should handle direct member declaration with type', function () {
+      parser.parse('classDiagram\n' + 'Car : int wheels');
+      const car = classDb.getClass('Car');
+      expect(car.members.length).toBe(1);
+      expect(car.members[0].id).toBe('int wheels');
+    });
+
     it('should handle simple member declaration with type', function () {
       const str = 'classDiagram\n' + 'class Car\n' + 'Car : int wheels';