From 3d1af09090804261144e44a0f9ee8466528fe522 Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Tue, 10 Sep 2024 22:28:01 +0530
Subject: [PATCH] Updated circle icon

---
 .../rendering-elements/shapes/iconCircle.ts   | 62 ++++++++++---------
 1 file changed, 34 insertions(+), 28 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 a80dbf784..ab61dd65c 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
@@ -1,62 +1,72 @@
 import { log } from '../../../logger.js';
-import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
+import { labelHelper, updateNodeBounds } from './util.js';
 import type { Node } from '../../types.d.ts';
 import type { SVG } from '../../../diagram-api/types.js';
-import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
+import { compileStyles, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 import { getIconSVG } from '../../icons.js';
+import { getConfig } from '../../../diagram-api/diagramAPI.js';
 
-export const iconCircle = async (parent: SVG, node: Node) => {
+export const iconCircle = async (parent: SVG, node: Node, dir: string) => {
+  const translateHorizontal = dir === 'TB' || dir === 'BT' || dir === 'TD' || dir === 'DT';
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
+  const assetHeight = node.assetHeight ?? 48;
+  const assetWidth = node.assetWidth ?? 48;
+  const iconSize = Math.max(assetHeight, assetWidth);
+  const defaultWidth = getConfig()?.flowchart?.wrappingWidth;
+  node.width = Math.max(iconSize, defaultWidth ?? 0);
   const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
     parent,
     node,
-    getNodeClasses(node)
+    'icon-shape default'
   );
-
   const { cssStyles } = node;
+
   const topLabel = node.pos === 't';
-  const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0);
-  const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0);
-  const iconHeight = node.assetHeight ?? 0;
-  const iconWidth = node.assetWidth ?? 0;
 
-  const iconSize =
-    iconWidth || iconHeight
-      ? Math.max(iconHeight, iconWidth)
-      : Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48);
-
-  const radius =
-    iconSize / 2 + Math.max(labelHeight / 2, labelWidth / 4) + halfPadding * 2 + iconSize / 5;
+  const diameter = iconSize + halfPadding * 2;
+  const { themeVariables } = getConfig();
+  const { mainBkg } = themeVariables;
+  const { stylesMap } = compileStyles(node);
 
   // @ts-ignore - rough is not typed
   const rc = rough.svg(shapeSvg);
-  const options = userNodeOverrides(node, {});
+  const options = userNodeOverrides(node, { stroke: stylesMap.get('fill') || mainBkg });
 
   if (node.look !== 'handDrawn') {
     options.roughness = 0;
     options.fillStyle = 'solid';
   }
 
-  const roughNode = rc.circle(0, 0, radius * 2, options);
+  const iconNode = rc.circle(0, 0, diameter, options);
 
-  const iconShape = shapeSvg.insert(() => roughNode, ':first-child');
+  const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
 
   if (node.icon) {
     const iconElem = shapeSvg.append('g');
     iconElem.html(
       `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
     );
-    const iconWidth = iconElem.node().getBBox().width;
-    const iconHeight = iconElem.node().getBBox().height;
+    const iconBBox = iconElem.node().getBBox();
+    const iconWidth = iconBBox.width;
+    const iconHeight = iconBBox.height;
     iconElem.attr(
       'transform',
-      `translate(${-iconWidth / 2}, ${-iconHeight / 2 - labelHeight / 2 + (topLabel ? labelHeight : 0)})`
+      `translate(${-iconWidth / 2},${topLabel ? diameter / 2 - iconHeight - halfPadding + (translateHorizontal ? bbox.height / 2 : 0) : -diameter / 2 + halfPadding - (translateHorizontal ? bbox.height / 2 : 0)})`
     );
   }
 
+  label.attr(
+    'transform',
+    `translate(${-diameter / 2 + diameter / 2 - bbox.width / 2},${topLabel ? -diameter / 2 - 2.5 - (translateHorizontal ? bbox.height / 2 : bbox.height) : diameter / 2 + 5 - (translateHorizontal ? bbox.height / 2 : 0)})`
+  );
+
+  if (translateHorizontal) {
+    iconShape.attr('transform', `translate(${0},${topLabel ? bbox.height / 2 : -bbox.height / 2})`);
+  }
+
   if (cssStyles && node.look !== 'handDrawn') {
     iconShape.selectAll('path').attr('style', cssStyles);
   }
@@ -65,15 +75,11 @@ export const iconCircle = async (parent: SVG, node: Node) => {
     iconShape.selectAll('path').attr('style', nodeStyles);
   }
 
-  label.attr(
-    'transform',
-    `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);
+  updateNodeBounds(node, shapeSvg);
 
   node.intersect = function (point) {
     log.info('iconSquare intersect', node, point);
-    const pos = intersect.circle(node, radius, point);
+    const pos = intersect.rect(node, point);
     return pos;
   };