feat: 优化紧凑模式下的单元格宽度计算方式 (#2953)

* feat: 优化紧凑模式下的单元格宽度计算方式 * test: 修复单测 * test: 修复单测 * test: 修复单测 * test: 修复单测
antvis · Nov 1, 2024 · 68ed225 · 68ed225
1 parent 69f6479
commit 68ed225
Show file tree

Hide file tree

Showing 21 changed files with 119 additions and 128 deletions.
diff --git a/packages/s2-core/__tests__/bugs/issue-2726-spec.ts b/packages/s2-core/__tests__/bugs/issue-2726-spec.ts
@@ -44,7 +44,7 @@ describe('Col Adaptive Layout Tests', () => {
       .getCornerNodes()
       .map((node) => Math.floor(node.width));
 
-    expect(cornerNodeWidthList).toEqual([184, 136, 320]);
+    expect(cornerNodeWidthList).toEqual([185, 137, 322]);
     expectTextOverflowing(s2);
   });
 });
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap
@@ -206,7 +206,7 @@ Array [
     "seriesNumberWidth": 0,
     "spreadsheet": Anything,
     "value": "province/city/数值",
-    "width": 146.36,
+    "width": 147,
     "x": 0,
     "y": 0,
   },
@@ -277,7 +277,7 @@ Array [
     "seriesNumberWidth": 80,
     "spreadsheet": Anything,
     "value": "province/city/数值",
-    "width": 146.36,
+    "width": 147,
     "x": 80,
     "y": 0,
   },

diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/spread-sheet-frozen-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/spread-sheet-frozen-spec.ts.snap
@@ -116,21 +116,21 @@ Array [
   Object {
     "height": 30,
     "id": "root[&]a-1",
-    "width": 271.03125,
+    "width": 272,
     "x": 0,
     "y": 0,
   },
   Object {
     "height": 30,
     "id": "root[&]a-1[&]a-1-1",
-    "width": 271.03125,
+    "width": 272,
     "x": 0,
     "y": 30,
   },
   Object {
     "height": 30,
     "id": "root[&]a-1",
-    "width": 271.03125,
+    "width": 272,
     "x": 0,
     "y": 0,
   },
@@ -142,14 +142,14 @@ Array [
   Object {
     "height": 30,
     "id": "root[&]a-3[&]measure-5",
-    "width": 271.03125,
+    "width": 272,
     "x": 0,
     "y": 420,
   },
   Object {
     "height": -90,
     "id": "root[&]a-3",
-    "width": 271.03125,
+    "width": 272,
     "x": 0,
     "y": 420,
   },

diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/spread-sheet-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/spread-sheet-spec.ts.snap
@@ -47,7 +47,7 @@ Object {
       "colResizeType": "current",
       "cornerCellHorizontal": true,
       "minCellHeight": 20,
-      "minCellWidth": 20,
+      "minCellWidth": 40,
       "rowCellVertical": true,
       "rowResizeType": "current",
     },

diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/table-sheet-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/table-sheet-spec.ts.snap
@@ -54,7 +54,7 @@ Object {
   "lineWidth": 1,
   "opacity": 1,
   "text": "暂无数据",
-  "x": 375.5,
+  "x": 375,
   "y": 357.5,
 }
 `;
@@ -113,7 +113,7 @@ Object {
   "lineWidth": 1,
   "opacity": 1,
   "text": "暂无数据",
-  "x": 275.5,
+  "x": 275,
   "y": 382.5,
 }
 `;
@@ -172,7 +172,7 @@ Object {
   "lineWidth": 1,
   "opacity": 1,
   "text": "暂无数据",
-  "x": 231,
+  "x": 230.5,
   "y": 297.5,
 }
 `;
@@ -231,7 +231,7 @@ Object {
   "lineWidth": 1,
   "opacity": 1,
   "text": "暂无数据",
-  "x": 375.5,
+  "x": 375,
   "y": 357.5,
 }
 `;
@@ -290,7 +290,7 @@ Object {
   "lineWidth": 1,
   "opacity": 1,
   "text": "暂无数据",
-  "x": 359.5,
+  "x": 359,
   "y": 443,
 }
 `;
@@ -349,7 +349,7 @@ Object {
   "lineWidth": 1,
   "opacity": 1,
   "text": "No Data",
-  "x": 377.4892578125,
+  "x": 376.5,
   "y": 357.5,
 }
 `;
@@ -408,7 +408,7 @@ Object {
   "lineWidth": 1,
   "opacity": 1,
   "text": "暂无数据",
-  "x": 375.5,
+  "x": 375,
   "y": 357.5,
 }
 `;
diff --git a/packages/s2-core/__tests__/spreadsheet/compare-layout-spec.ts b/packages/s2-core/__tests__/spreadsheet/compare-layout-spec.ts
@@ -60,8 +60,8 @@ describe('Compare Layout Tests', () => {
 
     const colLeafNodes = s2.facet.getColLeafNodes();
 
-    expect(Math.floor(colLeafNodes[0].width)).toBeCloseTo(189);
-    expect(Math.floor(colLeafNodes[1].width)).toEqual(90);
+    expect(Math.floor(colLeafNodes[0].width)).toBeCloseTo(191);
+    expect(Math.floor(colLeafNodes[1].width)).toEqual(92);
     expectTextOverflowing(s2);
   });
 
@@ -91,12 +91,12 @@ describe('Compare Layout Tests', () => {
 
     const colLeafNodes = s2.facet.getColLeafNodes();
 
-    expect(Math.floor(colLeafNodes[0].width)).toBeCloseTo(182);
+    expect(Math.floor(colLeafNodes[0].width)).toBeCloseTo(183);
     expectTextOverflowing(s2);
     const { dataCellWidthList, colLeafNodeWidthList } = mapWidthList(s2);
 
-    expect(dataCellWidthList.every((width) => width === 182)).toBeTruthy();
-    expect(colLeafNodeWidthList).toEqual([182]);
+    expect(dataCellWidthList.every((width) => width === 183)).toBeTruthy();
+    expect(colLeafNodeWidthList).toEqual([183]);
   });
 
   test.each([
@@ -137,11 +137,11 @@ describe('Compare Layout Tests', () => {
 
       expect(dataCellWidthList).toEqual(
         options.showDefaultHeaderActionIcon
-          ? [207, 207, 207, 207, 108, 108, 108, 108, 83, 83, 83, 83]
-          : [207, 207, 207, 207, 108, 108, 108, 108, 67, 67, 67, 67],
+          ? [209, 209, 209, 209, 110, 110, 110, 110, 85, 85, 85, 85]
+          : [209, 209, 209, 209, 110, 110, 110, 110, 69, 69, 69, 69],
       );
       expect(colLeafNodeWidthList).toEqual(
-        options.showDefaultHeaderActionIcon ? [207, 108, 83] : [207, 108, 67],
+        options.showDefaultHeaderActionIcon ? [209, 110, 85] : [209, 110, 69],
       );
     },
   );

diff --git a/packages/s2-core/__tests__/spreadsheet/scroll-spec.ts b/packages/s2-core/__tests__/spreadsheet/scroll-spec.ts
@@ -480,7 +480,7 @@ describe('Scroll Tests', () => {
     s2.changeSheetSize(1000, 150); // 纵向滚动条
     await s2.render(false);
 
-    expect(Math.floor(s2.facet.vScrollBar.getBBox().x)).toEqual(195);
+    expect(Math.floor(s2.facet.vScrollBar.getBBox().x)).toEqual(201);
 
     s2.setOptions({
       interaction: {

diff --git a/packages/s2-core/__tests__/unit/facet/layout/col-node-width-spec.ts b/packages/s2-core/__tests__/unit/facet/layout/col-node-width-spec.ts
@@ -80,7 +80,7 @@ describe('Col width Test', () => {
 
       // 无 formatter
 
-      expect(Math.round(s2.facet.getColLeafNodes()[0].width)).toBe(78);
+      expect(Math.round(s2.facet.getColLeafNodes()[0].width)).toBe(80);
     });
 
     test('get correct width in layoutWidthType compact mode when apply formatter', async () => {
@@ -103,7 +103,7 @@ describe('Col width Test', () => {
 
       // 有formatter
 
-      expect(Math.round(s2.facet.getColLeafNodes()[0].width)).toBe(62);
+      expect(Math.round(s2.facet.getColLeafNodes()[0].width)).toBe(64);
     });
   });
 
@@ -138,7 +138,7 @@ describe('Col width Test', () => {
       const colLeafNodes = s2.facet.getColLeafNodes();
 
       // price 列，列头标签比表身数据更长
-      expect(Math.round(colLeafNodes[0].width)).toBe(46);
+      expect(Math.round(colLeafNodes[0].width)).toBe(47);
       // cost 列，表身数据比列头更长（格式化）
       expect(Math.round(colLeafNodes[1].width)).toBe(168);
     });

diff --git a/packages/s2-core/__tests__/unit/facet/table-facet-spec.ts b/packages/s2-core/__tests__/unit/facet/table-facet-spec.ts
@@ -281,16 +281,16 @@ describe('Table Mode Facet Test With Compact Layout', () => {
     );
 
     test('col hierarchy coordinate with compact layout', () => {
-      const COMPACT_WIDTH = [73, 73, 73, 73, 73];
+      const COMPACT_WIDTH = 74;
 
       let lastX = 0;
 
-      facet.getColLeafNodes().forEach((node, index) => {
+      facet.getColLeafNodes().forEach((node) => {
         expect(node.y).toBe(0);
         expect(node.x).toBe(lastX);
-        expect(Math.floor(node.width)).toEqual(COMPACT_WIDTH[index]);
+        expect(Math.floor(node.width)).toEqual(COMPACT_WIDTH);
         expect(node.height).toBe(s2.options!.style!.colCell!.height);
-        lastX += COMPACT_WIDTH[index];
+        lastX += COMPACT_WIDTH;
       });
     });
   });
@@ -334,7 +334,7 @@ describe('Table Mode Facet Test With Compact Layout', () => {
     const { colCell } = s2.options.style!;
 
     test('col hierarchy coordinate with compact layout with seriesNumber', () => {
-      const COMPACT_WIDTH = [80, 73, 73, 73, 73, 73];
+      const COMPACT_WIDTH = [80, 74, 74, 74, 74, 74];
 
       let lastX = 0;
 

diff --git a/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap b/packages/s2-core/__tests__/unit/utils/__snapshots__/merge-spec.ts.snap
@@ -47,7 +47,7 @@ Object {
       "colResizeType": "current",
       "cornerCellHorizontal": true,
       "minCellHeight": 20,
-      "minCellWidth": 20,
+      "minCellWidth": 40,
       "rowCellVertical": true,
       "rowResizeType": "current",
     },

diff --git a/packages/s2-core/src/common/constant/resize.ts b/packages/s2-core/src/common/constant/resize.ts
@@ -1,7 +1,7 @@
 export const RESIZE_START_GUIDE_LINE_ID = 'RESIZE_START_GUIDE_LINE';
 export const RESIZE_END_GUIDE_LINE_ID = 'RESIZE_END_GUIDE_LINE';
 export const RESIZE_MASK_ID = 'RESIZE_MASK';
-export const RESIZE_MIN_CELL_WIDTH = 20;
+export const RESIZE_MIN_CELL_WIDTH = 40;
 export const RESIZE_MIN_CELL_HEIGHT = 20;
 
 // resize 时鼠标移动方向类型

diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts
@@ -76,6 +76,7 @@ import type {
   S2CellType,
   ScrollChangeParams,
   ScrollOffsetConfig,
+  SimpleData,
   ViewMeta,
 } from '../common/interface';
 import type {
@@ -2289,4 +2290,16 @@ export abstract class BaseFacet {
   public clearInitColLeafNodes() {
     this.spreadsheet.store.set('initColLeafNodes', undefined);
   }
+
+  /**
+   * @tip 和 this.spreadsheet.measureTextWidth() 的区别在于:
+   * 1. 额外添加一像素余量，防止 maxLabel 有多个同样长度情况下，一些 label 不能展示完全, 出现省略号
+   * 2. 测量时, 文本宽度向上取整, 避免子像素的不一致性
+   */
+  protected measureTextWidth(text: SimpleData, font: unknown): number {
+    const EXTRA_PIXEL = 1;
+    const defaultWidth = this.spreadsheet.measureTextWidth(text, font);
+
+    return Math.ceil(defaultWidth) + EXTRA_PIXEL;
+  }
 }
diff --git a/packages/s2-core/src/facet/pivot-facet.ts b/packages/s2-core/src/facet/pivot-facet.ts
@@ -651,8 +651,6 @@ export class PivotFacet extends FrozenFacet {
 
   /**
    * 计算 grid 模式下 node 宽度
-   * @param node
-   * @returns
    */
   private getGridRowNodesWidth(node: Node, colLeafNodes: Node[]): number {
     const { rowCell } = this.spreadsheet.options.style!;
@@ -679,8 +677,7 @@ export class PivotFacet extends FrozenFacet {
   }
 
   /**
-   *  计算树状模式等宽条件下的列宽
-   * @returns number
+   * 计算树状模式等宽条件下的列宽
    */
   private getAdaptTreeColWidth(
     col: Node,
@@ -784,7 +781,6 @@ export class PivotFacet extends FrozenFacet {
 
   /**
    * 计算树状结构行头宽度
-   * @returns number
    */
   private getTreeRowHeaderWidth(): number {
     const { rowCell } = this.spreadsheet.options.style!;
@@ -810,13 +806,12 @@ export class PivotFacet extends FrozenFacet {
      * 额外增加 1，当内容和容器宽度恰好相等时会出现换行
      */
     const maxLabelWidth =
-      this.spreadsheet.measureTextWidth(treeHeaderLabel, cornerCellTextStyle) +
+      this.measureTextWidth(treeHeaderLabel, cornerCellTextStyle) +
       cornerIconStyle.size * 2 +
       cornerIconStyle.margin?.left +
       cornerIconStyle.margin?.right +
       this.rowCellTheme.padding?.left +
-      this.rowCellTheme.padding?.right +
-      1;
+      this.rowCellTheme.padding?.right;
 
     const width = Math.max(
       customRowCellWidth ?? DEFAULT_TREE_ROW_CELL_WIDTH,
@@ -834,9 +829,6 @@ export class PivotFacet extends FrozenFacet {
    * | label - icon  | <- node
    * | label - icon  |
    * | label - icon  |
-   *
-   * @param node 目标节点
-   * @returns 宽度
    */
   private getCompactGridRowNodeWidth(node: Node): number {
     const {
@@ -869,7 +861,7 @@ export class PivotFacet extends FrozenFacet {
       );
     const maxLabel = maxBy(allLabels, (label) => `${label}`.length);
     const rowNodeWidth =
-      this.spreadsheet.measureTextWidth(maxLabel!, rowTextStyle) +
+      this.measureTextWidth(maxLabel!, rowTextStyle) +
       rowIconWidth +
       rowCellStyle!.padding!.left! +
       rowCellStyle!.padding!.right! +
@@ -883,7 +875,7 @@ export class PivotFacet extends FrozenFacet {
       cornerIconStyle!,
     );
     const fieldNameNodeWidth =
-      this.spreadsheet.measureTextWidth(fieldName, cornerTextStyle) +
+      this.measureTextWidth(fieldName, cornerTextStyle) +
       cornerIconWidth +
       cornerCellStyle!.padding!.left! +
       cornerCellStyle!.padding!.right!;
@@ -918,8 +910,7 @@ export class PivotFacet extends FrozenFacet {
       colIconStyle!,
     );
     const leafNodeWidth =
-      this.spreadsheet.measureTextWidth(leafNodeLabel, colCellTextStyle) +
-      colIconWidth;
+      this.measureTextWidth(leafNodeLabel, colCellTextStyle) + colIconWidth;
 
     // 采样 50 个 label，逐个计算找出最长的 label
     let maxDataLabel = '';
@@ -964,7 +955,7 @@ export class PivotFacet extends FrozenFacet {
               dataCellIconStyle?.margin?.left +
               dataCellIconStyle?.margin?.right
             : 0;
-          const cellLabelWidth = this.spreadsheet.measureTextWidth(
+          const cellLabelWidth = this.measureTextWidth(
             cellLabel as string,
             dataCellTextStyle,
           );
@@ -993,7 +984,7 @@ export class PivotFacet extends FrozenFacet {
     );
 
     // 取列头/数值字体最大的文本宽度: https://github.com/antvis/S2/issues/2385
-    const maxTextWidth = this.spreadsheet.measureTextWidth(maxLabel, {
+    const maxTextWidth = this.measureTextWidth(maxLabel, {
       ...colCellTextStyle,
       fontSize: Math.max(dataCellTextStyle.fontSize, colCellTextStyle.fontSize),
     });