#2035 Growing composite state width with title

mermaid-js · May 2, 2021 · aa39dcc · aa39dcc
1 parent 6dc7112
commit aa39dcc
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -347,6 +347,19 @@ describe('State diagram', () => {
       }
     );
   });
+  it('v2 width of compond state should grow with title if title is wider', () => {
+    imgSnapshotTest(
+      `
+stateDiagram-v2
+  state "Long state name" as NotShooting {
+    a-->b
+  }
+    `,
+      {
+        logLevel: 0,
+      }
+    );
+  });
   it('v2 Simplest composite state', () => {
     imgSnapshotTest(
       `

diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
@@ -55,7 +55,7 @@
   class T TestSub
   linkStyle 0,1 color:orange, stroke: orange;
 </div>
-      <div class="mermaid" style="width: 100%; height: 20%;">
+      <div class="mermaid2" style="width: 100%; height: 20%;">
 %% The width of composite states does not grow with the title
 stateDiagram-v2
     [*] --> Off
@@ -67,15 +67,10 @@
     Washing --> Finished
     Finished --> [*]
       </div>
-<div class="mermaid2" style="width: 100%; height: 20%;">
+<div class="mermaid" style="width: 100%; height: 20%;">
 stateDiagram-v2
-state "Not Shooting State" as NotShooting {
-  state "Configuring mode" as Configuring
-  [*] --> Idle
-  Idle : this is a string
-  Idle : this is another string
-  Idle --> Configuring : EvConfig
-  Configuring --> Idle : EvConfig
+state "Long state name" as NotShooting {
+  a-->b
 }
 
 </div>

diff --git a/src/dagre-wrapper/clusters.js b/src/dagre-wrapper/clusters.js
@@ -136,18 +136,20 @@ const roundedWithTitle = (parent, node) => {
   const padding = 0 * node.padding;
   const halfPadding = padding / 2;
 
+  const width = node.width > bbox.width ? node.width : bbox.width + node.padding;
+
   // center the rect around its coordinate
   rect
     .attr('class', 'outer')
-    .attr('x', node.x - node.width / 2 - halfPadding)
+    .attr('x', node.x - width / 2 - halfPadding)
     .attr('y', node.y - node.height / 2 - halfPadding)
-    .attr('width', node.width + padding)
+    .attr('width', width + padding)
     .attr('height', node.height + padding);
   innerRect
     .attr('class', 'inner')
-    .attr('x', node.x - node.width / 2 - halfPadding)
+    .attr('x', node.x - width / 2 - halfPadding)
     .attr('y', node.y - node.height / 2 - halfPadding + bbox.height - 1)
-    .attr('width', node.width + padding)
+    .attr('width', width + padding)
     .attr('height', node.height + padding - bbox.height - 3);
 
   // Center the label