Label background fix

mermaid-js · May 24, 2023 · 5bfe325 · 5bfe325
1 parent bd616e0
commit 5bfe325
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/packages/mermaid/src/diagrams/flowchart/styles.ts b/packages/mermaid/src/diagrams/flowchart/styles.ts
@@ -82,6 +82,19 @@ const getStyles = (options: FlowChartStyleOptions) =>
     text-align: center;
   }
 
+  /* For html labels only */
+  .labelBkg {
+    background-color: ${options.edgeLabelBackground};
+    background-color: ${options.edgeLabelBackground};
+    opacity: 0.5;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+  }
+
   .cluster rect {
     fill: ${options.clusterBkg};
     stroke: ${options.clusterBorder};

diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js
@@ -16,9 +16,10 @@ function applyStyle(dom, styleFn) {
  * @param {any} node
  * @param width
  * @param classes
+ * @param addBackground
  * @returns {SVGForeignObjectElement} Node
  */
-function addHtmlSpan(element, node, width, classes) {
+function addHtmlSpan(element, node, width, classes, addBackground = false) {
   const fo = element.append('foreignObject');
   // const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
   // const newEl = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
@@ -28,12 +29,15 @@ function addHtmlSpan(element, node, width, classes) {
 
   const label = node.label;
   const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
+  const bkgHtml = addBackground ? '<span class="labelBkg"></span>' : '';
   div.html(
-    `<span class="${labelClass} ${classes}" ` +
+    `<span>
+    ${bkgHtml}
+    <span class="${labelClass} ${classes}" ` +
       (node.labelStyle ? 'style="' + node.labelStyle + '"' : '') +
       '>' +
       label +
-      '</span>'
+      '</span></span>'
   );
 
   applyStyle(div, node.labelStyle);
@@ -200,7 +204,7 @@ export const createText = (
       ),
       labelStyle: style.replace('fill:', 'color:'),
     };
-    let vertexNode = addHtmlSpan(el, node, width, classes);
+    let vertexNode = addHtmlSpan(el, node, width, classes, addSvgBackground);
     return vertexNode;
   } else {
     const structuredText = markdownToLines(text);