From d52e3d193116b4a6f61ac4a0ebe42bf2efd017a2 Mon Sep 17 00:00:00 2001
From: omkarht <omkar@mermaidchart.com>
Date: Fri, 24 Jan 2025 17:55:02 +0530
Subject: [PATCH] updated html-label alignment for shapes

---
 .../rendering-elements/shapes/curlyBraceLeft.ts        |  9 ++++-----
 .../rendering-elements/shapes/curlyBraceRight.ts       | 10 ++++------
 .../rendering-elements/shapes/curlyBraces.ts           |  5 ++++-
 .../rendering-elements/shapes/dividedRect.ts           |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts
index fadff4654c..7181b09cbc 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceLeft.ts
@@ -116,11 +116,10 @@ export async function curlyBraceLeft<T extends SVGGraphicsElement>(
 
   curlyBraceLeftShape.attr('transform', `translate(${radius}, 0)`);
 
-  label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
-  // label.attr(
-  //   'transform',
-  //   `translate(${-w / 2 + radius - (bbox.x - (bbox.left ?? 0))},${-paddingY / 2 - (bbox.y - (bbox.top ?? 0))})`
-  // );
+  label.attr(
+    'transform',
+    `translate(${-w / 2 + (paddingX ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-bbox.height / 2})`
+  );
 
   updateNodeBounds(node, curlyBraceLeftShape);
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts
index 594e3679f7..337eab41ce 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraceRight.ts
@@ -119,12 +119,10 @@ export async function curlyBraceRight<T extends SVGGraphicsElement>(
 
   curlyBraceRightShape.attr('transform', `translate(${-radius}, 0)`);
 
-  label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
-
-  // label.attr(
-  //   'transform',
-  //   `translate(${-w / 2 + labelPaddingX / 2 - (bbox.x - (bbox.left ?? 0))},${-(labelPaddingY / 2) - (bbox.y - (bbox.top ?? 0))})`
-  // );
+  label.attr(
+    'transform',
+    `translate(${-w / 2 + (labelPaddingX ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-bbox.height / 2})`
+  );
 
   updateNodeBounds(node, curlyBraceRightShape);
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts
index 10294d6146..b164bf05a2 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curlyBraces.ts
@@ -137,7 +137,10 @@ export async function curlyBraces<T extends SVGGraphicsElement>(
 
   curlyBracesShape.attr('transform', `translate(${radius - radius / 4}, 0)`);
 
-  label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
+  label.attr(
+    'transform',
+    `translate(${-w / 2 + (labelPaddingX ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-bbox.height / 2})`
+  );
   updateNodeBounds(node, curlyBracesShape);
 
   node.intersect = function (point) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts
index 0afb08caed..cd2b210c61 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts
@@ -75,7 +75,7 @@ export async function dividedRectangle<T extends SVGGraphicsElement>(
   // place the label in the center of the lower half of the divided rectangle
   label.attr(
     'transform',
-    `translate(${-bbox.width / 2}, ${-bbox.height / 2 - rectOffset / 2 + rectOffset})`
+    `translate(${-w / 2 + (paddingX ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-bbox.height / 2 - rectOffset / 2 + rectOffset})`
   );
 
   updateNodeBounds(node, polygon);