#5237 Rough rendering of notes

cypress/platform/knsv2.html

@@ -109,34 +109,27 @@ stateDiagram-v2
       </pre
     >
     <pre id="diagram" class="mermaid">
-      %%{init: {"handdrawn": "true"} }%%
+   stateDiagram-v2
-stateDiagram-v2
+     TN1: The state with a note
-    state ProActive {
+        note right of TN1
-      state Active {
+            Important information! You can write
-        Chimp --> A:One
+            notes.
-        Chimp --> B:Two
+        end note
-        Chimp --> C:Three
+        TN1 --> TN2
-        state InActive {
+        note left of TN2 : This is the note to the left.
-          D
-        }
-      }
-    }
   </pre
     >
     <pre id="diagram" class="mermaid">
       %%{init: {"handdrawn": false} }%%
-stateDiagram-v2
+   stateDiagram-v2
-    state ProActive {
+     TN3: The state with a note
-      state Active {
+        note right of TN3
-        Chimp --> A:One
+            Important information! You can write
-        Chimp --> B:Two
+            notes.
-        Chimp --> C:Three
+        end note
-        state InActive {
+        TN3 --> TN4
-          D
+        note left of TN4 : This is the note to the left.
-        }
+          </pre
-      }
-    }
-  </pre
     >
     <pre id="diagram" class="mermaid2">
 block-beta

packages/mermaid/src/rendering-util/rendering-elements/clusters.js

@@ -102,6 +102,21 @@ const rect = (parent, node) => {
  * @returns {any} ShapeSvg
  */
 const noteGroup = (parent, node) => {
+  const { themeVariables } = getConfig();
+  const {
+    textColor,
+    clusterTextColor,
+    altBackground,
+    compositeBackground,
+    compositeTitleBackground,
+    compositeBorder,
+    noteBorderColor,
+    noteBkgColor,
+    nodeBorder,
+    mainBkg,
+    stateBorder,
+  } = themeVariables;
+
   // Add outer g element
   const shapeSvg = parent.insert('g').attr('class', 'note-cluster').attr('id', node.id);
 
@@ -134,8 +149,6 @@ const noteGroup = (parent, node) => {
 const roundedWithTitle = (parent, node) => {
   const siteConfig = getConfig();
 
-  console.log('DAGO node in roundedWithTitle', siteConfig.themeVariables);
-
   const { themeVariables } = siteConfig;
   const { altBackground, compositeBackground, compositeTitleBackground, nodeBorder } =
     themeVariables;

packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts

@@ -1,10 +1,15 @@
 import { log } from '$root/logger.js';
 import { 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';
 
 export const note = async (parent: SVGAElement, node: Node) => {
-    const useHtmlLabels = node.useHtmlLabels ;
+  const { themeVariables } = getConfig();
+  const { noteBorderColor, noteBkgColor } = themeVariables;
+
+  const useHtmlLabels = node.useHtmlLabels;
   if (!useHtmlLabels) {
     node.centerLabel = true;
   }
@@ -16,16 +21,35 @@ export const note = async (parent: SVGAElement, node: Node) => {
   );
 
   log.info('Classes = ', node.classes);
-  // add the rect
+  const { style, useRough } = node;
-  const rect = shapeSvg.insert('rect', ':first-child');
+  let rect;
+  const totalWidth = bbox.width + node.padding;
+  const totalHeight = bbox.height + node.padding;
+  const x = -bbox.width / 2 - halfPadding;
+  const y = -bbox.height / 2 - halfPadding;
 
-  rect
+  if (useRough) {
-    .attr('rx', node.rx)
+    // add the rect
-    .attr('ry', node.ry)
+    const rc = rough.svg(shapeSvg);
-    .attr('x', -bbox.width / 2 - halfPadding)
+    const roughNode = rc.rectangle(x, y, totalWidth, totalHeight, {
-    .attr('y', -bbox.height / 2 - halfPadding)
+      roughness: 0.7,
-    .attr('width', bbox.width + node.padding)
+      fill: noteBkgColor,
-    .attr('height', bbox.height + node.padding);
+      fillStyle: 'solid', // solid fill'
+      stroke: noteBorderColor,
+    });
+
+    rect = shapeSvg.insert(() => roughNode, ':first-child');
+    rect.attr('class', 'basic label-container').attr('style', style);
+  } 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);
+  }
 
   updateNodeBounds(node, rect);