fix: 🐛 optimize some details of the interaction when scrolling (#148)

* fix: 🐛 keep the selected state when the selected data cells scroll out of the viewport

* fix: 🐛 hde the tooltip when scrolling

* fix: 🐛 cancel the hover state of header cells when scrolling

* fix: 🎨 optimize the highlight state for the row header cells in tree mode

* fix: 🐛 fix the test of merge-cells-spec

packages/s2-core/src/cell/col-cell.ts

@@ -38,7 +38,6 @@ export class ColCell extends HeaderCell {
     this.drawRightBorder();
     // draw hot-spot rect
     this.drawHotSpot();
-    this.update();
   }
 
   protected getColHotSpotKey() {

packages/s2-core/src/cell/data-cell.ts

@@ -20,6 +20,7 @@ import {
   getIconPosition,
   getTextAndIconArea,
   getTextPosition,
+  ifIncludeCell,
 } from '@/utils/data-cell';
 import { renderLine, renderRect, renderText } from '@/utils/g-renders';
 import { getEllipsisText } from '@/utils/text';
@@ -57,7 +58,7 @@ export class DataCell extends BaseCell<ViewMeta> {
   }
 
   protected handlePrepareSelect(cells: S2CellType[]) {
-    if (includes(cells, this)) {
+    if (ifIncludeCell(cells, this.getMeta())) {
       this.updateByState(InteractionStateName.PREPARE_SELECT);
     }
   }
@@ -75,7 +76,7 @@ export class DataCell extends BaseCell<ViewMeta> {
         break;
       // 单元格单选/多选
       case CellTypes.DATA_CELL:
-        if (includes(cells, this)) {
+        if (ifIncludeCell(cells, this.getMeta())) {
           this.updateByState(InteractionStateName.SELECTED);
         } else if (this.spreadsheet.options.selectedCellsSpotlight) {
           this.updateByState(InteractionStateName.UNSELECTED);

packages/s2-core/src/cell/row-cell.ts

@@ -19,7 +19,6 @@ import { get } from 'lodash';
 import { getEllipsisText, measureTextWidth } from '../utils/text';
 import { HeaderCell } from './header-cell';
 
-console.log(HeaderCell);
 export class RowCell extends HeaderCell {
   protected headerConfig: RowHeaderConfig;
 
@@ -55,8 +54,6 @@ export class RowCell extends HeaderCell {
     this.drawHotSpotInLeaf();
     // draw action icon shapes: trend icon, drill-down icon ...
     this.drawActionIcons();
-    // update the interaction state
-    this.update();
   }
 
   protected drawBackgroundColor() {

packages/s2-core/src/facet/base-facet.ts

@@ -172,6 +172,7 @@ export abstract class BaseFacet {
     this.mobileWheel = new Wheel(this.spreadsheet.container);
 
     this.mobileWheel.on('wheel', (ev: GestureEvent) => {
+      this.spreadsheet.hideTooltip();
       const originEvent = ev.event;
       const { deltaX, deltaY, x, y } = ev;
       // The coordinates of mobile and pc are three times different
@@ -750,6 +751,8 @@ export abstract class BaseFacet {
     const { deltaX, deltaY, layerX, layerY } = event;
     const [optimizedDeltaX, optimizedDeltaY] = optimizeScrollXY(deltaX, deltaY);
 
+    this.spreadsheet.hideTooltip();
+
     // 如果已经滚动在顶部或底部, 则无需触发滚动事件, 减少单元格重绘
     // TODO: 这里需要迁移 spreadsheet 的逻辑
     if (

packages/s2-core/src/interaction/events/hover-event.ts

@@ -39,6 +39,7 @@ export class HoverEvent extends BaseEvent {
       const allRowHeaderCells = getActiveHoverRowColCells(
         rowId,
         this.interaction.getAllRowHeaderCells(),
+        this.spreadsheet.isHierarchyTreeType(),
       );
       forEach(allRowHeaderCells, (cell: RowCell) => {
         cell.update();

packages/s2-core/src/utils/data-cell.ts

@@ -3,7 +3,9 @@ import {
   FilterDataItemCallback,
   IconCfg,
   MappingDataItemCallback,
+  S2CellType,
   TextTheme,
+  ViewMeta,
 } from '@/common/interface';
 import { SimpleBBox } from '@antv/g-canvas';
 import { EXTRA_FIELD, VALUE_FIELD } from 'src/common/constant';
@@ -142,3 +144,15 @@ export const handleDataItem = (
     ? callback(data[EXTRA_FIELD] as string, data[VALUE_FIELD])
     : data[VALUE_FIELD];
 };
+
+/**
+ * @description  Determine if the current cell belongs to Cells
+ * @param cells active cells
+ * @param meta the meta information of current cell
+ */
+export const ifIncludeCell = (cells: S2CellType[], meta: ViewMeta) => {
+  return cells.some((cell) => {
+    const cellMeta = cell.getMeta();
+    return cellMeta.colId === meta.colId && cellMeta.rowId === meta.rowId;
+  });
+};

packages/s2-core/src/utils/interaction/hover-event.ts

@@ -7,20 +7,27 @@ const generateId = (parentId: string, childrenId: string) => {
 };
 
 /**
- * @description return all the row cells or column cells which are needed to be highlighted
+ * @description Return all the row cells or column cells which are needed to be highlighted.
  * @param id rowId or colId
  * @param headerCells all the rowHeader cells or all the colHeader cells
- *
+ * @param isRowInHierarchyTreeType  The tree mode will only highlight the leaf nodes at the head of the row
  */
 export const getActiveHoverRowColCells = (
   id: string,
   headerCells: ColCell[] | RowCell[],
+  isRowInHierarchyTreeType?: boolean,
 ) => {
+  let allHeaderIds: string[];
   const ids = id.split(ID_SEPARATOR);
-  const allHeaderIds = [generateId(ids[0], ids[1])];
-  for (let i = 2; i < ids.length; i += 1) {
-    allHeaderIds.push(generateId(allHeaderIds[i - 2], ids[i]));
+  if (isRowInHierarchyTreeType) {
+    allHeaderIds = [id];
+  } else {
+    allHeaderIds = [generateId(ids[0], ids[1])];
+    for (let i = 2; i < ids.length; i += 1) {
+      allHeaderIds.push(generateId(allHeaderIds[i - 2], ids[i]));
+    }
   }
+
   const allHeaderCells = filter(headerCells, (cell: ColCell | RowCell) =>
     allHeaderIds.includes(cell.getMeta()?.id),
   );

packages/s2-core/tests/spreadsheet/merge-cells-spec.tsx

@@ -396,8 +396,7 @@ function MainLayout() {
   const onDataCellMouseUp = (value) => {
     console.log(value);
     sheet = value?.viewMeta?.spreadsheet;
-    const curSelectedState = sheet.getCurrentState();
-    const { cells } = curSelectedState;
+    const cells = sheet.interaction.getActiveCells();
     mergedCellsInfo = [];
     forEach(cells, (cell) => {
       mergedCellsInfo.push({