From 3c119e4a52df072cba796d163d745a22a16a2e50 Mon Sep 17 00:00:00 2001
From: omkarht <omkar@mermaidchart.com>
Date: Tue, 13 Aug 2024 14:53:56 +0530
Subject: [PATCH] added new Wave Edged Rectangle shape

---
 .../rendering-elements/nodes.js               |  2 +
 .../shapes/linedCylinder.ts                   |  2 +-
 .../shapes/waveEdgedRectangle.ts              | 80 +++++++++++++++++++
 3 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
index 96f3d128f..a9c69d2cc 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -41,6 +41,7 @@ import { hourglass } from './shapes/hourglass.js';
 import { taggedRect } from './shapes/taggedRect.js';
 import { multiRect } from './shapes/multiRect.js';
 import { linedCylinder } from './shapes/linedCylinder.js';
+import { waveEdgedRectangle } from './shapes/waveEdgedRectangle.js';
 
 const shapes = {
   state,
@@ -85,6 +86,7 @@ const shapes = {
   taggedRect,
   multiRect,
   linedCylinder,
+  waveEdgedRectangle,
 };
 
 const nodeElems = new Map();
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts
index e25ad7904..d531c8744 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts
@@ -38,7 +38,7 @@ export const linedCylinder = async (parent: SVGAElement, node: Node) => {
   let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
   const { cssStyles } = node;
 
-  if (node.look === 'handdrawn') {
+  if (node.look === 'handDrawn') {
     // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts
new file mode 100644
index 000000000..c5296a4c9
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/waveEdgedRectangle.ts
@@ -0,0 +1,80 @@
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
+import intersect from '../intersect/index.js';
+import type { Node } from '$root/rendering-util/types.d.ts';
+import rough from 'roughjs';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
+
+export function createWaveEdgedRectanglePathD(width: number, height: number) {
+  // Calculate control points
+  const rightX = width;
+  const midX = width / 2;
+  const controlY1 = height * 0.8;
+  const controlY2 = height * 1.15;
+  const endY = height * 0.94;
+
+  // Construct the path
+  const path = `M0 0 
+                H${rightX} 
+                V${controlY1}
+                C${midX} ${controlY1}, ${midX} ${controlY2}, 0 ${endY}
+                Z`;
+
+  return path;
+}
+
+export const waveEdgedRectangle = async (parent: SVGAElement, node: Node) => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  const w = bbox.width + node.padding;
+  const h = bbox.height + node.padding + 20;
+
+  const { cssStyles } = node;
+
+  const rightX = w;
+  const midX = w / 2;
+  const controlY1 = h * 0.8;
+  const controlY2 = h * 1.15;
+  const endY = h * 0.94;
+
+  const points = [
+    { x: 0, y: 0 },
+    { x: rightX, y: 0 },
+    { x: rightX, y: controlY1 },
+    { x: midX, y: controlY1 },
+    { x: midX, y: controlY2 * 0.8 },
+    { x: 0, y: endY },
+  ];
+  const pathData = createWaveEdgedRectanglePathD(w, h);
+
+  // @ts-ignore - rough is not typed
+  const rc = rough.svg(shapeSvg);
+  const options = userNodeOverrides(node, {});
+
+  if (node.look !== 'handDrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
+  }
+  const shapeNode = rc.path(pathData, options);
+  const shape = shapeSvg.insert(() => shapeNode, ':first-child');
+  shape.attr('class', 'basic label-container');
+
+  if (cssStyles) {
+    shape.attr('style', cssStyles);
+  }
+
+  if (nodeStyles) {
+    shape.attr('style', nodeStyles);
+  }
+
+  shape.attr('transform', `translate(${-w / 2}, ${-h / 2})`);
+
+  updateNodeBounds(node, shape);
+
+  node.intersect = function (point) {
+    const pos = intersect.polygon(node, points, point);
+    return pos;
+  };
+
+  return shapeSvg;
+};