1295 Handling labels of clusters

cypress/platform/current.html

@@ -34,17 +34,24 @@
           C --> D
       </div>
       <div class="mermaid" style="width: 100%; height: 100%">
-        graph TB
+        graph LR
           A[apan klättrar]-- i träd -->B
           subgraph id1 [Test with title wider then the node in the subgraph]
             B
           end
       </div>
+      <div class="mermaid" style="width: 100%; height: 100%">
+        flowchart LR
+          A-- i träd -->B
+          subgraph id1 [Test]
+             B
+          end
+      </div>
       <div class="mermaid" style="width: 100%; height: 100%">
         flowchart TB
-          A[apan klättrar]-- i träd -->B
-          subgraph id1 [Test with title wider then the node in the subgraph]
-            B
+          C[apan klättrar]-- i träd -->D
+          subgraph id1 [Test]
+            D
           end
       </div>
 </div>

src/dagre-wrapper/clusters.js

@@ -33,10 +33,17 @@ const rect = (parent, node) => {
     .attr('height', node.height + padding);
 
   const adj = (node.width + node.padding - bbox.width) / 2;
-
+  logger.info('bbox', bbox.width, node.x, node.width);
   // Center the label
-  label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
-  // label.attr('transform', 'translate(' + 70 + ', ' + -node.height / 2 + ')');
+  // label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
+  label.attr(
+    'transform',
+    'translate(' +
+      (node.x - bbox.width / 2) +
+      ', ' +
+      (node.y - node.height / 2 - node.padding / 3 + 3) +
+      ')'
+  );
 
   const rectBox = rect.node().getBBox();
   node.width = rectBox.width;

src/dagre-wrapper/createLabel.js

@@ -8,7 +8,7 @@ const createLabel = (vertexText, style) => {
     const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
     tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
     tspan.setAttribute('dy', '1em');
-    tspan.setAttribute('x', '1');
+    tspan.setAttribute('x', '0');
     tspan.textContent = rows[j];
     svgLabel.appendChild(tspan);
   }

src/dagre-wrapper/index.js

@@ -22,16 +22,16 @@ export const render = (elem, graph) => {
     if (node.type !== 'group') {
       insertNode(nodes, graph.node(v));
     } else {
-      const width = getClusterTitleWidth(clusters, node);
-      const children = graph.children(v);
-      nodes2expand.push({ id: children[0], width });
+      // const width = getClusterTitleWidth(clusters, node);
+      // const children = graph.children(v);
+      // nodes2expand.push({ id: children[0], width });
     }
   });
 
-  nodes2expand.forEach(item => {
-    const node = graph.node(item.id);
-    node.width = item.width;
-  });
+  // nodes2expand.forEach(item => {
+  //   const node = graph.node(item.id);
+  //   node.width = item.width;
+  // });
 
   // Inster labels, this will insert them into the dom so that the width can be calculated
   graph.edges().forEach(function(e) {