From 616dcd52bf6208cf65c2356a6665026215d41952 Mon Sep 17 00:00:00 2001
From: Erfan Nourbakhsh <erfan@princeton.edu>
Date: Wed, 13 Nov 2024 15:13:32 -0500
Subject: [PATCH] Fix fill style detection to ensure cypress ci tests pass;
 limit regex search for transition stops to necessary cases

---
 .../flowchart/flowRenderer-v3-unified.ts      | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
index a0d8ece54c..b8e7a67707 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowRenderer-v3-unified.ts
@@ -93,7 +93,7 @@ export const draw = async function (text: string, id: string, _version: string,
         log.debug(`Working on node ${vertex.id}->${vertex.domId}`);
 
         // Combine style arrays, defaulting to empty arrays if missing
-        // Note that `cssCompiledStyles` (from `classDef`) apply first, with `cssStyles` (from `style`)
+        // Note that `cssCompiledStyles` (from `classDef`) applies first, with `cssStyles` (from `style`)
         // rendered on top, allowing layered effects like multiple semi-transparent backgrounds
         const styles = [...(vertex.cssCompiledStyles || []), ...(vertex.cssStyles || [])];
 
@@ -111,18 +111,7 @@ export const draw = async function (text: string, id: string, _version: string,
             []
         );
 
-        // Get the user-defined number of transition stops (first match) for non-linear interpolation
-        const regex = /num-transition-stops\s*:\s*(\d+)/;
-        const numTransitionStops = parseInt(
-          styles.find((s) => regex.exec(s))?.match(regex)?.[1] || '5',
-          10
-        );
-
-        if (allFillStyles) {
-          // Remove any existing or default fill (e.g. from the theme) that might unexpectedly
-          // bleed through (semi-)transparent areas of the fills
-          shapeElement.style('fill', 'none');
-
+        if (allFillStyles.length != 0) {
           // Iterate over each fill style in the order it appears
           allFillStyles.forEach((style, index) => {
             // Clone the shape element to apply each fill as an overlay
@@ -134,6 +123,13 @@ export const draw = async function (text: string, id: string, _version: string,
               const gradientId = `gradient-${vertex.id}-${index}`;
               log.debug(`Found gradient style ${index + 1} for node ${vertex.id}: "${style}"`);
 
+              // Get the user-defined number of transition stops (first match) for non-linear interpolation
+              const transitionRegex = /num-transition-stops\s*:\s*(\d+)/;
+              const numTransitionStops = parseInt(
+                styles.find((s) => transitionRegex.exec(s))?.match(transitionRegex)?.[1] || '5',
+                10
+              );
+
               // Create the linear gradient for each occurrence
               createLinearGradient(
                 svg,
@@ -144,6 +140,10 @@ export const draw = async function (text: string, id: string, _version: string,
                 numTransitionStops
               );
 
+              // Remove any existing or default fill (e.g. from the theme) that might unexpectedly
+              // bleed through (semi-)transparent areas of the gradient
+              shapeElement.style('fill', 'none');
+
               // Apply the gradient fill to the cloned shape
               shapeClone.style('fill', `url(#${gradientId})`);
               log.debug(