#5237 Fix of issue with styling of nodes for flowcharts

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

@@ -829,7 +829,7 @@ function getCompiledStyles(classDefs: string[]) {
   let compiledStyles: string[] = [];
   for (const customClass of classDefs) {
     const cssClass = classes.get(customClass);
-    log.debug('IPI cssClass in flowDb', cssClass);
+    // log.debug('IPI cssClass in flowDb', cssClass);
     if (cssClass) {
       if (cssClass.styles) {
         compiledStyles = [...compiledStyles, ...(cssClass.styles ?? [])].map((s) => s.trim());
@@ -907,7 +907,7 @@ export const getData = () => {
     edges.push(edge);
   });
 
-  log.debug('IPI nodes', JSON.stringify(nodes, null, 2));
+  // log.debug('IPI nodes', JSON.stringify(nodes, null, 2));
 
   return { nodes, edges, other: {}, config };
 };

packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts

@@ -1,7 +1,7 @@
 // @ts-ignore: JISON doesn't support types
 import flowParser from './parser/flow.jison';
 import flowDb from './flowDb.js';
-//import flowRendererV2 from './flowRenderer-v2.js';
+import flowRendererV2 from './flowRenderer-v2.js';
 import flowRendererV3 from './flowRenderer-v3-unified.js';
 import flowStyles from './styles.js';
 import type { MermaidConfig } from '../../config.type.js';

packages/mermaid/src/rendering-util/createText.ts

@@ -205,16 +205,16 @@ export const createText = async (
   } = {},
   config: MermaidConfig
 ) => {
-  log.info(
-    'IPI createText',
-    text,
-    style,
-    isTitle,
-    classes,
-    useHtmlLabels,
-    isNode,
-    addSvgBackground
-  );
+  // log.info(
+  //   'IPI createText',
+  //   text,
+  //   style,
+  //   isTitle,
+  //   classes,
+  //   useHtmlLabels,
+  //   isNode,
+  //   addSvgBackground
+  // );
   if (useHtmlLabels) {
     // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts

@@ -14,6 +14,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
   const { look } = getConfig();
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
+  // console.log('IPI labelStyles:', labelStyles);
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
   const totalWidth = Math.max(bbox.width + options.labelPaddingX * 2, node?.width || 0);
@@ -21,7 +22,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
   const x = -totalWidth / 2;
   const y = -totalHeight / 2;
 
-  log.info('IPI node = ', node);
+  // log.info('IPI node = ', node);
 
   let rect;
   node.look = look;

packages/mermaid/src/rendering-util/rendering-elements/shapes/handdrawnStyles.ts

@@ -19,7 +19,6 @@ export const compileStyles = (node: Node) => {
   // node.cssCompiledStyles is an array of strings in the form of 'key: value' where jey is the css property and value is the value
   // the array is the styles of node node from the classes it is using
   // node.cssStyles is an array of styles directly set on the node
-
   // concat the arrays and remove duplicates such that the values from node.cssStyles are used if there are duplicates
   const stylesMap = styles2Map([...(node.cssCompiledStyles || []), ...(node.cssStyles || [])]);
   return { stylesMap, stylesArray: [...stylesMap] };
@@ -75,7 +74,7 @@ export const styles2String = (node: Node) => {
 export const userNodeOverrides = (node: Node, options: any) => {
   const { themeVariables, handdrawnSeed } = getConfig();
   const { nodeBorder, mainBkg } = themeVariables;
-  const { stylesArray: styles, stylesMap } = compileStyles(node);
+  const { stylesMap } = compileStyles(node);
 
   // index the style array to a map object
   const result = Object.assign(

packages/mermaid/src/rendering-util/types.d.ts

@@ -44,6 +44,7 @@ interface Node {
   height?: number;
   // Specific properties for State Diagram nodes TODO remove and use generic properties
   intersect?: (point: any) => any;
+  intersect2?: (node: Node, point: any) => any;
 
   // Non-generic properties
   rx?: number; // Used for rounded corners in Rect, Ellipse, etc.Maybe it to specialized RectNode, EllipseNode, etc.