fix(cell): border width issue (#859)

* fix: data cell border

* fix: data cell border issue

* feat: update test spec

* refactor: border draw call into one method

* refactor: series number node border

* fix: tree hierachy border

* refactor: combine border draw call

* feat: replace cell border

* feat: replace cell border

* feat: replace cell border

packages/s2-core/__tests__/spreadsheet/table-sheet-spec.ts

@@ -73,12 +73,18 @@ const options: S2Options = {
     enableCopy: true,
     hoverHighlight: false,
     linkFields: ['order_id', 'customer_name'],
+    hiddenColumnFields: ['order_date'],
   },
   frozenRowCount: 2,
   frozenColCount: 1,
   frozenTrailingColCount: 1,
   frozenTrailingRowCount: 1,
   showDefaultHeaderActionIcon: true,
+  tooltip: {
+    operation: {
+      hiddenColumns: true,
+    },
+  },
 };
 
 describe('TableSheet normal spec', () => {

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

@@ -1,10 +1,12 @@
+import { CellBorderPosition, CellTheme } from 'src/common/interface';
 import { SimpleBBox } from '@antv/g-canvas';
 import { AreaRange } from '@/common/interface/scroll';
 import {
   getContentArea,
   getMaxTextWidth,
   getTextAndFollowingIconPosition,
   getTextAndIconPositionWhenHorizontalScrolling,
+  getBorderPositionAndStyle,
 } from '@/utils/cell/cell';
 
 describe('Cell Content Test', () => {
@@ -488,4 +490,72 @@ describe('Horizontal Scrolling Text Position Test', () => {
       ),
     ).toEqual(50);
   });
+
+  test('should get border position', () => {
+    const contentBox = {
+      x: 0,
+      y: 0,
+      width: 200,
+      height: 50,
+    };
+    const style = {
+      verticalBorderColorOpacity: 1,
+      verticalBorderColor: '#000',
+      verticalBorderWidth: 2,
+      horizontalBorderColor: '#000',
+      horizontalBorderColorOpacity: 1,
+      horizontalBorderWidth: 2,
+    };
+    expect(
+      getBorderPositionAndStyle(
+        CellBorderPosition.LEFT,
+        contentBox,
+        style as CellTheme,
+      ).position,
+    ).toEqual({
+      x1: 1,
+      y1: 0,
+      x2: 1,
+      y2: 50,
+    });
+
+    expect(
+      getBorderPositionAndStyle(
+        CellBorderPosition.RIGHT,
+        contentBox,
+        style as CellTheme,
+      ).position,
+    ).toEqual({
+      x1: 199,
+      y1: 0,
+      x2: 199,
+      y2: 50,
+    });
+
+    expect(
+      getBorderPositionAndStyle(
+        CellBorderPosition.TOP,
+        contentBox,
+        style as CellTheme,
+      ).position,
+    ).toEqual({
+      x1: 0,
+      y1: 1,
+      x2: 200,
+      y2: 1,
+    });
+
+    expect(
+      getBorderPositionAndStyle(
+        CellBorderPosition.BOTTOM,
+        contentBox,
+        style as CellTheme,
+      ).position,
+    ).toEqual({
+      x1: 0,
+      y1: 49,
+      x2: 200,
+      y2: 49,
+    });
+  });
 });

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

