From a16bbb8046d6f9973b773c740d611da9f6be0f5b Mon Sep 17 00:00:00 2001
From: Marc Faber <faber@genodata.de>
Date: Tue, 17 Nov 2020 23:18:11 +0100
Subject: [PATCH] #1751 apply style settings to subgraphs in "flowchart"
 diagrams

---
 .../rendering/flowchart-v2.spec.js            | 32 +++++++++++++++++++
 .../integration/rendering/flowchart.spec.js   |  4 +--
 dist/flowchart.html                           |  8 ++---
 dist/index.html                               |  4 +--
 src/dagre-wrapper/clusters.js                 |  3 +-
 5 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index ecba0168c..1b01ce7cd 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -371,6 +371,38 @@ flowchart TD
       {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
     );
   });
+  it('62: should render styled subgraphs', () => {
+    imgSnapshotTest(
+      `
+      flowchart TB
+      A
+      B
+      subgraph foo[Foo SubGraph]
+        C
+        D
+      end
+      subgraph bar[Bar SubGraph]
+        E
+        F
+      end
+      G
 
+      A-->B
+      B-->C
+      C-->D
+      B-->D
+      D-->E
+      E-->A
+      E-->F
+      F-->D
+      F-->G
+      B-->G
+      G-->D
 
+      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
+      style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
+  });
 });
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 763dde713..30e9dfe34 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -234,8 +234,8 @@ describe('Flowchart', () => {
       B-->G
       G-->D
 
-      style foo fill:#F99,stroke-width:2px,stroke:#F0F
-      style bar fill:#999,stroke-width:10px,stroke:#0F0
+      style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
+      style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
       `,
        { fontFamily: 'courier' }
     );
diff --git a/dist/flowchart.html b/dist/flowchart.html
index 38578d54e..9e730b501 100644
--- a/dist/flowchart.html
+++ b/dist/flowchart.html
@@ -501,8 +501,8 @@
     B-->G
     G-->D
 
-    style foo fill:#F99,stroke-width:2px,stroke:#F0F
-    style bar fill:#999,stroke-width:10px,stroke:#0F0
+    style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
+    style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
   </div>
 
   <h3>flowchart</h3>
@@ -532,8 +532,8 @@
     B-->G
     G-->D
 
-    style foo fill:#F99,stroke-width:2px,stroke:#F0F
-    style bar fill:#999,stroke-width:10px,stroke:#0F0
+    style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
+    style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
   </div>
 
   <hr/>
diff --git a/dist/index.html b/dist/index.html
index 78b3ed8cb..8aa34f8c8 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -293,8 +293,8 @@ graph TB
   B-->G
   G-->D
 
-  style foo fill:#F99,stroke-width:2px,stroke:#F0F
-  style bar fill:#999,stroke-width:10px,stroke:#0F0
+  style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
+  style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
   </div>
   <div class="mermaid">
       graph LR
diff --git a/src/dagre-wrapper/clusters.js b/src/dagre-wrapper/clusters.js
index 9341af1e5..283bfdafb 100644
--- a/src/dagre-wrapper/clusters.js
+++ b/src/dagre-wrapper/clusters.js
@@ -40,6 +40,7 @@ const rect = (parent, node) => {
   log.trace('Data ', node, JSON.stringify(node));
   // center the rect around its coordinate
   rect
+    .attr('style', node.style)
     .attr('rx', node.rx)
     .attr('ry', node.ry)
     .attr('x', node.x - node.width / 2 - halfPadding)
@@ -53,7 +54,7 @@ const rect = (parent, node) => {
     'translate(' +
       (node.x - bbox.width / 2) +
       ', ' +
-      (node.y - node.height / 2 - node.padding / 3 + 3) +
+      (node.y - node.height / 2 + node.padding / 3) +
       ')'
   );