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

fix: added triangle shape

Browse Source
This commit is contained in:
omkarht
2024-07-31 15:19:11 +05:30
parent 809fc1ce30
commit e51077c765
1 changed files with 25 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts
View File

@@ -1,3 +1,4 @@
import { log } from '$root/logger.js';
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts'; import type { Node } from '$root/rendering-util/types.d.ts';
@@ -6,65 +7,40 @@ import {
userNodeOverrides, userNodeOverrides,
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js'; } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
import { createPathFromPoints } from './util.js';
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> => { export const triangle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
const f = 4; const w = bbox.width + node.padding + 20;
const h = bbox.height + node.padding; const h = (Math.sqrt(3) / 2) * w + (node.padding ?? 0);
const m = h / f;
const w = bbox.width + 2 * m + node.padding;
const points = [ const points = [
{ x: m, y: 0 }, { x: 0, y: 0 },
{ x: w - m, y: 0 }, { x: w, y: 0 },
{ x: w, y: -h / 2 }, { x: w / 2, y: -h },
{ 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; const { cssStyles } = node;
if (node.look === 'handdrawn') {
// @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 pathData = createHexagonPathD(0, 0, w, h, m); if (node.look !== 'handdrawn') {
options.roughness = 0;
options.fillStyle = 'solid';
}
const pathData = createPathFromPoints(points);
const roughNode = rc.path(pathData, options); const roughNode = rc.path(pathData, options);
polygon = shapeSvg const polygon = shapeSvg
.insert(() => roughNode, ':first-child') .insert(() => roughNode, ':first-child')
.attr('transform', `translate(${-w / 2}, ${h / 2})`); .attr('transform', `translate(${-w / 2}, ${h / 2})`);
if (cssStyles) { if (cssStyles) {
polygon.attr('style', cssStyles); polygon.attr('style', cssStyles);
} }
} else {
polygon = insertPolygonShape(shapeSvg, w, h, points);
}
if (nodeStyles) { if (nodeStyles) {
polygon.attr('style', nodeStyles); polygon.attr('style', nodeStyles);
@@ -75,7 +51,10 @@ export const triangle = async (parent: SVGAElement, node: Node): Promise<SVGAEle
updateNodeBounds(node, polygon); updateNodeBounds(node, polygon);
label.attr('transform', `translate(${-bbox.width / 2}, ${h / 2 - bbox.height})`);
node.intersect = function (point) { node.intersect = function (point) {
log.info('Triangle intersect', node, points, point);
return intersect.polygon(node, points, point); return intersect.polygon(node, points, point);
}; };