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

fix: added triangle placeholder

Browse Source
This commit is contained in:
Ashish Jain
2024-07-26 11:14:54 +02:00
parent f176b71c7c
commit 809fc1ce30
3 changed files with 89 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
cypress/platform/knsv2.html
View File

@@ -49,16 +49,10 @@
<body> <body>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
flowchart flowchart
A --> D@{ shape: roundedRect
}@ node_3@{ shape: triangle }@
A --> D@{ shape: roundedRect, icon: car }@
D@{ shape: roundedRect }@ --> B
A@{
shape: hexagon,
icon: car
}@ --> B
</pre> </pre>
<pre id="diagram4" class="mermaid2"> <pre id="diagram4" class="mermaid2">
flowchart flowchart

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

@@ -26,6 +26,7 @@ import { lean_left } from './shapes/leanLeft.js';
import { trapezoid } from './shapes/trapezoid.js'; import { trapezoid } from './shapes/trapezoid.js';
import { inv_trapezoid } from './shapes/invertedTrapezoid.js'; import { inv_trapezoid } from './shapes/invertedTrapezoid.js';
import { labelRect } from './shapes/labelRect.js'; import { labelRect } from './shapes/labelRect.js';
import { triangle } from './shapes/triangle.js';
const shapes = { const shapes = {
state, state,
@@ -55,6 +56,7 @@ const shapes = {
card, card,
shadedProcess, shadedProcess,
anchor, anchor,
triangle,
}; };
const nodeElems = new Map(); const nodeElems = new Map();

83
packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts Normal file
View File

@@ -0,0 +1,83 @@
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';
import { insertPolygonShape } from './insertPolygonShape.js';
export const createHexagonPathD = (
x: number,
y: number,
width: number,
height: number,
m: number
): string => {
return [
`M${x + m},${y}`,
`L${x + width - m},${y}`,
`L${x + width},${y - height / 2}`,
`L${x + width - m},${y - height}`,
`L${x + m},${y - height}`,
`L${x},${y - height / 2}`,
'Z',
].join(' ');
};
export const triangle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const f = 4;
const h = bbox.height + node.padding;
const m = h / f;
const w = bbox.width + 2 * m + node.padding;
const points = [
{ x: m, y: 0 },
{ x: w - m, y: 0 },
{ x: w, y: -h / 2 },
{ x: w - m, y: -h },
{ x: m, y: -h },
{ x: 0, y: -h / 2 },
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
const { cssStyles } = node;
if (node.look === 'handdrawn') {
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
const pathData = createHexagonPathD(0, 0, w, h, m);
const roughNode = rc.path(pathData, options);
polygon = shapeSvg
.insert(() => roughNode, ':first-child')
.attr('transform', `translate(${-w / 2}, ${h / 2})`);
if (cssStyles) {
polygon.attr('style', cssStyles);
}
} else {
polygon = insertPolygonShape(shapeSvg, w, h, points);
}
if (nodeStyles) {
polygon.attr('style', nodeStyles);
}
node.width = w;
node.height = h;
updateNodeBounds(node, polygon);
node.intersect = function (point) {
return intersect.polygon(node, points, point);
};
return shapeSvg;
};