fix: 修复分割线在深色背景下颜色渲染异常 & 内容宽高未包含分割线的问题

packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap

@@ -563,13 +563,17 @@ Object {
   },
   "splitLine": Object {
     "borderDash": Array [],
+    "horizontalBorderColor": "#3471F9",
+    "horizontalBorderColorOpacity": 0.2,
     "horizontalBorderWidth": 2,
     "shadowColors": Object {
       "left": "rgba(0,0,0,0.1)",
       "right": "rgba(0,0,0,0)",
     },
     "shadowWidth": 8,
     "showShadow": true,
+    "verticalBorderColor": "#5286FA",
+    "verticalBorderColorOpacity": 0.25,
     "verticalBorderWidth": 2,
   },
 }
@@ -1138,13 +1142,17 @@ Object {
   },
   "splitLine": Object {
     "borderDash": Array [],
+    "horizontalBorderColor": "#7899ff",
+    "horizontalBorderColorOpacity": 0.2,
     "horizontalBorderWidth": 2,
     "shadowColors": Object {
       "left": "rgba(0,0,0,0.1)",
       "right": "rgba(0,0,0,0)",
     },
     "shadowWidth": 8,
     "showShadow": true,
+    "verticalBorderColor": "#7899ff",
+    "verticalBorderColorOpacity": 0.25,
     "verticalBorderWidth": 2,
   },
 }
@@ -1713,13 +1721,17 @@ Object {
   },
   "splitLine": Object {
     "borderDash": Array [],
+    "horizontalBorderColor": "#326EF4",
+    "horizontalBorderColorOpacity": 0.2,
     "horizontalBorderWidth": 2,
     "shadowColors": Object {
       "left": "rgba(0,0,0,0.1)",
       "right": "rgba(0,0,0,0)",
     },
     "shadowWidth": 8,
     "showShadow": true,
+    "verticalBorderColor": "#326EF4",
+    "verticalBorderColorOpacity": 0.25,
     "verticalBorderWidth": 2,
   },
 }
@@ -2288,13 +2300,17 @@ Object {
   },
   "splitLine": Object {
     "borderDash": Array [],
+    "horizontalBorderColor": "#BAC1CC",
+    "horizontalBorderColorOpacity": 0.2,
     "horizontalBorderWidth": 2,
     "shadowColors": Object {
       "left": "rgba(0,0,0,0.1)",
       "right": "rgba(0,0,0,0)",
     },
     "shadowWidth": 8,
     "showShadow": true,
+    "verticalBorderColor": "#BAC1CC",
+    "verticalBorderColorOpacity": 0.25,
     "verticalBorderWidth": 2,
   },
 }
@@ -2863,13 +2879,17 @@ Object {
   },
   "splitLine": Object {
     "borderDash": Array [],
+    "horizontalBorderColor": "#326EF4",
+    "horizontalBorderColorOpacity": 0.2,
     "horizontalBorderWidth": 2,
     "shadowColors": Object {
       "left": "rgba(0,0,0,0.1)",
       "right": "rgba(0,0,0,0)",
     },
     "shadowWidth": 8,
     "showShadow": true,
+    "verticalBorderColor": "#326EF4",
+    "verticalBorderColorOpacity": 0.25,
     "verticalBorderWidth": 2,
   },
 }
@@ -3438,13 +3458,17 @@ Object {
   },
   "splitLine": Object {
     "borderDash": Array [],
+    "horizontalBorderColor": "#326EF4",
+    "horizontalBorderColorOpacity": 0.2,
     "horizontalBorderWidth": 2,
     "shadowColors": Object {
       "left": "rgba(0,0,0,0.1)",
       "right": "rgba(0,0,0,0)",
     },
     "shadowWidth": 8,
     "showShadow": true,
+    "verticalBorderColor": "#326EF4",
+    "verticalBorderColorOpacity": 0.25,
     "verticalBorderWidth": 2,
   },
 }

packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts

@@ -629,11 +629,11 @@ describe('PivotSheet Tests', () => {
   });
 
   test('should get content height', () => {
-    expect(s2.facet.getContentHeight()).toEqual(120);
+    expect(s2.facet.getContentHeight()).toEqual(122);
   });
 
   test('should get content width', () => {
-    expect(s2.facet.getContentWidth()).toEqual(384);
+    expect(s2.facet.getContentWidth()).toEqual(386);
   });
 
   test('should get layout width type', () => {

packages/s2-core/__tests__/unit/sheet-type/table-sheet-spec.ts

@@ -297,7 +297,7 @@ describe('TableSheet Tests', () => {
   });
 
   test('should get content height', () => {
-    expect(s2.facet.getContentHeight()).toEqual(120);
+    expect(s2.facet.getContentHeight()).toEqual(122);
   });
 
   test('should get content width', () => {

packages/s2-core/src/common/interface/theme.ts

@@ -283,6 +283,7 @@ export interface SplitLine {
     /** 线性变化右侧颜色 */
     right: string;
   };
+
   /** 分割线虚线 */
   borderDash?: LineStyleProps['lineDash'];
 }

packages/s2-core/src/facet/bbox/panel-bbox.ts

@@ -17,7 +17,6 @@ export class PanelBBox extends BaseBBox {
     this.x = cornerPosition.x + Frame.getVerticalBorderWidth(this.spreadsheet);
     this.y =
       cornerPosition.y + Frame.getHorizontalBorderWidth(this.spreadsheet);
-
     this.minX = this.x;
     this.minY = this.y;
 

packages/s2-core/src/facet/header/frame.ts

@@ -90,50 +90,73 @@ export class Frame extends Group {
   private addCornerRightBorder() {
     const { cornerWidth, cornerHeight, viewportHeight, position, spreadsheet } =
       this.cfg;
-    const {
-      verticalBorderColor,
-      verticalBorderColorOpacity,
-      horizontalBorderWidth,
-    } = spreadsheet.theme?.splitLine!;
-
+    const { verticalBorderColor, verticalBorderColorOpacity } =
+      spreadsheet.theme?.splitLine!;
     const frameVerticalWidth = Frame.getVerticalBorderWidth(spreadsheet);
+    const frameHorizontalWidth = Frame.getHorizontalBorderWidth(spreadsheet);
     const x = position.x + cornerWidth + frameVerticalWidth! / 2;
 
     // 表头和表身的单元格背景色不同, 分割线不能一条线拉通, 不然视觉不协调.
     // 分两条线绘制, 默认和分割线所在区域对应的单元格边框颜色保持一致
     const {
       verticalBorderColor: headerVerticalBorderColor,
       verticalBorderColorOpacity: headerVerticalBorderColorOpacity,
-    } =
-      spreadsheet.options.seriesNumber?.enable || spreadsheet.isPivotMode()
-        ? spreadsheet.theme.cornerCell!.cell!
-        : spreadsheet.theme.colCell!.cell!;
+      backgroundColor,
+      backgroundColorOpacity,
+    } = spreadsheet.options.seriesNumber?.enable || spreadsheet.isPivotMode()
+      ? spreadsheet.theme.cornerCell!.cell!
+      : spreadsheet.theme.colCell!.cell!;
 
-    renderLine(this, {
-      x1: x,
-      y1: position.y,
-      x2: x,
-      y2: position.y + cornerHeight,
-      stroke: verticalBorderColor || headerVerticalBorderColor,
-      lineWidth: frameVerticalWidth,
-      strokeOpacity:
-        verticalBorderColorOpacity || headerVerticalBorderColorOpacity,
+    /**
+     * G 6.0 颜色混合模式有调整, 相同颜色的 Line 在不同背景色绘制, 实际渲染的颜色会不一致
+     * 在绘制分割线前, 先填充一个和单元格相同的底色, 保证分割线和单元格边框表现一致
+     */
+    [
+      { stroke: backgroundColor, strokeOpacity: backgroundColorOpacity },
+      {
+        stroke: verticalBorderColor || headerVerticalBorderColor,
+        strokeOpacity:
+          verticalBorderColorOpacity || headerVerticalBorderColorOpacity,
+      },
+    ].forEach(({ stroke, strokeOpacity }) => {
+      renderLine(this, {
+        x1: x,
+        y1: position.y,
+        x2: x,
+        y2: position.y + cornerHeight,
+        lineWidth: frameVerticalWidth,
+        stroke,
+        strokeOpacity,
+      });
     });
 
     const {
       verticalBorderColor: cellVerticalBorderColor,
       verticalBorderColorOpacity: cellVerticalBorderColorOpacity,
+      backgroundColor: cellBackgroundColor,
+      backgroundColorOpacity: cellBackgroundColorOpacity,
     } = spreadsheet.theme.dataCell!.cell!;
 
-    renderLine(this, {
-      x1: x,
-      y1: position.y + cornerHeight + horizontalBorderWidth!,
-      x2: x,
-      y2: position.y + cornerHeight + horizontalBorderWidth! + viewportHeight,
-      stroke: verticalBorderColor || cellVerticalBorderColor,
-      lineWidth: frameVerticalWidth,
-      strokeOpacity:
-        verticalBorderColorOpacity || cellVerticalBorderColorOpacity,
+    [
+      {
+        stroke: cellBackgroundColor,
+        strokeOpacity: cellBackgroundColorOpacity,
+      },
+      {
+        stroke: verticalBorderColor || cellVerticalBorderColor,
+        strokeOpacity:
+          verticalBorderColorOpacity || cellVerticalBorderColorOpacity,
+      },
+    ].forEach(({ stroke, strokeOpacity }) => {
+      renderLine(this, {
+        x1: x,
+        y1: position.y + cornerHeight + frameHorizontalWidth!,
+        x2: x,
+        y2: position.y + cornerHeight + frameHorizontalWidth! + viewportHeight,
+        lineWidth: frameVerticalWidth,
+        stroke,
+        strokeOpacity,
+      });
     });
   }
 

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

@@ -1048,12 +1048,20 @@ export class PivotFacet extends FrozenFacet {
   public getContentWidth(): number {
     const { rowsHierarchy, colsHierarchy } = this.layoutResult;
 
-    return rowsHierarchy.width + colsHierarchy.width;
+    return (
+      rowsHierarchy.width +
+      colsHierarchy.width +
+      Frame.getVerticalBorderWidth(this.spreadsheet)
+    );
   }
 
   public getContentHeight(): number {
     const { rowsHierarchy, colsHierarchy } = this.layoutResult;
 
-    return rowsHierarchy.height + colsHierarchy.height;
+    return (
+      rowsHierarchy.height +
+      colsHierarchy.height +
+      Frame.getHorizontalBorderWidth(this.spreadsheet)
+    );
   }
 }

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

@@ -734,6 +734,10 @@ export class TableFacet extends FrozenFacet {
     const { getTotalHeight } = this.getViewCellHeights();
     const { colsHierarchy } = this.layoutResult;
 
-    return getTotalHeight() + colsHierarchy.height;
+    return (
+      getTotalHeight() +
+      colsHierarchy.height +
+      Frame.getHorizontalBorderWidth(this.spreadsheet)
+    );
   }
 }

packages/s2-core/src/theme/index.ts

@@ -497,7 +497,11 @@ export const getTheme = (
     },
     // ------------- split line -----------------
     splitLine: {
+      horizontalBorderColor: basicColors[12],
+      horizontalBorderColorOpacity: 0.2,
       horizontalBorderWidth: 2,
+      verticalBorderColor: basicColors[11],
+      verticalBorderColorOpacity: 0.25,
       verticalBorderWidth: 2,
       showShadow: true,
       shadowWidth: 8,