#5237 Fix of alignment issues

packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts

@@ -1,7 +1,7 @@
 // @ts-ignore: JISON doesn't support types
 import flowParser from './parser/flow.jison';
 import flowDb from './flowDb.js';
-import flowRendererV2 from './flowRenderer-v2.js';
+//import flowRendererV2 from './flowRenderer-v2.js';
 import flowRendererV3 from './flowRenderer-v3-unified.js';
 import flowStyles from './styles.js';
 import type { MermaidConfig } from '../../config.type.js';

packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js

@@ -72,6 +72,16 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
       if (node && node.clusterNode) {
         // const children = graph.children(v);
         log.info('Cluster identified XBX', v, node.width, graph.node(v));
+
+        // `node.graph.setGraph` applies the graph configurations such as nodeSpacing to subgraphs as without this the default values would be used
+        // We override only the `ranksep` and `nodesep` configurations to allow for setting subgraph spacing while avoiding overriding other properties
+        const { ranksep, nodesep } = graph.graph();
+        node.graph.setGraph({
+          ...node.graph.graph(),
+          ranksep: 75,
+          nodesep,
+        });
+
         // "o" will contain the full cluster not just the children
         const o = await recursiveRender(
           nodes,
@@ -83,6 +93,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
         );
         const newEl = o.elem;
         updateNodeBounds(node, newEl);
+        // node.height = o.diff;
         node.diff = o.diff || 0;
         log.info(
           'New compound node after recursive render XAX',
@@ -190,14 +201,13 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
   log.info('Graph after layout:', graphlibJson.write(graph));
   // Move the nodes to the correct place
   let diff = 0;
-  log.info('Need the size here XAX', graph.node('T1')?.height);
   let { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
-  subGraphTitleTotalMargin = 0;
+  // subGraphTitleTotalMargin = 0;
   await Promise.all(
     sortNodesByHierarchy(graph).map(async function (v) {
       const node = graph.node(v);
       const p = graph.node(node?.parentId);
-      subGraphTitleTotalMargin = p?.offsetY || subGraphTitleTotalMargin;
+      // subGraphTitleTotalMargin = p?.offsetY || subGraphTitleTotalMargin;
 
       log.info(
         'Position XBX => ' + v + ': (' + node.x,
@@ -210,8 +220,9 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
       if (node && node.clusterNode) {
         const parentId = graph.parent(v);
         // Adjust for padding when on root level
-        node.y = parentId ? node.y - 8 : node.y - 8;
+        node.y += subGraphTitleTotalMargin;
-        node.x -= 8;
+        // node.y = parentId ? node.y - 8 : node.y - 8;
+        // node.x -= 8;
 
         log.info(
           'A tainted cluster node XBX1',
@@ -225,7 +236,7 @@ const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, sit
         );
         clusterDb[node.id].node = node;
         // node.y += subGraphTitleTotalMargin - 10;
-        node.y -= (node.offsetY || 0) / 2;
+        // node.y -= (node.offsetY || 0) / 2;
         // node.y -= 10;
         positionNode(node);
       } else {

packages/mermaid/src/rendering-util/rendering-elements/clusters.js

@@ -213,9 +213,9 @@ const roundedWithTitle = async (parent, node) => {
   const width =
     (node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width) + padding;
   if (node.width <= bbox.width + node.padding) {
-    node.diff = (bbox.width + node.padding * 0 - node.width) / 2;
+    node.diff = (width - node.width) / 2 - node.padding;
   } else {
-    node.diff = -node.padding / 2;
+    node.diff = -node.padding;
   }
 
   // if (node.id === 'Apa0') {
@@ -224,11 +224,13 @@ const roundedWithTitle = async (parent, node) => {
   // } else {
   //   console.log('XBX there', node);
   // }
-  const x = node.x - width / 2 - halfPadding;
-  const y = node.y - node.height / 2 - halfPadding;
-  const innerY = node.y - node.height / 2 - halfPadding + bbox.height + 2;
   const height = node.height + padding;
+  // const height = node.height + padding;
   const innerHeight = node.height + padding - bbox.height - 6;
+  const x = node.x - width / 2;
+  const y = node.y - height / 2;
+
+  const innerY = node.y - node.height / 2 - halfPadding + bbox.height + 2;
   const look = siteConfig.look;
 
   // add the rect
@@ -272,7 +274,7 @@ const roundedWithTitle = async (parent, node) => {
       .attr('x', x)
       .attr('y', y)
       .attr('width', width)
-      .attr('height', node.height + padding);
+      .attr('height', height);
     innerRect
       .attr('class', 'inner')
       .attr('x', x)
@@ -311,8 +313,8 @@ const divider = (parent, node) => {
   const padding = 0 * node.padding;
   const halfPadding = padding / 2;
 
-  const x = node.x - node.width / 2 - halfPadding;
+  const x = node.x - node.width / 2 - node.padding;
-  const y = node.y - node.height / 2;
+  const y = node.y - node.height / 2 + node.padding;
   const width = node.width + padding;
   const height = node.height + padding;
   if (node.look === 'handdrawn') {

packages/mermaid/src/rendering-util/rendering-elements/nodes.js

@@ -101,20 +101,22 @@ export const clear = () => {
 
 export const positionNode = (node) => {
   const el = nodeElems[node.id];
-
+  log.trace(
-  log.debug(
+    'Transforming node',
-    'Position node',
-    node.id,
     node.diff,
     node,
     'translate(' + (node.x - node.width / 2 - 5) + ', ' + node.width / 2 + ')'
   );
-  // Handling of the case where teh label grows the cluster
+  const padding = 8;
   const diff = node.diff || 0;
   if (node.clusterNode) {
     el.attr(
       'transform',
-      'translate(' + (node.x - node.width / 2) + ', ' + (node.y - node.height / 2) + ')'
+      'translate(' +
+        (node.x + diff - node.width / 2) +
+        ', ' +
+        (node.y - node.height / 2 - padding) +
+        ')'
     );
   } else {
     el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');

packages/mermaid/src/rendering-util/types.d.ts

@@ -44,7 +44,6 @@ interface Node {
   height?: number;
   // Specific properties for State Diagram nodes TODO remove and use generic properties
   intersect?: (point: any) => any;
-  intersect2?: (node: Node, point: any) => any;
 
   // Non-generic properties
   rx?: number; // Used for rounded corners in Rect, Ellipse, etc.Maybe it to specialized RectNode, EllipseNode, etc.