From 26ede9b0156be0c3c2ca65261af42a0b02614608 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Sun, 6 Jun 2021 11:37:23 +0200
Subject: [PATCH] Small positoining fix for parallell processes and nested
 composite states

---
 cypress/platform/knsv.html    | 46 +++++++++++++++++++++++++++--------
 src/dagre-wrapper/clusters.js |  4 +--
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
index 353593e5e21..40c26c56925 100644
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -66,17 +66,43 @@
 
 </div>
 <div class="mermaid" style="width: 100%; height: 20%;">
-    %%{init:{"theme":"forest", "themeVariables": {
-      "specialStateColor":"red",
-      "innerEndBackground":"lightgreen"
-    }}}%%
-    stateDiagram-v2
-    state fork [[fork]]
-    state join [[join]]
-     [*] --> fork
-     fork --> join
-     join --> [*]
+stateDiagram-v2
+state CompositeState {
+state AnotherCompositeState1234567890 {
+YourState
+}
+}
+  </div>
+<div class="mermaid2" style="width: 100%; height: 20%;">
+stateDiagram-v2
+state CS {
+state ACS {
+YourState
+}
+}
   </div>
+<div class="mermaid" style="width: 100%; height: 20%;">
+      stateDiagram-v2
+        [*] --> Active
+
+        state Active {
+            [*] --> NumLockOff
+            NumLockOff --> NumLockOn : EvNumLockPressed
+            NumLockOn --> NumLockOff : EvNumLockPressed
+            --
+            [*] --> CapsLockOff
+            CapsLockOff --> CapsLockOn : EvCapsLockPressed
+            CapsLockOn --> CapsLockOff : EvCapsLockPressed
+        }
+        state SomethingElse {
+          A --> B
+          B --> A
+        }
+
+        Active --> SomethingElse
+        note right of SomethingElse : This is the note to the right.
+
+        SomethingElse --> [*]  </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 a0d47ed7ca7..054ba9c9479 100644
--- a/src/dagre-wrapper/clusters.js
+++ b/src/dagre-wrapper/clusters.js
@@ -146,7 +146,7 @@ const roundedWithTitle = (parent, node) => {
 
   const width = node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width;
   if (node.width <= bbox.width + node.padding) {
-    node.diff = (bbox.width + node.padding - node.width) / 2;
+    node.diff = (bbox.width + node.padding * 0 - node.width) / 2;
   } else {
     node.diff = -node.padding / 2;
   }
@@ -212,7 +212,7 @@ const divider = (parent, node) => {
   const rectBox = rect.node().getBBox();
   node.width = rectBox.width;
   node.height = rectBox.height;
-
+  node.diff = -node.padding / 2;
   node.intersect = function(point) {
     return intersectRect(node, point);
   };