diff --git a/packages/mermaid/src/diagrams/class/classDb.ts b/packages/mermaid/src/diagrams/class/classDb.ts index c235bb276d..c9a202aa43 100644 --- a/packages/mermaid/src/diagrams/class/classDb.ts +++ b/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] = { - id: classId.className, - type: classId.type, - label: classId.className, + classes[className] = { + id: className, + type: type, + 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 = 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); }); diff --git a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts b/packages/mermaid/src/diagrams/class/classDiagram.spec.ts index 46b4c1b161..532c8aaa7a 100644 --- a/packages/mermaid/src/diagrams/class/classDiagram.spec.ts +++ b/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';