#5237 Style support in rects

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;
+};

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)