fix(interaction): 修复行头滚动刷选范围判断错误

packages/s2-core/src/interaction/brush-selection/base-brush-selection.ts

@@ -1,5 +1,6 @@
 import type { Event as CanvasEvent, IShape, Point } from '@antv/g-canvas';
-import { cloneDeep, isEmpty, isNil, map, throttle } from 'lodash';
+import { cloneDeep, isEmpty, isNil, last, map, throttle } from 'lodash';
+import { ColCell, DataCell, RowCell } from '../../cell';
 import {
   FRONT_GROUND_GROUP_BRUSH_SELECTION_Z_INDEX,
   InteractionStateName,
@@ -17,28 +18,27 @@ import type {
   BrushRange,
   OffsetConfig,
   OnUpdateCells,
+  Rect,
   S2CellType,
   ViewMeta,
 } from '../../common/interface';
 import type { TableFacet } from '../../facet';
+import type { Node } from '../../facet/layout/node';
 import {
   isFrozenCol,
   isFrozenRow,
   isFrozenTrailingCol,
   isFrozenTrailingRow,
 } from '../../facet/utils';
-import type { Node } from '../../facet/layout/node';
+import { getCellsTooltipData } from '../../utils';
 import {
   getCellMeta,
   getScrollOffsetForCol,
   getScrollOffsetForRow,
 } from '../../utils/interaction';
 import { getValidFrozenOptions } from '../../utils/layout/frozen';
-import { getCellsTooltipData } from '../../utils';
-import { ColCell, DataCell, RowCell } from '../../cell';
 import type { BaseEventImplement } from '../base-event';
 import { BaseEvent } from '../base-interaction';
-import type { Rect } from '../../common/interface';
 
 /**
  * 刷选基类, dataCell, rowCell, colCell 支持滚动刷选
@@ -135,10 +135,12 @@ export class BaseBrushSelection
     this.mouseMoveDistanceFromCanvas = deltaVal;
   };
 
-  public formatBrushPointForScroll = (delta: { x: number; y: number }) => {
+  public formatBrushPointForScroll = (delta: Point, isRowHeader = false) => {
     const { x, y } = delta;
     const { facet } = this.spreadsheet;
-    const { minX, minY, maxX, maxY } = facet.panelBBox;
+    const { minX, maxX } = isRowHeader ? facet.cornerBBox : facet.panelBBox;
+    const { minY, maxY } = facet.panelBBox;
+
     let newX = this.endBrushPoint?.x + x;
     let newY = this.endBrushPoint?.y + y;
     let needScrollForX = true;
@@ -302,6 +304,23 @@ export class BaseBrushSelection
     return rowIndex;
   };
 
+  public getWillScrollRowIndexDiff = (dir: ScrollDirection): number => {
+    return dir === ScrollDirection.TRAILING ? 1 : -1;
+  };
+
+  public getDefaultWillScrollToRowIndex = (dir: ScrollDirection) => {
+    const rowIndex = this.adjustNextRowIndexWithFrozen(
+      this.endBrushPoint.rowIndex,
+      dir,
+    );
+    const nextRowIndex = rowIndex + this.getWillScrollRowIndexDiff(dir);
+    return this.validateYIndex(nextRowIndex);
+  };
+
+  protected getWillScrollToRowIndex = (dir: ScrollDirection): number => {
+    return this.getDefaultWillScrollToRowIndex(dir);
+  };
+
   private getNextScrollDelta = (config: BrushAutoScrollConfig) => {
     const { scrollX, scrollY } = this.spreadsheet.facet.getScrollOffset();
 
@@ -311,16 +330,15 @@ export class BaseBrushSelection
     if (config.y.scroll) {
       const dir =
         config.y.value > 0 ? ScrollDirection.TRAILING : ScrollDirection.LEADING;
-      const rowIndex = this.adjustNextRowIndexWithFrozen(
-        this.endBrushPoint.rowIndex,
-        dir,
-      );
-      const nextIndex = this.validateYIndex(
-        rowIndex + (config.y.value > 0 ? 1 : -1),
-      );
-      y = isNil(nextIndex)
-        ? 0
-        : getScrollOffsetForRow(nextIndex, dir, this.spreadsheet) - scrollY;
+      const willScrollToRowIndex = this.getWillScrollToRowIndex(dir);
+      const scrollOffsetY =
+        getScrollOffsetForRow(willScrollToRowIndex, dir, this.spreadsheet) -
+        scrollY;
+      const isInvalidScrollOffset =
+        isNil(willScrollToRowIndex) ||
+        isNil(scrollOffsetY) ||
+        Number.isNaN(scrollOffsetY);
+      y = isInvalidScrollOffset ? 0 : scrollOffsetY;
     }
 
     if (config.x.scroll) {
@@ -425,7 +443,7 @@ export class BaseBrushSelection
       const {
         x: { value: newX, needScroll: needScrollForX },
         y: { value: newY, needScroll: needScrollForY },
-      } = this.formatBrushPointForScroll({ x, y });
+      } = this.formatBrushPointForScroll({ x, y }, isRowHeader);
 
       const config = this.autoScrollConfig;
       if (needScrollForY) {

packages/s2-core/src/interaction/brush-selection/row-brush-selection.ts

@@ -1,10 +1,11 @@
 import type { Point } from '@antv/g-canvas';
-import { map } from 'lodash';
+import { isNil, last, map } from 'lodash';
 import { RowCell } from '../../cell';
 import { InterceptType, S2Event } from '../../common/constant';
 import {
   InteractionBrushSelectionStage,
   InteractionStateName,
+  ScrollDirection,
 } from '../../common/constant/interaction';
 import type { OnUpdateCells, ViewMeta } from '../../common/interface';
 import type { Node } from '../../facet/layout/node';
@@ -122,4 +123,38 @@ export class RowBrushSelection extends BaseBrushSelection {
       return new RowCell(node, this.spreadsheet);
     });
   }
+
+  protected getWillScrollToRowIndex = (dir: ScrollDirection): number => {
+    // 行头叶子节点, 按默认逻辑处理即可
+    if (!isNil(this.endBrushPoint.rowIndex)) {
+      return this.getDefaultWillScrollToRowIndex(dir);
+    }
+
+    /**
+     * 行头的非叶子节点滚动刷选, 以当前节点所对应 [可视范围] 内叶子节点为基准
+     * 例: 当前刷选 [浙江省] 行头的这一列, 向 🔽 滚动以 [纸张] 为准, 向 🔼滚动以 [桌子] 为准
+       ---------------------------------------
+     * |       | 杭州市 | 家具    | 🔼 [桌子]   |
+     * |       |       |        | 沙发   |
+     * |       |       | 办公用品 | 笔    |
+     * |       |       |         | 纸张  |
+     * | 浙江省 |       |         |      |
+     * |       | 绍兴市 | 家具     | 桌子  |
+     * |       |       |         | 沙发  |
+     * |       |       | 办公用品 | 笔    |
+     * |       |       |         | 🔽 [纸张] |
+     * -------------------------------------
+     */
+    const rowCell = this.spreadsheet.interaction.getAllRowHeaderCells();
+    const firstLeafCell = rowCell.find((cell) => {
+      const meta = cell.getMeta();
+      return meta.isLeaf;
+    });
+    const lastLeafCell = last(rowCell);
+    const visibleCell =
+      dir === ScrollDirection.TRAILING ? lastLeafCell : firstLeafCell;
+    const lastRowIndex = visibleCell?.getMeta()?.rowIndex ?? 0;
+    const nextRowIndex = lastRowIndex + this.getWillScrollRowIndexDiff(dir);
+    return this.validateYIndex(nextRowIndex);
+  };
 }

packages/s2-core/src/utils/interaction/scroll.ts

@@ -1,3 +1,4 @@
+import { isNil } from 'lodash';
 import { ScrollDirection } from '../../common/constant/interaction';
 import type { TableFacet } from '../../facet';
 import type { SpreadSheet } from '../../sheet-type';
@@ -29,9 +30,12 @@ export const getScrollOffsetForRow = (
 ) => {
   const { facet } = spreadsheet;
   const { getCellOffsetY } = facet.viewCellHeights;
+  const { height } = facet.panelBBox;
   const rowOffset = getCellOffsetY(rowIndex + 1);
 
-  const { height } = facet.panelBBox;
+  if (isNil(rowOffset)) {
+    return 0;
+  }
 
   const info = (facet as TableFacet)?.frozenGroupInfo;
   const frozenRowHeight = info?.frozenRow.height ?? 0;

packages/s2-react/playground/config.ts

@@ -89,7 +89,7 @@ export const s2Options: SheetComponentOptions = {
       hideMeasureColumn: false,
     },
     rowCfg: {
-      width: 200,
+      width: 100,
     },
     cellCfg: {
       height: 50,