From 56c3809b5724428741f07a9ae627cb940e861510 Mon Sep 17 00:00:00 2001
From: Matheus B <matheus_ob59@hotmail.com>
Date: Sun, 12 Nov 2023 17:32:58 -0300
Subject: [PATCH] Add logic to add subgraph title margin on layout

---
 packages/mermaid/src/dagre-wrapper/edges.js |  5 +++++
 packages/mermaid/src/dagre-wrapper/index.js | 12 +++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/mermaid/src/dagre-wrapper/edges.js b/packages/mermaid/src/dagre-wrapper/edges.js
index ced9a3bc2..62a929e37 100644
--- a/packages/mermaid/src/dagre-wrapper/edges.js
+++ b/packages/mermaid/src/dagre-wrapper/edges.js
@@ -6,6 +6,7 @@ import { getConfig } from '../diagram-api/diagramAPI.js';
 import utils from '../utils.js';
 import { evaluate } from '../diagrams/common/common.js';
 import { getLineFunctionsWithOffset } from '../utils/lineWithOffset.js';
+import { getSubGraphTitleMargins } from '../utils/getSubGraphTitleMargins.js';
 
 let edgeLabels = {};
 let terminalLabels = {};
@@ -263,6 +264,7 @@ export const intersection = (node, outsidePoint, insidePoint) => {
 
   const Q = Math.abs(outsidePoint.y - insidePoint.y);
   const R = Math.abs(outsidePoint.x - insidePoint.x);
+  const { subGraphTitleTotalMargin } = getSubGraphTitleMargins();
   // log.warn();
   if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
     // Intersection is top or bottom of rect.
@@ -280,6 +282,9 @@ export const intersection = (node, outsidePoint, insidePoint) => {
     }
     if (R === 0) {
       res.x = outsidePoint.x;
+      if (q && subGraphTitleTotalMargin) {
+        res.y = insidePoint.y < outsidePoint.y ? y + h : y - h;
+      }
     }
     if (Q === 0) {
       res.y = outsidePoint.y;
diff --git a/packages/mermaid/src/dagre-wrapper/index.js b/packages/mermaid/src/dagre-wrapper/index.js
index 9843adb8b..7ebb9dc49 100644
--- a/packages/mermaid/src/dagre-wrapper/index.js
+++ b/packages/mermaid/src/dagre-wrapper/index.js
@@ -13,6 +13,9 @@ import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './no
 import { insertCluster, clear as clearClusters } from './clusters.js';
 import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
 import { log } from '../logger.js';
+import { getSubGraphTitleMargins } from '../utils/getSubGraphTitleMargins.js';
+
+const { subGraphTitleTotalMargin } = getSubGraphTitleMargins();
 
 const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) => {
   log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
@@ -114,13 +117,20 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster) =>
     );
     if (node && node.clusterNode) {
       // clusterDb[node.id].node = node;
-
+      node.y += subGraphTitleTotalMargin;
       positionNode(node);
     } else {
       // Non cluster node
       if (graph.children(v).length > 0) {
         // A cluster in the non-recursive way
         // positionCluster(node);
+        node.height += subGraphTitleTotalMargin * 2;
+        graph.children(v).forEach((c) => {
+          if (!clusterDb[c]) return;
+          if (!clusterDb[c].clusterData) {
+            node.height += subGraphTitleTotalMargin * 2;
+          }
+        });
         insertCluster(clusters, node);
         clusterDb[node.id].node = node;
       } else {