From 822df37f8cc4a4f13963ca7fb81e6dd8456b8b83 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Wed, 5 Feb 2020 19:39:50 +0100
Subject: [PATCH] #1224 Possibility to style text color of nodes and subgraphs
 as well as apply classes to subgraphs

---
 .../integration/rendering/flowchart.spec.js   | 23 +++++++++++++++++++
 src/diagrams/flowchart/flowDb.js              | 14 +++++++++--
 src/diagrams/flowchart/flowRenderer.js        |  8 +++++++
 src/mermaidAPI.js                             |  7 ++++++
 4 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 2c20090a4..591f0f8db 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -575,4 +575,27 @@ it('24.2: Handle link click events (link, anchor, mailto, other protocol, script
       { flowchart: { htmlLabels: false } }
     );
   });
+  it('30: Possibility to style text color of nodes and subgraphs as well as apply classes to subgraphs', () => {
+    imgSnapshotTest(
+      `graph LR
+      subgraph id1 [title is set]
+        A-->B
+      end
+      subgraph id2 [title]
+        E
+      end
+
+      B-->C
+
+      subgraph id3
+      C-->D
+      end
+      class id3,id2,A redBg;
+      class id3,A whiteTxt;
+      classDef redBg fill:#622;
+      classDef whiteTxt color: white;
+      `,
+      { flowchart: { htmlLabels: false } }
+    );
+  });
 });
diff --git a/src/diagrams/flowchart/flowDb.js b/src/diagrams/flowchart/flowDb.js
index 33c85a15d..b0c926696 100644
--- a/src/diagrams/flowchart/flowDb.js
+++ b/src/diagrams/flowchart/flowDb.js
@@ -151,12 +151,18 @@ export const updateLink = function(positions, style) {
 
 export const addClass = function(id, style) {
   if (typeof classes[id] === 'undefined') {
-    classes[id] = { id: id, styles: [] };
+    classes[id] = { id: id, styles: [], textStyles: [] };
   }
 
   if (typeof style !== 'undefined') {
     if (style !== null) {
       style.forEach(function(s) {
+        console.log('style', s);
+        if (s.match('color')) {
+          const newStyle1 = s.replace('fill', 'bgFill');
+          const newStyle2 = newStyle1.replace('color', 'fill');
+          classes[id].textStyles.push(newStyle2);
+        }
         classes[id].styles.push(s);
       });
     }
@@ -196,6 +202,8 @@ export const setClass = function(ids, className) {
       vertices[id].classes.push(className);
     }
 
+    console.log('Setting class', className, id, subGraphLookup[id]);
+
     if (typeof subGraphLookup[id] !== 'undefined') {
       subGraphLookup[id].classes.push(className);
     }
@@ -373,7 +381,8 @@ export const defaultStyle = function() {
  * Clears the internal graph db so that a new graph can be parsed.
  */
 export const addSubGraph = function(_id, list, _title) {
-  let id = _id;
+  console.log('Adding subgraph', _id);
+  let id = _id.trim();
   let title = _title;
   if (_id === _title && _title.match(/\s/)) {
     id = undefined;
@@ -410,6 +419,7 @@ export const addSubGraph = function(_id, list, _title) {
   const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] };
   subGraphs.push(subGraph);
   subGraphLookup[id] = subGraph;
+  console.log('Adding subgraph', id, subGraphs, subGraphLookup);
   return id;
 };
 
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
index decb382f8..9ee23aea8 100644
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -283,6 +283,9 @@ export const draw = function(text, id) {
     logger.debug('Parsing failed');
   }
 
+  console.log('Classes:', flowDb.getClasses());
+  console.log('Subgraphs:', flowDb.getSubGraphs());
+
   // Fetch the default direction, use TD if none was found
   let dir = flowDb.getDirection();
   if (typeof dir === 'undefined') {
@@ -430,6 +433,11 @@ export const draw = function(text, id) {
       const te = cluster.select('.label');
       te.attr('transform', `translate(${xPos + width / 2}, ${yPos + 14})`);
       te.attr('id', id + 'Text');
+
+      console.log('Fixing subgraph', id, subG.id, subG.classes); // eslitn-disable-line
+      for (let j = 0; j < subG.classes.length; j++) {
+        clusterEl[0].classList.add(subG.classes[j]);
+      }
     }
   }
 
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 273c93b5d..6f4170cb4 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -533,11 +533,18 @@ const render = function(id, _txt, cb, container) {
   // classDef
   if (graphType === 'flowchart') {
     const classes = flowRenderer.getClasses(txt);
+    console.log('classes in mermaidApi', classes);
     for (const className in classes) {
       style += `\n.${className} > * { ${classes[className].styles.join(
         ' !important; '
       )} !important; }`;
+      if (classes[className].textStyles) {
+        style += `\n.${className} tspan { ${classes[className].textStyles.join(
+          ' !important; '
+        )} !important; }`;
+      }
     }
+    console.log(style);
   }
 
   const style1 = document.createElement('style');