diff --git a/cypress/platform/size-tester.html b/cypress/platform/size-tester.html index c5801a21d..32204085c 100644 --- a/cypress/platform/size-tester.html +++ b/cypress/platform/size-tester.html @@ -56,7 +56,7 @@ logLevel: 1, }); - let shape = 'dbl-circ'; + let shape = 'circle'; let code = ` flowchart TB diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts index 015db1241..541f9e35c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts @@ -8,24 +8,25 @@ import rough from 'roughjs'; export const circle = async (parent: SVGAElement, node: Node): Promise => { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; - const padding = node.padding ?? 0; - + // 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) { + const padding = node.padding ?? 0; node.width = (node?.width ?? 0) - padding * 2; if (node.width < 50) { node.width = 50; } - node.height = (node?.height ?? 0) - padding * 2; + node.height = (node?.height ?? 0) - (node.padding ?? 0) * 2; if (node.height < 50) { node.height = 50; } } + const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); - const { shapeSvg, halfPadding } = await labelHelper(parent, node, getNodeClasses(node)); - const labelPadding = node.look === 'neo' ? halfPadding * 2 : halfPadding; - - const radius = (node.width ?? 0) / 2 + labelPadding; + const radius = Math.max(bbox.width / 2, (node?.width ?? 0) / 2) + (node.padding ?? 0); let circleElem; const { cssStyles } = node;