fix: 修复自定义选中交互主题对行列叶子节点不生效 (#3064)

antvis · Jan 3, 2025 · 0c6c383 · 0c6c383
1 parent 598fc42
commit 0c6c383
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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')
 ```
 
 ## 选中单元格