GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

feat: added new Bowtie Rectangle shape

Browse Source
This commit is contained in:
omkarht 2024-08-02 17:15:43 +05:30
parent cfb5b88ee6
commit 933f3f391c
2 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,6 +30,7 @@ import { triangle } from './shapes/triangle.js';
import { halfRoundedRectangle } from './shapes/halfRoundedRectangle.js';
import { curvedTrapezoid } from './shapes/curvedTrapezoid.js';
import { slopedRect } from './shapes/slopedRect.js';
import { bowTieRect } from './shapes/bowTieRect.js';
const shapes = {
state,
@ -63,6 +64,7 @@ const shapes = {
halfRoundedRectangle,
curvedTrapezoid,
slopedRect,
bowTieRect,
};
const nodeElems = new Map();

55
packages/mermaid/src/rendering-util/rendering-elements/shapes/bowTieRect.ts Normal file
View File

@ -0,0 +1,55 @@
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts';
import {
styles2String,
userNodeOverrides,
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
import rough from 'roughjs';
function createBowTieRectPathD(x: number, y: number, totalWidth: number, totalHeight: number) {
return `M ${x},${y + totalHeight} A ${totalHeight} ${totalHeight} 0 0 1 ${x} ${y} H${x + totalWidth} A ${totalHeight} ${totalHeight} 0 0 0 ${x + totalWidth} ${y + totalHeight}Z`;
}
export const bowTieRect = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const w = bbox.width + node.padding + 20;
const h = bbox.height + node.padding;
let shape: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
const { cssStyles } = node;
if (node.look === 'handdrawn') {
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const pathData = createBowTieRectPathD(0, 0, w, h);
const shapeNode = rc.path(pathData, userNodeOverrides(node, {}));
shape = shapeSvg.insert(() => shapeNode, ':first-child');
shape.attr('class', 'basic label-container');
if (cssStyles) {
shape.attr('style', cssStyles);
}
} else {
const pathData = createBowTieRectPathD(0, 0, w, h);
shape = shapeSvg
.insert('path', ':first-child')
.attr('d', pathData)
.attr('class', 'basic label-container')
.attr('style', cssStyles)
.attr('style', nodeStyles);
}
shape.attr('transform', `translate(${-w / 2}, ${-h / 2})`);
updateNodeBounds(node, shape);
node.intersect = function (point) {
const pos = intersect.rect(node, point);
return pos;
};
return shapeSvg;
};