diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js index 3e7cbcf89..05f7545e8 100644 --- a/cypress/integration/rendering/classDiagram-v2.spec.js +++ b/cypress/integration/rendering/classDiagram-v2.spec.js @@ -334,7 +334,7 @@ describe('Class diagram V2', () => { testArray() bool[] } - cssClass "Class10" exClass + cssClass "Class10" exClass2 `, {logLevel : 1, flowchart: { "htmlLabels": false },} ); @@ -345,7 +345,7 @@ describe('Class diagram V2', () => { imgSnapshotTest( ` classDiagram-v2 - class Class10:::exClass { + class Class10:::exClass2 { int[] id List~int~ ids test(List~int~ ids) List~bool~ @@ -364,7 +364,7 @@ describe('Class diagram V2', () => { class Class10 class Class20 - cssClass "Class10, class20" exClass + cssClass "Class10, class20" exClass2 `, {logLevel : 1, flowchart: { "htmlLabels": false },} ); diff --git a/cypress/platform/class.html b/cypress/platform/class.html index 5305c462b..f3c0a43b1 100644 --- a/cypress/platform/class.html +++ b/cypress/platform/class.html @@ -16,21 +16,63 @@ .mermaid2 { display: none; } + .customCss > rect, .customCss{ + fill:#FF0000 !important; + stroke:#FFFF00 !important; + stroke-width:4px !important; + }

info below

-
+
+ %%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%% + classDiagram + class BankAccount{ + +String owner + +BigDecimal balance + +deposit(amount) bool + +withdrawl(amount) int + } + cssClass "BankAccount" customCss + +
+
+ %%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%% + classDiagram-v2 + class BankAccount{ + +String owner + +BigDecimal balance + +deposit(amount) bool + +withdrawl(amount) int + } + cssClass "BankAccount" customCss + +
+
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%% - classDiagram-v2 + classDiagram class BankAccount{ +String owner +BigDecimal balance +deposit(amount) bool +withdrawl(amount) int - } + } + Class01~T~ <|-- AveryLongClass : Cool + Class03~T~ *-- Class04~T~ + Class01 : size() + Class01 : int chimp + Class01 : int gorilla + Class08 <--> C2: Cool label + class Class10~T~ { + <<service>> + int id + test() + } + callback Class01 "callback" "A Tooltip" +
-
+
flowchart TB a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a a_a --> c --> d_d --> c_c diff --git a/cypress/platform/e2e.html b/cypress/platform/e2e.html index 5446f7038..59c3aef8c 100644 --- a/cypress/platform/e2e.html +++ b/cypress/platform/e2e.html @@ -27,6 +27,9 @@ svg { border: 2px solid darkred; } + .exClass2 > rect, .exClass { + fill: greenyellow !important; + } diff --git a/src/diagrams/class/classRenderer-v2.js b/src/diagrams/class/classRenderer-v2.js index bb530ef7f..030f75f2f 100644 --- a/src/diagrams/class/classRenderer-v2.js +++ b/src/diagrams/class/classRenderer-v2.js @@ -42,7 +42,10 @@ export const addClasses = function(classes, g) { * Variable for storing the classes for the vertex * @type {string} */ - let classStr = 'default'; + let cssClassStr = ''; + if (vertex.cssClasses.length > 0) { + cssClassStr = cssClassStr + ' ' + vertex.cssClasses.join(' '); + } // if (vertex.classes.length > 0) { // classStr = vertex.classes.join(' '); // } @@ -98,7 +101,7 @@ export const addClasses = function(classes, g) { classData: vertex, rx: radious, ry: radious, - class: classStr, + class: cssClassStr, style: styles.style, id: vertex.id, domId: vertex.domId, @@ -115,7 +118,7 @@ export const addClasses = function(classes, g) { labelText: vertexText, rx: radious, ry: radious, - class: classStr, + class: cssClassStr, style: styles.style, id: vertex.id, width: vertex.type === 'group' ? 500 : undefined,