From 4c400966b4fd9c6546328372ba6f2a9a888a9a5a Mon Sep 17 00:00:00 2001
From: omkarht <omkar@mermaidchart.com>
Date: Sat, 21 Sep 2024 15:42:50 +0530
Subject: [PATCH 1/5] updated curved trapezoid shape

---
 .../shapes/curvedTrapezoid.ts                 | 77 +++++++------------
 .../rendering-elements/shapes/util.js         | 30 ++++++++
 2 files changed, 57 insertions(+), 50 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts
index e7ff90939..758e020b8 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/curvedTrapezoid.ts
@@ -1,38 +1,23 @@
-import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
+import {
+  labelHelper,
+  updateNodeBounds,
+  getNodeClasses,
+  createPathFromPoints,
+  generateCirclePoints,
+} from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '../../types.d.ts';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
-function createCurvedTrapezoidPathD(
-  x: number,
-  y: number,
-  totalWidth: number,
-  totalHeight: number,
-  radius: number
-) {
-  const w = totalWidth - radius;
-  const tw = totalHeight / 4;
-  const points = [
-    { x: x + w, y },
-    { x: x + tw, y },
-    { x: x, y: y + totalHeight / 2 },
-    { x: x + tw, y: y + totalHeight },
-    { x: x + w, y: y + totalHeight },
-  ];
-  const rectPath = createPathFromPoints(points);
-  const arcPath = `M ${w},0 A ${totalHeight / 2} ${totalHeight / 2} 0 0 1 ${w} ${totalHeight}`;
-  const finalPath = `${rectPath} ${arcPath}`.replace('Z', '');
-  return finalPath;
-}
-
 export const curvedTrapezoid = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-  const widthMultiplier = bbox.width < 15 ? 2 : 1.25;
-  const w = (bbox.width + node.padding) * widthMultiplier;
-  const h = bbox.height + node.padding;
+  const minWidth = 80,
+    minHeight = 20;
+  const w = Math.max(minWidth, (bbox.width + (node.padding ?? 0) * 2) * 1.25, node?.width ?? 0);
+  const h = Math.max(minHeight, bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0);
   const radius = h / 2;
 
   const { cssStyles } = node;
@@ -45,7 +30,21 @@ export const curvedTrapezoid = async (parent: SVGAElement, node: Node) => {
     options.fillStyle = 'solid';
   }
 
-  const pathData = createCurvedTrapezoidPathD(0, 0, w, h, radius);
+  const totalWidth = w,
+    totalHeight = h;
+  const rw = totalWidth - radius;
+  const tw = totalHeight / 4;
+
+  const points = [
+    { x: rw, y: 0 },
+    { x: tw, y: 0 },
+    { x: 0, y: totalHeight / 2 },
+    { x: tw, y: totalHeight },
+    { x: rw, y: totalHeight },
+    ...generateCirclePoints(-rw, -totalHeight / 2, radius, 50, 270, 90),
+  ];
+
+  const pathData = createPathFromPoints(points);
   const shapeNode = rc.path(pathData, options);
 
   const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
@@ -64,29 +63,7 @@ export const curvedTrapezoid = async (parent: SVGAElement, node: Node) => {
   updateNodeBounds(node, polygon);
 
   node.intersect = function (point) {
-    const pos = intersect.rect(node, point);
-    const rx = h / 2;
-    const ry = h / 2;
-    const y = pos.y - (node.y ?? 0);
-
-    if (
-      ry != 0 &&
-      (Math.abs(y) < (node.height ?? 0) / 2 ||
-        (Math.abs(y) == (node.height ?? 0) / 2 &&
-          Math.abs(pos.x - (node.x ?? 0)) > (node.width ?? 0) / 2 - rx))
-    ) {
-      let x = rx * rx * (1 - (y * y) / (ry * ry));
-      if (x != 0) {
-        x = Math.sqrt(x);
-      }
-      x = rx - x;
-      if (point.x - (node.x ?? 0) > 0) {
-        x = -x;
-      }
-
-      pos.x += x;
-    }
-
+    const pos = intersect.polygon(node, points, point);
     return pos;
   };
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js
index 1e68bb204..eda1aa9af 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js
@@ -163,3 +163,33 @@ export function generateFullSineWavePoints(x1, y1, x2, y2, amplitude, numCycles)
 
   return points;
 }
