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

packages/mermaid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mermaid-chart/mermaid",
-  "version": "11.0.0-b.33",
+  "version": "11.0.0-b.34",
   "description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "module": "./dist/mermaid.core.mjs",
@@ -137,4 +137,4 @@
     "README.md"
   ],
   "sideEffects": false
-}
+}

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

@@ -201,9 +201,9 @@ export const updateLink = function (positions: ('default' | number)[], style: st
     if (pos === 'default') {
       edges.defaultStyle = style;
     } else {
-      if (utils.isSubstringInArray('fill', style) === -1) {
-        style.push('fill:none');
-      }
+      // if (utils.isSubstringInArray('fill', style) === -1) {
+      //   style.push('fill:none');
+      // }
       edges[pos].style = style;
     }
   });
@@ -807,8 +807,8 @@ const addNodeFromVertex = (
       parentId,
       padding: config.flowchart?.padding || 8,
       cssStyles: vertex.styles,
-      cssCompiledStyles: getCompiledStyles(vertex.classes),
-      cssClasses: vertex.classes.join(' '),
+      cssCompiledStyles: getCompiledStyles(['default', 'node', ...vertex.classes]),
+      cssClasses: 'default ' + vertex.classes.join(' '),
       shape: getTypeFromVertex(vertex),
       dir: vertex.dir,
       domId: vertex.domId,
@@ -888,7 +888,8 @@ export const getData = () => {
   const e = getEdges();
   e.forEach((rawEdge, index) => {
     const { arrowTypeStart, arrowTypeEnd } = destructEdgeType(rawEdge.type);
-    const styles = e.defaultStyle || [];
+    const styles = [...(e.defaultStyle || [])];
+
     if (rawEdge.style) {
       styles.push(...rawEdge.style);
     }

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

@@ -1,7 +1,6 @@
 // @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 flowRendererV3 from './flowRenderer-v3-unified.js';
 import flowStyles from './styles.js';
 import type { MermaidConfig } from '../../config.type.js';
@@ -18,9 +17,7 @@ export const diagram = {
       cnf.flowchart = {};
     }
     cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
-    // flowchart-v2 uses dagre-wrapper, which doesn't have access to flowchart cnf
     setConfig({ flowchart: { arrowMarkerAbsolute: cnf.arrowMarkerAbsolute } });
-    // flowRendererV2.setConf(cnf.flowchart);
     flowRendererV3.setConf(cnf.flowchart);
     flowDb.clear();
     flowDb.setGen('gen-2');

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

@@ -41,6 +41,9 @@ const getStyles = (options: FlowChartStyleOptions) =>
   .cluster-label span {
     color: ${options.titleColor};
   }
+  .cluster-label span p {
+    background-color: transparent;
+  }
 
   .label text,span {
     fill: ${options.nodeTextColor || options.textColor};
@@ -56,7 +59,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
     stroke: ${options.nodeBorder};
     stroke-width: 1px;
   }
-  .flowchart-label text {
+  .node .label text {
     text-anchor: middle;
   }
   // .flowchart-label .text-outer-tspan {

packages/mermaid/src/mermaidAPI.ts

@@ -145,7 +145,11 @@ export const createCssStyles = (
       }
       // create the css styles for the tspan element and the text styles (only if there are textStyles)
       if (!isEmpty(styleClassDef.textStyles)) {
-        cssStyles += cssImportantStyles(styleClassDef.id, 'tspan', styleClassDef.textStyles);
+        cssStyles += cssImportantStyles(
+          styleClassDef.id,
+          'tspan',
+          (styleClassDef?.textStyles || []).map((s) => s.replace('color', 'fill'))
+        );
       }
     });
   }

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

@@ -2,6 +2,7 @@
 // @ts-nocheck TODO: Fix types
 import type { MermaidConfig } from '../config.type.js';
 import type { Group } from '../diagram-api/types.js';
+import { select } from 'd3';
 import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js';
 import { log } from '../logger.js';
 import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
@@ -33,7 +34,7 @@ async function addHtmlSpan(element, node, width, classes, addBackground = false)
   applyStyle(div, node.labelStyle);
   div.style('display', 'table-cell');
   div.style('white-space', 'nowrap');
-  div.style('line-height', '1');
+  div.style('line-height', '1.5');
   div.style('max-width', width + 'px');
   div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
   if (addBackground) {
@@ -223,17 +224,18 @@ export const createText = async (
     const vertexNode = await addHtmlSpan(el, node, width, classes, addSvgBackground);
     return vertexNode;
   } else {
-    const structuredText = markdownToLines(text, config);
+    const structuredText = markdownToLines(text.replace('<br>', '<br/>'), config);
     const svgLabel = createFormattedText(
       width,
       el,
       structuredText,
       text ? addSvgBackground : false
     );
-    svgLabel.setAttribute(
-      'style',
-      style.replace('fill:', 'color:') + (isNode ? ';text-anchor: middle;' : '')
-    );
+    if (style.match('stroke:')) style = style.replace('stroke:', 'lineColor:');
+    select(svgLabel)
+      .select('text')
+      .attr('style', style.replace(/color\:/g, 'fill:'));
+    // svgLabel.setAttribute('style', style);
     return svgLabel;
   }
 };

packages/mermaid/src/themes/theme-base.js

@@ -26,7 +26,7 @@ class Theme {
     this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
     this.fontSize = '16px';
     this.useGradient = true;
-    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1)';
+    this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';
   }
   updateColors() {
     // The || is to make sure that if the variable has been defined by a user override that value is to be used