fix(core): 悬停角头单元格后显示图标 (#2261)

Co-authored-by: Jinke Li <[email protected]>
antvis · Jul 7, 2023 · 2d85d57 · 2d85d57 · vercel · Jul 7, 2023
1 parent 589ebb5
commit 2d85d57
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 26 deletions.
diff --git a/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap b/packages/s2-core/__tests__/spreadsheet/__snapshots__/corner-spec.ts.snap
@@ -10,7 +10,7 @@ Array [
     "extra": undefined,
     "field": "province",
     "height": 30,
-    "id": "",
+    "id": "province",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -39,7 +39,7 @@ Array [
     "extra": undefined,
     "field": "city",
     "height": 30,
-    "id": "",
+    "id": "city",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -102,7 +102,7 @@ Array [
     "extra": undefined,
     "field": "province",
     "height": 30,
-    "id": "",
+    "id": "province",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -131,7 +131,7 @@ Array [
     "extra": undefined,
     "field": "city",
     "height": 30,
-    "id": "",
+    "id": "city",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -165,7 +165,7 @@ Array [
     "extra": undefined,
     "field": undefined,
     "height": 30,
-    "id": "",
+    "id": "province/city/数值",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -228,7 +228,7 @@ Array [
     "extra": undefined,
     "field": undefined,
     "height": 30,
-    "id": "",
+    "id": "province/city/数值",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -262,7 +262,7 @@ Array [
     "extra": undefined,
     "field": "province",
     "height": 30,
-    "id": "",
+    "id": "province",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -291,7 +291,7 @@ Array [
     "extra": undefined,
     "field": "city",
     "height": 30,
-    "id": "",
+    "id": "city",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -354,7 +354,7 @@ Array [
     "extra": undefined,
     "field": "province",
     "height": 30,
-    "id": "",
+    "id": "province",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -383,7 +383,7 @@ Array [
     "extra": undefined,
     "field": "city",
     "height": 30,
-    "id": "",
+    "id": "city",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -417,7 +417,7 @@ Array [
     "extra": undefined,
     "field": undefined,
     "height": 30,
-    "id": "",
+    "id": "province/city",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -480,7 +480,7 @@ Array [
     "extra": undefined,
     "field": undefined,
     "height": 30,
-    "id": "",
+    "id": "province/city",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -514,7 +514,7 @@ Array [
     "extra": undefined,
     "field": "province",
     "height": 30,
-    "id": "",
+    "id": "province",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -543,7 +543,7 @@ Array [
     "extra": undefined,
     "field": "city",
     "height": 30,
-    "id": "",
+    "id": "city",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -606,7 +606,7 @@ Array [
     "extra": undefined,
     "field": "province",
     "height": 30,
-    "id": "",
+    "id": "province",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -635,7 +635,7 @@ Array [
     "extra": undefined,
     "field": "city",
     "height": 30,
-    "id": "",
+    "id": "city",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -669,7 +669,7 @@ Array [
     "extra": undefined,
     "field": undefined,
     "height": 30,
-    "id": "",
+    "id": "province/city",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,
@@ -732,7 +732,7 @@ Array [
     "extra": undefined,
     "field": undefined,
     "height": 30,
-    "id": "",
+    "id": "province/city",
     "inCollapseNode": undefined,
     "isCollapsed": undefined,
     "isGrandTotals": undefined,

diff --git a/packages/s2-core/src/cell/corner-cell.ts b/packages/s2-core/src/cell/corner-cell.ts
@@ -35,7 +35,6 @@ import {
 } from '../utils/interaction/resize';
 import { isIPhoneX } from '../utils/is-mobile';
 import { getEllipsisText, getEmptyPlaceholder } from '../utils/text';
-import { i18n } from './../common/i18n';
 import { shouldAddResizeArea } from './../utils/interaction/resize';
 import { HeaderCell } from './header-cell';
 
@@ -54,8 +53,6 @@ export class CornerCell extends HeaderCell {
     return CellTypes.CORNER_CELL;
   }
 
-  public update() {}
-
   protected initCell() {
     super.initCell();
     this.resetTextAndConditionIconShapes();
@@ -66,6 +63,7 @@ export class CornerCell extends HeaderCell {
     this.drawActionIcons();
     this.drawBorderShape();
     this.drawResizeArea();
+    this.update();
   }
 
   /**

diff --git a/packages/s2-core/src/cell/header-cell.ts b/packages/s2-core/src/cell/header-cell.ts
@@ -395,9 +395,11 @@ export abstract class HeaderCell extends BaseCell<Node> {
     const { interaction } = this.spreadsheet;
     const stateInfo = interaction?.getState();
     const cells = interaction?.getCells([
+      CellTypes.CORNER_CELL,
       CellTypes.COL_CELL,
       CellTypes.ROW_CELL,
     ]);
+
     if (!first(cells)) {
       return;
     }

diff --git a/packages/s2-core/src/facet/header/corner.ts b/packages/s2-core/src/facet/header/corner.ts
@@ -135,7 +135,7 @@ export class CornerHeader extends BaseHeader<CornerHeaderConfig> {
 
       const cNode: Node = new Node({
         key: '',
-        id: '',
+        id: cornerText,
         value: cornerText,
       });
       cNode.x = position.x + seriesNumberWidth;
@@ -154,7 +154,7 @@ export class CornerHeader extends BaseHeader<CornerHeaderConfig> {
         const field = rows[rowNode.level];
         const cNode: Node = new Node({
           key: field,
-          id: '',
+          id: field,
           value: dataSet.getFieldName(field),
         });
 
@@ -176,7 +176,7 @@ export class CornerHeader extends BaseHeader<CornerHeaderConfig> {
         const field = columns[colNode.level];
         const cNode: Node = new Node({
           key: field,
-          id: '',
+          id: field,
           value: dataSet.getFieldName(field),
         });
         cNode.x = position.x;

diff --git a/packages/s2-core/src/interaction/base-interaction/hover.ts b/packages/s2-core/src/interaction/base-interaction/hover.ts
@@ -231,8 +231,7 @@ export class HoverEvent extends BaseEvent implements BaseEventImplement {
 
   public bindCornerCellHover() {
     this.spreadsheet.on(S2Event.CORNER_CELL_HOVER, (event: CanvasEvent) => {
-      const cell = this.spreadsheet.getCell(event.target);
-      this.showEllipsisTooltip(event, cell);
+      this.handleHeaderHover(event);
     });
   }
 }
diff --git a/packages/s2-react/playground/config.ts b/packages/s2-react/playground/config.ts
@@ -83,6 +83,23 @@ export const s2Options: SheetComponentOptions = {
       },
     ],
   },
+  headerActionIcons: [
+    {
+      iconNames: ['SortDown'],
+      belongsCell: 'colCell',
+      defaultHide: true,
+    },
+    {
+      iconNames: ['SortDown'],
+      belongsCell: 'rowCell',
+      defaultHide: true,
+    },
+    {
+      iconNames: ['SortDown'],
+      belongsCell: 'cornerCell',
+      defaultHide: true,
+    },
+  ],
   hierarchyType: 'grid',
   style: {
     colCfg: {