Skip to content

Commit

Permalink
feat: 调整单元格默认 padding, 优化多行文本时的展示效果 (#2970)
Browse files Browse the repository at this point in the history 
* feat: 调整单元格默认 padding, 优化多行文本时的展示效果

* test: 更新快照

* test: 更新快照
  • Loading branch information
@lijinke666
lijinke666 authored Nov 14, 2024
1 parent 8d45f07 commit 599d7a4
Show file tree
Hide file tree
Showing 8 changed files with 470 additions and 1,295 deletions.
1,519 changes: 342 additions & 1,177 deletions packages/s2-core/__tests__/spreadsheet/__snapshots__/multi-line-text-spec.ts.snap
View file

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
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
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 @@ -337,7 +337,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 @@ -388,7 +388,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 @@ -444,8 +444,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 @@ -475,7 +475,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 @@ -530,7 +530,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 @@ -581,7 +581,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 @@ -590,7 +590,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 @@ -690,7 +690,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 @@ -974,7 +974,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 @@ -997,7 +997,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
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
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

0 comments on commit 599d7a4

Please sign in to comment.