feat: 增加 axis cell hover 交互

packages/s2-core/__tests__/unit/utils/interaction/hover-event-spec.ts

@@ -3,7 +3,7 @@ import type { Node } from '@/facet/layout/node';
 import type { SpreadSheet } from '@/sheet-type/spread-sheet';
 import {
   getActiveHoverHeaderCells,
-  updateAllColHeaderCellState,
+  updateAllHeaderCellState,
 } from '@/utils/interaction/hover-event';
 
 import { InteractionStateName } from '@/common';
@@ -51,7 +51,7 @@ describe('Hover Event Utils Tests', () => {
         new ColCell({} as unknown as Node, {} as unknown as SpreadSheet),
       ];
 
-      updateAllColHeaderCellState(
+      updateAllHeaderCellState(
         'root[&]city',
         cells,
         InteractionStateName.HOVER,

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

@@ -442,15 +442,19 @@ export abstract class HeaderCell<
     return this.leftIconPosition || this.rightIconPosition;
   }
 
-  public update() {
-    const { interaction } = this.spreadsheet;
-    const stateInfo = interaction?.getState();
-    const cells = interaction?.getCells([
+  protected getInteractedCells() {
+    return this.spreadsheet.interaction?.getCells([
       CellType.CORNER_CELL,
       CellType.COL_CELL,
       CellType.ROW_CELL,
       CellType.SERIES_NUMBER_CELL,
     ]);
+  }
+
+  public update() {
+    const { interaction } = this.spreadsheet;
+    const stateInfo = interaction?.getState();
+    const cells = this.getInteractedCells();
 
     if (!first(cells)) {
       return;

packages/s2-core/src/extends/pivot-chart/cell/axis-col-cell.ts

@@ -3,19 +3,19 @@ import { corelib, renderToMountedElement, type G2Spec } from '@antv/g2';
 import {
   CellBorderPosition,
   CellClipBox,
-  CellType,
   ColCell,
   getOrCreateResizeAreaGroupById,
 } from '@antv/s2';
-import { AxisCellType, KEY_GROUP_COL_AXIS_RESIZE_AREA } from '../constant';
+import { KEY_GROUP_COL_AXIS_RESIZE_AREA } from '../constant';
 import { getAxisXOptions, getAxisYOptions } from '../utils/chart-options';
 import { waitForCellMounted } from '../utils/schedule';
+import { AxisCellType } from './cell-type';
 
 export class AxisColCell extends ColCell {
   axisShape: Group;
 
   public get cellType() {
-    return AxisCellType.AXIS_ROW_CELL as unknown as CellType;
+    return AxisCellType.AXIS_COL_CELL as any;
   }
 
   protected getBorderPositions(): CellBorderPosition[] {
@@ -30,14 +30,20 @@ export class AxisColCell extends ColCell {
     return false;
   }
 
+  protected getInteractedCells() {
+    return this.spreadsheet.interaction?.getCells([
+      AxisCellType.AXIS_COL_CELL as any,
+    ]);
+  }
+
   protected initCell(): void {
     this.drawBackgroundShape();
     this.drawInteractiveBgShape();
     this.drawInteractiveBorderShape();
     this.drawAxisShape();
     this.drawBorders();
     this.drawResizeArea();
-    // this.update();
+    this.update();
   }
 
   protected getColResizeArea() {

packages/s2-core/src/extends/pivot-chart/cell/axis-cornor-cell.ts

@@ -1,14 +1,9 @@
-import {
-  CellBorderPosition,
-  CellClipBox,
-  CellType,
-  CornerCell,
-} from '@antv/s2';
-import { AxisCellType } from '../constant';
+import { CellBorderPosition, CellClipBox, CornerCell } from '@antv/s2';
+import { AxisCellType } from './cell-type';
 
 export class AxisCornerCell extends CornerCell {
   public get cellType() {
-    return AxisCellType.AXIS_CORNER_CELL as unknown as CellType;
+    return AxisCellType.AXIS_CORNER_CELL as any;
   }
 
   protected getBorderPositions(): CellBorderPosition[] {
@@ -33,9 +28,16 @@ export class AxisCornerCell extends CornerCell {
     return 0;
   }
 
+  protected getInteractedCells() {
+    return this.spreadsheet.interaction?.getCells([
+      AxisCellType.AXIS_CORNER_CELL as any,
+    ]);
+  }
+
   protected initCell(): void {
     this.drawBackgroundShape();
     this.drawTextShape();
     this.drawBorders();
+    this.update();
   }
 }

packages/s2-core/src/extends/pivot-chart/cell/axis-row-cell.ts

@@ -3,19 +3,19 @@ import { corelib, renderToMountedElement, type G2Spec } from '@antv/g2';
 import {
   CellBorderPosition,
   CellClipBox,
-  CellType,
   RowCell,
   getOrCreateResizeAreaGroupById,
 } from '@antv/s2';
-import { AxisCellType, KEY_GROUP_ROW_AXIS_RESIZE_AREA } from '../constant';
+import { KEY_GROUP_ROW_AXIS_RESIZE_AREA } from '../constant';
 import { getAxisXOptions, getAxisYOptions } from '../utils/chart-options';
 import { waitForCellMounted } from '../utils/schedule';
+import { AxisCellType } from './cell-type';
 
 export class AxisRowCell extends RowCell {
   axisShape: Group;
 
   public get cellType() {
-    return AxisCellType.AXIS_ROW_CELL as unknown as CellType;
+    return AxisCellType.AXIS_ROW_CELL as any;
   }
 
   protected getBorderPositions(): CellBorderPosition[] {
@@ -26,13 +26,20 @@ export class AxisRowCell extends RowCell {
     return false;
   }
 
+  protected getInteractedCells() {
+    return this.spreadsheet.interaction?.getCells([
+      AxisCellType.AXIS_ROW_CELL as any,
+    ]);
+  }
+
   protected initCell(): void {
     this.drawBackgroundShape();
     this.drawInteractiveBgShape();
     this.drawInteractiveBorderShape();
     this.drawAxisShape();
     this.drawBorders();
     this.drawResizeAreaInLeaf();
+    this.update();
   }
 
   protected getResizesArea() {

packages/s2-core/src/extends/pivot-chart/cell/cell-type.ts

@@ -0,0 +1,5 @@
+export enum AxisCellType {
+  AXIS_ROW_CELL = 'axisRowCell',
+  AXIS_COL_CELL = 'axisColCell',
+  AXIS_CORNER_CELL = 'axisCornerCell',
+}

packages/s2-core/src/extends/pivot-chart/constant.ts

@@ -1,6 +1,7 @@
 import type { G2Spec } from '@antv/g2';
 import { LayoutWidthType, type S2DataConfig, type S2Options } from '@antv/s2';
 import { ChartDataCell } from './cell/chart-data-cell';
+import { AxisHover } from './interaction/axis-hover';
 
 export const DEFAULT_G2_SPEC: G2Spec = {
   type: 'interval',
@@ -22,6 +23,14 @@ export const DEFAULT_OPTIONS: S2Options = {
   chartCoordinate: 'cartesian',
   chartSpec: DEFAULT_G2_SPEC,
   dataCell: (viewMeta, spreadsheet) => new ChartDataCell(viewMeta, spreadsheet),
+  interaction: {
+    customInteractions: [
+      {
+        key: 'axisHover',
+        interaction: AxisHover,
+      },
+    ],
+  },
 };
 
 export const FIXED_OPTIONS: S2Options = {
@@ -47,12 +56,6 @@ export const DEFAULT_ROW_AXIS_SIZE = 100;
 export const DEFAULT_COL_AXIS_SIZE = 50;
 export const DEFAULT_DIMENSION_SIZE = 50;
 
-export enum AxisCellType {
-  AXIS_ROW_CELL = 'axisRowCell',
-  AXIS_COL_CELL = 'axisColCell',
-  AXIS_CORNER_CELL = 'axisCornerCell',
-}
-
 /**
  * row axis
  */

packages/s2-core/src/extends/pivot-chart/facet/pivot-chart-facet.ts

@@ -4,26 +4,27 @@ import {
   Node,
   ORIGIN_FIELD,
   PivotFacet,
+  ScrollType,
+  getAllChildCells,
   getCellWidth,
   getDataCellId,
+  getHeaderTotalStatus,
   type FrameConfig,
   type LayoutResult,
+  type S2CellType,
   type ScrollChangeParams,
   type ViewMeta,
 } from '@antv/s2';
 import {
+  concat,
   floor,
   get,
   isEmpty,
   isNumber,
   last,
   merge,
-  reduce,
   sum,
 } from 'lodash';
-import { ScrollType } from '../../../ui/scrollbar';
-import { getHeaderTotalStatus } from '../../../utils/dataset/pivot-data-set';
-import { getIndexRangeWithOffsets } from '../../../utils/facet';
 import {
   KEY_GROUP_COL_AXIS_RESIZE_AREA,
   KEY_GROUP_ROW_AXIS_RESIZE_AREA,
@@ -33,6 +34,10 @@ import { AxisCornerHeader } from '../header/axis-corner';
 import { AxisRowHeader } from '../header/axis-row';
 import { CornerHeader } from '../header/corner';
 
+import { AxisColCell } from '../cell/axis-col-cell';
+import { AxisCornerCell } from '../cell/axis-cornor-cell';
+import { AxisRowCell } from '../cell/axis-row-cell';
+import { AxisCellType } from '../cell/cell-type';
 import type { PivotChart } from '../index';
 import { separateRowColLeafNodes } from '../utils/separate-axis';
 import { CornerBBox } from './corner-bbox';
@@ -454,31 +459,6 @@ export class PivotChartFacet extends PivotFacet {
     }
   }
 
-  public override getViewCellHeights() {
-    const rowLeafNodes = this.layoutResult.axisRowsHierarchy?.getLeaves() ?? [];
-
-    const heights = reduce(
-      rowLeafNodes,
-      (result: number[], node: Node) => {
-        const currentNodeHeight = last(result) || 0;
-
-        result.push(currentNodeHeight + node.height);
-
-        return result;
-      },
-      [0],
-    );
-
-    return {
-      getTotalHeight: () => last(heights) || 0,
-      getCellOffsetY: (index: number) => heights[index] || 0,
-      // 多了一个数据 [0]
-      getTotalLength: () => heights.length - 1,
-      getIndexRange: (minHeight: number, maxHeight: number) =>
-        getIndexRangeWithOffsets(heights, minHeight, maxHeight),
-    };
-  }
-
   /**
    * 根据行列索引获取单元格元数据
    */
@@ -564,4 +544,92 @@ export class PivotChartFacet extends PivotFacet {
       height,
     };
   }
+
+  public getAxisCornerCells(): AxisCornerCell[] {
+    const headerChildren = (this.getAxisCornerHeader()?.children ||
+      []) as AxisCornerCell[];
+
+    return getAllChildCells(headerChildren, AxisCornerCell).filter(
+      (cell: S2CellType) =>
+        cell.cellType === (AxisCellType.AXIS_CORNER_CELL as any),
+    );
+  }
+
+  public getAxisRowCells(): AxisRowCell[] {
+    const headerChildren = (this.getAxisRowHeader()?.children ||
+      []) as AxisRowCell[];
+
+    return getAllChildCells(headerChildren, AxisRowCell).filter(
+      (cell: S2CellType) =>
+        cell.cellType === (AxisCellType.AXIS_ROW_CELL as any),
+    );
+  }
+
+  public getAxisColCells(): AxisColCell[] {
+    const headerChildren = (this.getAxisColHeader()?.children ||
+      []) as AxisColCell[];
+
+    return getAllChildCells(headerChildren, AxisColCell).filter(
+      (cell: S2CellType) =>
+        cell.cellType === (AxisCellType.AXIS_COL_CELL as any),
+    );
+  }
+
+  /**
+   * 获取表头单元格 (序号,角头,行头,列头) (不含可视区域)
+   * @example 获取全部: facet.getHeaderCells()
+   * @example 获取一组 facet.getHeaderCells(['root[&]浙江省[&]宁波市', 'root[&]浙江省[&]杭州市'])
+   */
+  public getHeaderCells(cellIds?: string[]): S2CellType<ViewMeta>[] {
+    const headerCells = concat<S2CellType>(
+      this.getCornerCells(),
+      this.getSeriesNumberCells(),
+      this.getRowCells(),
+      this.getColCells(),
+      this.getAxisCornerCells(),
+      this.getAxisRowCells(),
+      this.getAxisColCells(),
+    );
+
+    if (!cellIds) {
+      return headerCells;
+    }
+
+    return headerCells.filter((cell) => cellIds.includes(cell.getMeta().id));
+  }
+
+  public getAxisCornerNodes(): Node[] {
+    return this.axisCornerHeader?.getNodes() || [];
+  }
+
+  public getAxisRowNodes(): Node[] {
+    return this.axisRowHeader?.getNodes() || [];
+  }
+
+  public getAxisColNodes(): Node[] {
+    return this.axisColHeader?.getNodes() || [];
+  }
+
+  /**
+   * 获取表头节点 (角头,序号,行头,列头) (含可视区域)
+   * @example 获取全部: facet.getHeaderNodes()
+   * @example 获取一组 facet.getHeaderNodes(['root[&]浙江省[&]宁波市', 'root[&]浙江省[&]杭州市'])
+   */
+  public getHeaderNodes(nodeIds?: string[]): Node[] {
+    const headerNodes = concat<Node>(
+      this.getCornerNodes(),
+      this.getSeriesNumberNodes(),
+      this.getRowNodes(),
+      this.getColNodes(),
+      this.getAxisCornerNodes(),
+      this.getAxisRowNodes(),
+      this.getAxisColNodes(),
+    );
+
+    if (!nodeIds) {
+      return headerNodes;
+    }
+
+    return headerNodes.filter((node) => nodeIds.includes(node.id));
+  }
 }