refactor(measure-text): simplify browser check and improve text measurement logic (#203)

* refactor(measure-text): simplify browser check and improve text measurement logic

* chore: update version

* refactor: optimize get canvas context

Author: Aarebecca

__tests__/unit/utils/measure-text.test.ts

@@ -0,0 +1,119 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+const fallbackMeasureText = vi.fn(() => ({ width: 9, height: 11 }));
+
+vi.mock('measury', () => ({
+  measureText: fallbackMeasureText,
+  registerFont: vi.fn(),
+}));
+
+vi.mock('measury/fonts/AlibabaPuHuiTi-Regular', () => ({
+  default: {
+    fontFamily: 'AlibabaPuHuiTi-Regular',
+  },
+}));
+
+describe('measureText', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.resetModules();
+    fallbackMeasureText.mockClear();
+  });
+
+  it('prefers canvas metrics when canvas is available even if layout is unavailable', async () => {
+    const originalCreateElement = document.createElement.bind(document);
+    vi.spyOn(document, 'createElement').mockImplementation(
+      (tagName: string, options?: ElementCreationOptions) => {
+        const element = originalCreateElement(
+          tagName as keyof HTMLElementTagNameMap,
+          options,
+        );
+        if (tagName === 'span' || tagName === 'div') {
+          vi.spyOn(element, 'getBoundingClientRect').mockReturnValue({
+            width: 0,
+            height: 0,
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            x: 0,
+            y: 0,
+            toJSON: () => ({}),
+          } as DOMRect);
+        }
+        return element;
+      },
+    );
+
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+      font: '',
+      measureText: () => ({ width: 120 }),
+    } as unknown as CanvasRenderingContext2D);
+
+    const { measureText } = await import('../../../src/utils/measure-text');
+    const metrics = measureText('数字化转型层级', {
+      fontFamily: "'Times New Roman', Times, serif, SimSun, STSong",
+      fontSize: 20,
+      fontWeight: 'normal',
+    });
+
+    expect(metrics.width).toBe(122);
+    expect(metrics.height).toBe(29);
+    expect(fallbackMeasureText).not.toHaveBeenCalled();
+  });
+
+  it('falls back to measury when canvas is unavailable and span layout is invalid', async () => {
+    const originalCreateElement = document.createElement.bind(document);
+    vi.spyOn(document, 'createElement').mockImplementation(
+      (tagName: string, options?: ElementCreationOptions) => {
+        const element = originalCreateElement(
+          tagName as keyof HTMLElementTagNameMap,
+          options,
+        );
+        if (tagName === 'span') {
+          vi.spyOn(element, 'getBoundingClientRect').mockReturnValue({
+            width: 0,
+            height: 0,
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0,
+            x: 0,
+            y: 0,
+            toJSON: () => ({}),
+          } as DOMRect);
+        }
+        return element;
+      },
+    );
+
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null);
+
+    const { measureText } = await import('../../../src/utils/measure-text');
+    const metrics = measureText('数字化转型层级', {
+      fontFamily: "'Times New Roman', Times, serif, SimSun, STSong",
+      fontSize: 20,
+      fontWeight: 'normal',
+    });
+
+    expect(metrics.width).toBe(10);
+    expect(metrics.height).toBe(12);
+    expect(fallbackMeasureText).toHaveBeenCalledTimes(1);
+  });
+
+  it('falls back to measury when document is unavailable', async () => {
+    const { measureText } = await import('../../../src/utils/measure-text');
+    vi.stubGlobal('window', undefined);
+    vi.stubGlobal('document', undefined);
+
+    const metrics = measureText('数字化转型层级', {
+      fontFamily: "'Times New Roman', Times, serif, SimSun, STSong",
+      fontSize: 20,
+      fontWeight: 'normal',
+    });
+
+    expect(metrics.width).toBe(10);
+    expect(metrics.height).toBe(12);
+    expect(fallbackMeasureText).toHaveBeenCalledTimes(1);
+  });
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/infographic",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "An Infographic Generation and Rendering Framework, bring words to life!",
   "keywords": [
     "antv",

src/utils/measure-text.ts

@@ -3,7 +3,6 @@ import AlibabaPuHuiTi from 'measury/fonts/AlibabaPuHuiTi-Regular';
 import { JSXNode, TextProps } from '../jsx';
 import { DEFAULT_FONT } from '../renderer';
 import { encodeFontFamily } from './font';
-import { isBrowser } from './is-browser';
 
 let FONT_EXTEND_FACTOR = 1.01;
 
@@ -13,17 +12,19 @@ export const setFontExtendFactor = (factor: number) => {
 
 registerFont(AlibabaPuHuiTi);
 
-let canvasContext: CanvasRenderingContext2D | null = null;
+let canvasContext: CanvasRenderingContext2D | null | undefined = undefined;
 let measureSpan: HTMLSpanElement | null = null;
 
 function getCanvasContext() {
-  if (canvasContext) return canvasContext;
+  if (typeof document === 'undefined') return null;
+  if (canvasContext !== undefined) return canvasContext;
   const canvas = document.createElement('canvas');
   canvasContext = canvas.getContext('2d');
   return canvasContext;
 }
 
 function getMeasureSpan() {
+  if (typeof document === 'undefined') return null;
   if (!document.body) return null;
   if (measureSpan) return measureSpan;
   measureSpan = document.createElement('span');
@@ -98,6 +99,7 @@ function measureTextInBrowser(
   span.style.lineHeight = `${lineHeightPx}px`;
   span.textContent = content;
   const rect = span.getBoundingClientRect();
+  if (content && rect.width <= 0 && rect.height <= 0) return null;
   return { width: rect.width, height: rect.height };
 }
 
@@ -126,9 +128,7 @@ export function measureText(
     lineHeight,
   };
   const fallback = () => measure(content, options);
-  const metrics = isBrowser()
-    ? (measureTextInBrowser(content, options) ?? fallback())
-    : fallback();
+  const metrics = measureTextInBrowser(content, options) ?? fallback();
 
   // 额外添加 1% 宽高
   return {

src/version.ts

@@ -1 +1 @@
-export const VERSION = '0.2.13';
+export const VERSION = '0.2.14';