diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts index 52a4397a2..fe243d3e4 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts @@ -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 type { Node } from '../../types.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js'; import rough from 'roughjs'; -import { insertPolygonShape } from './insertPolygonShape.js'; import type { D3Selection } from '../../../types.js'; export const createHexagonPathD = ( @@ -29,42 +28,47 @@ export async function hexagon(parent: D3Selection< 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: D3Selection | Awaited>; + const h = bbox.height + (node.padding ?? 0); + const w = bbox.width + (node.padding ?? 0) * 2.5; 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') { - // @ts-expect-error -- Passing a D3.Selection seems to work for some reason - 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 (node.look !== 'handDrawn') { + options.roughness = 0; + options.fillStyle = 'solid'; } - if (nodeStyles) { - polygon.attr('style', nodeStyles); + const halfWidth = w / 2; + 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;