From 23329f1ee975a40f68c79becf06f83ad7e95c1d7 Mon Sep 17 00:00:00 2001
From: omkarht <omkar@mermaidchart.com>
Date: Mon, 26 Aug 2024 17:39:16 +0530
Subject: [PATCH] Updated Note Shape

---
 .../rendering-elements/shapes/note.ts         | 64 +++++++++----------
 1 file changed, 29 insertions(+), 35 deletions(-)

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
index 77fabf271..57bb79d7d 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
@@ -1,52 +1,46 @@
 import { log } from '$root/logger.js';
-import { labelHelper, updateNodeBounds } from './util.js';
+import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import rough from 'roughjs';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 
 export const note = async (parent: SVGAElement, node: Node) => {
-  const { themeVariables, handDrawnSeed } = getConfig();
-  const { noteBorderColor, noteBkgColor } = themeVariables;
-
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
+  const totalWidth = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0);
+  const totalHeight = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0);
+  const x = -totalWidth / 2;
+  const y = -totalHeight / 2;
+  const { cssStyles } = node;
   const useHtmlLabels = node.useHtmlLabels;
   if (!useHtmlLabels) {
     node.centerLabel = true;
   }
-  const { shapeSvg, bbox } = await labelHelper(parent, node, 'node ' + node.cssClasses);
 
   log.info('Classes = ', node.cssClasses);
-  const { cssStyles } = node;
-  let rect;
-  const totalWidth = bbox.width + node.padding;
-  const totalHeight = bbox.height + node.padding;
-  const x = -totalWidth / 2;
-  const y = -totalHeight / 2;
+  // add the rect
+  // @ts-ignore TODO: Fix rough typings
+  const rc = rough.svg(shapeSvg);
+  const options = userNodeOverrides(node, {});
 
-  if (node.look === 'handDrawn') {
-    // add the rect
-    // @ts-ignore TODO: Fix rough typings
-    const rc = rough.svg(shapeSvg);
-    const roughNode = rc.rectangle(x, y, totalWidth, totalHeight, {
-      roughness: 0.7,
-      fill: noteBkgColor,
-      fillWeight: 3,
-      seed: handDrawnSeed,
-      // fillStyle: 'solid', // solid fill'
-      stroke: noteBorderColor,
-    });
+  if (node.look !== 'handDrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
+  }
 
-    rect = shapeSvg.insert(() => roughNode, ':first-child');
-    rect.attr('class', 'basic label-container').attr('style', cssStyles);
-  } else {
-    rect = shapeSvg.insert('rect', ':first-child');
-    rect
-      .attr('rx', node.rx)
-      .attr('ry', node.ry)
-      .attr('x', x)
-      .attr('y', y)
-      .attr('width', totalWidth)
-      .attr('height', totalHeight);
+  const noteShapeNode = rc.rectangle(x, y, totalWidth, totalHeight, options);
+
+  const rect = shapeSvg.insert(() => noteShapeNode, ':first-child');
+  rect.attr('class', 'basic label-container');
+
+  if (cssStyles && node.look !== 'handDrawn') {
+    rect.selectAll('path').attr('style', cssStyles);
+  }
+
+  if (nodeStyles && node.look !== 'handDrawn') {
+    rect.selectAll('path').attr('style', nodeStyles);
   }
 
   updateNodeBounds(node, rect);