diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handdrawnStyles.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handdrawnStyles.ts index 3b4e1bce6..3db0ad5ed 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handdrawnStyles.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handdrawnStyles.ts @@ -1,4 +1,5 @@ import { getConfig } from '$root/diagram-api/diagramAPI.js'; +import type { Node } from '$root/rendering-util/types.d.ts'; // Striped fill like start or fork nodes in state diagrams export const solidStateFill = (color: string) => { @@ -12,3 +13,12 @@ export const solidStateFill = (color: string) => { seed: handdrawnSeed, }; }; + +// Striped fill like start or fork nodes in state diagrams +// TODO remove any +export const userNodeOverrides = (node: Node, options: any) => { + const result = Object.assign({}, options); + result.fill = node.backgroundColor || options.fill; + result.stroke = node.borderColor || options.stroke; + return result; +}; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts index cea0c990c..c151a2177 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts @@ -4,6 +4,7 @@ import intersect from '../intersect/index.js'; import type { Node } from '$root/rendering-util/types.d.ts'; import { createRoundedRectPathD } from './roundedRectPath.js'; import { getConfig } from '$root/diagram-api/diagramAPI.js'; +import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js'; import rough from 'roughjs'; /** @@ -77,13 +78,13 @@ export const rect = async (parent: SVGAElement, node: Node) => { const { rx, ry, style, useRough } = node; if (useRough) { const rc = rough.svg(shapeSvg); - const options = { + const options = userNodeOverrides(node, { roughness: 0.7, fill: mainBkg, fillStyle: 'solid', // solid fill' stroke: nodeBorder, seed: handdrawnSeed, - }; + }); const roughNode = rx || ry ? rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, rx || 0), options)