diff --git a/packages/s2-core/__tests__/unit/interaction/root-spec.ts b/packages/s2-core/__tests__/unit/interaction/root-spec.ts index 05ab71b623..e2fc1d4fbb 100644 --- a/packages/s2-core/__tests__/unit/interaction/root-spec.ts +++ b/packages/s2-core/__tests__/unit/interaction/root-spec.ts @@ -178,17 +178,33 @@ describe('RootInteraction Tests', () => { }); test('should selected header cell', () => { + const highlightNodesSpy = jest + .spyOn(rootInteraction, 'highlightNodes') + .mockImplementationOnce(() => {}); + rootInteraction.selectCell(mockCell); expect(rootInteraction.getState()).toMatchSnapshot(); expect(rootInteraction.hasIntercepts([InterceptType.HOVER])).toBeTruthy(); + expect(highlightNodesSpy).toHaveBeenCalledWith( + [], + InteractionStateName.SELECTED, + ); }); test('should highlight header cell', () => { + const highlightNodesSpy = jest + .spyOn(rootInteraction, 'highlightNodes') + .mockImplementationOnce(() => {}); + rootInteraction.highlightCell(mockCell); expect(rootInteraction.getState()).toMatchSnapshot(); expect(rootInteraction.hasIntercepts([InterceptType.HOVER])).toBeTruthy(); + expect(highlightNodesSpy).toHaveBeenCalledWith( + [], + InteractionStateName.HOVER, + ); }); // https://github.com/antvis/S2/issues/1243 @@ -444,7 +460,7 @@ describe('RootInteraction Tests', () => { expect(rootInteraction.getActiveCells()).toEqual([]); }); - test('should set selected status after highlight nodes', () => { + test('should set hover status after highlight nodes', () => { const belongsCell = createMockCellInfo('test-A').mockCell; const mockNodeA = new Node({ @@ -471,6 +487,28 @@ describe('RootInteraction Tests', () => { }); }); + // https://github.com/antvis/S2/discussions/3062 + test('should set selected status after highlight nodes', () => { + const belongsCell = createMockCellInfo('test-A').mockCell; + + const mockNodeA = new Node({ + id: 'test', + field: 'test', + value: '1', + belongsCell, + }); + + rootInteraction.highlightNodes( + [mockNodeA], + InteractionStateName.SELECTED, + ); + + expect(mockNodeA.belongsCell?.updateByState).toHaveBeenCalledWith( + InteractionStateName.SELECTED, + belongsCell, + ); + }); + test.each` stateName | handler ${InteractionStateName.SELECTED} | ${'isSelectedState'} diff --git a/packages/s2-core/src/interaction/base-interaction/click/corner-cell-click.ts b/packages/s2-core/src/interaction/base-interaction/click/corner-cell-click.ts index 9c8031dd8c..9b7b42f397 100644 --- a/packages/s2-core/src/interaction/base-interaction/click/corner-cell-click.ts +++ b/packages/s2-core/src/interaction/base-interaction/click/corner-cell-click.ts @@ -145,7 +145,7 @@ export class CornerCellClick extends BaseEvent implements BaseEventImplement { cells, stateName: InteractionStateName.SELECTED, }); - interaction.highlightNodes(nodes); + interaction.highlightNodes(nodes, InteractionStateName.SELECTED); cornerCell?.updateByState(InteractionStateName.SELECTED); this.showTooltip(event); diff --git a/packages/s2-core/src/interaction/root.ts b/packages/s2-core/src/interaction/root.ts index a5c0fdca63..a34fbc12cd 100644 --- a/packages/s2-core/src/interaction/root.ts +++ b/packages/s2-core/src/interaction/root.ts @@ -658,7 +658,7 @@ export class RootInteraction { // 平铺模式或者是树状模式下的列头单元格, 高亮子节点 if (!isHierarchyTree || isColCell) { - this.highlightNodes(childrenNodes); + this.highlightNodes(childrenNodes, stateName); } // 如果不在可视范围, 自动滚动 @@ -684,12 +684,12 @@ export class RootInteraction { * 高亮节点对应的单元格 * @example s2.interaction.highlightNodes([node]) */ - public highlightNodes = (nodes: Node[] = []) => { + public highlightNodes = ( + nodes: Node[] = [], + stateName: `${InteractionStateName}` = InteractionStateName.HOVER, + ) => { nodes.forEach((node) => { - node?.belongsCell?.updateByState( - InteractionStateName.HOVER, - node.belongsCell, - ); + node?.belongsCell?.updateByState(stateName, node.belongsCell); }); }; diff --git a/s2-site/docs/api/basic-class/interaction.zh.md b/s2-site/docs/api/basic-class/interaction.zh.md index 6c6353ad8a..373ec2e5c5 100644 --- a/s2-site/docs/api/basic-class/interaction.zh.md +++ b/s2-site/docs/api/basic-class/interaction.zh.md @@ -51,7 +51,7 @@ s2.interaction.reset() | addIntercepts | 新增交互拦截 | (interceptTypes: [InterceptType](#intercepttype)[]) => void | | hasIntercepts | 是否有指定拦截的交互 | (interceptTypes: [InterceptType](#intercepttype)[]) => boolean | | removeIntercepts | 移除指定交互拦截 | (interceptTypes: [InterceptType](#intercepttype)[]) => void | -| highlightNodes | 高亮节点对应的单元格 | (nodes: [Node](/api/basic-class/node)[]) => void | +| highlightNodes | 高亮节点对应的单元格 | (nodes: [Node](/api/basic-class/node)[], stateName: [InteractionStateName](#interactionstatename)) => void | | scrollTo | 滚动至指定位置 | (offsetConfig: [ScrollOffsetConfig](#offsetconfig)) => void | | | scrollToNode | 滚动至指定单元格节点 | (node: [Node](/api/basic-class/node), options?: [CellScrollToOptions](#cellscrolltooptions)) => void | | | scrollToCell | 滚动至指定单元格 | (cell: [S2CellType](#s2celltype), options?: [CellScrollToOptions](#cellscrolltooptions)) => void | | diff --git a/s2-site/docs/manual/advanced/interaction/highlight-and-select-cell.zh.md b/s2-site/docs/manual/advanced/interaction/highlight-and-select-cell.zh.md index ac0735638b..e83eafc70f 100644 --- a/s2-site/docs/manual/advanced/interaction/highlight-and-select-cell.zh.md +++ b/s2-site/docs/manual/advanced/interaction/highlight-and-select-cell.zh.md @@ -33,6 +33,8 @@ s2.interaction.getCurrentStateName() // "hover" const targetNodes = s2.facet.getRowNodes() s2.interaction.highlightNodes(targetNodes) +s2.interaction.highlightNodes(targetNodes, 'hover') +s2.interaction.highlightNodes(targetNodes, 'selected') ``` ## 选中单元格