fix: 链接字段高亮下划线过长 (#1652)

* refactor: measureTextWidth移动为spreadsheet实例方法

* test: 调整 text 测试用例

packages/s2-core/__tests__/unit/facet/pivot-facet-spec.ts

@@ -68,6 +68,8 @@ jest.mock('@/sheet-type', () => {
         interaction: {
           clearHoverTimer: jest.fn(),
         },
+        measureTextWidth:
+          jest.fn() as unknown as SpreadSheet['measureTextWidth'],
       };
     }),
   };
@@ -189,6 +191,7 @@ describe('Pivot Mode Facet Test', () => {
 
   describe('should get correct result when tree mode', () => {
     s2.isHierarchyTreeType = jest.fn().mockReturnValue(true);
+    const spy = jest.spyOn(s2, 'measureTextWidth').mockReturnValue(30); // 小于 DEFAULT_TREE_ROW_WIDTH
     const mockDataSet = new MockPivotDataSet(s2);
     const treeFacet = new PivotFacet({
       spreadsheet: s2,
@@ -200,6 +203,10 @@ describe('Pivot Mode Facet Test', () => {
     });
     const { rowsHierarchy } = treeFacet.layoutResult;
 
+    afterAll(() => {
+      spy.mockRestore();
+    });
+
     test('row hierarchy when tree mode', () => {
       const { cellCfg, spreadsheet } = facet.cfg;
       const rowCellStyle = spreadsheet.theme.rowCell.cell;

packages/s2-core/__tests__/unit/facet/table-facet-spec.ts

@@ -173,11 +173,33 @@ describe('Table Mode Facet Test With Adaptive Layout', () => {
 
 describe('Table Mode Facet Test With Compact Layout', () => {
   describe('should get correct col layout', () => {
+    const LABEL_WIDTH = [36, 36, 48, 24, 56]; // 采样的文本宽度
     const ss: SpreadSheet = new MockSpreadSheet();
     const dataSet: TableDataSet = new MockTableDataSet(ss);
     ss.getLayoutWidthType = () => {
       return 'compact';
     };
+
+    const mockMeasureFunc = (text: string | number) => {
+      switch (text) {
+        case '浙江省':
+          return LABEL_WIDTH[0];
+        case '杭州市':
+          return LABEL_WIDTH[1];
+        case '办公用品':
+          return LABEL_WIDTH[2];
+        case '沙发':
+          return LABEL_WIDTH[3];
+        case 'undefined':
+          return LABEL_WIDTH[4];
+        default:
+          return 0;
+      }
+    };
+    ss.measureTextWidth =
+      mockMeasureFunc as unknown as SpreadSheet['measureTextWidth'];
+    ss.measureTextWidthRoughly = mockMeasureFunc;
+
     const facet: TableFacet = new TableFacet({
       spreadsheet: ss,
       dataSet,
@@ -190,7 +212,6 @@ describe('Table Mode Facet Test With Compact Layout', () => {
 
     test('col hierarchy coordinate with compact layout', () => {
       const { colLeafNodes } = facet.layoutResult;
-
       const COMPACT_WIDTH = [53, 53, 65, 41, 73];
 
       let lastX = 0;
@@ -205,11 +226,32 @@ describe('Table Mode Facet Test With Compact Layout', () => {
   });
 
   describe('should get correct col layout with seriesNumber', () => {
+    const LABEL_WIDTH = [36, 36, 48, 24, 56]; // 采样的文本宽度
     const ss: SpreadSheet = new MockSpreadSheet();
     const dataSet: TableDataSet = new MockTableDataSet(ss);
     ss.getLayoutWidthType = () => {
       return 'compact';
     };
+    const mockMeasureFunc = (text: string | number) => {
+      switch (text) {
+        case '浙江省':
+          return LABEL_WIDTH[0];
+        case '杭州市':
+          return LABEL_WIDTH[1];
+        case '办公用品':
+          return LABEL_WIDTH[2];
+        case '沙发':
+          return LABEL_WIDTH[3];
+        case 'undefined': // seriesnumber & price
+          return LABEL_WIDTH[4];
+        default:
+          return 0;
+      }
+    };
+    ss.measureTextWidth =
+      mockMeasureFunc as unknown as SpreadSheet['measureTextWidth'];
+    ss.measureTextWidthRoughly = mockMeasureFunc;
+
     const facet: TableFacet = new TableFacet({
       spreadsheet: ss,
       dataSet,

packages/s2-core/__tests__/unit/utils/text-spec.ts

@@ -1,8 +1,8 @@
+import { createPivotSheet } from 'tests/util/helpers';
 import {
   getEllipsisText,
   getEllipsisTextInner,
   isUpDataValue,
-  measureTextWidth,
   getCellWidth,
   getEmptyPlaceholder,
 } from '@/utils/text';
@@ -16,74 +16,91 @@ describe('Text Utils Tests', () => {
     fontWeight: 'normal',
   } as unknown as CSSStyleDeclaration;
 
-  test('should get correct text', () => {
-    const text = getEllipsisText({
-      text: '12',
-      maxWidth: 200,
-      placeholder: '--',
+  describe('Test Widths Tests', () => {
+    let measureTextWidth: (text: number | string, font: unknown) => number;
+
+    beforeEach(() => {
+      measureTextWidth = createPivotSheet(
+        {},
+        { useSimpleData: true },
+      ).measureTextWidth;
     });
 
-    expect(text).toEqual('12');
-  });
+    test('should get correct text', () => {
+      const text = getEllipsisText({
+        measureTextWidth,
+        text: '12',
+        maxWidth: 200,
+        placeholder: '--',
+      });
 
-  test('should get correct text ellipsis', () => {
-    const text = getEllipsisText({
-      text: '12121212121212121212',
-      maxWidth: 20,
-      placeholder: '--',
+      expect(text).toEqual('12');
     });
 
-    expect(text).toEndWith('...');
-    expect(text.length).toBeLessThanOrEqual(5);
-  });
+    test('should get correct text ellipsis', () => {
+      const text = getEllipsisText({
+        measureTextWidth,
+        text: '12121212121212121212',
+        maxWidth: 20,
+        placeholder: '--',
+      });
 
-  test('should get correct placeholder text with ""', () => {
-    const text = getEllipsisText({
-      text: '',
-      maxWidth: 20,
-      placeholder: '--',
+      expect(text).toEndWith('...');
+      expect(text.length).toBeLessThanOrEqual(5);
     });
-    expect(text).toEqual('--');
-  });
 
-  test('should get correct placeholder text with 0', () => {
-    const text = getEllipsisText({
-      text: 0 as unknown as string,
-      maxWidth: 20,
-      placeholder: '--',
+    test('should get correct placeholder text with ""', () => {
+      const text = getEllipsisText({
+        measureTextWidth,
+        text: '',
+        maxWidth: 20,
+        placeholder: '--',
+      });
+      expect(text).toEqual('--');
     });
 
-    expect(text).toEqual('0');
-  });
+    test('should get correct placeholder text with 0', () => {
+      const text = getEllipsisText({
+        measureTextWidth,
+        text: 0 as unknown as string,
+        maxWidth: 20,
+        placeholder: '--',
+      });
 
-  test('should get correct placeholder text with null', () => {
-    const text = getEllipsisText({
-      text: null,
-      maxWidth: 20,
-      placeholder: '--',
+      expect(text).toEqual('0');
     });
 
-    expect(text).toEqual('--');
-  });
+    test('should get correct placeholder text with null', () => {
+      const text = getEllipsisText({
+        measureTextWidth,
+        text: null,
+        maxWidth: 20,
+        placeholder: '--',
+      });
 
-  test('should get correct ellipsis text', () => {
-    const text = getEllipsisText({
-      text: '长度测试',
-      maxWidth: 24,
+      expect(text).toEqual('--');
     });
 
-    expect(text).toEndWith('...');
-    expect(text.length).toBeLessThanOrEqual(4);
-  });
+    test('should get correct ellipsis text', () => {
+      const text = getEllipsisText({
+        measureTextWidth,
+        text: '长度测试',
+        maxWidth: 24,
+      });
 
-  test('should get correct text width', () => {
-    const width = measureTextWidth('test', font);
-    expect(Math.floor(width)).toEqual(isHD ? 21 : 16);
-  });
+      expect(text).toEndWith('...');
+      expect(text.length).toBeLessThanOrEqual(4);
+    });
 
-  test('should get correct ellipsis text inner', () => {
-    const text = getEllipsisTextInner('test', 15, font);
-    expect(text).toEqual('t...');
+    test('should get correct text width', () => {
+      const width = measureTextWidth('test', font);
+      expect(Math.floor(width)).toEqual(isHD ? 21 : 16);
+    });
+
+    test('should get correct ellipsis text inner', () => {
+      const text = getEllipsisTextInner(measureTextWidth, 'test', 15, font);
+      expect(text).toEqual('t...');
+    });
   });
 
   test.each`

packages/s2-core/src/cell/base-cell.ts

@@ -34,11 +34,7 @@ import {
 } from '../utils/cell/cell';
 import { renderLine, renderText, updateShapeAttr } from '../utils/g-renders';
 import { isMobile } from '../utils/is-mobile';
-import {
-  getEllipsisText,
-  getEmptyPlaceholder,
-  measureTextWidth,
-} from '../utils/text';
+import { getEllipsisText, getEmptyPlaceholder } from '../utils/text';
 
 export abstract class BaseCell<T extends SimpleBBox> extends Group {
   // cell's data meta info
@@ -201,9 +197,13 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     const { formattedValue } = this.getFormattedFieldValue();
     const maxTextWidth = this.getMaxTextWidth();
     const textStyle = this.getTextStyle();
-    const { placeholder } = this.spreadsheet.options;
+    const {
+      options: { placeholder },
+      measureTextWidth,
+    } = this.spreadsheet;
     const emptyPlaceholder = getEmptyPlaceholder(this, placeholder);
     const ellipsisText = getEllipsisText({
+      measureTextWidth,
       text: formattedValue,
       maxWidth: maxTextWidth,
       fontParam: textStyle,
@@ -233,13 +233,13 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     const device = this.spreadsheet.options.style.device;
     // 配置了链接跳转
     if (!isMobile(device)) {
-      const { minX, maxX, maxY }: BBox = this.textShape.getBBox();
+      const { minX, maxY }: BBox = this.textShape.getBBox();
       this.linkFieldShape = renderLine(
         this,
         {
           x1: minX,
           y1: maxY + 1,
-          x2: maxX,
+          x2: minX + this.actualTextWidth, // 不用 bbox 的 maxX，因为 g-base 文字宽度预估偏差较大
           y2: maxY + 1,
         },
         { stroke: linkFillColor, lineWidth: 1 },

packages/s2-core/src/cell/corner-cell.ts

@@ -38,11 +38,7 @@ import {
   getResizeAreaAttrs,
 } from '../utils/interaction/resize';
 import { isIPhoneX } from '../utils/is-mobile';
-import {
-  getEllipsisText,
-  getEmptyPlaceholder,
-  measureTextWidth,
-} from '../utils/text';
+import { getEllipsisText, getEmptyPlaceholder } from '../utils/text';
 import { i18n } from './../common/i18n';
 import { shouldAddResizeArea } from './../utils/interaction/resize';
 import { HeaderCell } from './header-cell';
@@ -86,7 +82,9 @@ export class CornerCell extends HeaderCell {
       this.meta,
       this.spreadsheet.options.placeholder,
     );
+    const { measureTextWidth } = this.spreadsheet;
     const text = getEllipsisText({
+      measureTextWidth,
       text: cornerText,
       maxWidth,
       fontParam: textStyle,
@@ -106,6 +104,7 @@ export class CornerCell extends HeaderCell {
       secondLine = cornerText.slice(lastIndex);
       // 第二行重新计算...逻辑
       secondLine = getEllipsisText({
+        measureTextWidth,
         text: secondLine,
         maxWidth,
         fontParam: textStyle,

packages/s2-core/src/facet/header/series-number.ts

@@ -1,14 +1,9 @@
 import type { Group, IGroup, IShape } from '@antv/g-canvas';
 import { each } from 'lodash';
-import {
-  CellBorderPosition,
-  type Padding,
-  type ViewMeta,
-} from '../../common/interface';
+import { CellBorderPosition, type Padding } from '../../common/interface';
 import type { SpreadSheet } from '../../sheet-type/index';
 import { getBorderPositionAndStyle } from '../../utils/cell/cell';
 import { renderLine, renderRect } from '../../utils/g-renders';
-import { measureTextWidth } from '../../utils/text';
 import { getAdjustPosition } from '../../utils/text-absorption';
 import type { PanelBBox } from '../bbox/panelBBox';
 import { Node } from '../layout/node';
@@ -198,7 +193,10 @@ export class SeriesNumberHeader extends BaseHeader<BaseHeaderConfig> {
 
   private getTextPadding(text: string, cellWidth: number): Padding {
     const rowCellTheme = this.getStyle();
-    const textWidth = measureTextWidth(text, rowCellTheme.seriesText);
+    const textWidth = this.headerConfig.spreadsheet.measureTextWidth(
+      text,
+      rowCellTheme.seriesText,
+    );
     const padding = Math.max(Math.abs((cellWidth - textWidth) / 2), 4);
     return {
       ...rowCellTheme.cell.padding,