marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-10 19:09:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1697 from mermaid-js/1676_click_support_v2

Browse Source 
Adds support for custom cssClasses for classDiagram-v2. Also, improved test cases for classDiagram.
This commit is contained in:
Knut Sveidqvist
2020-09-23 20:41:52 +02:00
committed by GitHub
parent 2cbb2d7b6a 93bf8d7414
commit f0a8eaa5be
4 changed files with 58 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
cypress/integration/rendering/classDiagram-v2.spec.js
View File

@@ -334,7 +334,7 @@ describe('Class diagram V2', () => {
testArray() bool[] testArray() bool[]
} }
cssClass "Class10" exClass cssClass "Class10" exClass2
`, `,
{logLevel : 1, flowchart: { "htmlLabels": false },} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );
@@ -345,7 +345,7 @@ describe('Class diagram V2', () => {
imgSnapshotTest( imgSnapshotTest(
` `
classDiagram-v2 classDiagram-v2
class Class10:::exClass { class Class10:::exClass2 {
int[] id int[] id
List~int~ ids List~int~ ids
test(List~int~ ids) List~bool~ test(List~int~ ids) List~bool~
@@ -364,7 +364,7 @@ describe('Class diagram V2', () => {
class Class10 class Class10
class Class20 class Class20
cssClass "Class10, class20" exClass cssClass "Class10, class20" exClass2
`, `,
{logLevel : 1, flowchart: { "htmlLabels": false },} {logLevel : 1, flowchart: { "htmlLabels": false },}
); );

44
cypress/platform/class.html
View File

@@ -16,10 +16,27 @@
.mermaid2 { .mermaid2 {
display: none; display: none;
} }
.customCss > rect, .customCss{
fill:#FF0000 !important;
stroke:#FFFF00 !important;
stroke-width:4px !important;
}
</style> </style>
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div class="mermaid" style="width: 100%; height: 20%;">
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
classDiagram
class BankAccount{
+String owner
+BigDecimal balance
+deposit(amount) bool
+withdrawl(amount) int
}
cssClass "BankAccount" customCss
</div>
<div class="mermaid" style="width: 100%; height: 20%;"> <div class="mermaid" style="width: 100%; height: 20%;">
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%% %%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
classDiagram-v2 classDiagram-v2
@@ -29,8 +46,33 @@
+deposit(amount) bool +deposit(amount) bool
+withdrawl(amount) int +withdrawl(amount) int
} }
cssClass "BankAccount" customCss
</div> </div>
<div class="mermaid" style="width: 100%; height: 20%;"> <div class="mermaid2" style="width: 100%; height: 20%;">
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
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~ {
&lt;&lt;service&gt;&gt;
int id
test()
}
callback Class01 "callback" "A Tooltip"
</div>
<div class="mermaid2" style="width: 100%; height: 20%;">
flowchart TB flowchart TB
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
a_a --> c --> d_d --> c_c a_a --> c --> d_d --> c_c

3
cypress/platform/e2e.html
View File

@@ -27,6 +27,9 @@
svg { svg {
border: 2px solid darkred; border: 2px solid darkred;
} }
.exClass2 > rect, .exClass {
fill: greenyellow !important;
}
</style> </style>
</head> </head>
<body> <body>

9
src/diagrams/class/classRenderer-v2.js
View File

@@ -42,7 +42,10 @@ export const addClasses = function(classes, g) {
* Variable for storing the classes for the vertex * Variable for storing the classes for the vertex
* @type {string} * @type {string}
*/ */
let classStr = 'default'; let cssClassStr = '';
if (vertex.cssClasses.length > 0) {
cssClassStr = cssClassStr + ' ' + vertex.cssClasses.join(' ');
}
// if (vertex.classes.length > 0) { // if (vertex.classes.length > 0) {
// classStr = vertex.classes.join(' '); // classStr = vertex.classes.join(' ');
// } // }
@@ -98,7 +101,7 @@ export const addClasses = function(classes, g) {
classData: vertex, classData: vertex,
rx: radious, rx: radious,
ry: radious, ry: radious,
class: classStr, class: cssClassStr,
style: styles.style, style: styles.style,
id: vertex.id, id: vertex.id,
domId: vertex.domId, domId: vertex.domId,
@@ -115,7 +118,7 @@ export const addClasses = function(classes, g) {
labelText: vertexText, labelText: vertexText,
rx: radious, rx: radious,
ry: radious, ry: radious,
class: classStr, class: cssClassStr,
style: styles.style, style: styles.style,
id: vertex.id, id: vertex.id,
width: vertex.type === 'group' ? 500 : undefined, width: vertex.type === 'group' ? 500 : undefined,