marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 23:09:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix sizing of notch-rect in fixed layout

Browse Source
This commit is contained in:
Alois Klink
2024-09-27 19:37:35 +09:00
parent c72d774519
commit a8db94fd1a
1 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/mermaid/src/rendering-util/rendering-elements/shapes/card.ts
View File

@@ -13,25 +13,40 @@ import { createPathFromPoints } from './util.js';
// return pointStrings.join(' '); // 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<SVGAElement> { export async function card(parent: SVGAElement, node: Node): Promise<SVGAElement> {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; 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 { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = bbox.height + node.padding; const totalWidth = Math.max(bbox.width, node?.width || 0) + (node.padding ?? 0);
const padding = 12; const totalHeight = Math.max(bbox.height, node?.height || 0) + (node.padding ?? 0);
const w = bbox.width + node.padding + padding;
const h = totalHeight;
const w = totalWidth;
const left = 0; const left = 0;
const right = w; const right = w;
const top = -h; const top = -h;
const bottom = 0; const bottom = 0;
const points = [ const points = [
{ x: left + padding, y: top }, { x: left + NOTCH_SIZE, y: top },
{ x: right, y: top }, { x: right, y: top },
{ x: right, y: bottom }, { x: right, y: bottom },
{ x: left, y: bottom }, { x: left, y: bottom },
{ x: left, y: top + padding }, { x: left, y: top + NOTCH_SIZE },
{ x: left + padding, y: top }, { x: left + NOTCH_SIZE, y: top },
]; ];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>; let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;