fix(class): support styling and callbacks for generic classes

.changeset/class-generic-fix.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix(class): support styling and callbacks for generic classes

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

@@ -334,6 +334,7 @@ export class ClassDB implements DiagramDB {
       if (/\d/.exec(_id[0])) {
         id = MERMAID_DOM_ID_PREFIX + id;
       }
+      id = this.splitClassNameAndType(id).className;
       const classNode = this.classes.get(id);
       if (classNode) {
         classNode.cssClasses += ' ' + className;
@@ -376,7 +377,11 @@ export class ClassDB implements DiagramDB {
   public setTooltip(ids: string, tooltip?: string) {
     ids.split(',').forEach((id) => {
       if (tooltip !== undefined) {
-        this.classes.get(id)!.tooltip = sanitizeText(tooltip);
+        const className = this.splitClassNameAndType(id).className;
+        const classNode = this.classes.get(className);
+        if (classNode) {
+          classNode.tooltip = sanitizeText(tooltip);
+        }
       }
     });
   }
@@ -403,6 +408,7 @@ export class ClassDB implements DiagramDB {
       if (/\d/.exec(_id[0])) {
         id = MERMAID_DOM_ID_PREFIX + id;
       }
+      id = this.splitClassNameAndType(id).className;
       const theClass = this.classes.get(id);
       if (theClass) {
         theClass.link = utils.formatUrl(linkStr, config);
@@ -428,7 +434,11 @@ export class ClassDB implements DiagramDB {
   public setClickEvent(ids: string, functionName: string, functionArgs: string) {
     ids.split(',').forEach((id) => {
       this.setClickFunc(id, functionName, functionArgs);
-      this.classes.get(id)!.haveCallback = true;
+      const className = this.splitClassNameAndType(id).className;
+      const classNode = this.classes.get(className);
+      if (classNode) {
+        classNode.haveCallback = true;
+      }
     });
     this.setCssClass(ids, 'clickable');
   }
@@ -443,7 +453,7 @@ export class ClassDB implements DiagramDB {
       return;
     }
 
-    const id = domId;
+    const id = this.splitClassNameAndType(domId).className;
     if (this.classes.has(id)) {
       let argList: string[] = [];
       if (typeof functionArgs === 'string') {

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

@@ -481,6 +481,49 @@ describe('given a basic class diagram, ', function () {
       expect(c2.cssClasses).toBe('default styleClass2');
     });
 
+    it('should apply cssClasses to generic classes', () => {
+      const str = 'classDiagram\n' + 'class C1~T~\n' + 'cssClass "C1~T~" styleClass';
+
+      parser.parse(str);
+
+      const c1 = classDb.getClass('C1');
+      expect(c1.cssClasses).toBe('default styleClass');
+    });
+
+    it('should apply cssClasses to generic classes via shorthand', () => {
+      const str = 'classDiagram\n' + 'class C1~T~:::styleClass';
+
+      parser.parse(str);
+
+      const c1 = classDb.getClass('C1');
+      expect(c1.cssClasses).toBe('default styleClass');
+    });
+
+    it('should bind click event on generic class', () => {
+      const str = 'classDiagram\n' + 'class C1~T~\n' + 'click C1~T~ call someFunction()';
+
+      parser.parse(str);
+      const c1 = classDb.getClass('C1');
+      expect(c1.haveCallback).toBe(true);
+    });
+
+    it('should bind tooltip on generic class', () => {
+      const str = 'classDiagram\n' + 'class C1~T~\n' + 'click C1~T~ call cb() "a tip"';
+
+      parser.parse(str);
+      const c1 = classDb.getClass('C1');
+      expect(c1.tooltip).toBe('a tip');
+    });
+
+    it('should bind link on generic class', () => {
+      const str = 'classDiagram\n' + 'class C1~T~\n' + 'link C1~T~ "https://example.com"';
+
+      parser.parse(str);
+      const c1 = classDb.getClass('C1');
+      expect(c1.link).toBe('https://example.com/');
+      expect(c1.cssClasses).toBe('default clickable');
+    });
+
     it('should parse multiple classes with same text labels', () => {
       parser.parse(`classDiagram
 class C1["Class with text label"]
@@ -682,7 +725,7 @@ class C13["With Città foreign language"]
         {
           "annotations": [],
           "cssClasses": "default",
-          "domId": "classId-Student-149",
+          "domId": "classId-Student-154",
           "id": "Student",
           "label": "Student",
           "members": [