From 9c12c42a26e9b9091af1be8f0fa00d905a9a07fc Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Wed, 24 May 2023 18:18:54 +0200 Subject: [PATCH] Mermaid Version 10.2.0-rc.4 --- cypress/platform/knsv.html | 18 +++++++ package.json | 2 +- .../mermaid/src/diagrams/flowchart/styles.ts | 26 ++++++---- .../mermaid/src/rendering-util/createText.js | 9 ++-- packages/mermaid/src/themes/theme-base.js | 2 +- pnpm-lock.yaml | 52 ------------------- 6 files changed, 42 insertions(+), 67 deletions(-) diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index dd4775f27..512333c01 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -42,6 +42,24 @@ + 
+      %%{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
+      
+
+ 
+      classDiagram-v2
+
+      classA -- classB : Inheritance
+      classA -- classC : link
+      classC -- classD : link
+      classB -- classD
+    
       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
index fe7a3ba00..b3be538da 100644
--- 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": "pnpm@8.4.0",
diff --git a/packages/mermaid/src/diagrams/flowchart/styles.ts b/packages/mermaid/src/diagrams/flowchart/styles.ts
index 62ec1177e..d0c3c77c6 100644
--- 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
index 43869f3f2..121621775 100644
--- a/packages/mermaid/src/rendering-util/createText.js
+++ b/packages/mermaid/src/rendering-util/createText.js
@@ -29,15 +29,13 @@ function addHtmlSpan(element, node, width, classes, addBackground = false) {
 
   const label = node.label;
   const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';
-  const bkgHtml = addBackground ? '' : '';
   div.html(
-    `
-    ${bkgHtml}
+    `
     ' +
       label +
-      ''
+      ''
   );
 
   applyStyle(div, node.labelStyle);
@@ -45,6 +43,9 @@ function addHtmlSpan(element, node, width, classes, addBackground = false) {
   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
index 495df2e41..ce1700d0b 100644
--- 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
index d021684f9..1ec7f3a7b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -425,58 +425,6 @@ importers:
         specifier: ^6.5.4
         version: 6.5.4
 
-  packages/mermaid/src/vitepress:
-    dependencies:
-      '@vueuse/core':
-        specifier: ^10.1.0
-        version: 10.1.0(vue@3.2.47)
-      jiti:
-        specifier: ^1.18.2
-        version: 1.18.2
-      vue:
-        specifier: ^3.2.47
-        version: 3.2.47
-    devDependencies:
-      '@iconify-json/carbon':
-        specifier: ^1.1.16
-        version: 1.1.16
-      '@unocss/reset':
-        specifier: ^0.51.8
-        version: 0.51.8
-      '@vite-pwa/vitepress':
-        specifier: ^0.0.5
-        version: 0.0.5(vite-plugin-pwa@0.14.7)
-      '@vitejs/plugin-vue':
-        specifier: ^4.2.1
-        version: 4.2.1(vite@4.3.3)(vue@3.2.47)
-      fast-glob:
-        specifier: ^3.2.12
-        version: 3.2.12
-      https-localhost:
-        specifier: ^4.7.1
-        version: 4.7.1
-      pathe:
-        specifier: ^1.1.0
-        version: 1.1.0
-      unocss:
-        specifier: ^0.51.8
-        version: 0.51.8(postcss@8.4.23)(rollup@2.79.1)(vite@4.3.3)
-      unplugin-vue-components:
-        specifier: ^0.24.1
-        version: 0.24.1(rollup@2.79.1)(vue@3.2.47)
-      vite:
-        specifier: ^4.3.3
-        version: 4.3.3(@types/node@18.16.0)
-      vite-plugin-pwa:
-        specifier: ^0.14.7
-        version: 0.14.7(vite@4.3.3)(workbox-build@6.5.4)(workbox-window@6.5.4)
-      vitepress:
-        specifier: 1.0.0-alpha.74
-        version: 1.0.0-alpha.74(@algolia/client-search@4.14.2)(@types/node@18.16.0)
-      workbox-window:
-        specifier: ^6.5.4
-        version: 6.5.4
-
   tests/webpack:
     dependencies:
       '@mermaid-js/mermaid-example-diagram':