mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #1956 from mermaid-js/1955_text_color_from_classes 

Updated selectors in order to change the text color for flowcharts vis classDef statements
This commit is contained in:
Knut Sveidqvist 2021-03-23 22:07:15 +01:00 committed by GitHub
parent a5cc75c1f7 a18543862f
commit 2d22c3519f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 66 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
cypress/integration/rendering/flowchart-v2.spec.js
View File

@ -451,4 +451,15 @@ flowchart TD
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
it('65: text-color from classes', () => {
imgSnapshotTest(
`
flowchart LR
classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
Lorem --> Ipsum --> Dolor
class Lorem,Dolor dark
`,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
});

12
cypress/integration/rendering/flowchart.spec.js
View File

@ -882,5 +882,15 @@ graph TD
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
it('65: text-color from classes', () => {
imgSnapshotTest(
`
flowchart LR
classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
Lorem --> Ipsum --> Dolor
class Lorem,Dolor dark
`,
{htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
);
});
});

35
cypress/platform/knsv.html
View File

@ -25,7 +25,7 @@
<body>
<h1>info below</h1>
<div class="flex">
<div class="mermaid" style="width: 100%; height: 400px;">
<div class="mermaid2" style="width: 100%; height: 400px;">
%%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%%
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
@ -54,26 +54,25 @@ flowchart TD
class T TestSub
linkStyle 0,1 color:orange, stroke: orange;
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
sequenceDiagram
Actor1 -) Actor2:Async
Actor1 --) Actor2:Async dotted
Actor1 ->> Actor2:Sync
Actor1 -->> Actor2:Sync dotted
</div>
<div class="mermaid" style="width: 50%; height: 20%;">
%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
flowchart LR
subgraph A
a --> b
end
subgraph B
i -->f
end
A --> B </div>
<div class="mermaid2" style="width: 50%; height: 20%;">
flowchart TD
C -->|fa:fa-car Car| F[fa:fa-car Car]
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
%%{init: { 'logLevel': 0, 'theme': 'forest'} }%%
graph TD
A(Start) --> B[/Another/]
A[/Another/] --> C[End]
subgraph section
B
C
end
<div class="mermaid" style="width: 50%; height: 20%;">
flowchart LR
classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
Lorem --> Ipsum --> Dolor
class Lorem,Dolor dark
</div>
<div class="mermaid2" style="width: 50%; height: 20%;">
%%{init: {'theme': 'base' }}%%
@ -90,7 +89,7 @@ flowchart TD
C <-...-> E4
C ======> E5
</div>
<div class="mermaid" style="width: 50%; height: 21%;">
<div class="mermaid2" style="width: 50%; height: 21%;">
flowchart LR
A[red text] -->|default style| B(blue text)
C([red text]) -->|default style| D[[blue text]]

32
src/mermaidAPI.js
View File

@ -298,13 +298,35 @@ const render = function(id, _txt, cb, container) {
if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {
const classes = flowRenderer.getClasses(txt);
for (const className in classes) {
userStyles += `\n.${className} > * { ${classes[className].styles.join(
' !important; '
)} !important; }`;
if (classes[className].textStyles) {
userStyles += `\n.${className} tspan { ${classes[className].textStyles.join(
if (cnf.htmlLabels || cnf.flowchart.htmlLabels) {
userStyles += `\n.${className} > * { ${classes[className].styles.join(
' !important; '
)} !important; }`;
userStyles += `\n.${className} span { ${classes[className].styles.join(
' !important; '
)} !important; }`;
} else {
// console.log('classes[className].styles', classes[className].styles, cnf.htmlLabels);
userStyles += `\n.${className} path { ${classes[className].styles.join(
' !important; '
)} !important; }`;
userStyles += `\n.${className} rect { ${classes[className].styles.join(
' !important; '
)} !important; }`;
userStyles += `\n.${className} polygon { ${classes[className].styles.join(
' !important; '
)} !important; }`;
userStyles += `\n.${className} ellipse { ${classes[className].styles.join(
' !important; '
)} !important; }`;
userStyles += `\n.${className} circle { ${classes[className].styles.join(
' !important; '
)} !important; }`;
if (classes[className].textStyles) {
userStyles += `\n.${className} tspan { ${classes[className].textStyles.join(
' !important; '
)} !important; }`;
}
}
}
}