diff --git a/cypress/platform/size-tester.html b/cypress/platform/size-tester.html
index 3c9a147c8..ab5b6c42b 100644
--- a/cypress/platform/size-tester.html
+++ b/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,
+ },
},
};
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
index 89f0e22a5..d540fb8c5 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
+++ b/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;
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js
index 977db517d..646d94093 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js
+++ b/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);
}