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

Added multi rect

Browse Source
This commit is contained in:
saurabhg772244
2024-08-12 19:23:16 +05:30
parent e1c8eb8a72
commit a0893b8e6c
3 changed files with 101 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
cypress/platform/saurabh.html
View File

@@ -63,16 +63,18 @@
<body> <body>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
flowchart flowchart
A@{ shape: taggedRect, label: "title wit \n test \n free \n adsdbab \n duawgdu \n awdb \n wdgawud \n and with verry long single line textdauwdbuawydvuawvdyawvdhavdyawv" }@ A
B B@{ shape: multiRect, label: "title aduwab whgdawhbd wajhdbawj" }@
C F@{ shape: multiRect, label: "title " }@
D G@{ shape: multiRect, label: "title \n duawd \n duawd \n duawd \n duawd" }@
E C
A --> B D
A --> C E
D --> A C -->B
E --> A B --> D
B --> E
F --> A
A --> F
</pre </pre
> >

2
packages/mermaid/src/rendering-util/rendering-elements/nodes.js
View File

@@ -39,6 +39,7 @@ import { trapezoidalPentagon } from './shapes/trapezoidalPentagon.js';
import { flippedTriangle } from './shapes/flippedTriangle.js'; import { flippedTriangle } from './shapes/flippedTriangle.js';
import { hourglass } from './shapes/hourglass.js'; import { hourglass } from './shapes/hourglass.js';
import { taggedRect } from './shapes/taggedRect.js'; import { taggedRect } from './shapes/taggedRect.js';
import { multiRect } from './shapes/multiRect.js';
const shapes = { const shapes = {
state, state,
@@ -81,6 +82,7 @@ const shapes = {
flippedTriangle, flippedTriangle,
hourglass, hourglass,
taggedRect, taggedRect,
multiRect,
}; };
const nodeElems = new Map(); const nodeElems = new Map();

87
packages/mermaid/src/rendering-util/rendering-elements/shapes/multiRect.ts Normal file
View File

@@ -0,0 +1,87 @@
import { labelHelper, getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js';
import type { Node } from '$root/rendering-util/types.d.ts';
import {
styles2String,
userNodeOverrides,
} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
import rough from 'roughjs';
import intersect from '../intersect/index.js';
export const multiRect = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const h = bbox.height + node.padding;
const w = bbox.width + node.padding;
const x = -w / 2;
const y = -h / 2;
const rectOffset = 5;
const { cssStyles } = node;
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
const rectPoints = [
{ x, y },
{ x: x + w, y },
{ x: x + w, y: y + h },
{ x, y: y + h },
];
const secondRectPoints = [
{ 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 thirdRectPoints = [
{ x: x + 2 * rectOffset, y: y - 2 * rectOffset },
{ x: x + w + 2 * rectOffset, y: y - 2 * rectOffset },
{ x: x + w + 2 * rectOffset, y: y + h - 2 * rectOffset },
{ x: x + 2 * rectOffset, y: y + h - 2 * rectOffset },
];
if (node.look !== 'handdrawn') {
options.roughness = 0;
options.fillStyle = 'solid';
}
const rectPath = createPathFromPoints(rectPoints);
const rectNode = rc.path(rectPath, options);
const secondRectPath = createPathFromPoints(secondRectPoints);
const secondRectNode = rc.path(secondRectPath, options);
const thirdRectPath = createPathFromPoints(thirdRectPoints);
const thirdRectNode = rc.path(thirdRectPath, options);
const taggedRect = shapeSvg.insert('g', ':first-child');
taggedRect.insert(() => thirdRectNode, ':first-child');
taggedRect.insert(() => secondRectNode);
taggedRect.insert(() => rectNode);
taggedRect.attr('class', 'basic label-container');
if (cssStyles) {
taggedRect.attr('style', cssStyles);
}
if (nodeStyles) {
taggedRect.attr('style', nodeStyles);
}
taggedRect.attr('transform', `translate(-${rectOffset},${rectOffset})`);
label.attr(
'transform',
`translate(${-(bbox.width / 2) - rectOffset}, ${h / 2 - bbox.height - rectOffset})`
);
updateNodeBounds(node, taggedRect);
node.intersect = function (point) {
const pos = intersect.rect(node, point);
return pos;
};
return shapeSvg;
};