fix: 修复单元格宽高为0时的无意义渲染 (#2024)

* fix: 修复单元格宽高为0时的无意义渲染

* fix: 修复 facet 处理过程中忽略 0 的情况

* test: 修复单测

* test: 添加宽高为 0 时的单元格测试

* refactor: 在 base cell 中应用 shouldInit

packages/s2-core/__tests__/unit/cell/col-cell-spec.ts

@@ -114,6 +114,8 @@ describe('Col Cell Tests', () => {
       label: 'label',
       fieldValue: 'fieldValue',
       value: 'value',
+      width: 100,
+      height: 10,
     } as unknown as Node;
 
     test('should get correct col cell formatter', () => {

packages/s2-core/__tests__/unit/cell/data-cell-spec.ts

@@ -27,6 +27,8 @@ describe('Data Cell Tests', () => {
       [VALUE_FIELD]: 'value',
       [EXTRA_FIELD]: 12,
     },
+    width: 100,
+    height: 100,
   } as unknown as ViewMeta;
 
   let s2: SpreadSheet;
@@ -95,6 +97,15 @@ describe('Data Cell Tests', () => {
       } as PivotFacet;
     });
 
+    test("shouldn't init when width or height is not positive", () => {
+      const dataCell = new DataCell({ ...meta, width: 0, height: 0 }, s2);
+      expect(dataCell.getTextShape()).toBeUndefined();
+      // @ts-ignore
+      expect(dataCell.backgroundShape).toBeUndefined();
+      // @ts-ignore
+      expect([...dataCell.stateShapes.keys()]).toBeEmpty();
+    });
+
     test('should get text shape', () => {
       const dataCell = new DataCell(meta, s2);
       expect(dataCell.getTextShapes()).toEqual([dataCell.getTextShape()]);
@@ -206,6 +217,7 @@ describe('Data Cell Tests', () => {
       const fieldValue = 27.334666666666667;
       const anotherMeta = {
         width: cellWidth,
+        height: 100,
         valueField: 'value',
         fieldValue,
         data: {

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

@@ -98,7 +98,9 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     this.theme = spreadsheet.theme;
     this.conditions = this.spreadsheet.options.conditions;
     this.handleRestOptions(...restOptions);
-    this.initCell();
+    if (this.shouldInit()) {
+      this.initCell();
+    }
   }
 
   public getMeta(): T {
@@ -177,6 +179,11 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
   /*                common functions that will be used in subtype               */
   /* -------------------------------------------------------------------------- */
 
+  protected shouldInit() {
+    const { width, height } = this.meta;
+    return width > 0 && height > 0;
+  }
+
   public getStyle<K extends keyof S2Theme = keyof CellThemes>(
     name?: K,
   ): DefaultCellTheme | S2Theme[K] {

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

@@ -152,7 +152,7 @@ export abstract class BaseFacet {
 
   protected getCellDraggedWidth(node: Node): number {
     const { colCfg } = this.cfg;
-    return get(colCfg?.widthByFieldValue, `${node.value}`, node.width);
+    return get(colCfg?.widthByFieldValue, `${node.value}`);
   }
 
   hideScrollBar = () => {

packages/s2-core/src/facet/pivot-facet.ts

@@ -4,7 +4,7 @@ import {
   get,
   isArray,
   isEmpty,
-  isNil,
+  isNumber,
   keys,
   last,
   map,
@@ -250,13 +250,13 @@ export class PivotFacet extends BaseFacet {
     const cellDraggedWidth = this.getCellDraggedWidth(col);
 
     // 1. 拖拽后的宽度优先级最高
-    if (cellDraggedWidth) {
+    if (isNumber(cellDraggedWidth)) {
       return cellDraggedWidth;
     }
 
     // 2. 其次是自定义, 返回 null 则使用默认宽度
     const cellCustomWidth = this.getCellCustomWidth(col, colCfg?.width);
-    if (!isNil(cellCustomWidth)) {
+    if (isNumber(cellCustomWidth)) {
       return cellCustomWidth;
     }
 
@@ -348,7 +348,7 @@ export class PivotFacet extends BaseFacet {
   private getColNodeHeight(col: Node) {
     const { colCfg } = this.cfg;
     const userDraggedHeight = get(colCfg, `heightByField.${col.key}`);
-    return userDraggedHeight || colCfg?.height;
+    return userDraggedHeight ?? colCfg?.height;
   }
 
   /**
@@ -612,12 +612,12 @@ export class PivotFacet extends BaseFacet {
 
     const cellDraggedWidth = get(rowCfg, `widthByField.${node.key}`);
 
-    if (cellDraggedWidth) {
+    if (isNumber(cellDraggedWidth)) {
       return cellDraggedWidth;
     }
 
     const cellCustomWidth = this.getCellCustomWidth(node, rowCfg?.width);
-    if (!isNil(cellCustomWidth)) {
+    if (isNumber(cellCustomWidth)) {
       return cellCustomWidth;
     }
 

packages/s2-core/src/facet/table-facet.ts

@@ -1,5 +1,14 @@
 import type { Group, IElement, IGroup } from '@antv/g-canvas';
-import { get, isBoolean, isNil, last, maxBy, set, values } from 'lodash';
+import {
+  get,
+  isBoolean,
+  isNil,
+  isNumber,
+  last,
+  maxBy,
+  set,
+  values,
+} from 'lodash';
 import { TableDataCell } from '../cell';
 import {
   FRONT_GROUND_GROUP_COL_FROZEN_Z_INDEX,
@@ -309,7 +318,7 @@ export class TableFacet extends BaseFacet {
       levelSample.height = this.getColNodeHeight(levelSample);
       colsHierarchy.height += levelSample.height;
     }
-    const adaptiveColWitdth = this.getAdaptiveColWidth(colLeafNodes);
+    const adaptiveColWidth = this.getAdaptiveColWidth(colLeafNodes);
     let currentCollIndex = 0;
 
     for (let i = 0; i < allNodes.length; i++) {
@@ -320,7 +329,7 @@ export class TableFacet extends BaseFacet {
         currentNode.x = preLeafNode.x + preLeafNode.width;
         currentNode.width = this.calculateColLeafNodesWidth(
           currentNode,
-          adaptiveColWitdth,
+          adaptiveColWidth,
         );
         layoutCoordinate(this.cfg, null, currentNode);
         colsHierarchy.width += currentNode.width;
@@ -394,13 +403,13 @@ export class TableFacet extends BaseFacet {
     const cellDraggedWidth = this.getCellDraggedWidth(col);
 
     // 1. 拖拽后的宽度优先级最高
-    if (cellDraggedWidth) {
+    if (isNumber(cellDraggedWidth)) {
       return cellDraggedWidth;
     }
 
     // 2. 其次是自定义, 返回 null 则使用默认宽度
     const cellCustomWidth = this.getCellCustomWidth(col, colCfg?.width);
-    if (!isNil(cellCustomWidth)) {
+    if (isNumber(cellCustomWidth)) {
       return cellCustomWidth;
     }
 
@@ -471,7 +480,7 @@ export class TableFacet extends BaseFacet {
       );
 
       const customHeight = heightByField?.[String(index)];
-      if (customHeight) {
+      if (isNumber(customHeight)) {
         return customHeight;
       }
     }