Merge branch 'next' into fix-compact-condition-icon

antvis · Oct 11, 2024 · fac357b · fac357b
2 parents ad63a35 + 3f766d0
commit fac357b
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 97 deletions.
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap
@@ -563,17 +563,13 @@ 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,
   },
 }
@@ -1142,17 +1138,13 @@ 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,
   },
 }
@@ -1721,17 +1713,13 @@ 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,
   },
 }
@@ -2300,17 +2288,13 @@ 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,
   },
 }
@@ -2879,17 +2863,13 @@ 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,
   },
 }
@@ -3458,17 +3438,13 @@ 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,
   },
 }

diff --git a/packages/s2-core/src/facet/header/frame.ts b/packages/s2-core/src/facet/header/frame.ts
@@ -20,11 +20,11 @@ export class Frame extends Group {
   }
 
   public layout() {
-    // corner底部的横线条
+    // corner 底部的横线条
     this.addCornerBottomBorder();
-    // corner右边的竖线条
+    // corner 右边的竖线条
     this.addCornerRightBorder();
-    // 一级纵向分割线两侧的shadow
+    // 一级纵向分割线两侧的 shadow
     this.addSplitLineShadow();
   }
 
@@ -43,7 +43,6 @@ export class Frame extends Group {
   }
 
   public static getVerticalBorderWidth(spreadsheet: SpreadSheet): number {
-    // 交叉表一条竖线拉通即可
     const { splitLine, cornerCell, colCell, dataCell } = spreadsheet.theme;
 
     if (spreadsheet.isPivotMode()) {
@@ -89,7 +88,6 @@ export class Frame extends Group {
   }
 
   private addCornerRightBorder() {
-    // 交叉表一条竖线拉通即可
     const { cornerWidth, cornerHeight, viewportHeight, position, spreadsheet } =
       this.cfg;
     const {
@@ -101,39 +99,25 @@ export class Frame extends Group {
     const frameVerticalWidth = Frame.getVerticalBorderWidth(spreadsheet);
     const x = position.x + cornerWidth + frameVerticalWidth! / 2;
 
-    if (spreadsheet.isPivotMode()) {
-      const y2 =
-        position.y + cornerHeight + horizontalBorderWidth! + viewportHeight;
-
-      this.cornerRightBorder = renderLine(this, {
-        x1: x,
-        y1: position.y,
-        x2: x,
-        y2,
-        stroke: verticalBorderColor,
-        lineWidth: frameVerticalWidth,
-        strokeOpacity: verticalBorderColorOpacity,
-      });
-
-      return;
-    }
-
-    // 明细表需要区分头部的边框和明细格子的边框
+    // 表头和表身的单元格背景色不同, 分割线不能一条线拉通, 不然视觉不协调.
+    // 分两条线绘制, 默认和分割线所在区域对应的单元格边框颜色保持一致
     const {
       verticalBorderColor: headerVerticalBorderColor,
       verticalBorderColorOpacity: headerVerticalBorderColorOpacity,
-    } = spreadsheet.options.seriesNumber?.enable
-      ? spreadsheet.theme.cornerCell!.cell!
-      : spreadsheet.theme.colCell!.cell!;
+    } =
+      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: headerVerticalBorderColor,
+      stroke: verticalBorderColor || headerVerticalBorderColor,
       lineWidth: frameVerticalWidth,
-      strokeOpacity: headerVerticalBorderColorOpacity,
+      strokeOpacity:
+        verticalBorderColorOpacity || headerVerticalBorderColorOpacity,
     });
 
     const {
@@ -146,9 +130,10 @@ export class Frame extends Group {
       y1: position.y + cornerHeight + horizontalBorderWidth!,
       x2: x,
       y2: position.y + cornerHeight + horizontalBorderWidth! + viewportHeight,
-      stroke: cellVerticalBorderColor,
+      stroke: verticalBorderColor || cellVerticalBorderColor,
       lineWidth: frameVerticalWidth,
-      strokeOpacity: cellVerticalBorderColorOpacity,
+      strokeOpacity:
+        verticalBorderColorOpacity || cellVerticalBorderColorOpacity,
     });
   }
 
@@ -167,6 +152,15 @@ export class Frame extends Group {
       horizontalBorderWidth,
       horizontalBorderColorOpacity,
     } = spreadsheet.theme?.splitLine!;
+
+    const {
+      horizontalBorderColor: headerHorizontalBorderColor,
+      horizontalBorderColorOpacity: headerHorizontalBorderColorOpacity,
+    } =
+      spreadsheet.options.seriesNumber?.enable || spreadsheet.isPivotMode()
+        ? spreadsheet.theme.cornerCell!.cell!
+        : spreadsheet.theme.colCell!.cell!;
+
     const x1 = position.x;
     const x2 =
       x1 +
@@ -181,9 +175,10 @@ export class Frame extends Group {
       y1: y,
       x2,
       y2: y,
-      stroke: horizontalBorderColor,
+      stroke: horizontalBorderColor || headerHorizontalBorderColor,
       lineWidth: horizontalBorderWidth,
-      opacity: horizontalBorderColorOpacity,
+      opacity:
+        horizontalBorderColorOpacity || headerHorizontalBorderColorOpacity,
     });
   }
 
