Skip to content

Commit

Permalink
feat(interaction): 新增选中/高亮单元格 & 滚动 API (#2586)
Browse files Browse the repository at this point in the history 
* feat(interaction): 新增选中/高亮单元格 & 滚动 API

* docs: 补充文档

* feat: 角头增加高亮效果

* test: 修复测试

* docs: 更新隐藏列头文档

* docs: 更新隐藏列头文档

* docs: 完善字段标记文档

* docs: 完善文档

* fix: 修复 hover 后分割线被遮挡的问题

* fix: 优化分割线样式问题

* feat: 支持动画和跳过滚动事件参数 & 动态判断交互重置 hook

* test: 新增单测

* docs: 更新文档

* test: 修复单测

* test: 更新快照

---------

Co-authored-by: Wenjun Xu <[email protected]>
  • Loading branch information
@lijinke666 @wjgogogo
lijinke666 and wjgogogo authored Aug 5, 2024
1 parent ad14ff4 commit ac4f5ab
Show file tree
Hide file tree
Showing 75 changed files with 2,792 additions and 779 deletions.
8 changes: 4 additions & 4 deletions packages/s2-core/__tests__/bugs/issue-1561-spec.ts
View file
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
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
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
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
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
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
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
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

0 comments on commit ac4f5ab

Please sign in to comment.