diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts index 80c17d30a..a68fd72a3 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts @@ -13,25 +13,40 @@ import { createPathFromPoints } from './util.js'; // return pointStrings.join(' '); // }; +/// Size of the notch on the top left corner +const NOTCH_SIZE = 12; + export async function card(parent: SVGAElement, node: Node): Promise { const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; + + // 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 = Math.max(node?.width ?? 0 - (node.padding ?? 0), 50); + node.height = Math.max(node?.height ?? 0 - (node.padding ?? 0), 50); + } + const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); - const h = bbox.height + node.padding; - const padding = 12; - const w = bbox.width + node.padding + padding; + const totalWidth = Math.max(bbox.width, node?.width || 0) + (node.padding ?? 0); + const totalHeight = Math.max(bbox.height, node?.height || 0) + (node.padding ?? 0); + + const h = totalHeight; + const w = totalWidth; const left = 0; const right = w; const top = -h; const bottom = 0; const points = [ - { x: left + padding, y: top }, + { x: left + NOTCH_SIZE, y: top }, { x: right, y: top }, { x: right, y: bottom }, { x: left, y: bottom }, - { x: left, y: top + padding }, - { x: left + padding, y: top }, + { x: left, y: top + NOTCH_SIZE }, + { x: left + NOTCH_SIZE, y: top }, ]; let polygon: d3.Selection;