Merge branch '5237-unified-layout-common-renderer' into sidv/5237_Cle…

…anup

* 5237-unified-layout-common-renderer:
  #5237 Fix fir subgraphs with elk
  #5237 Fix for diamond intersections with ELK, tweak
  #5237 Fix for diamond intersections with ELK
  fix for note with a composite state
  #5237 Handling of subgraphs using elk
  #5237 Handling of subgraphs using elk
  Fix fro direction in layout data

packages/mermaid/src/diagrams/flowchart/flowDb.ts

@@ -866,7 +866,7 @@ export const getData = () => {
       label: subGraph.title,
       labelStyle: '',
       parentId: parentDB.get(subGraph.id),
-      padding: config.flowchart?.padding ?? 8,
+      padding: 8,
       cssCompiledStyles: getCompiledStyles(subGraph.classes),
       cssClasses: subGraph.classes.join(' '),
       shape: 'rect',

packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts

@@ -49,7 +49,7 @@ export const draw = async function (text: string, id: string, _version: string,
   data4Layout.diagramId = id;
   log.debug('REF1:', data4Layout);
   await render(data4Layout, svg, element);
-  const padding = 8;
+  const padding = data4Layout.config.flowchart?.padding ?? 8;
   utils.insertTitle(
     element,
     'statediagramTitleText',

packages/mermaid/src/diagrams/state/dataFetcher.js

@@ -372,7 +372,7 @@ export const dataFetcher = (
       groupData.id = parentNodeId;
       //add parent id to noteData
       noteData.parentId = parentNodeId;
-      nodeData.parentId = parentNodeId;
+      //nodeData.parentId = parentNodeId;
 
       //insert groupData
       insertOrUpdateNode(nodes, groupData, classes);

packages/mermaid/src/diagrams/state/stateDb.js

@@ -12,6 +12,7 @@ import {
   getDiagramTitle,
 } from '../common/commonDb.js';
 import { dataFetcher, reset as resetDataFetching } from './dataFetcher.js';
+import { getDir } from './stateRenderer-v3-unified.js';
 
 import {
   DEFAULT_DIAGRAM_DIRECTION,
@@ -588,7 +589,7 @@ const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.t
 
 export const getData = () => {
   const config = getConfig();
-  return { nodes, edges, other: {}, config };
+  return { nodes, edges, other: {}, config, direction: getDir(getRootDocV2()) };
 };
 
 export default {

packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts

@@ -48,7 +48,7 @@ export const draw = async function (text: string, id: string, _version: string,
   // Not related to the refactoring, but this is the first step in the rendering process
   diag.db.extract(diag.db.getRootDocV2());
 
-  const DIR = getDir(diag.db.getRootDocV2());
+  //const DIR = getDir(diag.db.getRootDocV2());
 
   // The getData method provided in all supported diagrams is used to extract the data from the parsed structure
   // into the Layout data format
@@ -59,7 +59,6 @@ export const draw = async function (text: string, id: string, _version: string,
 
   data4Layout.type = diag.type;
   data4Layout.layoutAlgorithm = layout;
-  data4Layout.direction = DIR;
 
   // TODO: Should we move these two to baseConfig? These types are not there in StateConfig.
 
@@ -82,4 +81,5 @@ export const draw = async function (text: string, id: string, _version: string,
 export default {
   getClasses,
   draw,
+  getDir,
 };

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

@@ -55,17 +55,18 @@ const rect = async (parent, node) => {
 
   const padding = 0 * node.padding;
 
-  const width = node.width <= bbox.width + padding ? bbox.width + padding : node.width;
-  if (node.width <= bbox.width + padding) {
-    node.diff = (bbox.width - node.width) / 2 - node.padding / 2;
+  const width =
+    (node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width) + padding;
+  if (node.width <= bbox.width + node.padding) {
+    node.diff = (width - node.width) / 2 - node.padding;
   } else {
-    node.diff = -node.padding / 2;
+    node.diff = -node.padding;
   }
 
-  const totalWidth = width + padding;
-  const totalHeight = node.height + padding;
-  const x = node.x - totalWidth / 2;
-  const y = node.y - totalHeight / 2;
+  const height = node.height;
+  const x = node.x - width / 2;
+  const y = node.y - height / 2;
+  // console.log('UIO diff 2', node.id, node.diff, 'totalWidth: ', width);
 
   log.trace('Data ', node, JSON.stringify(node));
   let rect;
@@ -80,9 +81,8 @@ const rect = async (parent, node) => {
       fillWeight: 3,
       seed: handdrawnSeed,
     });
-    const roughNode = rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, 0), options);
+    const roughNode = rc.path(createRoundedRectPathD(x, y, width, height, 0), options);
     // console.log('Rough node insert CXC', roughNode);
-
     rect = shapeSvg.insert(() => {
       log.debug('Rough node insert CXC', roughNode);
       return roughNode;
@@ -97,8 +97,8 @@ const rect = async (parent, node) => {
       .attr('ry', node.ry)
       .attr('x', x)
       .attr('y', y)
-      .attr('width', totalWidth)
-      .attr('height', totalHeight);
+      .attr('width', width)
+      .attr('height', height);
   }
   const { subGraphTitleTopMargin } = getSubGraphTitleMargins(siteConfig);
   labelEl.attr(
@@ -116,8 +116,11 @@ const rect = async (parent, node) => {
   // Center the label
 
   const rectBox = rect.node().getBBox();
+  node.offsetX = 0;
   node.width = rectBox.width;
   node.height = rectBox.height;
+  // Used by layout engine to position subgraph in parent
+  node.offsetY = bbox.height - node.padding / 2;
 
   node.intersect = function (point) {
     return intersectRect(node, point);
@@ -163,6 +166,7 @@ const noteGroup = (parent, node) => {
 
   return { cluster: shapeSvg, labelBBox: { width: 0, height: 0 } };
 };
+
 const roundedWithTitle = async (parent, node) => {
   const siteConfig = getConfig();
 
@@ -200,6 +204,7 @@ const roundedWithTitle = async (parent, node) => {
     dv.attr('height', bbox.height);
   }
 
+  // Rounded With Title
   const padding = 0 * node.padding;
   const halfPadding = padding / 2;
 
@@ -211,12 +216,6 @@ const roundedWithTitle = async (parent, node) => {
     node.diff = -node.padding;
   }
 
-  // if (node.id === 'Apa0') {
-  //   console.log('XBX here', node);
-  //   node.y += 10;
-  // } else {
-  //   console.log('XBX there', node);
-  // }
   const height = node.height + padding;
   // const height = node.height + padding;
   const innerHeight = node.height + padding - bbox.height - 6;
@@ -293,7 +292,7 @@ const divider = (parent, node) => {
   const siteConfig = getConfig();
 
   const { themeVariables, handdrawnSeed } = siteConfig;
-  const { compositeTitleBackground, nodeBorder } = themeVariables;
+  const { nodeBorder } = themeVariables;
 
   // Add outer g element
   const shapeSvg = parent

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

@@ -465,13 +465,6 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
   const tail = startNode;
   var head = endNode;
 
-  log.info(
-    'abc88 InsertEdge Start: ',
-    edge.start,
-    '-->',
-    edge.end,
-    JSON.stringify(points, null, 2)
-  );
   if (head.intersect && tail.intersect) {
     // log.info('abc88 InsertEdge: 0.5', edge.start, '-->', edge.end, JSON.stringify(points));
     points = points.slice(1, edge.points.length - 1);