@@ -200,7 +195,6 @@ export class Frame extends Group {
       return;
     }
 
-    // do render...
     this.addSplitLineLeftShadow();
     this.addSplitLineRightShadow();
   }

diff --git a/packages/s2-core/src/theme/index.ts b/packages/s2-core/src/theme/index.ts
@@ -497,11 +497,7 @@ 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,

diff --git a/...-components/__tests__/unit/components/config/theme-panel/__snapshots__/utils-spec.ts.snap b/...-components/__tests__/unit/components/config/theme-panel/__snapshots__/utils-spec.ts.snap
@@ -563,7 +563,6 @@ Object {
   },
   "splitLine": Object {
     "borderDash": Array [],
-    "horizontalBorderColor": "#5184F6",
     "horizontalBorderColorOpacity": 1,
     "horizontalBorderWidth": 2,
     "shadowColors": Object {
@@ -572,7 +571,6 @@ Object {
     },
     "shadowWidth": 8,
     "showShadow": true,
-    "verticalBorderColor": "#5184F6",
     "verticalBorderColorOpacity": 1,
     "verticalBorderWidth": 2,
   },
@@ -1142,17 +1140,13 @@ 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": "#5184F6",
-    "verticalBorderColorOpacity": 0.25,
     "verticalBorderWidth": 2,
   },
 }
@@ -1721,17 +1715,13 @@ Object {
   },
   "splitLine": Object {
     "borderDash": Array [],
-    "horizontalBorderColor": "#396",
-    "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": "#52A87D",
-    "verticalBorderColorOpacity": 0.25,
     "verticalBorderWidth": 2,
   },
 }
@@ -2300,17 +2290,13 @@ 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,
   },
 }
@@ -2879,17 +2865,13 @@ 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": "#5184F6",
-    "verticalBorderColorOpacity": 0.25,
     "verticalBorderWidth": 2,
   },
 }
@@ -3458,17 +3440,13 @@ Object {
   },
   "splitLine": Object {
     "borderDash": Array [],
-    "horizontalBorderColor": "#B6C0D7",
-    "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": "#B6C0D7",
-    "verticalBorderColorOpacity": 0.25,
     "verticalBorderWidth": 2,
   },
 }
@@ -4038,17 +4016,13 @@ Object {
   },
   "splitLine": Object {
     "borderDash": Array [],
-    "horizontalBorderColor": "#326EF4",
-    "horizontalBorderColorOpacity": 0.2,
     "horizontalBorderWidth": 0,
     "shadowColors": Object {
       "left": "rgba(0,0,0,0.1)",
       "right": "rgba(0,0,0,0)",
     },
     "shadowWidth": 8,
     "showShadow": true,
-    "verticalBorderColor": "#5184F6",
-    "verticalBorderColorOpacity": 0.25,
     "verticalBorderWidth": 0,
   },
 }

diff --git a/packages/s2-react/playground/config.tsx b/packages/s2-react/playground/config.tsx
@@ -442,7 +442,7 @@ export const sliderOptions: SliderSingleProps = {
 };
 
 export const s2ThemeConfig: ThemeCfg = {
-  name: 'default',
+  name: 'colorful',
   theme: {},
 };
 

diff --git a/s2-site/docs/api/general/S2Theme.zh.md b/s2-site/docs/api/general/S2Theme.zh.md
@@ -114,13 +114,13 @@ s2.setTheme({
 | 参数                         | 说明                                                      | 类型                                   | 默认值                                                   | 必选 |
 | ---------------------------- | --------------------------------------------------------- | -------------------------------------- | -------------------------------------------------------- | ---- |
 | horizontalBorderColor        | 水平分割线颜色                                            | `string`                               | -                                                        |      |
-| horizontalBorderColorOpacity | 水平分割线颜色透明度                                      | `number`                               | 0.2                                                      |      |
+| horizontalBorderColorOpacity | 水平分割线颜色透明度                                      | `number`                               |  -                                                      |      |
 | horizontalBorderWidth        | 水平分割线宽度                                            | `number`                               | 2                                                        |      |
 | verticalBorderColor          | 垂直分割线颜色                                            | `string`                               | -                                                        |      |
-| verticalBorderColorOpacity   | 垂直分割线颜色透明度                                      | `number`                               | 0.25                                                     |      |
+| verticalBorderColorOpacity   | 垂直分割线颜色透明度                                      | `number`                               | -                                                    |      |
 | verticalBorderWidth          | 垂直分割线宽度                                            | `number`                               | 2                                                        |      |
 | showShadow                   | 分割线是否显示外阴影（行列冻结情况下）                    | `boolean`                              | `true`                                                   |      |
-| shadowWidth                  | 阴影宽度                                                  | `number`                               | 10                                                       |      |
+| shadowWidth                  | 阴影宽度                                                  | `number`                               | 8                                                       |      |
 | shadowColors                 | `left` : 线性变化左侧颜色 <br> `right` : 线性变化右侧颜色 | `{left: string,` <br> `right: string}` | `{left: 'rgba(0,0,0,0.1)',`<br>`right: 'rgba(0,0,0,0)'}` |      |
 | borderDash                 | 分割线虚线 | `number \| string \| (string \| number)[]` | `[]` |      |