#5237 Adding support for rounded rect

packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts

@@ -55,6 +55,61 @@ function applyNodePropertyBorders(
   rect.attr('stroke-dasharray', strokeDashArray.join(' '));
 }
 
+function createRoundedRectPathD(
+  x: number,
+  y: number,
+  totalWidth: number,
+  totalHeight: number,
+  radius: number
+) {
+  return [
+    'M',
+    x + radius,
+    y, // Move to the first point
+    'H',
+    x + totalWidth - radius, // Draw horizontal line to the beginning of the right corner
+    'A',
+    radius,
+    radius,
+    0,
+    0,
+    1,
+    x + totalWidth,
+    y + radius, // Draw arc to the right top corner
+    'V',
+    y + totalHeight - radius, // Draw vertical line down to the beginning of the right bottom corner
+    'A',
+    radius,
+    radius,
+    0,
+    0,
+    1,
+    x + totalWidth - radius,
+    y + totalHeight, // Draw arc to the right bottom corner
+    'H',
+    x + radius, // Draw horizontal line to the beginning of the left bottom corner
+    'A',
+    radius,
+    radius,
+    0,
+    0,
+    1,
+    x,
+    y + totalHeight - radius, // Draw arc to the left bottom corner
+    'V',
+    y + radius, // Draw vertical line up to the beginning of the left top corner
+    'A',
+    radius,
+    radius,
+    0,
+    0,
+    1,
+    x + radius,
+    y, // Draw arc to the left top corner
+    'Z', // Close the path
+  ].join(' ');
+}
+
 function roundedRect(ctx, x, y, width, height, radius) {
   ctx.beginPath();
   ctx.moveTo(x + radius, y);
@@ -87,11 +142,16 @@ export const rect = async (parent: SVGAElement, node: Node) => {
   let rect;
   if (useRough) {
     const rc = rough.svg(shapeSvg);
-    // add the rect
+    let roughNode;
-    const rnode = rc.rectangle(x, y, totalWidth, totalHeight);
+    if (node.rx || node.ry) {
+      // add the rect
+      roughNode = rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, 6));
+    } else {
+      roughNode = rc.rectangle(x, y, totalWidth, totalHeight, { radius: 60 });
+    }
     const svgNode = shapeSvg.node();
-    svgNode.insertBefore(rnode, svgNode.firstChild);
+    svgNode.insertBefore(roughNode, svgNode.firstChild);
-    rect = select(rnode);
+    rect = select(roughNode);
   } else {
     rect = shapeSvg.insert('rect', ':first-child');