diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts index 3b3784c84..48b4716d1 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts @@ -50,7 +50,7 @@ export const createInnerCylinderPathD = ( return [`M${x - width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 ${width},0`].join(' '); }; -const MIN_HEIGHT = 50; +const MIN_HEIGHT = 25; const MIN_WIDTH = 25; export const cylinder = async (parent: SVGAElement, node: Node) => { const { themeVariables } = getConfig(); @@ -70,7 +70,7 @@ export const cylinder = async (parent: SVGAElement, node: Node) => { // based on this width, height is calculated const ry = node.width / 2 / (2.5 + node.width / 50); - node.height = (node.height ?? 0) - labelPaddingX - ry * 3; + node.height = (node.height ?? 0) - labelPaddingX - (ry + ry * 0.05) * 3; if (node.height < MIN_HEIGHT) { node.height = MIN_HEIGHT; } diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts index 5afed59b9..21a5cfe52 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/linedCylinder.ts @@ -54,17 +54,36 @@ export const createInnerCylinderPathD = ( ): string => { return [`M${x - width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 ${width},0`].join(' '); }; + +const MIN_HEIGHT = 25; +const MIN_WIDTH = 25; + export const linedCylinder = async (parent: SVGAElement, node: Node) => { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; - const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const nodePadding = node.padding ?? 0; const labelPaddingX = node.look === 'neo' ? nodePadding * 2 : nodePadding; const labelPaddingY = node.look === 'neo' ? nodePadding * 1 : nodePadding; - const w = Math.max(bbox.width + labelPaddingX, node?.width ?? 0); + + if (node.width || node.height) { + node.width = (node.width ?? 0) - labelPaddingX; + if (node.width < MIN_WIDTH) { + node.width = MIN_WIDTH; + } + + // based on this width, height is calculated + const ry = node.width / 2 / (2.5 + node.width / 50); + node.height = (node.height ?? 0) - labelPaddingY - (ry + ry * 0.05) * 3; + if (node.height < MIN_HEIGHT) { + node.height = MIN_HEIGHT; + } + } + const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); + + const w = Math.max(bbox.width, node?.width ?? 0) + labelPaddingX; const rx = w / 2; const ry = rx / (2.5 + w / 50); - const h = Math.max(bbox.height + ry + labelPaddingY, node?.height ?? 0); + const h = Math.max(bbox.height, node?.height ?? 0) + ry + labelPaddingY; const outerOffset = h * 0.1; // 10% of height let cylinder: d3.Selection;