From 14bb09a3dbf922d983798a9b4c9c33f3eefd8250 Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Fri, 6 Sep 2024 17:56:13 +0530
Subject: [PATCH] Adjustments for icon shape

---
 .../rendering-elements/shapes/iconCircle.ts    |  6 ++++--
 .../rendering-elements/shapes/iconSquare.ts    | 18 +++++++++---------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
index 5d58c99da..8c1d972c9 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
@@ -45,9 +45,11 @@ export const iconCircle = async (parent: SVG, node: Node) => {
     iconElem.html(
       `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
     );
+    const iconWidth = iconElem.node().getBBox().width;
+    const iconHeight = iconElem.node().getBBox().height;
     iconElem.attr(
       'transform',
-      `translate(${-iconElem.node().getBBox().width / 2}, ${-iconElem.node().getBBox().height / 2 - labelHeight / 2 + (topLabel ? labelHeight - halfPadding * 2 : 0)})`
+      `translate(${-iconWidth / 2}, ${-iconHeight / 2 - labelHeight / 2 + (topLabel ? labelHeight : 0)})`
     );
   }
 
@@ -61,7 +63,7 @@ export const iconCircle = async (parent: SVG, node: Node) => {
 
   label.attr(
     'transform',
-    `translate(${-labelWidth / 2},${iconSize / 2 - labelHeight / 2 + halfPadding - (topLabel ? iconSize : 0)})`
+    `translate(${-labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${iconSize / 2 - labelHeight / 2 + halfPadding - (topLabel ? iconSize : 0) - (bbox.y - (bbox.top ?? 0))})`
   );
   updateNodeBounds(node, iconShape);
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
index b9f37165a..574d66246 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -28,14 +28,12 @@ export const iconSquare = async (parent: SVG, node: Node) => {
   const iconSize = Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48);
   const width = Math.max(labelWidth, iconSize);
   const height = labelHeight + iconSize;
-  const dx = bbox.x;
-  const dy = bbox.y;
 
   const points = [
-    { x: dx - width / 2, y: dy - height / 2 },
-    { x: dx - width / 2, y: dy + height / 2 },
-    { x: dx + width / 2, y: dy + height / 2 },
-    { x: dx + width / 2, y: dy - height / 2 },
+    { x: -width / 2, y: -height / 2 },
+    { x: -width / 2, y: height / 2 },
+    { x: width / 2, y: height / 2 },
+    { x: width / 2, y: -height / 2 },
   ];
 
   // @ts-ignore - rough is not typed
@@ -55,11 +53,13 @@ export const iconSquare = async (parent: SVG, node: Node) => {
   if (node.icon) {
     const iconElem = shapeSvg.append('g');
     iconElem.html(
-      `<g>${await getIconSVG(node.icon, { height: iconSize - 4 * halfPadding, fallbackPrefix: '' })}</g>`
+      `<g>${await getIconSVG(node.icon, { height: iconSize - halfPadding * 4, fallbackPrefix: '' })}</g>`
     );
+    const iconWidth = iconElem.node().getBBox().width;
+    const iconHeight = iconElem.node().getBBox().height;
     iconElem.attr(
       'transform',
-      `translate(${dx - width / 2 + halfPadding * 2}, ${dy - height / 2 + (topLabel ? labelHeight : 0)})`
+      `translate(${-iconWidth / 2}, ${-iconHeight / 2 - labelHeight / 2 + (topLabel ? labelHeight : 0)})`
     );
   }
 
@@ -73,7 +73,7 @@ export const iconSquare = async (parent: SVG, node: Node) => {
 
   label.attr(
     'transform',
-    `translate(${dx - width / 2 + halfPadding},${dy - height / 2 + iconSize + halfPadding - (topLabel ? iconSize : 0)})`
+    `translate(${-labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${-height / 2 + iconSize - (topLabel ? iconSize - halfPadding : 0) - (bbox.y - (bbox.top ?? 0))})`
   );
   updateNodeBounds(node, iconShape);