#5237 Alternating background

mermaid-js · May 10, 2024 · 7ecb772 · 7ecb772
1 parent f480fb7
commit 7ecb772
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
@@ -73,7 +73,7 @@
     </style>
   </head>
   <body>
-    <pre id="diagram" class="mermaid">
+    <pre id="diagram" class="mermaid2">
 stateDiagram
 NumLockOff --> NumLockOn : EvNumLockPressed
       </pre
@@ -113,6 +113,9 @@
         Chimp --> A:One
         Chimp --> B:Two
         Chimp --> C:Three
+        state InActive {
+          D
+        }
       }
     }
   </pre

diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -178,6 +178,13 @@ const roundedWithTitle = (parent, node) => {
   // add the rect
   let rect;
   if (node.useRough) {
+    const isAlt = node.classes.indexOf('statediagram-cluster-alt') >= 0;
+    console.log(
+      'DAGA node in roundedWithTitle',
+      node.classes,
+      node.classes.indexOf('statediagram-cluster-alt'),
+      isAlt
+    );
     const rc = rough.svg(shapeSvg);
     const roughOuterNode =
       node.rx || node.ry
@@ -187,7 +194,10 @@ const roundedWithTitle = (parent, node) => {
         : rc.rectangle(x, y, width, height);
 
     rect = shapeSvg.insert(() => roughOuterNode);
-    const roughInnerNode = rc.rectangle(x, innerY, width, innerHeight);
+    const roughInnerNode = rc.rectangle(x, innerY, width, innerHeight, {
+      fill: isAlt ? 'lightgrey' : 'white',
+      fillStyle: isAlt ? 'hachure' : 'solid',
+    });
 
     rect = shapeSvg.insert(() => roughOuterNode);
     innerRect = shapeSvg.insert(() => roughInnerNode);
@@ -248,11 +258,8 @@ const divider = (parent, node) => {
   if (node.useRough) {
     const rc = rough.svg(shapeSvg);
     const roughNode = rc.rectangle(x, y, width, height, {
-      fill: 'grey',
+      fill: 'lightgrey',
       roughness: 0.5,
-      // bowing: 6,
-      // stroke: 'green',
-      // strokeWidth: 3,
       strokeLineDash: [5],
     });