From f813870e7d1a8de8b3b39c7cf4fd08825d70bd81 Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Fri, 16 Aug 2024 19:26:35 +0530
Subject: [PATCH] Updated flippedTriangle

---
 .../shapes/flippedTriangle.ts                 | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts
index cac7fca4f..e40842097 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts
@@ -14,12 +14,14 @@ export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise<
   node.labelStyle = labelStyles;
   const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
 
-  const w = bbox.width + node.padding + 20;
-  const h = (Math.sqrt(3) / 2) * w + (node.padding ?? 0);
+  const w = bbox.width + (node.padding ?? 0);
+  const h = w + bbox.height;
+
+  const tw = w + bbox.height;
   const points = [
     { x: 0, y: -h },
-    { x: w, y: -h },
-    { x: w / 2, y: 0 },
+    { x: tw, y: -h },
+    { x: tw / 2, y: 0 },
   ];
 
   const { cssStyles } = node;
@@ -34,22 +36,22 @@ export const flippedTriangle = async (parent: SVGAElement, node: Node): Promise<
   const pathData = createPathFromPoints(points);
   const roughNode = rc.path(pathData, options);
 
-  const polygon = shapeSvg
+  const flippedTriangle = shapeSvg
     .insert(() => roughNode, ':first-child')
-    .attr('transform', `translate(${-w / 2}, ${h / 2})`);
+    .attr('transform', `translate(${-h / 2}, ${h / 2})`);
 
-  if (cssStyles) {
-    polygon.attr('style', cssStyles);
+  if (cssStyles && node.look !== 'handDrawn') {
+    flippedTriangle.selectChildren('path').attr('style', cssStyles);
   }
 
-  if (nodeStyles) {
-    polygon.attr('style', nodeStyles);
+  if (nodeStyles && node.look !== 'handDrawn') {
+    flippedTriangle.selectChildren('path').attr('style', nodeStyles);
   }
 
   node.width = w;
   node.height = h;
 
-  updateNodeBounds(node, polygon);
+  updateNodeBounds(node, flippedTriangle);
 
   label.attr('transform', `translate(${-bbox.width / 2}, ${-h / 2})`);