Mermaid Version 10.2.0-rc.4

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

Hide file tree

Showing 6 changed files with 42 additions and 67 deletions.
diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html
@@ -42,6 +42,24 @@
     </style>
   </head>
   <body>
+    <pre class="mermaid" style="width: 50%">
+      %%{init: {"flowchart": {"htmlLabels": true}} }%%
+      flowchart LR
+      b("`The dog in **the** hog.(1).. a a a a *very long text* about it
+      Word!
+
+      Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words.`") --apa--> c
+
+          </pre
+    >
+    <pre class="mermaid" style="width: 50%">
+      classDiagram-v2
+
+      classA -- classB : Inheritance
+      classA -- classC : link
+      classC -- classD : link
+      classB -- classD
+    </pre>
     <pre class="mermaid" style="width: 50%">
       sequenceDiagram
       Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mermaid-monorepo",
   "private": true,
-  "version": "10.1.0",
+  "version": "10.2.0-rc.1",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
   "packageManager": "[email protected]",

diff --git a/packages/mermaid/src/diagrams/flowchart/styles.ts b/packages/mermaid/src/diagrams/flowchart/styles.ts
@@ -1,3 +1,6 @@
+// import khroma from 'khroma';
+import * as khroma from 'khroma';
+
 /** Returns the styles given options */
 export interface FlowChartStyleOptions {
   arrowheadColor: string;
@@ -15,6 +18,18 @@ export interface FlowChartStyleOptions {
   titleColor: string;
 }
 
+const fade = (color: string, opacity: number) => {
+  // @ts-ignore TODO: incorrect types from khroma
+  const channel = khroma.channel;
+
+  const r = channel(color, 'r');
+  const g = channel(color, 'g');
+  const b = channel(color, 'b');
+
+  // @ts-ignore incorrect types from khroma
+  return khroma.rgba(r, g, b, opacity);
+};
+
 const getStyles = (options: FlowChartStyleOptions) =>
   `.label {
     font-family: ${options.fontFamily};
@@ -84,15 +99,8 @@ const getStyles = (options: FlowChartStyleOptions) =>
 
   /* 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;
+    background-color: ${fade(options.edgeLabelBackground, 0.5)};
+    // background-color: 
   }
 
   .cluster rect {

diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js
@@ -29,22 +29,23 @@ function addHtmlSpan(element, node, width, classes, addBackground = false) {
 
   const label = node.label;
   const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
-  const bkgHtml = addBackground ? '<span class="labelBkg"></span>' : '';
   div.html(
-    `<span>
-    ${bkgHtml}
+    `
     <span class="${labelClass} ${classes}" ` +
       (node.labelStyle ? 'style="' + node.labelStyle + '"' : '') +
       '>' +
       label +
-      '</span></span>'
+      '</span>'
   );
 
   applyStyle(div, node.labelStyle);
   div.style('display', 'table-cell');
   div.style('white-space', 'nowrap');
   div.style('max-width', width + 'px');
   div.attr('xmlns', 'http://www.w3.org/1999/xhtml');
+  if (addBackground) {
+    div.attr('class', 'labelBkg');
+  }
 
   let bbox = div.node().getBoundingClientRect();
   if (bbox.width === width) {

diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
@@ -1,4 +1,4 @@
-import { darken, lighten, adjust, invert, isDark } from 'khroma';
+import { darken, lighten, adjust, invert, isDark, toRgba } from 'khroma';
 import { mkBorder } from './theme-helpers.js';
 import {
   oldAttributeBackgroundColorEven,

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml