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

updated hexagon shape

Browse Source
This commit is contained in:
omkarht
2025-07-14 16:51:34 +05:30
parent f9da4433ff
commit a2dbc8e4b3
1 changed files with 38 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
View File

@@ -1,9 +1,8 @@
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import type { Node } from '../../types.js'; import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js';
import type { D3Selection } from '../../../types.js'; import type { D3Selection } from '../../../types.js';
export const createHexagonPathD = ( export const createHexagonPathD = (
@@ -29,42 +28,47 @@ export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const f = 4; const h = bbox.height + (node.padding ?? 0);
const h = bbox.height + node.padding; const w = bbox.width + (node.padding ?? 0) * 2.5;
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: D3Selection<SVGGElement> | Awaited<ReturnType<typeof insertPolygonShape>>;
const { cssStyles } = node; const { cssStyles } = node;
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
if (node.look === 'handDrawn') { if (node.look !== 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason options.roughness = 0;
const rc = rough.svg(shapeSvg); options.fillStyle = 'solid';
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) { const halfWidth = w / 2;
polygon.attr('style', nodeStyles); const halfHeight = h / 2;
const fixedLength = halfHeight / 2;
const deducedWidth = halfWidth - fixedLength;
const points = [
{ x: -deducedWidth, y: -halfHeight },
{ x: 0, y: -halfHeight },
{ x: deducedWidth, y: -halfHeight },
{ x: halfWidth, y: 0 },
{ x: deducedWidth, y: halfHeight },
{ x: 0, y: halfHeight },
{ x: -deducedWidth, y: halfHeight },
{ x: -halfWidth, y: 0 },
];
const pathData = createPathFromPoints(points);
const shapeNode = rc.path(pathData, options);
const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
polygon.attr('class', 'basic label-container');
if (cssStyles && node.look !== 'handDrawn') {
polygon.selectChildren('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
polygon.selectChildren('path').attr('style', nodeStyles);
} }
node.width = w; node.width = w;