From 9510b2e138a72c11510bb4be930d932f28cd1a71 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knsv@sveido.com>
Date: Tue, 18 Jun 2024 16:00:57 +0200
Subject: [PATCH] MC-1730 Selector for gradients

---
 cypress/platform/neo-test.html                |  2 +-
 packages/mermaid/src/mermaidAPI.ts            |  4 ++--
 packages/mermaid/src/rendering-util/render.ts |  4 +++-
 packages/mermaid/src/styles.spec.ts           |  5 +++--
 packages/mermaid/src/styles.ts                | 11 ++++++-----
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/cypress/platform/neo-test.html b/cypress/platform/neo-test.html
index 1dbf8fbec..bb71e3542 100644
--- a/cypress/platform/neo-test.html
+++ b/cypress/platform/neo-test.html
@@ -1608,7 +1608,7 @@ direction LR
     mermaid.initialize({
       handdrawn: false,
       mergeEdges: true,
-      layout: 'dagre',
+      layout: 'elk',
       flowchart: { titleTopMargin: 10 },
       // fontFamily: 'Caveat',
       fontFamily: 'Kalam',
diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts
index 45d284b8a..af12b9392 100644
--- a/packages/mermaid/src/mermaidAPI.ts
+++ b/packages/mermaid/src/mermaidAPI.ts
@@ -197,7 +197,7 @@ export const createUserStyles = (
   svgId: string
 ): string => {
   const userCSSstyles = createCssStyles(config, classDefs);
-  const allStyles = getStyles(graphType, userCSSstyles, config.themeVariables);
+  const allStyles = getStyles(graphType, userCSSstyles, config.themeVariables, svgId);
 
   // Now turn all of the styles into a (compiled) string that starts with the id
   // use the stylis library to compile the css, turn the results into a valid CSS string (serialize(...., stringify))
@@ -534,7 +534,7 @@ function initialize(options: MermaidConfig = {}) {
 
   const config =
     typeof options === 'object' ? configApi.setSiteConfig(options) : configApi.getSiteConfig();
-
+  console.log('IPI config', config.themeVariables.useGradient);
   setLogLevel(config.logLevel);
   addDiagrams();
 }
diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts
index 03a12ed12..8fd3b00ea 100644
--- a/packages/mermaid/src/rendering-util/render.ts
+++ b/packages/mermaid/src/rendering-util/render.ts
@@ -47,11 +47,13 @@ export const render = async (data4Layout: any, svg: any, element: any, positions
 
   const { useGradient, gradientStart, gradientStop } = data4Layout.config.themeVariables;
 
+  // console.log('IPI data4Layout', svg.attr('id'));
+
   if (useGradient) {
     const gradient = svg.append('linearGradient');
 
     gradient
-      .attr('id', 'gradient')
+      .attr('id', svg.attr('id') + '-gradient')
       .attr('gradientUnits', 'userSpaceOnUse')
       .attr('spreadMethod', 'pad');
 
diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts
index 698b2beaf..c03b6d8c7 100644
--- a/packages/mermaid/src/styles.spec.ts
+++ b/packages/mermaid/src/styles.spec.ts
@@ -73,7 +73,7 @@ describe('styles', () => {
 
       addStylesForDiagram(diagramType, myTypeGetStylesFunc);
 
-      const styles = getStyles(diagramType, '', getConfig().themeVariables);
+      const styles = getStyles(diagramType, '', getConfig().themeVariables, '');
 
       await checkValidStylisCSSStyleSheet(styles);
     });
@@ -107,7 +107,8 @@ describe('styles', () => {
             diagramId,
             '',
             // @ts-expect-error This will probably be broken until we create a proper Themes type.
-            themes[themeId].getThemeVariables()
+            themes[themeId].getThemeVariables(),
+            ''
           );
 
           await checkValidStylisCSSStyleSheet(styles);
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index e91b4815f..a43bd4043 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -15,7 +15,8 @@ const getStyles = (
     errorTextColor: string;
     lineColor: string;
     useGradient: boolean;
-  } & FlowChartStyleOptions
+  } & FlowChartStyleOptions,
+  svgId: string
 ) => {
   let diagramStyles = '';
   if (type in themes && themes[type as keyof typeof themes]) {
@@ -75,18 +76,18 @@ const getStyles = (
   }
 
   [data-look="neo"].node rect, [data-look="neo"].cluster rect, [data-look="neo"].node polygon {
-    stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
+    stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
     filter: ${options.dropShadow};
   }
 
   [data-look="neo"].node rect,  [data-look="neo"].node circle, [data-look="neo"].node polygon {
-    stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
+    stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
     filter: ${options.dropShadow};
   }
 
   [data-look="neo"].node circle{
     stroke: $(options.nodeBorder);
-    stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
+    stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
 
     filter: ${options.dropShadow};
   }
@@ -98,7 +99,7 @@ const getStyles = (
 
   [data-look="neo"].statediagram-cluster rect {
     fill: ${options.compositeTitleBackground};
-    stroke: ${options.useGradient ? 'url(#gradient)' : options.nodeBorder};
+    stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
     //stroke: none;
     stroke-width: 1px;
     rx: 3;