Merge remote-tracking branch 'os_repo/5237-unified-layout-common-renderer' into alanaV11

packages/mermaid/src/diagrams/flowchart/flowDb.ts

@@ -818,6 +818,10 @@ const addNodeFromVertex = (
       linkTarget: vertex.linkTarget,
       tooltip: getTooltip(vertex.id),
     });
+  } else {
+    node.cssStyles = vertex.styles;
+    node.cssCompiledStyles = getCompiledStyles(vertex.classes);
+    node.cssClasses = vertex.classes.join(' ');
   }
 };
 
@@ -827,10 +831,10 @@ function getCompiledStyles(classDefs: string[]) {
     const cssClass = classes.get(customClass);
     if (cssClass) {
       if (cssClass.styles) {
-        compiledStyles = [...compiledStyles, ...(cssClass.styles ?? [])];
+        compiledStyles = [...compiledStyles, ...(cssClass.styles ?? [])].map((s) => s.trim());
       }
       if (cssClass.textStyles) {
-        compiledStyles = [...compiledStyles, ...(cssClass.textStyles ?? [])];
+        compiledStyles = [...compiledStyles, ...(cssClass.textStyles ?? [])].map((s) => s.trim());
       }
     }
   }
@@ -866,8 +870,8 @@ export const getData = () => {
       labelStyle: '',
       parentId: parentDB.get(subGraph.id),
       padding: config.flowchart?.padding || 8,
-      cssStyles: [],
+      cssCompiledStyles: getCompiledStyles(subGraph.classes),
-      cssClasses: '',
+      cssClasses: subGraph.classes.join(' '),
       shape: 'rect',
       dir: subGraph.dir,
       isGroup: true,
@@ -902,6 +906,8 @@ export const getData = () => {
     edges.push(edge);
   });
 
+  log.debug('IPI nodes', JSON.stringify(nodes, null, 2));
+
   return { nodes, edges, other: {}, config };
 };
 

packages/mermaid/src/diagrams/state/dataFetcher.js

@@ -161,63 +161,16 @@ function insertOrUpdateNode(nodes, nodeData, classes) {
 
   //Populate node style attributes if nodeData has classes defined
   if (nodeData.cssClasses) {
+    if (!Array.isArray(nodeData.cssCompiledStyles)) {
+      nodeData.cssCompiledStyles = [];
+    }
+
     nodeData.cssClasses.split(' ').forEach((cssClass) => {
       if (classes.get(cssClass)) {
         const classDef = classes.get(cssClass);
-        // classDef.styles.forEach((style) => {
-        //   nodeData.cssCompiledStyles += style + ',';
-        //   // Populate nodeData with style attributes specifically to be used by rough.js
-        //   if (style && style.startsWith('fill:')) {
-        //     nodeData.backgroundColor = style.replace('fill:', '');
-        //   }
-        //   if (style && style.startsWith('stroke:')) {
-        //     nodeData.borderColor = style.replace('stroke:', '');
-        //   }
-        //   if (style && style.startsWith('stroke-width:')) {
-        //     nodeData.borderWidth = style.replace('stroke-width:', '');
-        //   }
-
-        //   nodeData.cssStyles += style + ';';
-        // });
-
-        // classDef.textStyles.forEach((style) => {
-        //   nodeData.labelStyle += style + ';';
-        //   if (style && style.startsWith('fill:')) {
-        //     nodeData.labelTextColor = style.replace('fill:', '');
-        //   }
-        // });
         nodeData.cssCompiledStyles = [...nodeData.cssCompiledStyles, ...classDef.styles];
       }
     });
-    //Populate node style attributes if nodeData has classes defined
-    if (nodeData.cssStyles) {
-      // nodeData.cssStyles.split(' ').forEach((csStyle) => {
-      //   if (classes[cssClass]) {
-      //     classes[cssClass].styles.forEach((style) => {
-      //       // Populate nodeData with style attributes specifically to be used by rough.js
-      //       if (style && style.startsWith('fill:')) {
-      //         nodeData.backgroundColor = style.replace('fill:', '');
-      //       }
-      //       if (style && style.startsWith('stroke:')) {
-      //         nodeData.borderColor = style.replace('stroke:', '');
-      //       }
-      //       if (style && style.startsWith('stroke-width:')) {
-      //         nodeData.borderWidth = style.replace('stroke-width:', '');
-      //       }
-      //       nodeData.cssStyles += style + ';';
-      //     });
-      //     classes[cssClass].textStyles.forEach((style) => {
-      //       nodeData.labelStyle += style + ';';
-      //       if (style && style.startsWith('fill:')) {
-      //         nodeData.labelTextColor = style.replace('fill:', '');
-      //       }
-      //     });
-      //   }
-      // });
-    }
-    // nodeData.labelTextColor = '#ffffff';
-    // nodeData.labelStyle = 'color:#ffffff';
-    // nodeData.cssStyles = 'fill:#f77';
   }
   const existingNodeData = nodes.find((node) => node.id === nodeData.id);
   if (existingNodeData) {

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

@@ -8,7 +8,10 @@ import { createText } from '../createText.ts';
 import intersectRect from '../rendering-elements/intersect/intersect-rect.js';
 import createLabel from './createLabel.js';
 import { createRoundedRectPathD } from './shapes/roundedRectPath.ts';
-import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 
 const rect = async (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);
@@ -16,10 +19,12 @@ const rect = async (parent, node) => {
   const { themeVariables, handdrawnSeed } = siteConfig;
   const { clusterBkg, clusterBorder } = themeVariables;
 
+  const { labelStyles, nodeStyles } = styles2String(node);
+
   // Add outer g element
   const shapeSvg = parent
     .insert('g')
-    .attr('class', 'cluster')
+    .attr('class', 'cluster ' + node.cssClasses)
     .attr('id', node.id)
     .attr('data-look', node.look);
 
@@ -86,7 +91,7 @@ const rect = async (parent, node) => {
     rect = shapeSvg.insert('rect', ':first-child');
     // center the rect around its coordinate
     rect
-      .attr('style', node.cssStyles)
+      .attr('style', nodeStyles)
       .attr('rx', node.rx)
       .attr('ry', node.ry)
       .attr('x', x)
@@ -108,6 +113,13 @@ const rect = async (parent, node) => {
       `translate(${node.x}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
     );
   }
+
+  if (labelStyles) {
+    const span = labelEl.select('span');
+    if (span) {
+      span.attr('style', labelStyles);
+    }
+  }
   // Center the label
 
   const rectBox = rect.node().getBBox();