marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-12-05 12:04:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix sizing of fr-rect in fixed layout

Browse Source
This commit is contained in:
Alois Klink
2024-09-27 19:10:11 +09:00
parent 437f2c0be2
commit c72d774519
1 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
View File

@@ -32,21 +32,37 @@ export const createSubroutinePathD = (
].join(' '); ].join(' ');
}; };
// width of the frame on the left and right side of the shape
const FRAME_WIDTH = 8;
export const subroutine = async (parent: SVGAElement, node: Node) => { export const subroutine = async (parent: SVGAElement, node: Node) => {
const { themeVariables } = getConfig(); const { themeVariables } = getConfig();
const { useGradient } = themeVariables; const { useGradient } = themeVariables;
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const nodePadding = node?.padding || 8; const nodePadding = node?.padding || 8;
// const labelPaddingX = node.padding;
// const labelPaddingY = node.padding;
const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding; const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding;
const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding; const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding;
const w = bbox.width + labelPaddingX;
const h = bbox.height + labelPaddingY; // If incoming height & width are present, subtract the padding from them
const x = -bbox.width / 2 - labelPaddingX / 2; // as labelHelper does not take padding into account
const y = -bbox.height / 2 - labelPaddingY / 2; // 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) - labelPaddingX - 2 * FRAME_WIDTH, 50);
node.height = Math.max((node?.height ?? 0) - labelPaddingY, 50);
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width, node?.width || 0) + 2 * FRAME_WIDTH + labelPaddingX;
const totalHeight = Math.max(bbox.height, node?.height || 0) + labelPaddingY;
const w = totalWidth - 2 * FRAME_WIDTH;
const h = totalHeight;
const x = -totalWidth / 2;
const y = -totalHeight / 2;
const points = [ const points = [
{ x: 0, y: 0 }, { x: 0, y: 0 },
@@ -54,11 +70,11 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
{ x: w, y: -h }, { x: w, y: -h },
{ x: 0, y: -h }, { x: 0, y: -h },
{ x: 0, y: 0 }, { x: 0, y: 0 },
{ x: -8, y: 0 }, { x: -FRAME_WIDTH, y: 0 },
{ x: w + 8, y: 0 }, { x: w + FRAME_WIDTH, y: 0 },
{ x: w + 8, y: -h }, { x: w + FRAME_WIDTH, y: -h },
{ x: -8, y: -h }, { x: -FRAME_WIDTH, y: -h },
{ x: -8, y: 0 }, { x: -FRAME_WIDTH, y: 0 },
]; ];
if (node.look === 'handDrawn' || (node.look === 'neo' && !useGradient)) { if (node.look === 'handDrawn' || (node.look === 'neo' && !useGradient)) {
@@ -71,7 +87,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
options.fillStyle = 'solid'; options.fillStyle = 'solid';
} }
const roughNode = rc.rectangle(x - 8, y, w + 16, h, options); const roughNode = rc.rectangle(x - FRAME_WIDTH, y, w + 2 * FRAME_WIDTH, h, options);
const l1 = rc.line(x, y, x, y + h, options); const l1 = rc.line(x, y, x, y + h, options);
const l2 = rc.line(x + w, y, x + w, y + h, options); const l2 = rc.line(x + w, y, x + w, y + h, options);