fix: 修复数值单元格内的自定义 icon 点击时会选中单元格的问题

antvis · Feb 28, 2024 · 88400b9 · 88400b9
1 parent 48b7073
commit 88400b9
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 31 deletions.
diff --git a/packages/s2-core/__tests__/bugs/issue-1520-spec.ts b/packages/s2-core/__tests__/bugs/issue-1520-spec.ts
@@ -6,9 +6,9 @@
 import { getContainer } from '../util/helpers';
 import * as mockDataConfig from '../data/data-issue-1520.json';
 import { PivotSheet, SpreadSheet } from '@/sheet-type';
-import { GuiIcon } from '@/common';
+import { GuiIcon, type S2Options } from '@/common';
 
-const s2Options = {
+const s2Options: S2Options = {
   width: 800,
   height: 600,
   conditions: {

diff --git a/packages/s2-core/__tests__/bugs/issue-292-spec.ts b/packages/s2-core/__tests__/bugs/issue-292-spec.ts
@@ -6,9 +6,10 @@
  */
 import { getContainer } from '../util/helpers';
 import * as mockDataConfig from '../data/data-issue-292.json';
+import type { S2Options } from '../../src';
 import { PivotSheet } from '@/sheet-type';
 
-const s2Options = {
+const s2Options: S2Options = {
   width: 800,
   height: 600,
 };

diff --git a/packages/s2-core/__tests__/bugs/issue-368-spec.ts b/packages/s2-core/__tests__/bugs/issue-368-spec.ts
@@ -4,11 +4,12 @@
  * Wrong style when show the totals in multi-value mode
  *
  */
+import type { S2Options } from '../../src';
 import * as mockDataConfig from '../data/data-issue-368.json';
 import { getContainer } from '../util/helpers';
 import { PivotSheet, SpreadSheet } from '@/sheet-type';
 
-const s2Options = {
+const s2Options: S2Options = {
   width: 800,
   height: 600,
   totals: {
@@ -32,7 +33,7 @@ const s2Options = {
 describe('Total Cells Rendering Test', () => {
   let s2: SpreadSheet;
 
-  beforeAll(async () => {
+  beforeEach(async () => {
     s2 = new PivotSheet(getContainer(), mockDataConfig, s2Options);
 
     await s2.render();
@@ -66,7 +67,7 @@ describe('Total Cells Rendering Test', () => {
       totals: {
         ...s2Options.totals,
         row: {
-          ...s2Options.totals.row,
+          ...s2Options.totals!.row,
           subTotalsDimensions: ['row0'],
         },
       },

diff --git a/packages/s2-core/__tests__/bugs/issue-446-spec.ts b/packages/s2-core/__tests__/bugs/issue-446-spec.ts
@@ -6,10 +6,11 @@
  */
 import { getContainer } from '../util/helpers';
 import * as mockDataConfig from '../data/data-issue-446.json';
+import type { S2Options } from '../../src';
 import { TableSheet } from '@/sheet-type';
 import { asyncGetAllPlainData } from '@/utils';
 
-const s2Options = {
+const s2Options: S2Options = {
   width: 800,
   height: 600,
   seriesNumber: {

diff --git a/packages/s2-core/__tests__/bugs/issue-507-spec.ts b/packages/s2-core/__tests__/bugs/issue-507-spec.ts
@@ -57,15 +57,15 @@ describe('Spreadsheet Empty Test', () => {
   });
 
   test('should render skeleton when tree sheet in the valueInCols mode', async () => {
-    const valueInColstreeS2 = new PivotSheet(
+    const valueInColsTreeS2 = new PivotSheet(
       getContainer(),
       valueInCols,
       treeOptions,
     );
 
-    await valueInColstreeS2.render();
+    await valueInColsTreeS2.render();
 
-    const layoutResult = valueInColstreeS2.facet.getLayoutResult();
+    const layoutResult = valueInColsTreeS2.facet.getLayoutResult();
 
     expect(layoutResult.colNodes).toHaveLength(5);
     expect(layoutResult.rowNodes).toBeEmpty();

diff --git a/packages/s2-core/__tests__/bugs/issue-511-spec.ts b/packages/s2-core/__tests__/bugs/issue-511-spec.ts
@@ -5,9 +5,10 @@
  */
 import { getContainer } from '../util/helpers';
 import * as mockDataConfig from '../data/data-issue-511.json';
+import type { S2Options } from '../../src';
 import { PivotSheet } from '@/sheet-type';
 
-const s2Options = {
+const s2Options: S2Options = {
   width: 800,
   height: 600,
 };

diff --git a/packages/s2-core/__tests__/bugs/issue-868-spec.ts b/packages/s2-core/__tests__/bugs/issue-868-spec.ts
@@ -6,9 +6,10 @@
 
 import { getContainer } from '../util/helpers';
 import * as mockDataConfig from '../data/data-issue-868.json';
+import type { S2Options } from '../../src';
 import { PivotSheet } from '@/sheet-type';
 
-const s2Options = {
+const s2Options: S2Options = {
   width: 800,
   height: 600,
 };

diff --git a/packages/s2-core/__tests__/unit/interaction/event-controller-spec.ts b/packages/s2-core/__tests__/unit/interaction/event-controller-spec.ts
@@ -874,13 +874,16 @@ describe('Interaction Event Controller Tests', () => {
     { cellType: CellType.ROW_CELL, event: S2Event.ROW_CELL_CLICK },
     { cellType: CellType.COL_CELL, event: S2Event.COL_CELL_CLICK },
     { cellType: CellType.CORNER_CELL, event: S2Event.CORNER_CELL_CLICK },
+    { cellType: CellType.DATA_CELL, event: S2Event.DATA_CELL_CLICK },
+    { cellType: CellType.MERGED_CELL, event: S2Event.MERGED_CELLS_CLICK },
   ])(
     'should not trigger click event if event target is gui icon image shape for event %o',
     async ({ cellType, event }) => {
       spreadsheet.getCell = () =>
         ({
           cellType,
           getMeta: () => {},
+          getConditionIconShapes: () => [],
         }) as any;
 
       const handler = jest.fn();
@@ -926,13 +929,16 @@ describe('Interaction Event Controller Tests', () => {
     { cellType: CellType.ROW_CELL, event: S2Event.ROW_CELL_CLICK },
     { cellType: CellType.COL_CELL, event: S2Event.COL_CELL_CLICK },
     { cellType: CellType.CORNER_CELL, event: S2Event.CORNER_CELL_CLICK },
+    { cellType: CellType.DATA_CELL, event: S2Event.DATA_CELL_CLICK },
+    { cellType: CellType.MERGED_CELL, event: S2Event.MERGED_CELLS_CLICK },
   ])(
     'should trigger click event if event target is custom image shape for event %o',
     ({ cellType, event }) => {
       spreadsheet.getCell = () =>
         ({
           cellType,
           getMeta: () => {},
+          getConditionIconShapes: () => [],
         }) as any;
 
       const handler = jest.fn();
@@ -961,6 +967,51 @@ describe('Interaction Event Controller Tests', () => {
     },
   );
 
+  test.each([
+    { cellType: CellType.ROW_CELL, event: S2Event.ROW_CELL_CLICK },
+    { cellType: CellType.COL_CELL, event: S2Event.COL_CELL_CLICK },
+    { cellType: CellType.CORNER_CELL, event: S2Event.CORNER_CELL_CLICK },
+    { cellType: CellType.DATA_CELL, event: S2Event.DATA_CELL_CLICK },
+    { cellType: CellType.MERGED_CELL, event: S2Event.MERGED_CELLS_CLICK },
+  ])(
+    'should trigger click event if event target is condition icon image shape for event %o',
+    async ({ cellType, event }) => {
+      const guiIcon = new GuiIcon({
+        name: 'SortUp',
+        width: 10,
+        height: 10,
+      });
+
+      spreadsheet.getCell = () =>
+        ({
+          cellType,
+          getMeta: () => {},
+          // 模拟当前的 target 是字段标记的 icon
+          getConditionIconShapes: () => [guiIcon],
+        }) as any;
+
+      const handler = jest.fn();
+
+      await sleep(200); // 图片加载
+
+      spreadsheet.container.appendChild(guiIcon); // 加入 g 渲染树才有事件传递
+      spreadsheet.once(event, handler);
+
+      // 内部的 GuiIcon
+      const { iconImageShape } = guiIcon;
+
+      Object.defineProperty(eventController, 'target', {
+        value: iconImageShape,
+        writable: true,
+      });
+      iconImageShape.dispatchEvent(
+        createFederatedPointerEvent(spreadsheet, OriginEventType.POINTER_UP),
+      );
+
+      expect(handler).toHaveBeenCalledTimes(1);
+    },
+  );
+
   // https://github.com/antvis/S2/issues/2170
   test('should not reset if tooltip content clicked', () => {
     const reset = jest.fn();

diff --git a/packages/s2-core/src/common/constant/events/basic.ts b/packages/s2-core/src/common/constant/events/basic.ts
@@ -56,7 +56,7 @@ export enum S2Event {
   MERGED_CELLS_HOVER = 'merged-cells:hover',
   MERGED_CELLS_CLICK = 'merged-cells:click',
   MERGED_CELLS_DOUBLE_CLICK = 'merged-cells:double-click',
-  MERGED_CELLS_CONTEXT_MENU = 'merged-cell:context-menu',
+  MERGED_CELLS_CONTEXT_MENU = 'merged-cells:context-menu',
   MERGED_CELLS_MOUSE_DOWN = 'merged-cells:mouse-down',
   MERGED_CELLS_MOUSE_UP = 'merged-cells:mouse-up',
   MERGED_CELLS_MOUSE_MOVE = 'merged-cells:mouse-move',

diff --git a/packages/s2-core/src/common/icons/gui-icon.ts b/packages/s2-core/src/common/icons/gui-icon.ts
@@ -56,7 +56,6 @@ export class GuiIcon extends Group {
 
       const img = new Image();
 
-      // 成功
       img.onload = () => {
         ImageCache[cacheKey] = img;
         resolve(img);

diff --git a/packages/s2-core/src/interaction/event-controller.ts b/packages/s2-core/src/interaction/event-controller.ts
@@ -15,7 +15,7 @@ import {
   S2Event,
   SHAPE_STYLE_MAP,
 } from '../common/constant';
-import type { EmitterType, ResizeInfo } from '../common/interface';
+import type { EmitterType, ResizeInfo, S2CellType } from '../common/interface';
 import { CustomImage } from '../engine';
 import type { SpreadSheet } from '../sheet-type';
 import { getSelectedData } from '../utils/export/copy';
@@ -118,6 +118,15 @@ export class EventController {
     return target instanceof CustomImage && target.imgType === GuiIcon.type;
   };
 
+  private isConditionIconShape = (
+    target: CanvasEvent['target'],
+    cell: S2CellType,
+  ) => {
+    return cell
+      .getConditionIconShapes()
+      .some((shape) => shape?.name === (target as Group)?.attributes?.name);
+  };
+
   // Windows and Mac OS
   private onKeyboardCopy(event: KeyboardEvent) {
     const { copy } = this.spreadsheet.options.interaction!;
@@ -469,34 +478,27 @@ export class EventController {
     if (cell) {
       const cellType = cell.cellType;
 
-      // target相同，说明是一个cell内的 click 事件
+      // target 相同，说明是一个 cell 内的 click 事件
       if (this.target === event.target) {
-        const isGuiIconShape = this.isGuiIconShape(event.target);
+        // 屏蔽 actionIcons 的点击，字段标记增加的 icon 除外.
+        if (
+          this.isGuiIconShape(event.target) &&
+          !this.isConditionIconShape(event.target, cell)
+        ) {
+          return;
+        }
 
         switch (cellType) {
           case CellType.DATA_CELL:
             this.spreadsheet.emit(S2Event.DATA_CELL_CLICK, event);
             break;
           case CellType.ROW_CELL:
-            // 屏蔽 actionIcons 的点击，只有 HeaderCells 需要， DataCell 有状态类 icon， 不需要屏蔽
-            if (isGuiIconShape) {
-              break;
-            }
-
             this.spreadsheet.emit(S2Event.ROW_CELL_CLICK, event);
             break;
           case CellType.COL_CELL:
-            if (isGuiIconShape) {
-              break;
-            }
-
             this.spreadsheet.emit(S2Event.COL_CELL_CLICK, event);
             break;
           case CellType.CORNER_CELL:
-            if (isGuiIconShape) {
-              break;
-            }
-
             this.spreadsheet.emit(S2Event.CORNER_CELL_CLICK, event);
             break;
           case CellType.MERGED_CELL:
@@ -507,7 +509,7 @@ export class EventController {
         }
       }
 
-      // 通用的mouseup事件
+      // 通用的 mouseup 事件
       switch (cellType) {
         case CellType.DATA_CELL:
           this.spreadsheet.emit(S2Event.DATA_CELL_MOUSE_UP, event);