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

fix: padding issues in bang, rounded rect, sqaure shapes

Browse Source 
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
This commit is contained in:
darshanr0107
2025-08-19 18:56:00 +05:30
parent e42fdf1c54
commit 1e8a9f76a9
6 changed files with 43 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/mermaid/src/diagrams/mindmap/mindmapRenderer.ts
View File

@@ -85,6 +85,11 @@ export const draw: DrawDefinition = async (text, id, _version, diagObj) => {
node.radius = 15;
node.taper = 15;
node.stroke = 'none';
node.from = 'mindmap';
} else if (node.shape === 'rect') {
node.height = 46;
node.width = 92;
node.from = 'mindmap';
}
});

41
packages/mermaid/src/rendering-util/rendering-elements/shapes/bang.ts
View File

@@ -17,33 +17,36 @@ export async function bang<T extends SVGGraphicsElement>(parent: D3Selection<T>,
getNodeClasses(node)
);
const w = bbox.width + 8 * halfPadding;
const h = bbox.height + 2 * halfPadding;
const w = bbox.width + 10 * halfPadding;
const h = bbox.height + 8 * halfPadding;
const r = 0.15 * w;
const { cssStyles } = node;
// Label centered around (0,0)
const minWidth = bbox.width + 20;
const minHeight = bbox.height + 20;
const effectiveWidth = Math.max(w, minWidth);
const effectiveHeight = Math.max(h, minHeight);
label.attr('transform', `translate(${-bbox.width / 2}, ${-bbox.height / 2})`);
let bangElem;
const path = `M0 0
a${r},${r} 1 0,0 ${w * 0.25},${-1 * h * 0.1}
a${r},${r} 1 0,0 ${w * 0.25},${0}
a${r},${r} 1 0,0 ${w * 0.25},${0}
a${r},${r} 1 0,0 ${w * 0.25},${h * 0.1}
a${r},${r} 1 0,0 ${effectiveWidth * 0.25},${-1 * effectiveHeight * 0.1}
a${r},${r} 1 0,0 ${effectiveWidth * 0.25},${0}
a${r},${r} 1 0,0 ${effectiveWidth * 0.25},${0}
a${r},${r} 1 0,0 ${effectiveWidth * 0.25},${effectiveHeight * 0.1}
a${r},${r} 1 0,0 ${w * 0.15},${h * 0.33}
a${r * 0.8},${r * 0.8} 1 0,0 0,${h * 0.34}
a${r},${r} 1 0,0 ${-1 * w * 0.15},${h * 0.33}
a${r},${r} 1 0,0 ${effectiveWidth * 0.15},${effectiveHeight * 0.33}
a${r * 0.8},${r * 0.8} 1 0,0 0,${effectiveHeight * 0.34}
a${r},${r} 1 0,0 ${-1 * effectiveWidth * 0.15},${effectiveHeight * 0.33}
a${r},${r} 1 0,0 ${-1 * w * 0.25},${h * 0.15}
a${r},${r} 1 0,0 ${-1 * w * 0.25},0
a${r},${r} 1 0,0 ${-1 * w * 0.25},0
a${r},${r} 1 0,0 ${-1 * w * 0.25},${-1 * h * 0.15}
a${r},${r} 1 0,0 ${-1 * effectiveWidth * 0.25},${effectiveHeight * 0.15}
a${r},${r} 1 0,0 ${-1 * effectiveWidth * 0.25},0
a${r},${r} 1 0,0 ${-1 * effectiveWidth * 0.25},0
a${r},${r} 1 0,0 ${-1 * effectiveWidth * 0.25},${-1 * effectiveHeight * 0.15}
a${r},${r} 1 0,0 ${-1 * w * 0.1},${-1 * h * 0.33}
a${r * 0.8},${r * 0.8} 1 0,0 0,${-1 * h * 0.34}
a${r},${r} 1 0,0 ${w * 0.1},${-1 * h * 0.33}
a${r},${r} 1 0,0 ${-1 * effectiveWidth * 0.1},${-1 * effectiveHeight * 0.33}
a${r * 0.8},${r * 0.8} 1 0,0 0,${-1 * effectiveHeight * 0.34}
a${r},${r} 1 0,0 ${effectiveWidth * 0.1},${-1 * effectiveHeight * 0.33}
H0 V0 Z`;
if (node.look === 'handDrawn') {
@@ -62,7 +65,7 @@ export async function bang<T extends SVGGraphicsElement>(parent: D3Selection<T>,
}
// Translate the path (center the shape)
bangElem.attr('transform', `translate(${-w / 2}, ${-h / 2})`);
bangElem.attr('transform', `translate(${-effectiveWidth / 2}, ${-effectiveHeight / 2})`);
updateNodeBounds(node, bangElem);
node.calcIntersect = function (bounds: Bounds, point: Point) {

5
packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
View File

@@ -19,7 +19,10 @@ export async function drawRect<T extends SVGGraphicsElement>(
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width + options.labelPaddingX * 2, node?.width || 0);
const totalHeight = Math.max(bbox.height + options.labelPaddingY * 2, node?.height || 0);
const totalHeight = Math.max(
bbox.height + (node.from === 'mindmap' ? options.labelPaddingY : options.labelPaddingY * 2),
node?.height || 0
);
const x = -totalWidth / 2;
const y = -totalHeight / 2;

11
packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
View File

@@ -95,8 +95,15 @@ export async function roundedRect<T extends SVGGraphicsElement>(
const labelPaddingX = node?.padding ?? 0;
const labelPaddingY = node?.padding ?? 0;
const w = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2;
const h = (node?.height ? node?.height : bbox.height) + labelPaddingY * 2;
let w;
let h;
if (node.from === 'mindmap') {
w = bbox.width + labelPaddingX * 2;
h = bbox.height + labelPaddingY;
} else {
w = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2;
h = (node?.height ? node?.height : bbox.height) + labelPaddingY * 2;
}
const radius = node.radius || 5;
const taper = node.taper || 5; // Taper width for the rounded corners
const { cssStyles } = node;

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts
View File

@@ -7,7 +7,7 @@ export async function squareRect<T extends SVGGraphicsElement>(parent: D3Selecti
rx: 0,
ry: 0,
classes: '',
labelPaddingX: (node?.padding || 0) * 2,
labelPaddingX: node.from === 'mindmap' ? (node?.padding || 0) * 1 : (node?.padding || 0) * 2,
labelPaddingY: (node?.padding || 0) * 1,
} as RectOptions;
return drawRect(parent, node, options);

2
packages/mermaid/src/rendering-util/types.ts
View File

@@ -95,6 +95,7 @@ export interface ClusterNode extends BaseNode {
radius?: number;
taper?: number;
stroke?: string;
from?: 'mindmap' | 'flowchart' | 'state' | 'class' | 'sequence' | 'er'; // Indicates the diagram type this node is from
}
export interface NonClusterNode extends BaseNode {
shape?: ShapeID;
@@ -110,6 +111,7 @@ export interface NonClusterNode extends BaseNode {
radius?: number;
taper?: number;
stroke?: string;
from?: 'mindmap' | 'flowchart' | 'state' | 'class' | 'sequence' | 'er'; // Indicates the diagram type this node is from
}
// Common properties for any node in the system