Small positoining fix for parallell processes and nested composite states

cypress/platform/knsv.html

@@ -66,17 +66,43 @@ stateDiagram-v2
 
 </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) {

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