suport dynamic resizing of rect shape

cypress/platform/size-tester.html

@@ -48,15 +48,15 @@
       };
       mermaid.initialize({
         startOnLoad: false,
-        // look: 'handdrawn',
+        //look: 'handdrawn',
         layout: 'fixed',
         theme: 'neo-dark',
-        // layout: 'elk',
+        //layout: 'elk',
         fontFamily: 'Kalam',
         logLevel: 1,
       });
 
-      let shape = 'pill';
+      let shape = 'rect';
 
       let code = `
       flowchart TB
@@ -65,7 +65,9 @@
           n81@{ shape: '${shape}'}
           n82@{ shape: '${shape}'}
           n83@{ label: "A single line of text", shape: '${shape}'}
-            `;
+          n80["APA ksldj hfaskljdh aklsjdhf klasjdhf klasjhf klsajdh klasjdhf klasjdhf klasjdh klasjhf klasjdh klajsdhfklasjdhf kljadh fklasjdhf klajsdhf lkasdhf klajsdhf klasjdhfklasjdh klasjhf klasdfh klasdfh aklsjfh akjshkasldfh klasdfh klasjh fklsjhf klasdhf kljasdhf klasdhf klj"]
+           n84@{ shape: '${shape}'}
+          `;
 
       let positions = {
         edges: {},
@@ -76,6 +78,12 @@
             width: 300,
             height: 200,
           },
+          n80: {
+            x: -400,
+            y: 10,
+            width: 100,
+            height: 50,
+          },
           n82: {
             x: 400,
             y: 10,
@@ -86,6 +94,12 @@
             x: 800,
             y: 10,
           },
+          n84: {
+            x: 1200,
+            y: 10,
+            width: 300,
+            height: 200,
+          },
         },
       };
 

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

@@ -8,20 +8,28 @@ import rough from 'roughjs';
 export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  // console.log('IPI labelStyles:', labelStyles);
-  node.width = (node?.width ?? 0) - options.labelPaddingX * 2;
-  node.height = (node?.height ?? 0) - options.labelPaddingY * 2;
-  if (node.width < 100) {
-    node.width = 100;
+  // If incoming height & width are present, subtract the padding from them
+  // as labelHelper does not take padding into account
+  // also check if the width or height is less than minimum default values (50),
+  // if so set it to min value
+  if (node.width || node.height) {
+    node.width = (node?.width ?? 0) - options.labelPaddingX * 2;
+    if (node.width < 50) {
+      node.width = 50;
+    }
+
+    node.height = (node?.height ?? 0) - options.labelPaddingY * 2;
+    if (node.height < 50) {
+      node.height = 50;
+    }
   }
+
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+
   const totalWidth = Math.max(bbox.width, node?.width || 0) + options.labelPaddingX * 2;
   const totalHeight = Math.max(bbox.height, node?.height || 0) + options.labelPaddingY * 2;
   const x = -totalWidth / 2;
   const y = -totalHeight / 2;
-
-  // log.info('IPI node = ', node);
-
   let rect;
   let { rx, ry } = node;
   const { cssStyles } = node;

packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js

@@ -91,6 +91,9 @@ export const labelHelper = async (parent, node, _classes) => {
 
     bbox = div.getBoundingClientRect();
     dv.attr('width', bbox.width);
+    if (node.height && node.height < bbox.height) {
+      bbox.height = node.height;
+    }
     dv.attr('height', bbox.height);
   }