From af4930e3f3643d91e3e3ea9d2f498e96674ef1d1 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Sun, 16 May 2021 08:21:28 +0200
Subject: [PATCH] Expandingh with of subgraphs whith title

---
 cypress/platform/knsv.html    | 17 +++++++++--------
 src/dagre-wrapper/clusters.js | 15 +++++++++++----
 src/dagre-wrapper/index.js    |  2 +-
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index 8ae25a819..601515bb0 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -52,14 +52,15 @@ stateDiagram-v2
   }
 
 </div>
-<div class="mermaid2" style="width: 100%; height: 20%;">
-sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    John-->>-Alice: I feel great!
-    note right of John: Hello note reader
-</div>
+<div class="mermaid" style="width: 100%; height: 20%;">
+    %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
+    flowchart LR
+
+    subgraph B1
+        i -->f
+    end
+    A --> B1 --> B --> B1
+  </div>
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
diff --git a/src/dagre-wrapper/clusters.js b/src/dagre-wrapper/clusters.js
index 25697f416..f39e4fa0a 100644
--- a/src/dagre-wrapper/clusters.js
+++ b/src/dagre-wrapper/clusters.js
@@ -37,15 +37,22 @@ const rect = (parent, node) => {
   const padding = 0 * node.padding;
   const halfPadding = padding / 2;
 
+  const width = node.width <= bbox.width + padding ? bbox.width + padding : node.width + padding;
+  if (node.width <= bbox.width + padding) {
+    node.diff = (bbox.width - node.width) / 2;
+  } else {
+    node.diff = -node.padding / 2;
+  }
+
   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)
+    .attr('x', node.x - width / 2)
     .attr('y', node.y - node.height / 2 - halfPadding)
-    .attr('width', node.width + padding)
+    .attr('width', width)
     .attr('height', node.height + padding);
 
   // Center the label
@@ -137,9 +144,9 @@ const roundedWithTitle = (parent, node) => {
   const halfPadding = padding / 2;
 
   const width =
-    node.width > bbox.width + node.padding ? node.width + node.padding : bbox.width + node.padding;
+    node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width + node.padding;
   if (node.width <= bbox.width + node.padding) {
-    node.diff = (bbox.width - node.width) / 2;
+    node.diff = (bbox.width + node.padding - node.width) / 2;
   }
 
   // center the rect around its coordinate
diff --git a/src/dagre-wrapper/index.js b/src/dagre-wrapper/index.js
index 2793c1dfd..4b1e270c3 100644
--- a/src/dagre-wrapper/index.js
+++ b/src/dagre-wrapper/index.js
@@ -55,7 +55,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
       const newEl = o.elem;
       updateNodeBounds(node, newEl);
       node.diff = o.diff || 0;
-      log.info('Node nounds ', v, node, node.width, node.x, node.y);
+      log.info('Node bounds (abc123)', v, node, node.width, node.x, node.y);
       setNodeElem(newEl, node);
 
       log.warn('Recursive render complete ', newEl, node);