+
+export function generateCirclePoints(
+  centerX, // x-coordinate of center of circle
+  centerY, // x-coordinate of center of circle
+  radius, // radius of circle
+  numPoints, // total points required
+  startAngle, //  angle where arc will start
+  endAngle // angle where arc will end
+) {
+  const points = [];
+
+  // Convert angles to radians
+  const startAngleRad = (startAngle * Math.PI) / 180;
+  const endAngleRad = (endAngle * Math.PI) / 180;
+
+  // Calculate the angle range in radians
+  const angleRange = endAngleRad - startAngleRad;
+
+  // Calculate the angle step
+  const angleStep = angleRange / (numPoints - 1);
+
+  for (let i = 0; i < numPoints; i++) {
+    const angle = startAngleRad + i * angleStep;
+    const x = centerX + radius * Math.cos(angle);
+    const y = centerY + radius * Math.sin(angle);
+    points.push({ x: -x, y: -y });
+  }
+
+  return points;
+}

From d01e180caf790d6703d72236eedf1e7a68d46913 Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Sat, 21 Sep 2024 16:44:19 +0530
Subject: [PATCH 2/5] Updated shapes

---
 .../integration/rendering/newShapes.spec.ts   | 18 ++++++------
 cypress/platform/saurabh.html                 | 23 +++++++--------
 .../rendering-elements/shapes/dividedRect.ts  | 29 +++++++++----------
 .../shapes/linedWaveEdgedRect.ts              | 25 ++++++----------
 .../rendering-elements/shapes/windowPane.ts   | 25 ++++------------
 5 files changed, 48 insertions(+), 72 deletions(-)

diff --git a/cypress/integration/rendering/newShapes.spec.ts b/cypress/integration/rendering/newShapes.spec.ts
index 67d862ea4..823cc5a95 100644
--- a/cypress/integration/rendering/newShapes.spec.ts
+++ b/cypress/integration/rendering/newShapes.spec.ts
@@ -1,7 +1,7 @@
 import { imgSnapshotTest } from '../../helpers/util.ts';
 
