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

fix: fix sizing of lin-rect in fixed layout

Browse Source
This commit is contained in:
Alois Klink
2024-09-27 20:47:54 +09:00
parent a8db94fd1a
commit 1510939196
1 changed files with 26 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/mermaid/src/rendering-util/rendering-elements/shapes/shadedProcess.ts
View File

@@ -4,16 +4,33 @@ import type { Node } from '../../types.d.ts';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
/// Width of the frame on the left of the shape
const FRAME_WIDTH = 8;
export const shadedProcess = async (parent: SVGAElement, node: Node) => { export const shadedProcess = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0); const paddingX = node.look === 'neo' ? (node.padding ?? 0) * 2 : (node.padding ?? 0);
const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0); const paddingY = node.look === 'neo' ? (node.padding ?? 0) * 1 : (node.padding ?? 0);
const w = Math.max(bbox.width + paddingX * 2, node?.width ?? 0);
const h = Math.max(bbox.height + paddingY * 2, node?.height ?? 0); // If incoming height & width are present, subtract the padding from them
const x = -bbox.width / 2 - paddingX; // as labelHelper does not take padding into account
const y = -bbox.height / 2 - paddingY; // 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) - paddingX * 2 - FRAME_WIDTH, 50);
node.height = Math.max((node?.height ?? 0) - paddingY * 2, 50);
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width, node?.width ?? 0) + paddingX * 2 + FRAME_WIDTH;
const totalHeight = Math.max(bbox.height, node?.height ?? 0) + paddingY * 2;
const w = totalWidth - FRAME_WIDTH;
const h = totalHeight;
const x = -(totalWidth - FRAME_WIDTH) / 2;
const y = -totalHeight / 2;
const { cssStyles } = node; const { cssStyles } = node;
// @ts-ignore - rough is not typed // @ts-ignore - rough is not typed
@@ -27,10 +44,10 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
const points = [ const points = [
{ x, y }, { x, y },
{ x: x + w + 8, y }, { x: x + w, y },
{ x: x + w + 8, y: y + h }, { x: x + w, y: y + h },
{ x: x - 8, y: y + h }, { x: x - FRAME_WIDTH, y: y + h },
{ x: x - 8, y: y }, { x: x - FRAME_WIDTH, y: y },
{ x, y }, { x, y },
{ x, y: y + h }, { x, y: y + h },
]; ];
@@ -52,11 +69,6 @@ export const shadedProcess = async (parent: SVGAElement, node: Node) => {
rect.selectAll('path').attr('style', nodeStyles); rect.selectAll('path').attr('style', nodeStyles);
} }
label.attr(
'transform',
`translate(${-w / 2 + 4 + paddingX - (bbox.x - (bbox.left ?? 0))},${-h / 2 + paddingY - (bbox.y - (bbox.top ?? 0))})`
);
updateNodeBounds(node, rect); updateNodeBounds(node, rect);
node.intersect = function (point) { node.intersect = function (point) {