From 81a43e3d7c61cc76a9e66561eb2db1ef2c9bb938 Mon Sep 17 00:00:00 2001
From: darshanr0107 <darshan@mermaidchart.com>
Date: Wed, 1 Oct 2025 17:00:56 +0530
Subject: [PATCH] fix:  node label positioning in mindmap nodes

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
---
 cypress/platform/e2e.html                     |  8 ++++++++
 .../rendering-elements/shapes/bang.ts         |  8 +++-----
 .../rendering-elements/shapes/circle.ts       | 19 ++++++++-----------
 .../rendering-elements/shapes/cloud.ts        | 11 +++++------
 .../shapes/defaultMindmapNode.ts              |  6 +++---
 .../rendering-elements/shapes/drawRect.ts     | 12 ++++++------
 .../rendering-elements/shapes/hexagon.ts      |  9 +++++----
 .../rendering-elements/shapes/roundedRect.ts  |  9 ++++-----
 8 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/cypress/platform/e2e.html b/cypress/platform/e2e.html
index 465fbfbf5..008ee00bf 100644
--- a/cypress/platform/e2e.html
+++ b/cypress/platform/e2e.html
@@ -6,6 +6,14 @@
       href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
       rel="stylesheet"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
     <style>
       svg:not(svg svg) {
         border: 2px solid darkred;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/bang.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/bang.ts
index 704eb20ac..09d163d1a 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/bang.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/bang.ts
@@ -8,6 +8,8 @@ import { handleUndefinedAttr } from '../../../utils.js';
 import type { Bounds, Point } from '../../../types.js';
 import rough from 'roughjs';
 
+const ICON_SIZE = 30;
+const ICON_PADDING = 1;
 export async function bang<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
@@ -20,9 +22,6 @@ export async function bang<T extends SVGGraphicsElement>(parent: D3Selection<T>,
   let w = bbox.width + 10 * halfPadding;
   let h = bbox.height + 8 * halfPadding;
 
-  const ICON_SIZE = 30;
-  const ICON_PADDING = 1;
-
   if (node.icon) {
     const minWidthWithIcon = bbox.width + ICON_SIZE + ICON_PADDING * 2 + 10 * halfPadding;
     w = Math.max(w, minWidthWithIcon);
@@ -42,10 +41,9 @@ export async function bang<T extends SVGGraphicsElement>(parent: D3Selection<T>,
     const iconSpace = ICON_SIZE + ICON_PADDING;
     const remainingWidth = effectiveWidth - iconSpace;
     labelXOffset = -effectiveWidth / 2 + iconSpace + (remainingWidth - bbox.width) / 2;
+    label.attr('transform', `translate(${labelXOffset}, ${-bbox.height / 2})`);
   }
 
-  label.attr('transform', `translate(${labelXOffset}, ${-bbox.height / 2})`);
-
   const r = 0.15 * effectiveWidth;
   let bangElem;
   const path = `M0 0
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
index 28f20e252..1c9b8aae1 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
@@ -6,6 +6,10 @@ import intersect from '../intersect/index.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
 import rough from 'roughjs';
+
+const ICON_SIZE = 30;
+const ICON_PADDING = 20;
+
 export async function circle<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
   node: Node,
@@ -21,27 +25,20 @@ export async function circle<T extends SVGGraphicsElement>(
   );
 
   const padding = options?.padding ?? halfPadding;
-  const ICON_SIZE = 30;
-  const ICON_PADDING = 15;
-
   let radius = bbox.width / 2 + padding;
+  let labelXOffset = -bbox.width / 2;
+  const labelYOffset = -bbox.height / 2;
 
   if (node.icon) {
     const totalWidthNeeded = bbox.width + ICON_SIZE + ICON_PADDING * 2;
     const minRadiusWithIcon = totalWidthNeeded / 2 + padding;
     radius = Math.max(radius, minRadiusWithIcon);
+    labelXOffset = -radius + ICON_SIZE + ICON_PADDING;
+    label.attr('transform', `translate(${labelXOffset}, ${labelYOffset})`);
   }
 
   node.width = radius * 2;
   node.height = radius * 2;
-
-  let labelXOffset = -bbox.width / 2;
-  if (node.icon) {
-    labelXOffset = -radius + ICON_SIZE + ICON_PADDING;
-  }
-  const labelYOffset = -bbox.height / 2;
-  label.attr('transform', `translate(${labelXOffset}, ${labelYOffset})`);
-
   let circleElem;
 
   if (node.look === 'handDrawn') {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cloud.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cloud.ts
index ebd0c8fb4..7c46a7bfe 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cloud.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cloud.ts
@@ -6,6 +6,9 @@ import intersect from '../intersect/index.js';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
 import rough from 'roughjs';
+
+const ICON_SIZE = 30;
+const ICON_PADDING = 15;
 export async function cloud<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
@@ -16,13 +19,11 @@ export async function cloud<T extends SVGGraphicsElement>(parent: D3Selection<T>
     getNodeClasses(node)
   );
 
-  const ICON_SIZE = 30;
-  const ICON_PADDING = 15;
-
   let w = bbox.width + 2 * halfPadding;
   let h = bbox.height + 2 * halfPadding;
 
   let labelXOffset = -bbox.width / 2;
+  const labelYOffset = -bbox.height / 2;
   if (node.icon) {
     const minWidthWithIcon = bbox.width + ICON_SIZE + ICON_PADDING * 2 + 2 * halfPadding;
     w = Math.max(w, minWidthWithIcon);
@@ -33,14 +34,12 @@ export async function cloud<T extends SVGGraphicsElement>(parent: D3Selection<T>
 
     const availableTextSpace = w - ICON_SIZE - ICON_PADDING * 2;
     labelXOffset = -w / 2 + ICON_SIZE + ICON_PADDING + availableTextSpace / 2 - bbox.width / 2;
+    label.attr('transform', `translate(${labelXOffset}, ${labelYOffset})`);
   } else {
     node.width = w;
     node.height = h;
   }
 
-  const labelYOffset = -bbox.height / 2;
-  label.attr('transform', `translate(${labelXOffset}, ${labelYOffset})`);
-
   // Cloud radii
   const r1 = 0.15 * w;
   const r2 = 0.25 * w;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/defaultMindmapNode.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/defaultMindmapNode.ts
index 173bb3402..75ae7306c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/defaultMindmapNode.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/defaultMindmapNode.ts
@@ -4,6 +4,9 @@ import intersect from '../intersect/index.js';
 import { styles2String } from './handDrawnShapeStyles.js';
 import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
 
+const ICON_SIZE = 30;
+const ICON_PADDING = 15;
+
 export async function defaultMindmapNode<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
   node: Node
@@ -20,9 +23,6 @@ export async function defaultMindmapNode<T extends SVGGraphicsElement>(
   let w = bbox.width + 8 * halfPadding;
   let h = bbox.height + 2 * halfPadding;
 
-  const ICON_SIZE = 30;
-  const ICON_PADDING = 15;
-
   if (node.icon) {
     const minWidthWithIcon = bbox.width + ICON_SIZE + ICON_PADDING * 2 + 8 * halfPadding;
     w = Math.max(w, minWidthWithIcon);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
index b683b4d1e..f7bb3e99d 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
@@ -8,6 +8,9 @@ import type { D3Selection } from '../../../types.js';
 import { handleUndefinedAttr } from '../../../utils.js';
 import type { Bounds, Point } from '../../../types.js';
 
+const ICON_SIZE = 30;
+const ICON_PADDING = 10;
+
 export async function drawRect<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
   node: Node,
@@ -18,13 +21,11 @@ export async function drawRect<T extends SVGGraphicsElement>(
 
   const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const ICON_SIZE = 30;
-  const ICON_PADDING = 10;
-
   let totalWidth = Math.max(bbox.width + options.labelPaddingX * 2, node?.width || 0);
   let totalHeight = Math.max(bbox.height + options.labelPaddingY * 2, node?.height || 0);
-
   let labelXOffset = -bbox.width / 2;
+  const labelYOffset = -bbox.height / 2;
+
   if (node.icon) {
     const minWidthWithIcon = bbox.width + ICON_SIZE + ICON_PADDING * 2 + options.labelPaddingX * 2;
     totalWidth = Math.max(totalWidth, minWidthWithIcon);
@@ -36,12 +37,11 @@ export async function drawRect<T extends SVGGraphicsElement>(
     const availableTextSpace = totalWidth - ICON_SIZE - ICON_PADDING * 2;
     labelXOffset =
       -totalWidth / 2 + ICON_SIZE + ICON_PADDING + availableTextSpace / 2 - bbox.width / 2;
+    label.attr('transform', `translate(${labelXOffset}, ${labelYOffset})`);
   } else {
     node.width = totalWidth;
     node.height = totalHeight;
   }
-  const labelYOffset = -bbox.height / 2;
-  label.attr('transform', `translate(${labelXOffset}, ${labelYOffset})`);
   const x = -totalWidth / 2;
   const y = -totalHeight / 2;
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
index 1d9634a13..4952169dd 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
@@ -5,6 +5,9 @@ import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import type { D3Selection } from '../../../types.js';
 import rough from 'roughjs';
 
+const ICON_SIZE = 30;
+const ICON_PADDING = 1;
+
 export const createHexagonPathD = (
   x: number,
   y: number,
@@ -28,12 +31,11 @@ export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<
   node.labelStyle = labelStyles;
   const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const ICON_SIZE = 30;
-  const ICON_PADDING = 1;
   let h = bbox.height + (node.padding ?? 0);
   let w = bbox.width + (node.padding ?? 0) * 2.5;
 
   let labelXOffset = -bbox.width / 2;
+  const labelYOffset = -bbox.height / 2;
   if (node.icon) {
     const minWidthWithIcon = bbox.width + ICON_SIZE + ICON_PADDING * 2 + (node.padding ?? 0) * 2.5;
     w = Math.max(w, minWidthWithIcon);
@@ -44,12 +46,11 @@ export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<
 
     const availableTextSpace = w - ICON_SIZE - ICON_PADDING * 2;
     labelXOffset = -w / 2 + ICON_SIZE + ICON_PADDING + availableTextSpace / 2 - bbox.width / 2;
+    label.attr('transform', `translate(${labelXOffset}, ${labelYOffset})`);
   } else {
     node.width = w;
     node.height = h;
   }
-  const labelYOffset = -bbox.height / 2;
-  label.attr('transform', `translate(${labelXOffset}, ${labelYOffset})`);
   const { cssStyles } = node;
   // @ts-expect-error -- Passing a D3.Selection seems to work for some reason
   const rc = rough.svg(shapeSvg);
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
index 193792315..0502589dc 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
@@ -85,6 +85,9 @@ export function generateArcPoints(
   return points;
 }
 
+const ICON_SIZE = 30;
+const ICON_PADDING = 15;
+
 export async function roundedRect<T extends SVGGraphicsElement>(
   parent: D3Selection<T>,
   node: Node
@@ -99,9 +102,6 @@ export async function roundedRect<T extends SVGGraphicsElement>(
   let w = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2;
   let h = (node?.height ? node?.height : bbox.height) + labelPaddingY * 2;
 
-  const ICON_SIZE = 30;
-  const ICON_PADDING = 15;
-
   let labelXOffset = -bbox.width / 2;
 
   if (node.icon) {
@@ -114,10 +114,9 @@ export async function roundedRect<T extends SVGGraphicsElement>(
 
     const availableTextSpace = w - ICON_SIZE - ICON_PADDING * 2;
     labelXOffset = -w / 2 + ICON_SIZE + ICON_PADDING + availableTextSpace / 2 - bbox.width / 2;
+    label.attr('transform', `translate(${labelXOffset}, ${-bbox.height / 2})`);
   }
 
-  label.attr('transform', `translate(${labelXOffset}, ${-bbox.height / 2})`);
-
   const radius = node.radius || 5;
   const taper = node.taper || 5; // Taper width for the rounded corners
   const { cssStyles } = node;