#1955 Different selector in order to make it possible to change the text color for flowcharts vis classDef statements
This commit is contained in:
parent
a5cc75c1f7
commit
87458657f8
|
@ -450,5 +450,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'}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -881,6 +881,17 @@ 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'}
|
||||
);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
@ -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]]
|
||||
|
|
|
@ -301,6 +301,12 @@ const render = function(id, _txt, cb, container) {
|
|||
userStyles += `\n.${className} > * { ${classes[className].styles.join(
|
||||
' !important; '
|
||||
)} !important; }`;
|
||||
userStyles += `\n.${className} span { ${classes[className].styles.join(
|
||||
' !important; '
|
||||
)} !important; }`;
|
||||
userStyles += `\n.${className} tspan { ${classes[className].styles.join(
|
||||
' !important; '
|
||||
)} !important; }`;
|
||||
if (classes[className].textStyles) {
|
||||
userStyles += `\n.${className} tspan { ${classes[className].textStyles.join(
|
||||
' !important; '
|
||||
|
|
Loading…
Reference in New Issue