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

#5237 Adding support for rounded rect

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-04-26 07:24:57 +02:00
parent e6e463092c
commit a2702e4058
1 changed files with 64 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts
View File

@@ -55,6 +55,61 @@ function applyNodePropertyBorders(
rect.attr('stroke-dasharray', strokeDashArray.join(' '));
}
function createRoundedRectPathD(
x: number,
y: number,
totalWidth: number,
totalHeight: number,
radius: number
) {
return [
'M',
x + radius,
y, // Move to the first point
'H',
x + totalWidth - radius, // Draw horizontal line to the beginning of the right corner
'A',
radius,
radius,
0,
0,
1,
x + totalWidth,
y + radius, // Draw arc to the right top corner
'V',
y + totalHeight - radius, // Draw vertical line down to the beginning of the right bottom corner
'A',
radius,
radius,
0,
0,
1,
x + totalWidth - radius,
y + totalHeight, // Draw arc to the right bottom corner
'H',
x + radius, // Draw horizontal line to the beginning of the left bottom corner
'A',
radius,
radius,
0,
0,
1,
x,
y + totalHeight - radius, // Draw arc to the left bottom corner
'V',
y + radius, // Draw vertical line up to the beginning of the left top corner
'A',
radius,
radius,
0,
0,
1,
x + radius,
y, // Draw arc to the left top corner
'Z', // Close the path
].join(' ');
}
function roundedRect(ctx, x, y, width, height, radius) {
ctx.beginPath();
ctx.moveTo(x + radius, y);
@@ -87,11 +142,16 @@ export const rect = async (parent: SVGAElement, node: Node) => {
let rect;
if (useRough) {
const rc = rough.svg(shapeSvg);
// add the rect
const rnode = rc.rectangle(x, y, totalWidth, totalHeight);
let roughNode;
if (node.rx || node.ry) {
// add the rect
roughNode = rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, 6));
} else {
roughNode = rc.rectangle(x, y, totalWidth, totalHeight, { radius: 60 });
}
const svgNode = shapeSvg.node();
svgNode.insertBefore(rnode, svgNode.firstChild);
rect = select(rnode);
svgNode.insertBefore(roughNode, svgNode.firstChild);
rect = select(roughNode);
} else {
rect = shapeSvg.insert('rect', ':first-child');