fix(core): highlight the column header cell and row header when data …

…cell clicked (#2211) Co-authored-by: Jinke Li <[email protected]> Co-authored-by: 刘嘉一 <[email protected]>
antvis · May 26, 2023 · f60229d · f60229d
1 parent c30f37e
commit f60229d
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 39 deletions.
diff --git a/packages/s2-core/__tests__/unit/interaction/base-interaction/click/data-cell-click-spec.ts b/packages/s2-core/__tests__/unit/interaction/base-interaction/click/data-cell-click-spec.ts
@@ -4,6 +4,7 @@ import {
   sleep,
 } from 'tests/util/helpers';
 import type { Event as GEvent } from '@antv/g-canvas';
+import { getActiveHoverRowColCells } from '@antv/s2';
 import type { S2Options } from '@/common/interface';
 import type { SpreadSheet } from '@/sheet-type';
 import {
@@ -165,7 +166,7 @@ describe('Interaction Data Cell Click Tests', () => {
     expect(clearHoverTimerSpy).toHaveBeenCalledTimes(2);
   });
 
-  test('should highlight the column header cell when data cell clicked', () => {
+  test('should highlight the column header cell and row header cell when data cell clicked', () => {
     const headerCellId0 = 'header-0';
     const headerCellId1 = 'header-1';
     const columnNode: Array<Partial<Node>> = [
@@ -202,6 +203,7 @@ describe('Interaction Data Cell Click Tests', () => {
       interaction: {
         selectedCellHighlight: {
           colHeader: true,
+          rowHeader: true,
         } as InteractionCellSelectedHighlightType,
       },
     });
@@ -211,21 +213,21 @@ describe('Interaction Data Cell Click Tests', () => {
       rowIndex: columnNode[0].belongsCell.getMeta().rowIndex,
     });
 
-    s2.interaction.getAllColHeaderCells = jest.fn();
     s2.interaction.updateCells = jest.fn();
+    s2.interaction.getAllColHeaderCells = jest.fn();
+    s2.interaction.getAllRowHeaderCells = jest.fn();
 
     s2.emit(S2Event.DATA_CELL_CLICK, {
       stopPropagation() {},
     } as unknown as GEvent);
 
-    // TODO: 选中datacell不应触发colCell的选中态，只应该有高亮的展示态。此处的testcase需要修改，目前pr仅为workaround
-
-    // expect(s2.interaction.getState()).toEqual({
-    //   cells: [firstDataCellInfo.mockCellMeta, mockHeaderCellInfo.mockCellMeta],
-    //   stateName: InteractionStateName.SELECTED,
-    //   onUpdateCells: expect.any(Function),
-    // });
-    // expect(s2.interaction.getAllColHeaderCells).toHaveBeenCalled();
-    // expect(s2.interaction.updateCells).toHaveBeenCalled();
+    expect(s2.interaction.getState()).toEqual({
+      cells: [firstDataCellInfo.mockCellMeta],
+      stateName: InteractionStateName.SELECTED,
+      onUpdateCells: expect.any(Function),
+    });
+    expect(s2.interaction.updateCells).toHaveBeenCalled();
+    expect(s2.interaction.getAllColHeaderCells).toHaveBeenCalled();
+    expect(s2.interaction.getAllRowHeaderCells).toHaveBeenCalled();
   });
 });
diff --git a/packages/s2-core/src/interaction/base-interaction/click/data-cell-click.ts b/packages/s2-core/src/interaction/base-interaction/click/data-cell-click.ts
@@ -1,5 +1,7 @@
 import type { Event as CanvasEvent } from '@antv/g-canvas';
+import { forEach } from 'lodash';
 import type { DataCell } from '../../../cell/data-cell';
+import type { RowCell } from '../../../cell/row-cell';
 import {
   InteractionStateName,
   InterceptType,
@@ -13,14 +15,15 @@ import type {
 } from '../../../common/interface';
 import {
   getCellMeta,
-  getInteractionCells,
   afterSelectDataCells,
+  getRowCellForSelectedCell,
 } from '../../../utils/interaction/select-event';
 import {
   getTooltipOptions,
   getTooltipVisibleOperator,
 } from '../../../utils/tooltip';
 import { BaseEvent, type BaseEventImplement } from '../../base-event';
+import { updateAllColHeaderCellState } from '../../../utils/interaction';
 
 export class DataCellClick extends BaseEvent implements BaseEventImplement {
   public bindEvents() {
@@ -67,6 +70,28 @@ export class DataCellClick extends BaseEvent implements BaseEventImplement {
       });
       this.spreadsheet.emit(S2Event.GLOBAL_SELECTED, [cell]);
       this.showTooltip(event, meta);
+
+      // 点击单元格，高亮对应的行头、列头
+      const { rowId, colId, spreadsheet } = meta;
+      const { colHeader, rowHeader } = interaction.getSelectedCellHighlight();
+      if (colHeader) {
+        updateAllColHeaderCellState(
+          colId,
+          interaction.getAllColHeaderCells(),
+          InteractionStateName.SELECTED,
+        );
+      }
+      if (rowHeader) {
+        if (rowId) {
+          const allRowHeaderCells = getRowCellForSelectedCell(
+            meta,
+            spreadsheet,
+          );
+          forEach(allRowHeaderCells, (cell: RowCell) => {
+            cell.updateByState(InteractionStateName.SELECTED);
+          });
+        }
+      }
     });
   }
 

diff --git a/packages/s2-core/src/utils/interaction/select-event.ts b/packages/s2-core/src/utils/interaction/select-event.ts
@@ -1,4 +1,4 @@
-import { forEach, reduce, uniqBy } from 'lodash';
+import { reduce, uniqBy } from 'lodash';
 import { ColCell, RowCell, TableSeriesCell } from '../../cell';
 import {
   InteractionKeyboardKey,
@@ -14,10 +14,7 @@ import type {
 import type { Node } from '../../facet/layout/node';
 import type { SpreadSheet } from '../../sheet-type';
 import { getDataCellId } from '../cell/data-cell';
-import {
-  getActiveHoverRowColCells,
-  updateAllColHeaderCellState,
-} from './hover-event';
+import { getActiveHoverRowColCells } from './hover-event';
 
 export const isMultiSelectionKey = (e: KeyboardEvent) => {
   return [InteractionKeyboardKey.META, InteractionKeyboardKey.CONTROL].includes(
@@ -97,24 +94,6 @@ export function getRowCellForSelectedCell(
   );
 }
 
-export function updateRowColCells(meta: ViewMeta) {
-  const { rowId, colId, spreadsheet } = meta;
-  const { interaction } = spreadsheet;
-
-  updateAllColHeaderCellState(
-    colId,
-    interaction.getAllColHeaderCells(),
-    InteractionStateName.SELECTED,
-  );
-
-  if (rowId) {
-    const allRowHeaderCells = getRowCellForSelectedCell(meta, spreadsheet);
-    forEach(allRowHeaderCells, (cell: RowCell) => {
-      cell.updateByState(InteractionStateName.SELECTED);
-    });
-  }
-}
-
 export const getRowHeaderByCellId = (
   cellId: string,
   s2: SpreadSheet,

diff --git a/s2-site/docs/common/interaction.zh.md b/s2-site/docs/common/interaction.zh.md
@@ -24,7 +24,7 @@ order: 5
 | rangeSelection                       | 是否允许区间快捷多选                                                                                                                             | `boolean`                                 | `true`                                                |                  |
 | scrollbarPosition                    | 用于控制滚动条展示在内容区边缘还是画布边缘                                                                                                                  | `content \| canvas`                                              |    `content`     |   |
 | eventListenerOptions                 | 事件监听函数 `addEventListener` 的 [可选项配置](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener), 可控制事件从冒泡阶段还是捕获阶段触发 | `false`                                   |                                                       |
-| selectedCellHighlight                | 选中格子后的高亮行为<br/>rowHeader：是否高亮选中格子所在行头<br/>colHeader：是否高亮选中格子所在列头<br/>rowCells：是否高亮选中格子所在行<br/>colCells：是否高亮选中格子所在列<br/>true：同{rowHeader: true, colHeader: true}     | `boolean \| { rowHeader?: boolean, colHeader?: boolean, rowCells?: boolean, colCells?: boolean }` | `false`                                               |                  |
+| selectedCellHighlight                | 选中格子后的高亮行为<br/>rowHeader：是否高亮选中格子所在行头<br/>colHeader：是否高亮选中格子所在列头<br/>currentRow：是否高亮选中格子所在行<br/>currentCol：是否高亮选中格子所在列<br/>true：同{rowHeader: true, colHeader: true}     | `boolean \| { rowHeader?: boolean, colHeader?: boolean, currentRow?: boolean, currentCol?: boolean }` | `false`                                               |                  |
 | overscrollBehavior                   | 控制滚动至边界的行为，可禁用浏览器的默认滚动行为。[详情](/docs/manual/advanced/interaction/basic/#修改滚动至边界行为)  | `auto \| contain \| none \| null`  |  `auto` |
 
 ### CustomInteraction

diff --git a/s2-site/docs/manual/advanced/interaction/basic.en.md b/s2-site/docs/manual/advanced/interaction/basic.en.md
@@ -184,9 +184,21 @@ When the mouse selects a cell or brushes a selected cell, the row and column hea
 ```ts
 const s2Options = {
   interaction: {
-    selectedCellHighlight: true // 默认 false
+    selectedCellHighlight: true // default is false
   }
 };
+
+// You can also configure the highlighting of header and cells in selectedCellHighlight separately
+const s2Options = {
+  interaction: {
+    selectedCellHighlight: {
+      rowHeader: true,  // Highlight row header when cell is selected
+      colHeader: true,  // Highlight column header when cells are selected
+      currentRow: false,  // Highlight the current row when a cell is selected
+      currentCol: false,  // Highlight the current column when a cell is selected
+    },
+  },
+};
 ```
 
 ### hover focus

diff --git a/s2-site/docs/manual/advanced/interaction/basic.zh.md b/s2-site/docs/manual/advanced/interaction/basic.zh.md
@@ -199,8 +199,8 @@ const s2Options = {
     selectedCellHighlight: {
       rowHeader: true,  // 选中单元格时，高亮行头
       colHeader: true,  // 选中单元格时，高亮列头
-      rowCells: false,  // 选中单元格时，高亮当前行
-      colCells: false,  // 选中单元格时，高亮当前列
+      currentRow: false,  // 选中单元格时，高亮当前行
+      currentCol: false,  // 选中单元格时，高亮当前列
     },
   },
 };