diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js index 218551aac..80a082930 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js @@ -42,6 +42,7 @@ import { taggedRect } from './shapes/taggedRect.js'; import { multiRect } from './shapes/multiRect.js'; import { linedCylinder } from './shapes/linedCylinder.js'; import { waveEdgedRectangle } from './shapes/waveEdgedRectangle.js'; +import { lightningBolt } from './shapes/lightningBolt.js'; const shapes = { state, @@ -87,6 +88,7 @@ const shapes = { multiRect, linedCylinder, waveEdgedRectangle, + lightningBolt, }; const nodeElems = new Map(); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts new file mode 100644 index 000000000..d69967b82 --- /dev/null +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts @@ -0,0 +1,67 @@ +import { log } from '$root/logger.js'; +import { labelHelper, getNodeClasses, updateNodeBounds } from './util.js'; +import type { Node } from '$root/rendering-util/types.d.ts'; +import { + styles2String, + userNodeOverrides, +} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +import rough from 'roughjs'; +import intersect from '../intersect/index.js'; +import { createPathFromPoints } from './util.js'; + +export const lightningBolt = async (parent: SVGAElement, node: Node) => { + const { labelStyles, nodeStyles } = styles2String(node); + node.label = ''; + node.labelStyle = labelStyles; + const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node)); + const { cssStyles } = node; + const height = 80; + const width = 80; + const gap = 16; + + const points = [ + { x: width, y: 0 }, + { x: 0, y: height + gap / 2 }, + { x: width - 2 * gap, y: height + gap / 2 }, + { x: 0, y: 2 * height }, + { x: width, y: height - gap / 2 }, + { x: 2 * gap, y: height - gap / 2 }, + ]; + + // @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 linePath = createPathFromPoints(points); + const lineNode = rc.path(linePath, options); + + const lightningBolt = shapeSvg.insert('g', ':first-child'); + lightningBolt.insert(() => lineNode, ':first-child'); + + lightningBolt.attr('class', 'basic label-container'); + + if (cssStyles) { + lightningBolt.attr('style', cssStyles); + } + + if (nodeStyles) { + lightningBolt.attr('style', nodeStyles); + } + lightningBolt.attr('transform', `translate(-${width / 2},${-height})`); + + updateNodeBounds(node, lightningBolt); + + node.intersect = function (point) { + log.info('lightningBolt intersect', node, point); + const pos = intersect.polygon(node, points, point); + + return pos; + }; + + return shapeSvg; +};