From 7673a675f623faa718a9887753032cc5c41948cd Mon Sep 17 00:00:00 2001
From: "yuqi.pyq" <yuqi.pyq@antgroup.com>
Date: Fri, 10 Nov 2023 16:20:04 +0800
Subject: [PATCH] fix: use offscreencanvas instead of canvas when measuring
 text

---
 .gitignore                      |  3 +--
 __tests__/integration/canvas.ts |  2 +-
 package.json                    |  3 ---
 src/util/text.ts                | 18 +++++++++---------
 4 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/.gitignore b/.gitignore
index ef8e79ab2..96c3e8477 100644
--- a/.gitignore
+++ b/.gitignore
@@ -82,5 +82,4 @@ public
 .lh
 
 # tests
-__tests__/integration/**/*-diff.png
-__tests__/integration/**/*-actual.png
+__tests__/integration/**/*-actual.svg
diff --git a/__tests__/integration/canvas.ts b/__tests__/integration/canvas.ts
index ff75adf5e..2807c4b71 100644
--- a/__tests__/integration/canvas.ts
+++ b/__tests__/integration/canvas.ts
@@ -38,7 +38,7 @@ export function sleep(n: number) {
   });
 }
 
-export async function renderCanvas(gshape: DisplayObject, wait = 100) {
+export async function renderCanvas(gshape: DisplayObject, wait = 300) {
   const bbox = gshape.getBBox();
   const width = gshape.attributes.width || bbox.x + bbox.width || 400;
   const height = gshape.attributes.height || bbox.y + bbox.height || 300;
diff --git a/package.json b/package.json
index dad9f6216..82ab363fa 100644
--- a/package.json
+++ b/package.json
@@ -49,9 +49,6 @@
     "@antv/util": "^3.3.5",
     "svg-path-parser": "^1.1.0"
   },
-  "peerDependencies": {
-    "@antv/g": "^5.18.6"
-  },
   "devDependencies": {
     "@antv/g-canvas": "^1.11.5",
     "@antv/g-plugin-control": "^1.9.6",
diff --git a/src/util/text.ts b/src/util/text.ts
index 28aa3ebc1..7d393e056 100644
--- a/src/util/text.ts
+++ b/src/util/text.ts
@@ -1,4 +1,5 @@
-import { isString, memoize } from '@antv/util';
+import { runtime } from '@antv/g';
+import { memoize } from '@antv/util';
 import type { DisplayObject, Text } from '../shapes';
 
 let ctx: CanvasRenderingContext2D;
@@ -12,22 +13,21 @@ export function setMockMeasureTextWidth(mock: (text: string, fontSize: number) =
  * 计算文本在画布中的宽度
  */
 export const measureTextWidth = memoize(
-  (text: string | Text, font?: any): number => {
-    const content = isString(text) ? text : text.style.text.toString();
-    const { fontSize, fontFamily, fontWeight, fontStyle, fontVariant } = font || getFont(text as Text);
+  (text: string, font: any): number => {
+    const { fontSize, fontFamily, fontWeight, fontStyle, fontVariant } = font;
 
     if (mockMeasureTextWidth) {
-      return mockMeasureTextWidth(content, fontSize);
+      return mockMeasureTextWidth(text, fontSize);
     }
 
     if (!ctx) {
-      ctx = document.createElement('canvas').getContext('2d') as CanvasRenderingContext2D;
+      // @ts-ignore
+      ctx = runtime.offscreenCanvasCreator.getOrCreateContext(undefined) as CanvasRenderingContext2D;
     }
     ctx!.font = [fontStyle, fontVariant, fontWeight, `${fontSize}px`, fontFamily].join(' ');
-    return ctx!.measureText(content).width;
+    return ctx!.measureText(text).width;
   },
-  (text: any, font?: any) =>
-    [isString(text) ? text : text.style.text.toString(), Object.values(font || getFont(text as Text)).join()].join(''),
+  (text: any, font?: any) => [text, Object.values(font || getFont(text as Text)).join()].join(''),
   4096
 );