Merge pull request #1245 from mermaid-js/feature/1224_styling_of_subgraphs

Feature/1224 styling of subgraphs

cypress/integration/rendering/flowchart.spec.js

@@ -583,4 +583,27 @@ it('25: 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 } }
+    );
+  });
 });

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;
 };
 

src/diagrams/flowchart/flowRenderer.js

@@ -269,6 +269,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') {
@@ -416,6 +419,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]);
+      }
     }
   }
 

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');