From 575c39e8a50953700e451a24ac89ff0bae721ec8 Mon Sep 17 00:00:00 2001
From: omkarht <omkar@mermaidchart.com>
Date: Wed, 7 Aug 2024 15:50:25 +0530
Subject: [PATCH] feat: added new Divided Rectangle shape

---
 .../rendering-elements/nodes.js               |  2 +
 .../rendering-elements/shapes/dividedRect.ts  | 78 +++++++++++++++++++
 2 files changed, 80 insertions(+)
 create mode 100644 packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
index b6f0b0b7f..5f7e3964a 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -31,6 +31,7 @@ import { halfRoundedRectangle } from './shapes/halfRoundedRectangle.js';
 import { curvedTrapezoid } from './shapes/curvedTrapezoid.js';
 import { slopedRect } from './shapes/slopedRect.js';
 import { bowTieRect } from './shapes/bowTieRect.js';
+import { dividedRect } from './shapes/dividedRect.js';
 
 const shapes = {
   state,
@@ -65,6 +66,7 @@ const shapes = {
   curvedTrapezoid,
   slopedRect,
   bowTieRect,
+  dividedRect,
 };
 
 const nodeElems = new Map();
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts
new file mode 100644
index 000000000..ab87f9605
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/dividedRect.ts
@@ -0,0 +1,78 @@
+import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
+import intersect from '../intersect/index.js';
+import type { Node } from '$root/rendering-util/types.d.ts';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import rough from 'roughjs';
+
+export function createDividedRectPathD(
+  x: number,
+  y: number,
+  totalWidth: number,
+  totalHeight: number
+) {
+  const w = totalWidth;
+  const firstRectHeight = totalHeight * 0.3;
+  const secondRectHeight = totalHeight * 0.6 + firstRectHeight;
+
+  const rect1stPoints = [
+    { x: x, y },
+    { x: x + w, y },
+    { x: x + w, y: y + firstRectHeight },
+    { x: x, y: y + firstRectHeight },
+  ];
+
+  const rect2ndPoints = [
+    { x: x, y: y + firstRectHeight },
+    { x: x + w, y: y + firstRectHeight },
+    { x: x + w, y: y + firstRectHeight + secondRectHeight },
+    { x: x, y: y + firstRectHeight + secondRectHeight },
+  ];
+  const rect1stPath = createPathFromPoints(rect1stPoints);
+  const rect2ndPath = createPathFromPoints(rect2ndPoints);
+  const finalPath = `${rect1stPath} ${rect2ndPath}`;
+  return finalPath;
+}
+
+export const dividedRect = 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;
+
+  const { cssStyles } = node;
+
+  // @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 pathData = createDividedRectPathD(0, 0, w, h);
+  const shapeNode = rc.path(pathData, options);
+
+  const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
+  polygon.attr('class', 'basic label-container');
+
+  if (cssStyles) {
+    polygon.attr('style', cssStyles);
+  }
+  if (nodeStyles) {
+    polygon.attr('style', nodeStyles);
+  }
+
+  polygon.attr('transform', `translate(${-w / 2}, ${-h / 1.3})`);
+
+  updateNodeBounds(node, polygon);
+
+  node.intersect = function (point) {
+    const pos = intersect.polygon(node, point);
+    return pos;
+  };
+
+  return shapeSvg;
+};