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

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

* docs: 修改contributing.md

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