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

feat: 调整单元格默认 padding, 优化多行文本时的展示效果 #2970

Merged
merged 4 commits into from
Nov 14, 2024
Merged

feat: 调整单元格默认 padding, 优化多行文本时的展示效果 #2970

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c354fe2
feat: 调整单元格默认 padding, 优化多行文本时的展示效果
lijinke666 Nov 8, 2024
c709cab
Merge branch 'next' into fix-optimize-cell-height
lijinke666 Nov 13, 2024
1de6c40
test: 更新快照
lijinke666 Nov 13, 2024
4d241cc
test: 更新快照
lijinke666 Nov 13, 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
1,519 changes: 342 additions & 1,177 deletions packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap
View file
Open in desktop

Large diffs are not rendered by default.

72 changes: 36 additions & 36 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 @@ -53,10 +53,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#5286FA",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -139,10 +139,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#5286FA",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -511,10 +511,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#E1EAFE",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -641,10 +641,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#0647b1",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -727,10 +727,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#0647b1",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -1099,10 +1099,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#1e2436",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -1229,10 +1229,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#CCDBFC",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -1315,10 +1315,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#CCDBFC",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -1687,10 +1687,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#E0E9FD",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -1817,10 +1817,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#E7E9ED",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -1903,10 +1903,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#E7E9ED",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -2275,10 +2275,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#F0F2F4",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -2405,10 +2405,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#CCDBFC",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -2491,10 +2491,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#CCDBFC",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -2863,10 +2863,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#E0E9FD",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -2993,10 +2993,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#CCDBFC",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -3079,10 +3079,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#CCDBFC",
"verticalBorderColorOpacity": 1,
Expand Down Expand Up @@ -3451,10 +3451,10 @@ Object {
},
},
"padding": Object {
"bottom": 4,
"bottom": 8,
"left": 8,
"right": 8,
"top": 4,
"top": 8,
},
"verticalBorderColor": "#E0E9FD",
"verticalBorderColorOpacity": 1,
Expand Down
26 changes: 13 additions & 13 deletions packages/s2-core/__tests__/spreadsheet/multi-line-text-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,15 +161,15 @@ describe('SpreadSheet Multi Line Text Tests', () => {
await s2.render(false);

matchCellStyleSnapshot();
expectColHierarchyHeight(118, 80, 38);
expectColHierarchyHeight(142, 96, 46);
});

test('should render three max text lines', async () => {
updateStyle(3);
await s2.render(false);

matchCellStyleSnapshot();
expectColHierarchyHeight(165, 112, 53);
expectColHierarchyHeight(189, 128, 61);
});

test('should render custom text overflow text', async () => {
Expand Down Expand Up @@ -336,7 +336,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
await s2.render(false);

matchCellStyleSnapshot();
expectColHierarchyHeight(118, 80, 38);
expectColHierarchyHeight(142, 96, 46);
});

test('should not adaptive adjust cell height if custom cell style more than actual text height', async () => {
Expand Down Expand Up @@ -387,7 +387,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
updateStyle(3);
await s2.render(false);

expectColHierarchyHeight(149, 96, 53);
expectColHierarchyHeight(173, 112, 61);
});

test('should render correctly layout if only enable grand totals', async () => {
Expand Down Expand Up @@ -443,8 +443,8 @@ describe('SpreadSheet Multi Line Text Tests', () => {
matchCellStyleSnapshot();

// 省份 4行文本, 叶子节点 (城市) 3行文本, 省份应该和城市高度一致, 才能展示所有文本 (maxLines: 4)
expectRowHierarchyHeight(384, 0, 72);
expectColHierarchyHeight(212, 144, 68);
expectRowHierarchyHeight(400, 0, 80);
expectColHierarchyHeight(236, 160, 76);
});

test('should render three max text lines for tree mode', async () => {
Expand Down Expand Up @@ -474,7 +474,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
await s2.render();

matchCellStyleSnapshot();
expect(s2.facet.getLayoutResult().rowsHierarchy.height).toEqual(524);
expect(s2.facet.getLayoutResult().rowsHierarchy.height).toEqual(556);
});

// https://github.com/antvis/S2/issues/2678
Expand Down Expand Up @@ -529,7 +529,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
await s2.render();

matchCellStyleSnapshot();
expect(s2.facet.getLayoutResult().rowsHierarchy.height).toEqual(328);
expect(s2.facet.getLayoutResult().rowsHierarchy.height).toEqual(336);
});

test.each(range(1, 11))(
Expand Down Expand Up @@ -580,7 +580,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
await s2.render(false);

matchCellStyleSnapshot();
expectColHierarchyHeight(40, 0, 40, 1);
expectColHierarchyHeight(48, 0, 48, 1);
});

test('should render three max text lines', async () => {
Expand All @@ -589,7 +589,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {

matchCellStyleSnapshot();

expectColHierarchyHeight(56, 0, 56, 1);
expectColHierarchyHeight(64, 0, 64, 1);
});

test('should render custom text overflow text', async () => {
Expand Down Expand Up @@ -688,7 +688,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
await s2.render();

matchCellStyleSnapshot();
expectColHierarchyHeight(72, 0, 72, 1);
expectColHierarchyHeight(80, 0, 80, 1);
});

// https://github.com/antvis/S2/issues/2594
Expand Down Expand Up @@ -972,7 +972,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
await s2.render();

matchCellStyleSnapshot();
expect(s2.facet.getLayoutResult().colsHierarchy.height).toEqual(56);
expect(s2.facet.getLayoutResult().colsHierarchy.height).toEqual(64);
});

// https://github.com/antvis/S2/issues/2955
Expand All @@ -995,7 +995,7 @@ describe('SpreadSheet Multi Line Text Tests', () => {
await s2.render();

matchCellStyleSnapshot();
expect(s2.facet.getLayoutResult().colsHierarchy.height).toEqual(192);
expect(s2.facet.getLayoutResult().colsHierarchy.height).toEqual(208);
});

test.each(range(1, 11))(
Expand Down
3 changes: 2 additions & 1 deletion packages/s2-core/src/common/constant/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { paletteGray } from '../../theme/palette/gray';
import type { ThemeName } from '../interface';
import { S2_PREFIX_CLS } from './classnames';

// Map of the theme
export const PALETTE_MAP = {
default: paletteDefault,
colorful: paletteColorful,
Expand Down Expand Up @@ -39,3 +38,5 @@ export const G2_THEME_TYPE: Record<ThemeName, string> = {
gray: 'light',
dark: 'dark',
};

export const CELL_PADDING = 8;
1 change: 1 addition & 0 deletions packages/s2-core/src/facet/base-facet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -456,6 +456,7 @@ export abstract class BaseFacet {
const { padding } = cell.getStyle().cell;
const textHeight = cell.getActualTextHeight();
const adaptiveHeight = textHeight + padding.top + padding.bottom;

const height =
cell.isMultiLineText() && textHeight >= defaultHeight
? adaptiveHeight
Expand Down
Loading
Loading