From 09afb077f05f7b57a5639d8826e527d998a2bed5 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Fri, 23 Aug 2024 08:24:36 +0200
Subject: [PATCH] Basic fix for handdrawn subgraph styling

---
 .../rendering-elements/clusters.js               |  5 ++++-
 .../shapes/handDrawnShapeStyles.ts               | 16 +++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
index 9546dfad4..ba87f78f5 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -19,7 +19,7 @@ const rect = async (parent, node) => {
   const { themeVariables, handDrawnSeed } = siteConfig;
   const { clusterBkg, clusterBorder } = themeVariables;
 
-  const { labelStyles, nodeStyles } = styles2String(node);
+  const { labelStyles, nodeStyles, borderStyles, backgroundStyles } = styles2String(node);
 
   // Add outer g element
   const shapeSvg = parent
@@ -79,6 +79,9 @@ const rect = async (parent, node) => {
       log.debug('Rough node insert CXC', roughNode);
       return roughNode;
     }, ':first-child');
+    // Should we affect the options instead of doing this?
+    rect.select('path:nth-child(2)').attr('style', borderStyles.join(';'));
+    rect.select('path').attr('style', backgroundStyles.join(';').replace('fill', 'stroke'));
   } else {
     // add the rect
     rect = shapeSvg.insert('rect', ':first-child');
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts
index 11773f543..3840244e9 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts
@@ -37,6 +37,8 @@ export const styles2String = (node: Node) => {
   const { stylesArray } = compileStyles(node);
   const labelStyles: string[] = [];
   const nodeStyles: string[] = [];
+  const borderStyles: string[] = [];
+  const backgroundStyles: string[] = [];
 
   stylesArray.forEach((style) => {
     const key = style[0];
@@ -63,10 +65,22 @@ export const styles2String = (node: Node) => {
       labelStyles.push(style.join(':') + ' !important');
     } else {
       nodeStyles.push(style.join(':') + ' !important');
+      if (key === 'stroke' || key === 'stroke-width') {
+        borderStyles.push(style.join(':') + ' !important');
+      }
+      if (key === 'fill') {
+        backgroundStyles.push(style.join(':') + ' !important');
+      }
     }
   });
 
-  return { labelStyles: labelStyles.join(';'), nodeStyles: nodeStyles.join(';') };
+  return {
+    labelStyles: labelStyles.join(';'),
+    nodeStyles: nodeStyles.join(';'),
+    stylesArray,
+    borderStyles,
+    backgroundStyles,
+  };
 };
 
 // Striped fill like start or fork nodes in state diagrams