From 87458657f818936d8d03796c05b37caf530cba6d Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 23 Mar 2021 19:22:10 +0100 Subject: [PATCH 1/7] #1955 Different selector in order to make it possible to change the text color for flowcharts vis classDef statements --- .../rendering/flowchart-v2.spec.js | 10 ++++++ .../integration/rendering/flowchart.spec.js | 11 ++++++ cypress/platform/knsv.html | 35 +++++++++---------- src/mermaidAPI.js | 6 ++++ 4 files changed, 44 insertions(+), 18 deletions(-) diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 64c1f8d11..05ae82b6e 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -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'} + ); }); }); diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index a2f7ecb8c..376c26159 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -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'} + ); + }); }); diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index 7c9def0a7..d1424d6b7 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -25,7 +25,7 @@

info below

-
+
%%{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;
-
- sequenceDiagram - Actor1 -) Actor2:Async - Actor1 --) Actor2:Async dotted - Actor1 ->> Actor2:Sync - Actor1 -->> Actor2:Sync dotted -
+
+%%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%% +flowchart LR +subgraph A + a --> b +end +subgraph B + i -->f +end +A --> B
flowchart TD C -->|fa:fa-car Car| F[fa:fa-car Car]
-
-%%{init: { 'logLevel': 0, 'theme': 'forest'} }%% -graph TD - A(Start) --> B[/Another/] - A[/Another/] --> C[End] - subgraph section - B - C - end +
+flowchart LR + classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff + Lorem --> Ipsum --> Dolor + class Lorem,Dolor dark
%%{init: {'theme': 'base' }}%% @@ -90,7 +89,7 @@ flowchart TD C <-...-> E4 C ======> E5
-
+
flowchart LR A[red text] -->|default style| B(blue text) C([red text]) -->|default style| D[[blue text]] diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index db43d1c95..d264a3341 100755 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -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; ' From 3209986df1fde261202b60cc3d7b5736fef248cd Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 23 Mar 2021 20:10:58 +0100 Subject: [PATCH 2/7] #1955 Fix for tests --- cypress/integration/rendering/flowchart-v2.spec.js | 1 + cypress/integration/rendering/flowchart.spec.js | 5 ++--- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 05ae82b6e..d0b2323d2 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -450,6 +450,7 @@ flowchart TD `, {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} ); + }); it('65: text-color from classes', () => { imgSnapshotTest( ` diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js index 376c26159..4c9056711 100644 --- a/cypress/integration/rendering/flowchart.spec.js +++ b/cypress/integration/rendering/flowchart.spec.js @@ -881,7 +881,8 @@ graph TD `, {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} ); - it('65: text-color from classes', () => { + }); + it('65: text-color from classes', () => { imgSnapshotTest( ` flowchart LR @@ -891,7 +892,5 @@ graph TD `, {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'} ); - }); - }); From 84c9dd0dadbe831325553bb0c31d96447bb99fdd Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 23 Mar 2021 20:51:16 +0100 Subject: [PATCH 3/7] #1955 Fix for non htmlLabels --- src/mermaidAPI.js | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index d264a3341..339d98d54 100755 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -298,19 +298,20 @@ 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; }`; - 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( + if (cnf.htmlLabels) { + userStyles += `\n.${className} span { ${classes[className].styles.join( ' !important; ' )} !important; }`; + } else { + console.log('classes[className].styles', classes[className].styles, cnf.htmlLabels); + userStyles += `\n.${className} rect { ${classes[className].styles.join( + ' !important; ' + )} !important; }`; + if (classes[className].textStyles) { + userStyles += `\n.${className} tspan { ${classes[className].textStyles.join( + ' !important; ' + )} !important; }`; + } } } } From 1ae074d05f340202b1c5455052c58b695c2cfe81 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 23 Mar 2021 21:13:52 +0100 Subject: [PATCH 4/7] #1955 Fix for non htmlLabels --- src/mermaidAPI.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 339d98d54..521499e42 100755 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -298,12 +298,15 @@ 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) { - if (cnf.htmlLabels) { + 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); + // console.log('classes[className].styles', classes[className].styles, cnf.htmlLabels); userStyles += `\n.${className} rect { ${classes[className].styles.join( ' !important; ' )} !important; }`; From 4339fadd5098940ac31b1084460ebdfa406c2052 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 23 Mar 2021 21:33:39 +0100 Subject: [PATCH 5/7] #199 Handling path as well as rect when htmlLabels are off --- src/mermaidAPI.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 521499e42..f70ede5e8 100755 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -307,6 +307,9 @@ const render = function(id, _txt, cb, container) { )} !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; }`; From 30dfbbbd68759b66175a83a2bf4a9fe480f877d3 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 23 Mar 2021 21:48:49 +0100 Subject: [PATCH 6/7] #1995 Adding polygons --- src/mermaidAPI.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index f70ede5e8..9a745ed20 100755 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -313,6 +313,9 @@ const render = function(id, _txt, cb, container) { userStyles += `\n.${className} rect { ${classes[className].styles.join( ' !important; ' )} !important; }`; + userStyles += `\n.${className} polygon { ${classes[className].styles.join( + ' !important; ' + )} !important; }`; if (classes[className].textStyles) { userStyles += `\n.${className} tspan { ${classes[className].textStyles.join( ' !important; ' From a18543862f8787c9e6968b8dc316c041bc46d047 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Tue, 23 Mar 2021 21:57:15 +0100 Subject: [PATCH 7/7] #1995 Adding circle and ellipse --- src/mermaidAPI.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js index 9a745ed20..a6b5a0602 100755 --- a/src/mermaidAPI.js +++ b/src/mermaidAPI.js @@ -316,6 +316,12 @@ const render = function(id, _txt, cb, container) { 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; '