feat: 支持透视表明细表单元格虚线&分割线虚线(#2400)

CONTRIBUTING.md

@@ -38,7 +38,7 @@
 2. 安装依赖：`yarn bootstrap` 或者 `yarn`
 3. 提交你的改动，commit 请遵守 [AngularJS Git Commit Message Conventions](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#heading=h.uyo6cb12dt6w)
 4. 如果你的改动是修复 bug, 还可以在提交信息后面加上 `close #issue 号`, 这样可以在 pr 合并后，可以自动关闭对应的 issue, 比如 `fix: render bug close #123`
-5. 确保加上了对应的单元测试和文档 (如有必要)
+5. 确保加上了对应的单元测试和文档 (如果有 `Snapshot` UI 快照 (.snap 文件)更新, 可以运行 `yarn core:test -- -u` 和 `yarn react:test -- -u` 自动更新, 并一起提交上来, 请勿手动编辑)
 6. 所有 Lint 和 Test 检查通过后，并且 review 通过，我们会合并你的 pr.
 
 ![preview](https://gw.alipayobjects.com/zos/antfincdn/ssOxFrycD/86339514-5f9a-4101-8690-e47c97cd8af5.png)

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

@@ -19,6 +19,7 @@ Object {
     "cell": Object {
       "backgroundColor": "#E0E9FD",
       "backgroundColorOpacity": 1,
+      "borderDash": Array [],
       "horizontalBorderColor": "#CCDBFC",
       "horizontalBorderColorOpacity": 1,
       "horizontalBorderWidth": 1,
@@ -102,6 +103,7 @@ Object {
     "cell": Object {
       "backgroundColor": "#E0E9FD",
       "backgroundColorOpacity": 1,
+      "borderDash": Array [],
       "horizontalBorderColor": "#CCDBFC",
       "horizontalBorderColorOpacity": 1,
       "horizontalBorderWidth": 1,
@@ -147,6 +149,7 @@ Object {
     "cell": Object {
       "backgroundColor": "#FFFFFF",
       "backgroundColorOpacity": 1,
+      "borderDash": Array [],
       "crossBackgroundColor": "#F5F8FE",
       "horizontalBorderColor": "#E0E9FD",
       "horizontalBorderColorOpacity": 1,
@@ -273,6 +276,7 @@ Object {
     "cell": Object {
       "backgroundColor": "#FFFFFF",
       "backgroundColorOpacity": 1,
+      "borderDash": Array [],
       "crossBackgroundColor": "#F5F8FE",
       "horizontalBorderColor": "#E0E9FD",
       "horizontalBorderColorOpacity": 1,
@@ -420,6 +424,7 @@ Object {
     "cell": Object {
       "backgroundColor": "#F5F8FE",
       "backgroundColorOpacity": 1,
+      "borderDash": Array [],
       "horizontalBorderColor": "#E0E9FD",
       "horizontalBorderColorOpacity": 1,
       "horizontalBorderWidth": 1,
@@ -512,6 +517,7 @@ Object {
     "trackColor": "rgba(0,0,0,0.01)",
   },
   "splitLine": Object {
+    "borderDash": Array [],
     "horizontalBorderColor": "#326EF4",
     "horizontalBorderColorOpacity": 0.2,
     "horizontalBorderWidth": 2,

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

@@ -460,6 +460,7 @@ export class ColCell extends HeaderCell {
       horizontalBorderColor,
       horizontalBorderWidth,
       horizontalBorderColorOpacity,
+      borderDash,
     } = this.theme.splitLine;
     const lineX = this.isLastColumn() ? x + width - horizontalBorderWidth : x;
 
@@ -475,6 +476,7 @@ export class ColCell extends HeaderCell {
         stroke: horizontalBorderColor,
         lineWidth: horizontalBorderWidth,
         strokeOpacity: horizontalBorderColorOpacity,
+        lineDash: borderDash,
       },
     );
   }

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

@@ -139,6 +139,8 @@ export interface CellTheme {
   miniBarChartHeight?: number;
   /* @deprecated 已废弃， 请用 miniChartTheme.interval.fill 代替 */
   miniBarChartFillColor?: string;
+  /** 单元格边线虚线 */
+  borderDash?: number[];
 }
 
 export interface IconTheme {
@@ -214,6 +216,8 @@ export interface SplitLine {
     /* 线性变化右侧颜色 */
     right: string;
   };
+  /** 分割线虚线 */
+  borderDash?: number[];
 }
 export interface DefaultCellTheme extends GridAnalysisCellTheme {
   /* 粗体文本样式 */

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

@@ -65,6 +65,7 @@ export class Frame extends Group {
         stroke: splitLine.verticalBorderColor,
         lineWidth: splitLine.verticalBorderWidth,
         opacity: splitLine.verticalBorderColorOpacity,
+        lineDash: splitLine.borderDash,
       },
     });
   }
@@ -94,6 +95,7 @@ export class Frame extends Group {
         stroke: splitLine.horizontalBorderColor,
         lineWidth: splitLine.horizontalBorderWidth,
         opacity: splitLine.horizontalBorderColorOpacity,
+        lineDash: splitLine.borderDash,
       },
     });
   }

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

@@ -667,12 +667,14 @@ export class TableFacet extends BaseFacet {
       lineWidth: style?.verticalBorderWidth,
       stroke: style?.verticalBorderColor,
       opacity: style?.verticalBorderColorOpacity,
+      lineDash: style?.borderDash,
     };
 
     const horizontalBorderStyle = {
       lineWidth: style?.horizontalBorderWidth,
       stroke: style?.horizontalBorderColor,
       opacity: style?.horizontalBorderColorOpacity,
+      lineDash: style?.borderDash,
     };
 
     if (frozenColCount > 0) {

packages/s2-core/src/group/grid-group.ts

@@ -70,6 +70,7 @@ export class GridGroup extends Group {
           strokeOpacity: style.verticalBorderColorOpacity,
           lineWidth: verticalBorderWidth,
           lineCap: SQUARE_LINE_CAP,
+          lineDash: style.borderDash,
         },
       );
     });
@@ -90,6 +91,7 @@ export class GridGroup extends Group {
           strokeOpacity: style.horizontalBorderColorOpacity,
           lineWidth: horizontalBorderWidth,
           lineCap: SQUARE_LINE_CAP,
+          lineDash: style.borderDash,
         },
       );
     });

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

@@ -55,6 +55,8 @@ export const getTheme = (
         // ----------- border width --------------
         horizontalBorderWidth: 1,
         verticalBorderWidth: 1,
+        // -------------- border dash -----------------
+        borderDash: [],
         // -------------- layout -----------------
         padding: {
           top: 8,
@@ -198,6 +200,8 @@ export const getTheme = (
         // ----------- border width --------------
         horizontalBorderWidth: 1,
         verticalBorderWidth: 1,
+        // -------------- border dash -----------------
+        borderDash: [],
         // -------------- layout -----------------
         padding: {
           top: 0,
@@ -268,6 +272,8 @@ export const getTheme = (
         // ----------- bottom border width --------------
         horizontalBorderWidth: 1,
         verticalBorderWidth: 1,
+        // -------------- border dash -----------------
+        borderDash: [],
         // -------------- layout -----------------
         padding: {
           top: 0,
@@ -362,6 +368,8 @@ export const getTheme = (
         // ----------- border width --------------
         horizontalBorderWidth: 1,
         verticalBorderWidth: 1,
+        // -------------- border dash -----------------
+        borderDash: [],
         // -------------- layout -----------------
         padding: {
           top: 0,
@@ -461,6 +469,7 @@ export const getTheme = (
         left: 'rgba(0,0,0,0.1)',
         right: 'rgba(0,0,0,0)',
       },
+      borderDash: [],
     },
     // ------------- prepareSelectMask -----------------
     prepareSelectMask: {

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

@@ -266,6 +266,7 @@ export const getBorderPositionAndStyle = (
     verticalBorderWidth,
     verticalBorderColor,
     verticalBorderColorOpacity,
+    borderDash,
   } = style;
   let x1;
   let y1;
@@ -293,6 +294,7 @@ export const getBorderPositionAndStyle = (
       lineWidth: horizontalBorderWidth,
       stroke: horizontalBorderColor,
       strokeOpacity: horizontalBorderColorOpacity,
+      lineDash: borderDash,
     };
   }
 
@@ -315,6 +317,7 @@ export const getBorderPositionAndStyle = (
       lineWidth: verticalBorderWidth,
       stroke: verticalBorderColor,
       strokeOpacity: verticalBorderColorOpacity,
+      lineDash: borderDash,
     };
   }
 

s2-site/docs/api/general/S2Theme.en.md

@@ -132,6 +132,7 @@ Function description: Split line style
 | showShadow                   | Whether to display the outer shadow of the dividing line (in the case of frozen rows and columns) | `boolean`                         | `true`                                                |          |
 | shadowWidth                  | shadow width                                                                                      | `number`                          | 10                                                    |          |
 | shadowColors                 | `left` : change the left color linearly `right` : change the color of the right side linearly     | `{left: string,` `right: string}` | `{left: 'rgba(0,0,0,0.1)',` `right: 'rgba(0,0,0,0)'}` |          |
+| borderDash                 | Split line dash | `number[]` | `[]` |      |
 
 #### TextTheme
 
@@ -171,6 +172,7 @@ Function description: Cell general theme
 | interactionState             | cell interaction state                                                  | [InteractionStateTheme](#interactionstatetheme) | -        |          |
 | miniBarChartHeight           | In-Cell Conditional Formatting - Sparkline Bar Height                   | `number`                                        | 12       |          |
 | miniBarChartFillColor        | In-cell conditional formatting - default fill color for mini bar charts | `string`                                        | -        |          |
+| borderDash        | cell border dash | `number[]`                                        | `[]`      |      |
 
 #### IconTheme
 

s2-site/docs/api/general/S2Theme.zh.md

@@ -134,6 +134,7 @@ s2.setTheme({
 | showShadow                   | 分割线是否显示外阴影（行列冻结情况下）                    | `boolean`                              | `true`                                                   |      |
 | shadowWidth                  | 阴影宽度                                                  | `number`                               | 10                                                       |      |
 | 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[]` | `[]` |      |
 
 #### TextTheme
 
@@ -173,6 +174,7 @@ s2.setTheme({
 | interactionState             | 单元格交互态  ([查看默认配置](https://github.com/antvis/S2/blob/master/packages/s2-core/src/theme/index.ts#L66-L107)) ([示例](/zh/examples/interaction/basic#state-theme))                       |  Record<[InteractionStateName](#interactionstatename), [InteractionStateTheme](#interactionstatetheme)> | -      |      |
 | miniBarChartHeight           | 单元格内条件格式-迷你条形图高度         | `number`                                        | 12     |      |
 | miniBarChartFillColor        | 单元格内条件格式-迷你条形图默认填充颜色 | `string`                                        | -      |      |
+| borderDash        | 单元格边线虚线 | `number[]`                                        | `[]`      |      |
 
 #### IconTheme