From a2d1fb5e5468fcb5a51ba081ea90ee999889d60d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Issue=E5=93=A5?= <i@viegg.com>
Date: Fri, 7 Jul 2023 15:42:40 +0800
Subject: [PATCH] use computeWidthOfText

---
 packages/mermaid/src/diagrams/pie/pieRenderer.js    | 10 ++++++----
 packages/mermaid/src/rendering-util/createText.js   |  2 +-
 packages/mermaid/src/rendering-util/getTextWidth.js |  7 -------
 3 files changed, 7 insertions(+), 12 deletions(-)
 delete mode 100644 packages/mermaid/src/rendering-util/getTextWidth.js

diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.js b/packages/mermaid/src/diagrams/pie/pieRenderer.js
index 06ed54174..0a36af3c5 100644
--- a/packages/mermaid/src/diagrams/pie/pieRenderer.js
+++ b/packages/mermaid/src/diagrams/pie/pieRenderer.js
@@ -4,7 +4,7 @@ import { log } from '../../logger.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import * as configApi from '../../config.js';
 import { parseFontSize } from '../../utils.js';
-import { getTextWidth } from '../../rendering-util/getTextWidth.js';
+import { computeWidthOfText } from '../../rendering-util/createText.js';
 
 let conf = configApi.getConfig();
 
@@ -74,16 +74,18 @@ export const draw = (txt, id, _version, diagObj) => {
       sum += data[key];
     });
 
-    const legendShowData = diagObj.db.getShowData() || conf.showData || conf.pie.showData || false;
+    const legendShowData = diagObj.db.getShowData();
     const legendTexts = Object.keys(data).map(key => {
       if (!legendShowData) {
         return key;
       }
       return `${key} [${data[key]}]`;
     })
-    const longestTextWidth = Math.max(...(legendTexts.map(v => getTextWidth(v))));
+    const longestTextWidth = Math.max(...(legendTexts.map(text => {
+      return computeWidthOfText(svg, 1, text)
+    })));
     const newWidth = width + margin + legendRectSize + legendSpacing + longestTextWidth;
-    elem.setAttribute("viewBox", "0 0 " + newWidth + " " + height);
+    elem.setAttribute("viewBox", `0 0 ${newWidth} ${height}`);
 
     const themeVariables = conf.themeVariables;
     var myGeneratedColors = [
diff --git a/packages/mermaid/src/rendering-util/createText.js b/packages/mermaid/src/rendering-util/createText.js
index 871f3425e..25a7b0c1a 100644
--- a/packages/mermaid/src/rendering-util/createText.js
+++ b/packages/mermaid/src/rendering-util/createText.js
@@ -85,7 +85,7 @@ function createTspan(textElement, lineIndex, lineHeight) {
  * @param {string} text
  * @returns {number}
  */
-function computeWidthOfText(parentNode, lineHeight, text) {
+export function computeWidthOfText(parentNode, lineHeight, text) {
   const testElement = parentNode.append('text');
   const testSpan = createTspan(testElement, 1, lineHeight);
   updateTextContentAndStyles(testSpan, [{ content: text, type: 'normal' }]);
diff --git a/packages/mermaid/src/rendering-util/getTextWidth.js b/packages/mermaid/src/rendering-util/getTextWidth.js
deleted file mode 100644
index f2976a852..000000000
--- a/packages/mermaid/src/rendering-util/getTextWidth.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// https://stackoverflow.com/a/35373030/3469145
-const canvas = document.createElement('canvas');
-const context = canvas.getContext('2d');
-
-const getTextWidth = (text) => context.measureText(text).width * window.devicePixelRatio;
-
-export { getTextWidth };