diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js index a06c9e2c3..bc1949f62 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js @@ -37,6 +37,7 @@ import { waveRectangle } from './shapes/waveRectangle.js'; import { titledCylinder } from './shapes/tiltedCylinder.js'; import { trapezoidalPentagon } from './shapes/trapezoidalPentagon.js'; import { flippedTriangle } from './shapes/flippedTriangle.js'; +import { hourglass } from './shapes/hourglass.js'; const shapes = { state, @@ -77,6 +78,7 @@ const shapes = { titledCylinder, trapezoidalPentagon, flippedTriangle, + hourglass, }; const nodeElems = new Map(); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts new file mode 100644 index 000000000..1397a89b4 --- /dev/null +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts @@ -0,0 +1,64 @@ +import { log } from '$root/logger.js'; +import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } 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'; + +export const hourglass = async (parent: SVGAElement, node: Node) => { + const { labelStyles, nodeStyles } = styles2String(node); + node.label = ''; + node.labelStyle = labelStyles; + const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node)); + + const w = 100; + const h = 100; + + const { cssStyles } = node; + + // @ts-ignore - rough is not typed + const rc = rough.svg(shapeSvg); + const options = userNodeOverrides(node, {}); + + if (node.look !== 'handdrawn') { + options.roughness = 0; + options.fillStyle = 'solid'; + } + + const points = [ + { x: 0, y: 0 }, + { x: w, y: 0 }, + { x: 0, y: h }, + { x: w, y: h }, + ]; + + 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) { + polygon.attr('style', cssStyles); + } + + if (nodeStyles) { + polygon.attr('style', nodeStyles); + } + + polygon.attr('transform', `translate(${-w / 2}, ${-h / 2})`); + + updateNodeBounds(node, polygon); + + // label.attr('transform', `translate(${-bbox.width / 2}, ${(h/2)})`); // To transform text below hourglass shape + + node.intersect = function (point) { + log.info('Pill intersect', node, { points }); + const pos = intersect.polygon(node, points, point); + return pos; + }; + + return shapeSvg; +};