fix: 修复配置了多行文本但实际渲染的文本未换行时, 单元格高度也会自适应调整的问题 (#2705)

* fix: 修复配置了多行文本但实际渲染的文本未换行时, 单元格高度也会自适应调整的问题 * test: 单测修复 * fix: 更新 G 到最新版, 修复拖拽无效的问题
antvis · May 11, 2024 · 5d19e62 · 5d19e62
1 parent 0af329d
commit 5d19e62
Show file tree

Hide file tree

Showing 11 changed files with 8,806 additions and 5,675 deletions.
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap
diff --git a/packages/s2-core/__tests__/spreadsheet/custom-facet-spec.ts b/packages/s2-core/__tests__/spreadsheet/custom-facet-spec.ts
@@ -40,7 +40,7 @@ describe('SpreadSheet Custom Facet Tests', () => {
   test('should render custom pivot facet', async () => {
     // @ts-ignore
     class CustomPivotFacet extends PivotFacet {
-      calculateColLeafNodesWidth() {
+      getColLeafNodesWidth() {
         return 200;
       }
     }
@@ -59,7 +59,7 @@ describe('SpreadSheet Custom Facet Tests', () => {
   test('should render custom table facet', async () => {
     // @ts-ignore
     class CustomTableFacet extends TableFacet {
-      calculateColLeafNodesWidth() {
+      getColLeafNodesWidth() {
         return 200;
       }
     }

diff --git a/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts b/packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts
@@ -385,7 +385,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
       updateStyle(3);
       await s2.render(false);
 
-      expectColHierarchyHeight(165, 112, 53);
+      expectColHierarchyHeight(149, 96, 53);
     });
 
     test('should render correctly layout if only enable grand totals', async () => {
@@ -441,7 +441,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
       matchCellStyleSnapshot();
 
       // 省份 4行文本, 叶子节点 (城市) 3行文本, 省份应该和城市高度一致, 才能展示所有文本 (maxLines: 4)
-      expectRowHierarchyHeight(568, 0, 72);
+      expectRowHierarchyHeight(384, 0, 72);
       expectColHierarchyHeight(212, 144, 68);
     });
 
@@ -472,7 +472,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
       await s2.render();
 
       matchCellStyleSnapshot();
-      expect(s2.facet.getLayoutResult().rowsHierarchy.height).toEqual(760);
+      expect(s2.facet.getLayoutResult().rowsHierarchy.height).toEqual(524);
     });
 
     // https://github.com/antvis/S2/issues/2678
@@ -518,6 +518,32 @@ describe('SpreadSheet Multi Line Text Tests', () => {
 
       matchCellStyleSnapshot();
     });
+
+    test('should use actual text height for large max line', async () => {
+      // 设置 20 行文本, 应该以实际的文本自适应高度
+      updateStyle(20);
+
+      s2.changeSheetSize(800, 600);
+      await s2.render();
+
+      matchCellStyleSnapshot();
+      expect(s2.facet.getLayoutResult().rowsHierarchy.height).toEqual(328);
+    });
+
+    test.each(range(1, 11))(
+      'should always render default cell height when set %s line, but actual text not wrap',
+      async (maxLines) => {
+        updateStyle(maxLines);
+
+        s2.changeSheetSize(800, 600);
+        s2.setDataCfg(SimpleDataCfg);
+        await s2.render();
+
+        // 不管设置了多少行的文本, 如果实际文本未换行, 高度不应该自适应, 以默认高度为准.
+        expectColHierarchyHeight(60, 30, 30, 2);
+        expectRowHierarchyHeight(60, 0, 30, 2);
+      },
+    );
   });
 
   describe('TableSheet', () => {
@@ -539,7 +565,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
     });
 
     afterEach(() => {
-      s2.destroy();
+      // s2.destroy();
     });
 
     test('should default render one line text', () => {
@@ -899,12 +925,32 @@ describe('SpreadSheet Multi Line Text Tests', () => {
       ).toBeTruthy();
     });
 
-    test.skip.each(range(1, 6))(
+    test('should use actual text height for large max line', async () => {
+      updateStyle(20);
+
+      s2.changeSheetSize(800, 600);
+      await s2.render();
+
+      matchCellStyleSnapshot();
+      expect(s2.facet.getLayoutResult().colsHierarchy.height).toEqual(56);
+    });
+
+    test.each(range(1, 11))(
       'should always render default cell height when set %s line, but actual text not wrap',
       async (maxLines) => {
         updateStyle(maxLines);
 
-        s2.setDataCfg(SimpleDataCfg);
+        s2.setDataCfg(
+          {
+            ...SimpleDataCfg,
+            fields: {
+              rows: [],
+              columns: ['province', 'city', 'type', 'price', 'cost'],
+              values: [],
+            },
+          },
+          true,
+        );
         await s2.render();
 
         expectColHierarchyHeight(30, 0, 30, 1);

diff --git a/packages/s2-core/package.json b/packages/s2-core/package.json
@@ -61,10 +61,10 @@
     "tsc": "tsc --noEmit"
   },
   "dependencies": {
-    "@antv/g-lite": "^2.0.0",
+    "@antv/g-lite": "^2.0.4",
     "@antv/event-emitter": "^0.1.3",
-    "@antv/g": "^6.0.2",
-    "@antv/g-canvas": "^2.0.0",
+    "@antv/g": "^6.0.5",
+    "@antv/g-canvas": "^2.0.4",
     "d3-ease": "^3.0.1",
     "d3-interpolate": "^1.3.2",
     "d3-timer": "^1.0.9",

diff --git a/packages/s2-core/src/cell/base-cell.ts b/packages/s2-core/src/cell/base-cell.ts
@@ -284,7 +284,11 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
    * 是否是多行文本
    */
   public isMultiLineText() {
-    return this.getTextLineBoundingRects().length > 1;
+    const { parsedStyle } = this.getTextShape();
+
+    return (
+      parsedStyle?.maxLines! > 1 && this.getTextLineBoundingRects().length > 1
+    );
   }
 
   /**

diff --git a/packages/s2-core/src/facet/base-facet.ts b/packages/s2-core/src/facet/base-facet.ts
@@ -341,14 +341,14 @@ export abstract class BaseFacet {
       return height;
     }
 
+    const defaultHeight = this.getDefaultColNodeHeight(colNode, colsHierarchy);
     const CellInstance = this.spreadsheet.isTableMode()
       ? TableColCell
       : ColCell;
 
     const colCell = new CellInstance(colNode, this.spreadsheet, {
       shallowRender: true,
     });
-    const defaultHeight = this.getDefaultColNodeHeight(colNode, colsHierarchy);
 
     return this.getCellAdaptiveHeight(colCell, defaultHeight);
   }
@@ -387,11 +387,10 @@ export abstract class BaseFacet {
 
     cell.drawTextShape();
 
-    const { parsedStyle } = cell.getTextShape();
     const textHeight = cell.getActualTextHeight();
     const adaptiveHeight = textHeight + padding.top + padding.bottom;
 
-    return parsedStyle?.maxLines! > 1 && textHeight >= defaultHeight
+    return cell.isMultiLineText() && textHeight >= defaultHeight
       ? adaptiveHeight
       : defaultHeight;
   }
@@ -1758,7 +1757,7 @@ export abstract class BaseFacet {
    * |  自定义节点 b-1  |  自定义节点 b-1-1 |  指标 1    |
    * -------------------------------------------------
    */
-  public adjustRowLeafNodesWidth(params: AdjustLeafNodesParams) {
+  public adjustCustomRowLeafNodesWidth(params: AdjustLeafNodesParams) {
     if (!this.spreadsheet.isCustomRowFields()) {
       return;
     }
@@ -1776,7 +1775,7 @@ export abstract class BaseFacet {
    * |   指标 1    |  自定义节点 a-1-1-1    | 指标 2  |                        |
    * ----------------------------------------------------------------------
    */
-  public adjustColLeafNodesHeight(params: AdjustLeafNodesParams) {
+  public adjustCustomColLeafNodesHeight(params: AdjustLeafNodesParams) {
     if (!this.spreadsheet.isCustomColumnFields()) {
       return;
     }