Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: 调整分割线的颜色绘制逻辑, 优化和单元格边框颜色不一致的问题 #2919

Merged
merged 3 commits into from
Oct 11, 2024
+50 −97
Merged

fix: 调整分割线的颜色绘制逻辑, 优化和单元格边框颜色不一致的问题 #2919

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9c55e7a
fix: 调整分割线的颜色绘制逻辑, 优化和单元格边框颜色不一致的问题
lijinke666 Oct 10, 2024
866f1f4
chore: 更新注释和快照
lijinke666 Oct 10, 2024
6bfcce2
test: 更新快照
lijinke666 Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 0 additions & 24 deletions packages/s2-core/__tests__/spreadsheet/__snapshots__/theme-spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
}
Expand Down Expand Up @@ -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,
},
}
Expand Down Expand Up @@ -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,
},
}
Expand Down Expand Up @@ -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,
},
}
Expand Down Expand Up @@ -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,
},
}
Expand Down Expand Up @@ -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,
},
}
Expand Down
60 changes: 27 additions & 33 deletions packages/s2-core/src/facet/header/frame.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ export class Frame extends Group {
}

public layout() {
// corner底部的横线条
// corner 底部的横线条
this.addCornerBottomBorder();
// corner右边的竖线条
// corner 右边的竖线条
this.addCornerRightBorder();
// 一级纵向分割线两侧的shadow
// 一级纵向分割线两侧的 shadow
this.addSplitLineShadow();
}

Expand All @@ -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()) {
Expand Down Expand Up @@ -89,7 +88,6 @@ export class Frame extends Group {
}

private addCornerRightBorder() {
// 交叉表一条竖线拉通即可
const { cornerWidth, cornerHeight, viewportHeight, position, spreadsheet } =
this.cfg;
const {
Expand All @@ -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 {
Expand All @@ -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,
});
}

Expand All @@ -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 +
Expand All @@ -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,
});
}

Expand All @@ -200,7 +195,6 @@ export class Frame extends Group {
return;
}

// do render...
this.addSplitLineLeftShadow();
this.addSplitLineRightShadow();
}
Expand Down
4 changes: 0 additions & 4 deletions packages/s2-core/src/theme/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
26 changes: 0 additions & 26 deletions ...-components/__tests__/unit/components/config/theme-panel/__snapshots__/utils-spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -563,7 +563,6 @@ Object {
},
"splitLine": Object {
"borderDash": Array [],
"horizontalBorderColor": "#5184F6",
"horizontalBorderColorOpacity": 1,
"horizontalBorderWidth": 2,
"shadowColors": Object {
Expand All @@ -572,7 +571,6 @@ Object {
},
"shadowWidth": 8,
"showShadow": true,
"verticalBorderColor": "#5184F6",
"verticalBorderColorOpacity": 1,
"verticalBorderWidth": 2,
},
Expand Down Expand Up @@ -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,
},
}
Expand Down Expand Up @@ -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,
},
}
Expand Down Expand Up @@ -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,
},
}
Expand Down Expand Up @@ -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,
},
}
Expand Down Expand Up @@ -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,
},
}
Expand Down Expand Up @@ -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,
},
}
Expand Down
2 changes: 1 addition & 1 deletion packages/s2-react/playground/config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,7 +442,7 @@ export const sliderOptions: SliderSingleProps = {
};

export const s2ThemeConfig: ThemeCfg = {
name: 'default',
name: 'colorful',
theme: {},
};

Expand Down
6 changes: 3 additions & 3 deletions s2-site/docs/api/general/S2Theme.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)[]` | `[]` | |

Expand Down
Loading
Loading