marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-31 10:54:15 +01: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[]
}
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 },}
);

44
cypress/platform/class.html
View File

@@ -16,10 +16,27 @@
.mermaid2 {
display: none;
}
.customCss > rect, .customCss{
fill:#FF0000 !important;
stroke:#FFFF00 !important;
stroke-width:4px !important;
}
</style>
</head>
<body>
<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%;">
%%{init: {'theme': 'base', 'fontFamily': 'courier', 'themeVariables': { 'primaryColor': '#fff000'}}}%%
classDiagram-v2
@@ -29,8 +46,33 @@
+deposit(amount) bool
+withdrawl(amount) int
}
cssClass "BankAccount" customCss
</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
a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
a_a --> c --> d_d --> c_c

3
cypress/platform/e2e.html
View File

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