#2072 Handle width of clusters with wide titles

cypress/platform/knsv.html

@@ -29,35 +29,27 @@
 
 <div class="mermaid" style="width: 100%; height: 20%;">
 stateDiagram
-  direction LR
+  state CompositeState {
-  state A {
+      YourState123456789012345123456789123456789012345123456789123456789012345123456789123456789012345123456789 --> MyState:a label
-    direction BT
-    a --> b
-  }
-  state C {
-    direction RL
-    c --> d
-  }
-  A --> C
-</div>
-<div class="mermaid2" style="width: 100%; height: 20%;">
-    %%{int:{
-"themeVariables": {
-    "transitionColor":"red",
-    "labelColor":"yellow",
-    "transitionLabelColor":"blue",
-    "stateBkg":"green",
-    "compositeBackground":"pink",
-    "altBackground":"purple",
-    "clusterTitleBackground":"blue",
-    "compositeBorder":"red"
-}}}%%
-stateDiagram
-    state CompositeState {
-        state AnotherCompositeState {
-        AnotherState --> YetANotherState:a label
     }
-}
+
+</div>
+<div class="mermaid" style="width: 100%; height: 20%;">
+flowchart
+subgraph CompositeState
+  subgraph AnotherCompositeStateCompositeStateCompositeStateCompositeState
+      YourState --a label--> MyState
+  end
+
+end
+</div>
+<div class="mermaid" style="width: 100%; height: 20%;">
+stateDiagram-v2
+  state CompositeState {
+    state AnotherCompositeState1234567890 {
+      YourState
+    }
+  }
 
 </div>
 <div class="mermaid2" style="width: 100%; height: 20%;">
@@ -77,7 +69,7 @@ sequenceDiagram
         theme: 'default',
         arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
-        logLevel: 5,
+        logLevel: 2,
         flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
         htmlLabels: true,
         // gantt: { axisFormat: '%m/%d/%Y' },

src/dagre-wrapper/clusters.js

@@ -136,7 +136,11 @@ 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;
+  const width =
+    node.width > bbox.width + node.padding ? node.width + node.padding : bbox.width + node.padding;
+  if (node.width <= bbox.width + node.padding) {
+    node.diff = (bbox.width - node.width) / 2;
+  }
 
   // center the rect around its coordinate
   rect
@@ -163,7 +167,6 @@ const roundedWithTitle = (parent, node) => {
   );
 
   const rectBox = rect.node().getBBox();
-  node.width = rectBox.width;
   node.height = rectBox.height;
 
   node.intersect = function(point) {
@@ -227,7 +230,7 @@ export const clear = () => {
 };
 
 export const positionCluster = node => {
-  log.info('Position cluster');
+  log.info('Position cluster (' + node.id + ', ' + node.x + ', ' + node.y + ')');
   const el = clusterElems[node.id];
 
   el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');

src/dagre-wrapper/index.js

@@ -50,12 +50,15 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
     log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v)));
     if (node && node.clusterNode) {
       // const children = graph.children(v);
-      log.info('Cluster identified', v, node, graph.node(v));
+      log.info('Cluster identified', v, node.width, graph.node(v));
-      const newEl = recursiveRender(nodes, node.graph, diagramtype, graph.node(v));
+      const o = recursiveRender(nodes, node.graph, diagramtype, graph.node(v));
+      const newEl = o.elem;
       updateNodeBounds(node, newEl);
+      node.diff = o.diff || 0;
+      log.info('Node nounds ', v, node, node.width, node.x, node.y);
       setNodeElem(newEl, node);
 
-      log.warn('Recursive render complete', newEl, node);
+      log.warn('Recursive render complete ', newEl, node);
     } else {
       if (graph.children(v).length > 0) {
         // This is a cluster but not to be rendered recusively
@@ -95,6 +98,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
   dagre.layout(graph);
   log.info('Graph after layout:', graphlib.json.write(graph));
   // Move the nodes to the correct place
+  let diff = 0;
   sortNodesByHierarchy(graph).forEach(function(v) {
     const node = graph.node(v);
     log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
@@ -132,7 +136,14 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
     positionEdgeLabel(edge, paths);
   });
 
-  return elem;
+  graph.nodes().forEach(function(v) {
+    const n = graph.node(v);
+    log.info(v, n.type, n.diff);
+    if (n.type === 'group') {
+      diff = n.diff;
+    }
+  });
+  return { elem, diff };
 };
 
 export const render = (elem, graph, markers, diagramtype, id) => {

src/dagre-wrapper/nodes.js

@@ -935,15 +935,17 @@ export const positionNode = node => {
   const el = nodeElems[node.id];
   log.trace(
     'Transforming node',
+    node.diff,
     node,
-    'translate(' + (node.x - node.width / 2 - 5) + ', ' + (node.y - node.height / 2 - 5) + ')'
+    'translate(' + (node.x - node.width / 2 - 5) + ', ' + node.width / 2 + ')'
   );
   const padding = 8;
+  const diff = node.diff || 0;
   if (node.clusterNode) {
     el.attr(
       'transform',
       'translate(' +
-        (node.x - node.width / 2 - padding) +
+        (node.x + diff - node.width / 2) +
         ', ' +
         (node.y - node.height / 2 - padding) +
         ')'
@@ -951,4 +953,5 @@ export const positionNode = node => {
   } else {
     el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
   }
+  return diff;
 };