@@ -248,8 +248,8 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
         ) {
           if (isNumber(style)) {
             const marginStyle = {
-              x: Math.ceil(x + style / 2), // TODO: 边框整体重构后需revisit
-              y: Math.ceil(y + style / 2),
+              x: x + style / 2, // TODO: 边框整体重构后需revisit
+              y: y + style / 2,
               width: width - style - 1,
               height: height - style - 1,
             };

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

@@ -1,4 +1,4 @@
-import { Point } from '@antv/g-canvas';
+import { Point, SimpleBBox } from '@antv/g-canvas';
 import { shouldAddResizeArea } from './../utils/interaction/resize';
 import { HeaderCell } from './header-cell';
 import {
@@ -13,6 +13,7 @@ import {
   ResizeAreaEffect,
 } from '@/common/constant';
 import {
+  CellBorderPosition,
   FormatResult,
   TextAlign,
   TextBaseline,
@@ -24,6 +25,7 @@ import { AreaRange } from '@/common/interface/scroll';
 import {
   getTextAndIconPositionWhenHorizontalScrolling,
   getTextAndFollowingIconPosition,
+  getBorderPositionAndStyle,
 } from '@/utils/cell/cell';
 
 export class ColCell extends HeaderCell {
@@ -45,19 +47,18 @@ export class ColCell extends HeaderCell {
     this.drawTextShape();
     // draw action icons
     this.drawActionIcons();
-    // draw right border
-    this.drawRightBorder();
+    // draw borders
+    this.drawBorders();
     // draw resize ares
     this.drawResizeArea();
     this.update();
   }
 
   protected drawBackgroundShape() {
-    const { backgroundColor, horizontalBorderColor } = this.getStyle().cell;
+    const { backgroundColor } = this.getStyle().cell;
     this.backgroundShape = renderRect(this, {
       ...this.getCellArea(),
       fill: backgroundColor,
-      stroke: horizontalBorderColor,
     });
   }
 
@@ -302,24 +303,27 @@ export class ColCell extends HeaderCell {
     this.drawVerticalResizeArea();
   }
 
-  private drawRightBorder() {
-    if (!this.meta.isLeaf) {
-      const { height, viewportHeight } = this.headerConfig;
-      const { x, y, width: cellWidth, height: cellHeight } = this.meta;
-
-      renderLine(
-        this,
-        {
-          x1: x + cellWidth,
-          y1: y + cellHeight,
-          x2: x + cellWidth,
-          y2: y + height + viewportHeight,
-        },
-        {
-          stroke: this.theme.colCell.cell.horizontalBorderColor,
-          lineWidth: 1,
-        },
-      );
-    }
+  protected drawHorizontalBorder() {
+    const { position, style } = getBorderPositionAndStyle(
+      CellBorderPosition.TOP,
+      this.meta as SimpleBBox,
+      this.theme.colCell.cell,
+    );
+
+    renderLine(this, position, style);
+  }
+
+  protected drawVerticalBorder() {
+    const { position, style } = getBorderPositionAndStyle(
+      CellBorderPosition.RIGHT,
+      this.meta as SimpleBBox,
+      this.theme.colCell.cell,
+    );
+    renderLine(this, position, style);
+  }
+
+  protected drawBorders() {
+    this.drawHorizontalBorder();
+    this.drawVerticalBorder();
   }
 }

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

@@ -15,9 +15,17 @@ import {
   ResizeDirectionType,
   S2Event,
 } from '@/common/constant';
-import { FormatResult, TextTheme } from '@/common/interface';
+import {
+  CellBorderPosition,
+  FormatResult,
+  TextTheme,
+} from '@/common/interface';
 import { CornerHeaderConfig } from '@/facet/header/corner';
-import { getTextPosition, getVerticalPosition } from '@/utils/cell/cell';
+import {
+  getTextPosition,
+  getVerticalPosition,
+  getBorderPositionAndStyle,
+} from '@/utils/cell/cell';
 import {
   renderLine,
   renderRect,
@@ -187,46 +195,14 @@ export class CornerCell extends HeaderCell {
    * @private
    */
   protected drawBorderShape() {
-    const { x, y, width, height } = this.getCellArea();
-    const {
-      horizontalBorderColor,
-      horizontalBorderWidth,
-      horizontalBorderColorOpacity,
-      verticalBorderColor,
-      verticalBorderWidth,
-      verticalBorderColorOpacity,
-    } = this.getStyle().cell;
-
-    // horizontal border
-    renderLine(
-      this,
-      {
-        x1: x,
-        y1: y,
-        x2: x + width,
-        y2: y,
-      },
-      {
-        stroke: horizontalBorderColor,
-        lineWidth: horizontalBorderWidth,
-        opacity: horizontalBorderColorOpacity,
-      },
-    );
-    // vertical border
-    renderLine(
-      this,
-      {
-        x1: x + width,
-        y1: y,
-        x2: x + width,
-        y2: y + height,
-      },
-      {
-        stroke: verticalBorderColor,
-        lineWidth: verticalBorderWidth,
-        opacity: verticalBorderColorOpacity,
-      },
-    );
+    [CellBorderPosition.TOP, CellBorderPosition.LEFT].forEach((type) => {
+      const { position, style } = getBorderPositionAndStyle(
+        type,
+        this.getCellArea(),
+        this.getStyle().cell,
+      );
+      renderLine(this, position, style);
+    });
   }
 
   private isLastRowCornerCell() {

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

@@ -20,8 +20,9 @@ import {
   TextTheme,
   ViewMeta,
   ViewMetaIndexType,
+  CellBorderPosition,
 } from '@/common/interface';
-import { getMaxTextWidth } from '@/utils/cell/cell';
+import { getMaxTextWidth, getBorderPositionAndStyle } from '@/utils/cell/cell';
 import { includeCell } from '@/utils/cell/data-cell';
 import { getIconPositionCfg } from '@/utils/condition/condition';
 import {
@@ -406,47 +407,15 @@ export class DataCell extends BaseCell<ViewMeta> {
    * @private
    */
   protected drawBorderShape() {
-    const { x, y, height, width } = this.getCellArea();
-    const {
-      horizontalBorderColor,
-      horizontalBorderWidth,
-      horizontalBorderColorOpacity,
-      verticalBorderColor,
-      verticalBorderWidth,
-      verticalBorderColorOpacity,
-    } = this.getStyle().cell;
-
-    // horizontal border
-    renderLine(
-      this,
-      {
-        x1: x,
-        y1: y + height,
-        x2: x + width,
-        y2: y + height,
-      },
-      {
-        stroke: horizontalBorderColor,
-        lineWidth: horizontalBorderWidth,
-        opacity: horizontalBorderColorOpacity,
-      },
-    );
+    [CellBorderPosition.BOTTOM, CellBorderPosition.RIGHT].forEach((type) => {
+      const { position, style } = getBorderPositionAndStyle(
+        type,
+        this.getCellArea(),
+        this.getStyle().cell,
+      );
 
-    // vertical border
-    renderLine(
-      this,
-      {
-        x1: x + width,
-        y1: y,
-        x2: x + width,
-        y2: y + height,
-      },
-      {
-        stroke: verticalBorderColor,
-        lineWidth: verticalBorderWidth,
-        opacity: verticalBorderColorOpacity,
-      },
-    );
+      renderLine(this, position, style);
+    });
   }
 
   /**
@@ -505,4 +474,13 @@ export class DataCell extends BaseCell<ViewMeta> {
       1,
     );
   }
+
+  protected drawLeftBorder() {
+    const { position, style } = getBorderPositionAndStyle(
+      CellBorderPosition.LEFT,
+      this.getCellArea(),
+      this.getStyle().cell,
+    );
+    renderLine(this, position, style);
+  }
 }