From 432c0c766e993b2124f3cc372c0d4776fed690d1 Mon Sep 17 00:00:00 2001 From: Aimer <44153856+aimerthyr@users.noreply.github.com> Date: Mon, 6 Nov 2023 21:48:26 -0600 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E9=80=8F=E8=A7=86?= =?UTF-8?q?=E8=A1=A8=E6=98=8E=E7=BB=86=E8=A1=A8=E5=8D=95=E5=85=83=E6=A0=BC?= =?UTF-8?q?=E8=99=9A=E7=BA=BF&=E5=88=86=E5=89=B2=E7=BA=BF=E8=99=9A?= =?UTF-8?q?=E7=BA=BF(#2400)=20(#2401)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 支持透视表明细表单元格虚线&分割线虚线(#2400) * docs: 修改contributing.md --- CONTRIBUTING.md | 2 +- .../spreadsheet/__snapshots__/theme-spec.ts.snap | 6 ++++++ packages/s2-core/src/cell/col-cell.ts | 2 ++ packages/s2-core/src/common/interface/theme.ts | 4 ++++ packages/s2-core/src/facet/header/frame.ts | 2 ++ packages/s2-core/src/facet/table-facet.ts | 2 ++ packages/s2-core/src/group/grid-group.ts | 2 ++ packages/s2-core/src/theme/index.ts | 9 +++++++++ packages/s2-core/src/utils/cell/cell.ts | 3 +++ s2-site/docs/api/general/S2Theme.en.md | 2 ++ s2-site/docs/api/general/S2Theme.zh.md | 2 ++ 11 files changed, 35 insertions(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bd6657e86c..730543c82d 100644 --- a/CONTRIBUTING.md +++ b/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) diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap index f9b83c35d8..50d2c40be0 100644 --- a/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap +++ b/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, diff --git a/packages/s2-core/src/cell/col-cell.ts b/packages/s2-core/src/cell/col-cell.ts index bf73bd4095..fcab2334e3 100644 --- a/packages/s2-core/src/cell/col-cell.ts +++ b/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, }, ); } diff --git a/packages/s2-core/src/common/interface/theme.ts b/packages/s2-core/src/common/interface/theme.ts index acf8a63a0a..ef17aa4e3b 100644 --- a/packages/s2-core/src/common/interface/theme.ts +++ b/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 { /* 粗体文本样式 */ diff --git a/packages/s2-core/src/facet/header/frame.ts b/packages/s2-core/src/facet/header/frame.ts index 364cc9d88a..0c18d38b47 100644 --- a/packages/s2-core/src/facet/header/frame.ts +++ b/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, }, }); } diff --git a/packages/s2-core/src/facet/table-facet.ts b/packages/s2-core/src/facet/table-facet.ts index e1608eb241..23ab9e67e2 100644 --- a/packages/s2-core/src/facet/table-facet.ts +++ b/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) { diff --git a/packages/s2-core/src/group/grid-group.ts b/packages/s2-core/src/group/grid-group.ts index 4f92f9b085..f0a6b28c41 100644 --- a/packages/s2-core/src/group/grid-group.ts +++ b/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, }, ); }); diff --git a/packages/s2-core/src/theme/index.ts b/packages/s2-core/src/theme/index.ts index 9bc4c7074b..21ac42bc90 100644 --- a/packages/s2-core/src/theme/index.ts +++ b/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: { diff --git a/packages/s2-core/src/utils/cell/cell.ts b/packages/s2-core/src/utils/cell/cell.ts index f49b25d3eb..42db386cca 100644 --- a/packages/s2-core/src/utils/cell/cell.ts +++ b/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, }; } diff --git a/s2-site/docs/api/general/S2Theme.en.md b/s2-site/docs/api/general/S2Theme.en.md index 34f7079343..2190018346 100644 --- a/s2-site/docs/api/general/S2Theme.en.md +++ b/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 diff --git a/s2-site/docs/api/general/S2Theme.zh.md b/s2-site/docs/api/general/S2Theme.zh.md index 892ef33676..35d551fe8d 100644 --- a/s2-site/docs/api/general/S2Theme.zh.md +++ b/s2-site/docs/api/general/S2Theme.zh.md @@ -134,6 +134,7 @@ s2.setTheme({ | showShadow | 分割线是否显示外阴影（行列冻结情况下） | `boolean` | `true` | | | shadowWidth | 阴影宽度 | `number` | 10 | | | shadowColors | `left` : 线性变化左侧颜色
`right` : 线性变化右侧颜色 | `{left: string,`
`right: string}` | `{left: 'rgba(0,0,0,0.1)',`
`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