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(interaction): 新增选中/高亮单元格 & 滚动 API #2586

Merged
merged 20 commits into from
Aug 5, 2024
Merged

feat(interaction): 新增选中/高亮单元格 & 滚动 API #2586

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
e870c8a
feat(interaction): 新增选中/高亮单元格 & 滚动 API
lijinke666 Mar 7, 2024
d93f94d
docs: 补充文档
lijinke666 Mar 8, 2024
9ab4ce4
Merge remote-tracking branch 'origin/next' into feat-interaction-api
lijinke666 Mar 11, 2024
5f0b653
feat: 角头增加高亮效果
lijinke666 Mar 11, 2024
b8a1be5
test: 修复测试
lijinke666 Mar 11, 2024
e10ed9f
docs: 更新隐藏列头文档
lijinke666 Mar 12, 2024
1df7299
docs: 更新隐藏列头文档
lijinke666 Mar 12, 2024
bbbb953
docs: 完善字段标记文档
lijinke666 Mar 12, 2024
22f082f
docs: 完善文档
lijinke666 Mar 12, 2024
47fb5c2
Merge branch 'next' into feat-interaction-api
lijinke666 Mar 12, 2024
09ff5f7
fix: 修复 hover 后分割线被遮挡的问题
lijinke666 Mar 15, 2024
4aa6d85
fix: 优化分割线样式问题
lijinke666 Mar 15, 2024
9ccd4ca
Merge remote-tracking branch 'origin/next' into feat-interaction-api
lijinke666 Jul 16, 2024
1a4a0c4
feat: 支持动画和跳过滚动事件参数 & 动态判断交互重置 hook
lijinke666 Jul 18, 2024
810534d
test: 新增单测
lijinke666 Jul 19, 2024
9337973
docs: 更新文档
lijinke666 Jul 19, 2024
65d7c2d
test: 修复单测
lijinke666 Jul 22, 2024
e624d80
Merge remote-tracking branch 'origin/next' into feat-interaction-api
lijinke666 Jul 29, 2024
b5cd32c
test: 更新快照
lijinke666 Aug 1, 2024
1f19d4f
Merge branch 'next' into feat-interaction-api
wjgogogo Aug 5, 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
8 changes: 4 additions & 4 deletions packages/s2-core/__tests__/bugs/issue-1561-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,10 @@ describe('Grid Border Tests', () => {
const gridGroup = (panelScrollGroup as any).gridGroup as Group;
const originalLeftBorderBBox = (gridGroup.children[0] as Group).getBBox();

s2.facet.updateScrollOffset({ offsetX: { value: 100, animate: false } });
s2.facet.updateScrollOffset({ offsetX: { value: 200, animate: false } });
s2.facet.updateScrollOffset({ offsetX: { value: 300, animate: false } });
s2.facet.updateScrollOffset({ offsetX: { value: 0, animate: false } });
s2.interaction.scrollTo({ offsetX: { value: 100, animate: false } });
s2.interaction.scrollTo({ offsetX: { value: 200, animate: false } });
s2.interaction.scrollTo({ offsetX: { value: 300, animate: false } });
s2.interaction.scrollTo({ offsetX: { value: 0, animate: false } });

const newLeftBorderBBbox = (gridGroup.children[0] as Group).getBBox();

Expand Down
6 changes: 4 additions & 2 deletions packages/s2-core/__tests__/bugs/issue-2199-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
*/
import type { S2Options } from '@/common/interface';
import { TableSheet } from '@/sheet-type';
import { getContainer } from 'tests/util/helpers';
import { getContainer, sleep } from 'tests/util/helpers';
import dataCfg from '../data/data-issue-2199.json';

const s2Options: S2Options = {
Expand All @@ -25,13 +25,15 @@ describe('ColCell Text Center Tests', () => {

await s2.render();

s2.facet.updateScrollOffset({
s2.interaction.scrollTo({
offsetX: {
value: 500,
animate: false,
},
});

await sleep(200);

const node = s2.facet.getColNodes(0).slice(-1)?.[0];
const cell = node?.belongsCell;
const { width: nodeWidth, x: nodeX } = node;
Expand Down
12 changes: 7 additions & 5 deletions packages/s2-core/__tests__/bugs/issue-2340-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,17 +56,19 @@ describe('Header Brush Selection Tests', () => {
const offsetKey = isRow ? 'offsetY' : 'offsetX';

// 将圈选的单元格滑出可视范围
s2.facet.updateScrollOffset({
[offsetKey]: { value: 300 },
s2.interaction.scrollTo({
[offsetKey]: { value: 300, animate: false },
});

await sleep(500);
await sleep(200);

// 还原
s2.facet.updateScrollOffset({
[offsetKey]: { value: 0 },
s2.interaction.scrollTo({
[offsetKey]: { value: 0, animate: false },
});

await sleep(200);

expect(s2.interaction.getActiveCells()).toHaveLength(1);
expect(s2.interaction.getCurrentStateName()).toEqual(stateName);

Expand Down
2 changes: 1 addition & 1 deletion packages/s2-core/__tests__/bugs/issue-2804-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ describe('Tree Leaf Node Status Tests', () => {

await s2.render();

const [a1, a2] = s2.facet.getRowNodes();
const [a1, a2] = await s2.facet.getRowNodes();

expect(a1.isLeaf).toBeTruthy();
expect(a1.isTotals).toBeFalsy();
Expand Down
168 changes: 168 additions & 0 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 @@ -110,6 +110,34 @@ Object {
"horizontalBorderColor": "#5286FA",
"horizontalBorderColorOpacity": 1,
"horizontalBorderWidth": 1,
"interactionState": Object {
"highlight": Object {
"backgroundColor": "#87B5FF",
"backgroundOpacity": 1,
},
"hover": Object {
"backgroundColor": "#2C60D4",
"backgroundOpacity": 0.6,
},
"prepareSelect": Object {
"borderColor": "#000000",
"borderOpacity": 1,
"borderWidth": 1,
},
"searchResult": Object {
"backgroundColor": "#F0F7FF",
"backgroundOpacity": 1,
},
"selected": Object {
"backgroundColor": "#2C60D4",
"backgroundOpacity": 0.6,
},
"unselected": Object {
"backgroundOpacity": 0.3,
"opacity": 0.3,
"textOpacity": 0.3,
},
},
"padding": Object {
"bottom": 4,
"left": 8,
Expand Down Expand Up @@ -661,6 +689,34 @@ Object {
"horizontalBorderColor": "#0647b1",
"horizontalBorderColorOpacity": 1,
"horizontalBorderWidth": 1,
"interactionState": Object {
"highlight": Object {
"backgroundColor": "#4b91ff",
"backgroundOpacity": 1,
},
"hover": Object {
"backgroundColor": "#213f94",
"backgroundOpacity": 0.6,
},
"prepareSelect": Object {
"borderColor": "#dcdcdc",
"borderOpacity": 1,
"borderWidth": 1,
},
"searchResult": Object {
"backgroundColor": "#213f94",
"backgroundOpacity": 1,
},
"selected": Object {
"backgroundColor": "#213f94",
"backgroundOpacity": 0.6,
},
"unselected": Object {
"backgroundOpacity": 0.3,
"opacity": 0.3,
"textOpacity": 0.3,
},
},
"padding": Object {
"bottom": 4,
"left": 8,
Expand Down Expand Up @@ -1212,6 +1268,34 @@ Object {
"horizontalBorderColor": "#CCDBFC",
"horizontalBorderColorOpacity": 1,
"horizontalBorderWidth": 1,
"interactionState": Object {
"highlight": Object {
"backgroundColor": "#87B5FF",
"backgroundOpacity": 1,
},
"hover": Object {
"backgroundColor": "#CCDBFC",
"backgroundOpacity": 0.6,
},
"prepareSelect": Object {
"borderColor": "#000000",
"borderOpacity": 1,
"borderWidth": 1,
},
"searchResult": Object {
"backgroundColor": "#F0F7FF",
"backgroundOpacity": 1,
},
"selected": Object {
"backgroundColor": "#CCDBFC",
"backgroundOpacity": 0.6,
},
"unselected": Object {
"backgroundOpacity": 0.3,
"opacity": 0.3,
"textOpacity": 0.3,
},
},
"padding": Object {
"bottom": 4,
"left": 8,
Expand Down Expand Up @@ -1763,6 +1847,34 @@ Object {
"horizontalBorderColor": "#E7E9ED",
"horizontalBorderColorOpacity": 1,
"horizontalBorderWidth": 1,
"interactionState": Object {
"highlight": Object {
"backgroundColor": "#87B5FF",
"backgroundOpacity": 1,
},
"hover": Object {
"backgroundColor": "#E7E9ED",
"backgroundOpacity": 0.6,
},
"prepareSelect": Object {
"borderColor": "#000000",
"borderOpacity": 1,
"borderWidth": 1,
},
"searchResult": Object {
"backgroundColor": "#F0F7FF",
"backgroundOpacity": 1,
},
"selected": Object {
"backgroundColor": "#E7E9ED",
"backgroundOpacity": 0.6,
},
"unselected": Object {
"backgroundOpacity": 0.3,
"opacity": 0.3,
"textOpacity": 0.3,
},
},
"padding": Object {
"bottom": 4,
"left": 8,
Expand Down Expand Up @@ -2314,6 +2426,34 @@ Object {
"horizontalBorderColor": "#CCDBFC",
"horizontalBorderColorOpacity": 1,
"horizontalBorderWidth": 1,
"interactionState": Object {
"highlight": Object {
"backgroundColor": "#87B5FF",
"backgroundOpacity": 1,
},
"hover": Object {
"backgroundColor": "#CCDBFC",
"backgroundOpacity": 0.6,
},
"prepareSelect": Object {
"borderColor": "#000000",
"borderOpacity": 1,
"borderWidth": 1,
},
"searchResult": Object {
"backgroundColor": "#F0F7FF",
"backgroundOpacity": 1,
},
"selected": Object {
"backgroundColor": "#CCDBFC",
"backgroundOpacity": 0.6,
},
"unselected": Object {
"backgroundOpacity": 0.3,
"opacity": 0.3,
"textOpacity": 0.3,
},
},
"padding": Object {
"bottom": 4,
"left": 8,
Expand Down Expand Up @@ -2865,6 +3005,34 @@ Object {
"horizontalBorderColor": "#CCDBFC",
"horizontalBorderColorOpacity": 1,
"horizontalBorderWidth": 1,
"interactionState": Object {
"highlight": Object {
"backgroundColor": "#87B5FF",
"backgroundOpacity": 1,
},
"hover": Object {
"backgroundColor": "#CCDBFC",
"backgroundOpacity": 0.6,
},
"prepareSelect": Object {
"borderColor": "#000000",
"borderOpacity": 1,
"borderWidth": 1,
},
"searchResult": Object {
"backgroundColor": "#F0F7FF",
"backgroundOpacity": 1,
},
"selected": Object {
"backgroundColor": "#CCDBFC",
"backgroundOpacity": 0.6,
},
"unselected": Object {
"backgroundOpacity": 0.3,
"opacity": 0.3,
"textOpacity": 0.3,
},
},
"padding": Object {
"bottom": 4,
"left": 8,
Expand Down
3 changes: 3 additions & 0 deletions packages/s2-core/__tests__/spreadsheet/corner-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,6 +255,7 @@ describe('PivotSheet Corner Tests', () => {
...node,
cornerType: CornerNodeType.Row,
}),
updateByState: jest.fn(),
} as unknown as S2CellType;
});
const selected = jest.fn();
Expand Down Expand Up @@ -293,6 +294,7 @@ describe('PivotSheet Corner Tests', () => {
...node,
cornerType: CornerNodeType.Row,
}),
updateByState: jest.fn(),
} as unknown as S2CellType;
});
const selected = jest.fn();
Expand All @@ -318,6 +320,7 @@ describe('PivotSheet Corner Tests', () => {
...node,
cornerType: CornerNodeType.Row,
}),
updateByState: jest.fn(),
} as unknown as S2CellType;
});

Expand Down
12 changes: 6 additions & 6 deletions packages/s2-core/__tests__/spreadsheet/custom-grid-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ describe('SpreadSheet Custom Grid Tests', () => {
const rowNode = s2.facet.getRowNodes()[0];

// 选中 a-1
s2.interaction.selectHeaderCell({
s2.interaction.changeCell({
cell: rowNode.belongsCell!,
});

Expand All @@ -155,7 +155,7 @@ describe('SpreadSheet Custom Grid Tests', () => {
]);

// 取消选中 a - 1
s2.interaction.selectHeaderCell({
s2.interaction.changeCell({
cell: rowNode.belongsCell!,
});
expect(s2.interaction.getActiveCells()).toBeEmpty();
Expand All @@ -176,7 +176,7 @@ describe('SpreadSheet Custom Grid Tests', () => {
.find((node) => node.field === field)!;

// 选中
s2.interaction.selectHeaderCell({
s2.interaction.changeCell({
cell: rowNode.belongsCell!,
});

Expand Down Expand Up @@ -338,7 +338,7 @@ describe('SpreadSheet Custom Grid Tests', () => {
const colNode = s2.facet.getColNodes()[0];

// 选中 a-1
s2.interaction.selectHeaderCell({
s2.interaction.changeCell({
cell: colNode.belongsCell!,
});

Expand All @@ -353,7 +353,7 @@ describe('SpreadSheet Custom Grid Tests', () => {
]);

// 取消选中 a - 1
s2.interaction.selectHeaderCell({
s2.interaction.changeCell({
cell: colNode.belongsCell!,
});
expect(s2.interaction.getActiveCells()).toBeEmpty();
Expand All @@ -374,7 +374,7 @@ describe('SpreadSheet Custom Grid Tests', () => {
.find((node) => node.field === field)!;

// 选中
s2.interaction.selectHeaderCell({
s2.interaction.changeCell({
cell: colNode.belongsCell!,
});

Expand Down
4 changes: 2 additions & 2 deletions packages/s2-core/__tests__/spreadsheet/custom-table-col-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ describe('TableSheet Custom Tests', () => {
const colNode = s2.facet.getColNodes()[0];

// 选中地区
s2.interaction.selectHeaderCell({
s2.interaction.changeCell({
cell: colNode.belongsCell!,
});

Expand All @@ -131,7 +131,7 @@ describe('TableSheet Custom Tests', () => {
]);

// 取消选中 a - 1
s2.interaction.selectHeaderCell({
s2.interaction.changeCell({
cell: colNode.belongsCell!,
});
expect(s2.interaction.getActiveCells()).toBeEmpty();
Expand Down
Loading
Loading