MC-1730 Selector for gradients

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',

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();
 }

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');
 

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);

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;