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

fixed multi rect

Browse Source
This commit is contained in:
saurabhg772244
2024-08-13 23:39:27 +05:30
parent 394c6aea74
commit 5550753193
1 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts
View File

@@ -13,32 +13,37 @@ export const multiRect = async (parent: SVGAElement, node: Node) => {
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const w = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0); const w = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0);
const h = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0); const h = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0);
const rectOffset = 5;
const x = -w / 2; const x = -w / 2;
const y = -h / 2; const y = -h / 2;
const rectOffset = 5;
const { cssStyles } = node; const { cssStyles } = node;
// @ts-ignore - rough is not typed // @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {}); const options = userNodeOverrides(node, {});
const secondRectPoints = [ const outerPathPoints = [
{ x, y },
{ x: x + w, y },
{ x: x + w, y: y + h },
{ x, y: y + h },
];
const thirdRectPoints = [
{ x: x + rectOffset, y: y - rectOffset },
{ x: x + w + rectOffset, y: y - rectOffset },
{ x: x + w + rectOffset, y: y + h - rectOffset },
{ x: x + rectOffset, y: y + h - rectOffset },
];
const rectPoints = [
{ x: x - rectOffset, y: y + rectOffset }, { x: x - rectOffset, y: y + rectOffset },
{ x: x + w - rectOffset, y: y + rectOffset },
{ x: x + w - rectOffset, y: y + h + rectOffset },
{ x: x - rectOffset, y: y + h + rectOffset }, { x: x - rectOffset, y: y + h + rectOffset },
{ x: x + w - rectOffset, y: y + h + rectOffset },
{ x: x + w - rectOffset, y: y + h },
{ x: x + w, y: y + h },
{ x: x + w, y: y + h - rectOffset },
{ x: x + w + rectOffset, y: y + h - rectOffset },
{ x: x + w + rectOffset, y: y - rectOffset },
{ x: x + rectOffset, y: y - rectOffset },
{ x: x + rectOffset, y: y },
{ x, y },
{ x, y: y + rectOffset },
];
const innerPathPoints = [
{ x, y: y + rectOffset },
{ x: x + w - rectOffset, y: y + rectOffset },
{ x: x + w - rectOffset, y: y + h },
{ x: x + w, y: y + h },
{ x: x + w, y },
{ x, y },
]; ];
if (node.look !== 'handdrawn') { if (node.look !== 'handdrawn') {
@@ -46,19 +51,14 @@ export const multiRect = async (parent: SVGAElement, node: Node) => {
options.fillStyle = 'solid'; options.fillStyle = 'solid';
} }
const rectPath = createPathFromPoints(rectPoints); const outerPath = createPathFromPoints(outerPathPoints);
const rectNode = rc.path(rectPath, options); const outerNode = rc.path(outerPath, options);
const innerPath = createPathFromPoints(innerPathPoints);
const secondRectPath = createPathFromPoints(secondRectPoints); const innerNode = rc.path(innerPath, options);
const secondRectNode = rc.path(secondRectPath, options);
const thirdRectPath = createPathFromPoints(thirdRectPoints);
const thirdRectNode = rc.path(thirdRectPath, options);
const taggedRect = shapeSvg.insert('g', ':first-child'); const taggedRect = shapeSvg.insert('g', ':first-child');
taggedRect.insert(() => thirdRectNode, ':first-child'); taggedRect.insert(() => innerNode, ':first-child');
taggedRect.insert(() => secondRectNode); taggedRect.insert(() => outerNode, ':first-child');
taggedRect.insert(() => rectNode);
taggedRect.attr('class', 'basic label-container'); taggedRect.attr('class', 'basic label-container');
@@ -78,7 +78,7 @@ export const multiRect = async (parent: SVGAElement, node: Node) => {
updateNodeBounds(node, taggedRect); updateNodeBounds(node, taggedRect);
node.intersect = function (point) { node.intersect = function (point) {
const pos = intersect.rect(node, point); const pos = intersect.polygon(node, outerPathPoints, point);
return pos; return pos;
}; };