Basic fix for handdrawn subgraph styling

mermaid-js · Aug 23, 2024 · 09afb07 · 09afb07
1 parent 99ee235
commit 09afb07
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git 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
@@ -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