-const looks = ['classic'] as const;
-const directions = ['TB'] as const;
+const looks = ['classic', 'handDrawn'] as const;
+const directions = ['TB', 'BT', 'LR', 'RL'] as const;
 const newShapesSet1 = [
   'triangle',
   'sloped-rectangle',
@@ -68,7 +68,7 @@ looks.forEach((look) => {
         it(`with label`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
         });
@@ -76,7 +76,7 @@ looks.forEach((look) => {
         it(`connect all shapes with each other`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index}${index}{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
+            flowchartCode += `  n${index}${index}@{ shape: ${newShape}, label: 'This is a label for ${newShape} shape' }\n`;
           });
           for (let i = 0; i < newShapesSet.length; i++) {
             for (let j = i + 1; j < newShapesSet.length; j++) {
@@ -89,7 +89,7 @@ looks.forEach((look) => {
         it(`with very long label`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is a very very very very very long long long label for ${newShape} shape' }\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
         });
@@ -97,7 +97,7 @@ looks.forEach((look) => {
         it(`with markdown htmlLabels:true`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
         });
@@ -105,7 +105,7 @@ looks.forEach((look) => {
         it(`with markdown htmlLabels:false`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'This is **bold** </br>and <strong>strong</strong> for ${newShape} shape' }\n`;
           });
           imgSnapshotTest(flowchartCode, {
             look,
@@ -117,7 +117,7 @@ looks.forEach((look) => {
         it(`with styles`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
             flowchartCode += `  style n${index}${index} fill:#f9f,stroke:#333,stroke-width:4px \n`;
           });
           imgSnapshotTest(flowchartCode, { look });
@@ -127,7 +127,7 @@ looks.forEach((look) => {
           let flowchartCode = `flowchart ${direction}\n`;
           flowchartCode += `  classDef customClazz fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape}, label: 'new ${newShape} shape' }\n`;
             flowchartCode += `  n${index}${index}:::customClazz\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html
index ecf3463c1..3c3bdff4e 100644
--- a/cypress/platform/saurabh.html
+++ b/cypress/platform/saurabh.html
@@ -63,16 +63,10 @@
   <body style="display: flex; gap: 2rem; flex-direction: row">
     <pre id="diagram4" class="mermaid">
       flowchart LR
-       B2@{ icon: "fa:address-book",  form: "square", pos: "b", h: 80 }
-
-
-       W --> B2 --> x1
-       X --> B2 --> x2
-       Y --> B2 --> x3
-       Z --> B2 --> x4 
-       B2 --<strong>sas</strong>--> C
-
-       A --> B2
+      n21@{ shape: subproc,label: "Untitled Node"}
+      n52@{ shape: internal-storage,label: "Untitled Node"}
+      n53@{ shape: div-rect,label: "Untitled Node"}
+      n54@{ shape: lin-doc,label: "Untitled Node"}
 
 
     </pre>
@@ -150,14 +144,17 @@
         // htmlLabels: false,
         flowchart: { titleTopMargin: 10, htmlLabels: true },
         // fontFamily: 'Caveat',
-        fontFamily: 'Kalam',
-        // fontFamily: 'courier',
+        // fontFamily: 'Kalam',
+        fontFamily: 'courier',
         sequence: {
           actorFontFamily: 'courier',
           noteFontFamily: 'courier',
           messageFontFamily: 'courier',
         },
-        fontSize: 12,
+        themeVariables: {
+          fontSize: 50,
+          fontFamily: 'courier',
+        },
         logLevel: 0,
         securityLevel: 'loose',
       });
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 a9f80d009..8083a6611 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts
@@ -1,4 +1,4 @@
-import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '../../types.d.ts';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
@@ -25,23 +25,22 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => {
     options.fillStyle = 'solid';
   }
 
-  const outerPathPoints = [
-    { x, y: y },
-    { x, y: -y },
+  const pts = [
+    { x, y: y + rectOffset },
+    { x: -x, y: y + rectOffset },
     { x: -x, y: -y },
-    { x: -x, y: y },
-  ];
-  const innerPathPoints = [
-    { x: x, y: y + rectOffset },
+    { x, y: -y },
+    { x, y },
+    { x: -x, y },
     { x: -x, y: y + rectOffset },
   ];
-  const outerPathData = createPathFromPoints(outerPathPoints);
-  const outerNode = rc.path(outerPathData, options);
-  const innerPathData = createPathFromPoints(innerPathPoints);
-  const innerNode = rc.path(innerPathData, options);
 
-  const polygon = shapeSvg.insert(() => outerNode, ':first-child');
-  polygon.insert(() => innerNode);
+  const poly = rc.polygon(
+    pts.map((p) => [p.x, p.y]),
+    options
+  );
+
+  const polygon = shapeSvg.insert(() => poly, ':first-child');
   polygon.attr('class', 'basic label-container');
 
   if (cssStyles && node.look !== 'handDrawn') {
@@ -60,7 +59,7 @@ export const dividedRectangle = async (parent: SVGAElement, node: Node) => {
   updateNodeBounds(node, polygon);
 
   node.intersect = function (point) {
-    const pos = intersect.polygon(node, outerPathPoints, point);
+    const pos = intersect.rect(node, point);
     return pos;
   };
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts
index d1f23c492..6e4d485d3 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedWaveEdgedRect.ts
@@ -3,7 +3,6 @@ import {
   updateNodeBounds,
   getNodeClasses,
   generateFullSineWavePoints,
-  createPathFromPoints,
 } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '../../types.d.ts';
@@ -30,6 +29,7 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
   }
 
   const points = [
+    { x: -w / 2 - (w / 2) * 0.1, y: -finalH / 2 },
     { x: -w / 2 - (w / 2) * 0.1, y: finalH / 2 },
     ...generateFullSineWavePoints(
       -w / 2 - (w / 2) * 0.1,
@@ -41,24 +41,17 @@ export const linedWaveEdgedRect = async (parent: SVGAElement, node: Node) => {
     ),
     { x: w / 2 + (w / 2) * 0.1, y: -finalH / 2 },
     { x: -w / 2 - (w / 2) * 0.1, y: -finalH / 2 },
+    { x: -w / 2, y: -finalH / 2 },
+    { x: -w / 2, y: (finalH / 2) * 1.1 },
+    { x: -w / 2, y: -finalH / 2 },
   ];
 
-  const x = -w / 2;
-  const y = -finalH / 2;
+  const poly = rc.polygon(
+    points.map((p) => [p.x, p.y]),
+    options
+  );
 
-  const innerPathPoints = [
-    { x: x, y: y },
-    { x: x, y: -y * 1.1 },
-  ];
-
-  const waveEdgeRectPath = createPathFromPoints(points);
-  const waveEdgeRectNode = rc.path(waveEdgeRectPath, options);
-
-  const innerSecondPath = createPathFromPoints(innerPathPoints);
-  const innerSecondNode = rc.path(innerSecondPath, options);
-
-  const waveEdgeRect = shapeSvg.insert(() => innerSecondNode, ':first-child');
-  waveEdgeRect.insert(() => waveEdgeRectNode, ':first-child');
+  const waveEdgeRect = shapeSvg.insert(() => poly, ':first-child');
 
   waveEdgeRect.attr('class', 'basic label-container');
 
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts
index fa21c3a93..59aa208ef 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/windowPane.ts
@@ -1,4 +1,4 @@
-import { labelHelper, getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js';
+import { labelHelper, getNodeClasses, updateNodeBounds } from './util.js';
 import type { Node } from '../../types.d.ts';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
@@ -26,31 +26,18 @@ export const windowPane = async (parent: SVGAElement, node: Node) => {
     { x: x + w, y: y - rectOffset },
   ];
 
-  const innerPathPoints = [
-    { x: x - rectOffset, y },
-    { x: x + w, y },
-  ];
-
-  const innerSecondPathPoints = [
-    { x, y: y - rectOffset },
-    { x, y: y + h },
-  ];
+  const path = `M${x - rectOffset},${y - rectOffset} L${x + w},${y - rectOffset} L${x + w},${y + h} L${x - rectOffset},${y + h} L${x - rectOffset},${y - rectOffset}
+                M${x - rectOffset},${y} L${x + w},${y}
+                M${x},${y - rectOffset} L${x},${y + h}`;
 
   if (node.look !== 'handDrawn') {
     options.roughness = 0;
     options.fillStyle = 'solid';
   }
 
-  const outerPath = createPathFromPoints(outerPathPoints);
-  const outerNode = rc.path(outerPath, options);
-  const innerPath = createPathFromPoints(innerPathPoints);
-  const innerNode = rc.path(innerPath, options);
-  const innerSecondPath = createPathFromPoints(innerSecondPathPoints);
-  const innerSecondNode = rc.path(innerSecondPath, options);
+  const no = rc.path(path, options);
 
-  const windowPane = shapeSvg.insert(() => innerNode, ':first-child');
-  windowPane.insert(() => innerSecondNode, ':first-child');
-  windowPane.insert(() => outerNode, ':first-child');
+  const windowPane = shapeSvg.insert(() => no, ':first-child');
   windowPane.attr('transform', `translate(${rectOffset / 2}, ${rectOffset / 2})`);
 
   windowPane.attr('class', 'basic label-container');

From f052a3f686c08f383ebf3f3b71d5157b9ffe868f Mon Sep 17 00:00:00 2001
From: omkarht <omkar@mermaidchart.com>
Date: Sat, 21 Sep 2024 17:49:36 +0530
Subject: [PATCH 3/5] updated halfRoundedRectangle shape

---
 .../shapes/halfRoundedRectangle.ts            | 67 +++++++------------
 1 file changed, 26 insertions(+), 41 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts
index ae544fa95..86b220e29 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/halfRoundedRectangle.ts
@@ -1,27 +1,25 @@
 import { log } from '../../../logger.js';
-import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import {
+  labelHelper,
+  updateNodeBounds,
+  getNodeClasses,
+  createPathFromPoints,
+  generateCirclePoints,
+} from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '../../types.d.ts';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
-function createHalfRoundedRectShapePathD(h: number, w: number, rx: number, ry: number) {
-  return ` M ${w} ${h}
-    L ${0} ${h}
-    L ${0} ${0}
-    L ${w} ${0}
-    A ${rx} ${ry} 0 0 1 ${w} ${h}Z`;
-}
-
 export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
-  const w = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0);
-  const h = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0);
+  const minWidth = 80,
+    minHeight = 50;
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  const w = Math.max(minWidth, bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0);
+  const h = Math.max(minHeight, bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0);
   const radius = h / 2;
-  const rx = radius;
-  const ry = radius;
   const { cssStyles } = node;
 
   // @ts-ignore - rough is not typed
@@ -33,7 +31,15 @@ export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
     options.fillStyle = 'solid';
   }
 
-  const pathData = createHalfRoundedRectShapePathD(h, w, rx, ry);
+  const points = [
+    { x: -w / 2, y: -h / 2 },
+    { x: w / 2 - radius, y: -h / 2 },
+    ...generateCirclePoints(-w / 2 + radius, 0, radius, 50, 90, 270),
+    { x: w / 2 - radius, y: h / 2 },
+    { x: -w / 2, y: h / 2 },
+  ];
+
+  const pathData = createPathFromPoints(points);
   const shapeNode = rc.path(pathData, options);
   const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
   polygon.attr('class', 'basic label-container');
@@ -46,38 +52,17 @@ export const halfRoundedRectangle = async (parent: SVGAElement, node: Node) => {
     polygon.selectChildren('path').attr('style', nodeStyles);
   }
 
-  polygon.attr('transform', `translate(${-w / 2 - h / 4}, ${-h / 2})`);
-  label.attr(
-    'transform',
-    `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})`
-  );
+  // label.attr(
+  //   'transform',
+  //   `translate(${-w / 2 + (node.padding ?? 0) - (bbox.x - (bbox.left ?? 0))}, ${-h / 2 + (node.padding ?? 0) - (bbox.y - (bbox.top ?? 0))})`
+  // );
 
   updateNodeBounds(node, polygon);
 
   node.intersect = function (point) {
     log.info('Pill intersect', node, { radius, point });
-    const pos = intersect.rect(node, point);
-    const y = pos.y - (node.y ?? 0);
-    if (
-      ry != 0 &&
-      pos.x > (node.x ?? 0) &&
-      (Math.abs(y) < (node.height ?? 0) / 2 ||
-        (Math.abs(y) == (node.height ?? 0) / 2 &&
-          Math.abs(pos.x - (node.x ?? 0)) > (node.width ?? 0) / 2 - rx))
-    ) {
-      let x = rx * rx * (1 - (y * y) / (ry * ry));
-      if (x != 0) {
-        x = Math.sqrt(x);
-      }
-      x = rx - x;
-      if (point.x - (node.x ?? 0) > 0) {
-        x = -x;
-      }
-
-      pos.x += x;
-    }
+    const pos = intersect.polygon(node, points, point);
     return pos;
   };
-
   return shapeSvg;
 };

From ed7d41a3cbb4173e12afb503532c0f287bcefb73 Mon Sep 17 00:00:00 2001
From: omkarht <omkar@mermaidchart.com>
Date: Sat, 21 Sep 2024 20:19:01 +0530
Subject: [PATCH 4/5] updated shapes

---
 .../rendering-util/rendering-elements/shapes/cylinder.ts    | 6 +++---
 .../rendering-elements/shapes/rectLeftInvArrow.ts           | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
index 41084595c..8562081ef 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
@@ -52,10 +52,10 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
-  const w = bbox.width + node.padding;
+  const w = Math.max(bbox.width + node.padding, node.width ?? 0);
   const rx = w / 2;
   const ry = rx / (2.5 + w / 50);
-  const h = bbox.height + ry + node.padding;
+  const h = Math.max(bbox.height + ry + node.padding, node.height ?? 0);
 
   let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
   const { cssStyles } = node;
@@ -91,7 +91,7 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
 
   label.attr(
     'transform',
-    `translate(${-bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${h / 2 - bbox.height - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-(bbox.width / 2) - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) + (node.padding ?? 0) / 1.5 - (bbox.y - (bbox.top ?? 0))})`
   );
 
   node.intersect = function (point) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
index 659191874..a6306822e 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
@@ -52,9 +52,10 @@ export const rect_left_inv_arrow = async (
   }
 
   polygon.attr('transform', `translate(${-notch / 2},0)`);
+
   label.attr(
     'transform',
-    `translate(${-w / 2 + -notch / 2 + (node.padding ?? 0) / 2 - (bbox.x - (bbox.left ?? 0))},${-h / 2 + (node.padding ?? 0) / 2 - (bbox.y - (bbox.top ?? 0))})`
+    `translate(${-notch / 2 - bbox.width / 2 - (bbox.x - (bbox.left ?? 0))}, ${-(bbox.height / 2) - (bbox.y - (bbox.top ?? 0))})`
   );
   updateNodeBounds(node, polygon);
 

From 1c105154a601afaa81d181af7c484e4bf1aa371f Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Mon, 23 Sep 2024 12:17:42 +0530
Subject: [PATCH 5/5] Updated icon shape positions

---
 cypress/platform/saurabh.html                      | 14 +++++++++-----
 .../rendering-elements/shapes/icon.ts              |  4 ++--
 .../rendering-elements/shapes/iconCircle.ts        |  4 ++--
 .../rendering-elements/shapes/iconRounded.ts       |  4 ++--
 .../rendering-elements/shapes/iconSquare.ts        |  4 ++--
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html
index 3c3bdff4e..89b314e68 100644
--- a/cypress/platform/saurabh.html
+++ b/cypress/platform/saurabh.html
@@ -63,10 +63,14 @@
   <body style="display: flex; gap: 2rem; flex-direction: row">
     <pre id="diagram4" class="mermaid">
       flowchart LR
-      n21@{ shape: subproc,label: "Untitled Node"}
-      n52@{ shape: internal-storage,label: "Untitled Node"}
-      n53@{ shape: div-rect,label: "Untitled Node"}
-      n54@{ shape: lin-doc,label: "Untitled Node"}
+      A@{ icon: "fa:window-minimize", form: circle }
+      E@{ icon: "fa:window-minimize", form: circle }
+      B@{ icon: "fa:bell", form: circle }
+      B2@{ icon: "fa:bell", form: circle }
+      C@{ icon: "fa:address-book",  form: square  }
+      D@{ icon: "fa:star-half",  form: square  }
+      A --> E
+      B --> B2
 
 
     </pre>
@@ -142,7 +146,7 @@
         // layout: 'elk',
         // layout: 'fixed',
         // htmlLabels: false,
-        flowchart: { titleTopMargin: 10, htmlLabels: true },
+        flowchart: { titleTopMargin: 10, padding: 0, htmlLabels: true },
         // fontFamily: 'Caveat',
         // fontFamily: 'Kalam',
         fontFamily: 'courier',
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
index d7ad58de9..a3e88d927 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
@@ -49,7 +49,7 @@ export const icon = async (
 
   const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, {
     ...options,
-    fill: 'none',
+    fill: 'transparent',
     stroke: 'none',
   });
 
@@ -68,7 +68,7 @@ export const icon = async (
     const iconY = iconBBox.y;
     iconElem.attr(
       'transform',
-      `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY : -outerHeight / 2 - iconY})`
+      `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY : outerHeight / 2 - iconHeight - iconY - bbox.height - labelPadding})`
     );
     iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
   }
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 3b624a97f..14dab00b7 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
@@ -57,7 +57,7 @@ export const iconCircle = async (
 
   const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, {
     ...options,
-    fill: 'none',
+    fill: 'transparent',
     stroke: 'none',
   });
 
@@ -65,7 +65,7 @@ export const iconCircle = async (
   const outerShape = shapeSvg.insert(() => outerNode);
   iconElem.attr(
     'transform',
-    `translate(${-iconWidth / 2 - iconX},${topLabel ? diameter / 2 - iconHeight - padding + bbox.height / 2 - iconY + labelPadding / 2 : -diameter / 2 + padding - bbox.height / 2 - labelPadding / 2 - iconY})`
+    `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY - padding : outerHeight / 2 - iconHeight - iconY - padding - bbox.height - labelPadding})`
   );
   iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
   label.attr(
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
index 0f5d6199d..a0e7e3911 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
@@ -54,7 +54,7 @@ export const iconRounded = async (
 
   const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, {
     ...options,
-    fill: 'none',
+    fill: 'transparent',
     stroke: 'none',
   });
 
@@ -73,7 +73,7 @@ export const iconRounded = async (
     const iconY = iconBBox.y;
     iconElem.attr(
       'transform',
-      `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - halfPadding - iconY : -outerHeight / 2 + halfPadding - iconY})`
+      `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY - halfPadding : outerHeight / 2 - iconHeight - iconY - halfPadding - bbox.height - labelPadding})`
     );
     iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
   }
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 cb465c031..53025581b 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -53,7 +53,7 @@ export const iconSquare = async (
 
   const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, {
     ...options,
-    fill: 'none',
+    fill: 'transparent',
     stroke: 'none',
   });
 
@@ -72,7 +72,7 @@ export const iconSquare = async (
     const iconY = iconBBox.y;
     iconElem.attr(
       'transform',
-      `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - halfPadding - iconY : -outerHeight / 2 + halfPadding - iconY})`
+      `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY - halfPadding : outerHeight / 2 - iconHeight - iconY - halfPadding - bbox.height - labelPadding})`
     );
     iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
   }