From 3f766d02b14bf6d6ebac34b302a0232a58afe500 Mon Sep 17 00:00:00 2001 From: Jinke Li Date: Fri, 11 Oct 2024 16:40:00 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B0=83=E6=95=B4=E5=88=86=E5=89=B2?= =?UTF-8?q?=E7=BA=BF=E7=9A=84=E9=A2=9C=E8=89=B2=E7=BB=98=E5=88=B6=E9=80=BB?= =?UTF-8?q?=E8=BE=91,=20=E4=BC=98=E5=8C=96=E5=92=8C=E5=8D=95=E5=85=83?= =?UTF-8?q?=E6=A0=BC=E8=BE=B9=E6=A1=86=E9=A2=9C=E8=89=B2=E4=B8=8D=E4=B8=80?= =?UTF-8?q?=E8=87=B4=E7=9A=84=E9=97=AE=E9=A2=98=20(#2919)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 调整分割线的颜色绘制逻辑, 优化和单元格边框颜色不一致的问题 * chore: 更新注释和快照 * test: 更新快照 --- .../__snapshots__/theme-spec.ts.snap | 24 -------- packages/s2-core/src/facet/header/frame.ts | 60 +++++++++---------- packages/s2-core/src/theme/index.ts | 4 -- .../__snapshots__/utils-spec.ts.snap | 26 -------- packages/s2-react/playground/config.tsx | 2 +- s2-site/docs/api/general/S2Theme.zh.md | 6 +- s2-site/docs/common/totals.zh.md | 2 +- s2-site/docs/manual/basic/totals.zh.md | 10 ++-- s2-site/docs/manual/migration-v2.zh.md | 13 ++++ 9 files changed, 50 insertions(+), 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 index 281de69170..a60dd22a75 100644 --- a/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap +++ b/packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap @@ -563,8 +563,6 @@ Object { }, "splitLine": Object { "borderDash": Array [], - "horizontalBorderColor": "#3471F9", - "horizontalBorderColorOpacity": 0.2, "horizontalBorderWidth": 2, "shadowColors": Object { "left": "rgba(0,0,0,0.1)", @@ -572,8 +570,6 @@ Object { }, "shadowWidth": 8, "showShadow": true, - "verticalBorderColor": "#5286FA", - "verticalBorderColorOpacity": 0.25, "verticalBorderWidth": 2, }, } @@ -1142,8 +1138,6 @@ Object { }, "splitLine": Object { "borderDash": Array [], - "horizontalBorderColor": "#7899ff", - "horizontalBorderColorOpacity": 0.2, "horizontalBorderWidth": 2, "shadowColors": Object { "left": "rgba(0,0,0,0.1)", @@ -1151,8 +1145,6 @@ Object { }, "shadowWidth": 8, "showShadow": true, - "verticalBorderColor": "#7899ff", - "verticalBorderColorOpacity": 0.25, "verticalBorderWidth": 2, }, } @@ -1721,8 +1713,6 @@ Object { }, "splitLine": Object { "borderDash": Array [], - "horizontalBorderColor": "#326EF4", - "horizontalBorderColorOpacity": 0.2, "horizontalBorderWidth": 2, "shadowColors": Object { "left": "rgba(0,0,0,0.1)", @@ -1730,8 +1720,6 @@ Object { }, "shadowWidth": 8, "showShadow": true, - "verticalBorderColor": "#326EF4", - "verticalBorderColorOpacity": 0.25, "verticalBorderWidth": 2, }, } @@ -2300,8 +2288,6 @@ Object { }, "splitLine": Object { "borderDash": Array [], - "horizontalBorderColor": "#BAC1CC", - "horizontalBorderColorOpacity": 0.2, "horizontalBorderWidth": 2, "shadowColors": Object { "left": "rgba(0,0,0,0.1)", @@ -2309,8 +2295,6 @@ Object { }, "shadowWidth": 8, "showShadow": true, - "verticalBorderColor": "#BAC1CC", - "verticalBorderColorOpacity": 0.25, "verticalBorderWidth": 2, }, } @@ -2879,8 +2863,6 @@ Object { }, "splitLine": Object { "borderDash": Array [], - "horizontalBorderColor": "#326EF4", - "horizontalBorderColorOpacity": 0.2, "horizontalBorderWidth": 2, "shadowColors": Object { "left": "rgba(0,0,0,0.1)", @@ -2888,8 +2870,6 @@ Object { }, "shadowWidth": 8, "showShadow": true, - "verticalBorderColor": "#326EF4", - "verticalBorderColorOpacity": 0.25, "verticalBorderWidth": 2, }, } @@ -3458,8 +3438,6 @@ Object { }, "splitLine": Object { "borderDash": Array [], - "horizontalBorderColor": "#326EF4", - "horizontalBorderColorOpacity": 0.2, "horizontalBorderWidth": 2, "shadowColors": Object { "left": "rgba(0,0,0,0.1)", @@ -3467,8 +3445,6 @@ Object { }, "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 index 3389b2a95d..bb777fd9fa 100644 --- 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 index 124303bda9..6bd4410e1a 100644 --- 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/packages/s2-react-components/__tests__/unit/components/config/theme-panel/__snapshots__/utils-spec.ts.snap b/packages/s2-react-components/__tests__/unit/components/config/theme-panel/__snapshots__/utils-spec.ts.snap index 092d142832..b854363f3c 100644 --- a/packages/s2-react-components/__tests__/unit/components/config/theme-panel/__snapshots__/utils-spec.ts.snap +++ b/packages/s2-react-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,8 +1140,6 @@ Object { }, "splitLine": Object { "borderDash": Array [], - "horizontalBorderColor": "#326EF4", - "horizontalBorderColorOpacity": 0.2, "horizontalBorderWidth": 2, "shadowColors": Object { "left": "rgba(0,0,0,0.1)", @@ -1151,8 +1147,6 @@ Object { }, "shadowWidth": 8, "showShadow": true, - "verticalBorderColor": "#5184F6", - "verticalBorderColorOpacity": 0.25, "verticalBorderWidth": 2, }, } @@ -1721,8 +1715,6 @@ Object { }, "splitLine": Object { "borderDash": Array [], - "horizontalBorderColor": "#396", - "horizontalBorderColorOpacity": 0.2, "horizontalBorderWidth": 2, "shadowColors": Object { "left": "rgba(0,0,0,0.1)", @@ -1730,8 +1722,6 @@ Object { }, "shadowWidth": 8, "showShadow": true, - "verticalBorderColor": "#52A87D", - "verticalBorderColorOpacity": 0.25, "verticalBorderWidth": 2, }, } @@ -2300,8 +2290,6 @@ Object { }, "splitLine": Object { "borderDash": Array [], - "horizontalBorderColor": "#326EF4", - "horizontalBorderColorOpacity": 0.2, "horizontalBorderWidth": 2, "shadowColors": Object { "left": "rgba(0,0,0,0.1)", @@ -2309,8 +2297,6 @@ Object { }, "shadowWidth": 8, "showShadow": true, - "verticalBorderColor": "#326EF4", - "verticalBorderColorOpacity": 0.25, "verticalBorderWidth": 2, }, } @@ -2879,8 +2865,6 @@ Object { }, "splitLine": Object { "borderDash": Array [], - "horizontalBorderColor": "#326EF4", - "horizontalBorderColorOpacity": 0.2, "horizontalBorderWidth": 2, "shadowColors": Object { "left": "rgba(0,0,0,0.1)", @@ -2888,8 +2872,6 @@ Object { }, "shadowWidth": 8, "showShadow": true, - "verticalBorderColor": "#5184F6", - "verticalBorderColorOpacity": 0.25, "verticalBorderWidth": 2, }, } @@ -3458,8 +3440,6 @@ Object { }, "splitLine": Object { "borderDash": Array [], - "horizontalBorderColor": "#B6C0D7", - "horizontalBorderColorOpacity": 0.2, "horizontalBorderWidth": 2, "shadowColors": Object { "left": "rgba(0,0,0,0.1)", @@ -3467,8 +3447,6 @@ Object { }, "shadowWidth": 8, "showShadow": true, - "verticalBorderColor": "#B6C0D7", - "verticalBorderColorOpacity": 0.25, "verticalBorderWidth": 2, }, } @@ -4038,8 +4016,6 @@ Object { }, "splitLine": Object { "borderDash": Array [], - "horizontalBorderColor": "#326EF4", - "horizontalBorderColorOpacity": 0.2, "horizontalBorderWidth": 0, "shadowColors": Object { "left": "rgba(0,0,0,0.1)", @@ -4047,8 +4023,6 @@ Object { }, "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 index acc79ef00f..64c8bac680 100644 --- 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 index 2d36efeaaa..f64ad79612 100644 --- 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` : 线性变化左侧颜色
`right` : 线性变化右侧颜色 | `{left: string,`
`right: string}` | `{left: 'rgba(0,0,0,0.1)',`
`right: 'rgba(0,0,0,0)'}` | | | borderDash | 分割线虚线 | `number \| string \| (string \| number)[]` | `[]` | | diff --git a/s2-site/docs/common/totals.zh.md b/s2-site/docs/common/totals.zh.md index 745a267137..63ddc33e36 100644 --- a/s2-site/docs/common/totals.zh.md +++ b/s2-site/docs/common/totals.zh.md @@ -19,7 +19,7 @@ order: 3 | 参数 | 说明 | 类型 | 默认值 | 必选 | | ------------------- | ------------------------ | ------------ | ------- | ---- | | showGrandTotals | 是否显示总计 | `boolean` | `false` | | -| showSubTotals | 是否显示小计。当配置为对象时，always 控制是否在子维度不足 2 个时始终展示小计，默认不展示 | `boolean \| { always: boolean }` | `false` | | +| showSubTotals | 是否显示小计。配置为对象时，`always` 用于控制当子维度小于 2 个时是否始终展示小计，默认展示 | `boolean \| { always: boolean }` | `false` | | | subTotalsDimensions | 小计的汇总维度 | `string[]` | `[]` | | | reverseGrandTotalsLayout | 总计布局位置，默认下或右 | `boolean` | `false` | | | reverseSubTotalsLayout | 小计布局位置，默认下或右 | `boolean` | `false` | | diff --git a/s2-site/docs/manual/basic/totals.zh.md b/s2-site/docs/manual/basic/totals.zh.md index 21b061eae6..8f51a1ae2c 100644 --- a/s2-site/docs/manual/basic/totals.zh.md +++ b/s2-site/docs/manual/basic/totals.zh.md @@ -96,11 +96,11 @@ order: 5 | 参数 | 说明 | 类型 | 默认值 | 必选 | | ------------------- | ------------------------ | ------------ | ------ | ---- | -| showGrandTotals | 是否显示总计 | `boolean` | false | ✓ | -| showSubTotals | 是否显示小计。当配置为对象时，always 控制是否在子维度不足 2 个时始终展示小计，默认不展示。 | `boolean \| { always: boolean }` | false | ✓ | -| subTotalsDimensions | 小计的汇总维度 | `string[]` | [] | ✓ | -| reverseGrandTotalsLayout | 总计布局位置，默认下或右 | `boolean` | false | ✓ | -| reverseSubTotalsLayout | 小计布局位置，默认下或右 | `boolean` | false | ✓ | +| showGrandTotals | 是否显示总计 | `boolean` | false | | +| showSubTotals | 是否显示小计。配置为对象时，`always` 用于控制当子维度小于 2 个时是否始终展示小计，默认展示 | `boolean \| { always: boolean }` | false | | +| subTotalsDimensions | 小计的汇总维度 | `string[]` | [] | | +| reverseGrandTotalsLayout | 总计布局位置，默认下或右 | `boolean` | false | | +| reverseSubTotalsLayout | 小计布局位置，默认下或右 | `boolean` | false | | | grandTotalsLabel | 总计别名 | `string` | `总计` | | | subTotalsLabel | 小计别名 | `string` | `小计` | | | calcGrandTotals | 计算总计 | `CalcTotals` | | | diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md index f6f844f472..eedb89c210 100644 --- a/s2-site/docs/manual/migration-v2.zh.md +++ b/s2-site/docs/manual/migration-v2.zh.md @@ -930,6 +930,19 @@ s2.on(S2Event.GLOBAL_LINK_FIELD_JUMP, (data) => { + dataCell.getValueRange() ``` +#### 分割线主题配置默认值变更 + +分割线的 `颜色` 和 `透明度` 默认值移除，默认和所在区域对应的单元格保持一致。 + +```diff +splitLine: { +- horizontalBorderColor: basicColors[12], +- horizontalBorderColorOpacity: 0.2, +- verticalBorderColor: basicColors[12], +- verticalBorderColorOpacity: 0.25, +} +``` + ### 组件层 @antv/s2-react #### 支持 React 18 和 Ant Design 5.0