fix: 修复表格右键事件无法触发 close #2687 (#2690)

antvis · Apr 30, 2024 · 8b4f3e3 · 8b4f3e3
1 parent 164259b
commit 8b4f3e3
Show file tree

Hide file tree

Showing 13 changed files with 89 additions and 36 deletions.
diff --git a/packages/s2-core/__tests__/unit/interaction/event-controller-spec.ts b/packages/s2-core/__tests__/unit/interaction/event-controller-spec.ts
@@ -14,7 +14,7 @@ import {
   sleep,
 } from 'tests/util/helpers';
 import { Renderer } from '@antv/g-canvas';
-import { GEventType, GuiIcon } from '@/common';
+import { GuiIcon } from '@/common';
 import type { EmitterType } from '@/common/interface/emitter';
 import {
   CellType,
@@ -79,10 +79,7 @@ describe('Interaction Event Controller Tests', () => {
   };
 
   const expectEvents =
-    (
-      eventType: OriginEventType | GEventType,
-      customEvent?: (evt: FederatedEvent) => void,
-    ) =>
+    (eventType: OriginEventType, customEvent?: (evt: FederatedEvent) => void) =>
     (options: { eventNames: (keyof EmitterType)[]; type: CellType }) => {
       const { eventNames, type } = options;
 
@@ -176,7 +173,7 @@ describe('Interaction Event Controller Tests', () => {
       OriginEventType.POINTER_MOVE,
       OriginEventType.POINTER_UP,
       OriginEventType.MOUSE_OUT,
-      GEventType.RIGHT_MOUSE_UP,
+      OriginEventType.RIGHT_DOWN,
       OriginEventType.CLICK,
       OriginEventType.TOUCH_START,
     ];
@@ -388,7 +385,7 @@ describe('Interaction Event Controller Tests', () => {
     },
   ])(
     'should emit context menu event for %s',
-    expectEvents(GEventType.RIGHT_MOUSE_UP),
+    expectEvents(OriginEventType.RIGHT_DOWN),
   );
 
   test('should emit global context menu event', () => {
@@ -398,7 +395,7 @@ describe('Interaction Event Controller Tests', () => {
 
     const evt = createFederatedPointerEvent(
       spreadsheet,
-      GEventType.RIGHT_MOUSE_UP,
+      OriginEventType.RIGHT_DOWN,
     );
 
     evt.client.x = MOCK_CLIENT.x;

diff --git a/packages/s2-core/src/common/constant/events/g.ts b/packages/s2-core/src/common/constant/events/g.ts
diff --git a/packages/s2-core/src/common/constant/events/index.ts b/packages/s2-core/src/common/constant/events/index.ts
@@ -1,4 +1,3 @@
 export * from './interaction';
 export * from './origin';
 export * from './basic';
-export * from './g';
diff --git a/packages/s2-core/src/common/constant/events/origin.ts b/packages/s2-core/src/common/constant/events/origin.ts
@@ -1,3 +1,6 @@
+/**
+ * @see https://g.antv.antgroup.com/api/event/intro
+ */
 export enum OriginEventType {
   MOUSE_DOWN = 'mousedown',
   MOUSE_MOVE = 'mousemove',
@@ -19,4 +22,6 @@ export enum OriginEventType {
   POINTER_CANCEL = 'pointercancel',
   POINTER_ENTER = 'pointerenter',
   POINTER_OVER = 'pointerover',
+  RIGHT_DOWN = 'rightdown',
+  RIGHT_UP = 'rightup',
 }
diff --git a/packages/s2-core/src/interaction/event-controller.ts b/packages/s2-core/src/interaction/event-controller.ts
@@ -9,7 +9,6 @@ import { each, get, hasIn, isEmpty, isNil } from 'lodash';
 import { GuiIcon } from '../common';
 import {
   CellType,
-  GEventType,
   InteractionKeyboardKey,
   InterceptType,
   OriginEventType,
@@ -83,7 +82,11 @@ export class EventController {
     this.addCanvasEvent(OriginEventType.POINTER_MOVE, this.onCanvasMousemove);
     this.addCanvasEvent(OriginEventType.MOUSE_OUT, this.onCanvasMouseout);
     this.addCanvasEvent(OriginEventType.POINTER_UP, this.onCanvasMouseup);
-    this.addCanvasEvent(GEventType.RIGHT_MOUSE_UP, this.onCanvasContextMenu);
+    /**
+     * 如果监听 G Canvas, 右键对应的是 rightup/rightdown 事件, 如需禁用右键菜单 (preventDefault), 需要监听 DOM
+     * https://g.antv.antgroup.com/api/event/faq#%E7%A6%81%E7%94%A8%E5%8F%B3%E9%94%AE%E8%8F%9C%E5%8D%95
+     */
+    this.addCanvasEvent(OriginEventType.RIGHT_DOWN, this.onCanvasContextMenu);
 
     // spreadsheet events
     this.addS2Event(S2Event.GLOBAL_ACTION_ICON_CLICK, () => {
@@ -291,7 +294,7 @@ export class EventController {
     return false;
   }
 
-  private isResizeArea(event: CanvasEvent) {
+  private isResizeArea(event: CanvasEvent | MouseEvent) {
     const appendInfo = getAppendInfo(event.target as DisplayObject);
 
     return appendInfo?.isResizeArea;

diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
@@ -1593,6 +1593,10 @@ function MainLayout() {
                           onRowCellAllCollapsed={logHandler(
                             'onRowCellAllCollapsed',
                           )}
+                          onContextMenu={logHandler('onContextMenu')}
+                          onDataCellContextMenu={logHandler(
+                            'onDataCellContextMenu',
+                          )}
                         />
                       </React.StrictMode>
                     )}

diff --git a/s2-site/docs/api/components/sheet-component.zh.md b/s2-site/docs/api/components/sheet-component.zh.md
@@ -92,7 +92,7 @@ tag: Updated
 | onCopied | 复制事件 | (data: CopyableList) => void |  |  |
 | onActionIconHover | 行头操作 icon 悬停事件 | (event: CanvasEvent) => void |  |  |
 | onActionIconClick | 行头操作 icon 点击事件 | (event: CanvasEvent) => void |  |  |
-| onContextMenu | 右键单元格单击事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
+| onContextMenu | 右键单元格单击事件 ([禁用右键菜单不生效？](/manual/faq#%E7%A6%81%E7%94%A8%E5%8F%B3%E9%94%AE%E8%8F%9C%E5%8D%95%E4%B8%8D%E7%94%9F%E6%95%88)) | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
 | onMouseHover | 表格鼠标悬停事件 | (event: CanvasEvent) => void |  |  |
 | onMouseUp | 表格鼠标松开事件 | (event: CanvasEvent) => void |  |  |
 | onSelected | 单元格选中事件 | (cells: ( [Cell](/docs/api/basic-class/base-cell)[] ) => void |  |  |
@@ -216,7 +216,7 @@ type SheetComponentOptions = S2Options<
 | copied | 复制事件 | (data: CopyableList) => void |  |  |
 | actionIconHover | 行头操作 icon 悬停事件 | (event: CanvasEvent) => void |  |  |
 | actionIconClick | 行头操作 icon 点击事件 | (event: CanvasEvent) => void |  |  |
-| contextMenu | 右键单元格单击事件 | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
+| contextMenu | 右键单元格单击事件 ([禁用右键菜单不生效？](/manual/faq#%E7%A6%81%E7%94%A8%E5%8F%B3%E9%94%AE%E8%8F%9C%E5%8D%95%E4%B8%8D%E7%94%9F%E6%95%88)) | (data: [TargetCellInfo](#targetcellinfo)) => void |  |  |
 | mouseHover | 表格鼠标悬停事件 | (event: CanvasEvent) => void |  |  |
 | mouseUp | 表格鼠标松开事件 | (event: CanvasEvent) => void |  |  |
 | selected | 单元格选中事件 | ( cells: ([Cell](/docs/api/basic-class/base-cell)[] ) => void |  |  |

diff --git a/s2-site/docs/api/general/S2Event.zh.md b/s2-site/docs/api/general/S2Event.zh.md
@@ -140,7 +140,7 @@ s2.on(S2Event.ROW_CELL_CLICK, (event) => {
 | 复制      | `S2Event.GLOBAL_COPIED`            | 对选中的单元格复制                           |
 | 鼠标松开  | `S2Event.GLOBAL_MOUSE_UP`          | 图表区域鼠标松开                             |
 | 点击      | `S2Event.GLOBAL_CLICK`             | 图表区域点击                                 |
-| 右键      | `S2Event.GLOBAL_CONTEXT_MENU`      | 图表区域按下右键                             |
+| 右键      | `S2Event.GLOBAL_CONTEXT_MENU`      | 图表区域按下右键 ([禁用右键菜单不生效？](/manual/faq#%E7%A6%81%E7%94%A8%E5%8F%B3%E9%94%AE%E8%8F%9C%E5%8D%95%E4%B8%8D%E7%94%9F%E6%95%88))                          |
 | 选中      | `S2Event.GLOBAL_SELECTED`          | 选中单元格时，如：刷选，多选，单选           |
 | 悬停      | `S2Event.GLOBAL_HOVER`             | 鼠标悬停在单元格                             |
 | 重置      | `S2Event.GLOBAL_RESET`             | 点击空白处，按下 Esc 键 重置交互样式时       |

diff --git a/s2-site/docs/manual/advanced/interaction/custom.zh.md b/s2-site/docs/manual/advanced/interaction/custom.zh.md
@@ -74,7 +74,7 @@ import { TableSheet } from '@antv/s2';
 
 class ContextMenuInteraction extends BaseEvent {
   bindEvents() {
-    this.spreadsheet.on(S2Event.GLOBAL_CONTEXT_MENU, (event) => {
+    this.spreadsheet.getCanvasElement().addEventListener('contextmenu', (event) => {
       // 禁止弹出右键菜单
       event.preventDefault();
     });

diff --git a/s2-site/docs/manual/faq.zh.md b/s2-site/docs/manual/faq.zh.md
@@ -286,6 +286,24 @@ const s2Options = {
 }
 ```
 
+### 禁用右键菜单不生效？
+
+表格内部监听 `G` 的 `rightup/rightdown` 事件，而不是 `<canvas/>` DOM 的 `contextmenu` 事件，因此默认行为**并不是弹出右键系统菜单**，所以 `event.preventDefault()` 无效：
+
+```ts | pure
+// ❌ 无效写法
+s2.on(S2Event.GLOBAL_CONTEXT_MENU, (event) => {
+  event.preventDefault();
+})
+
+// ✅ 正确写法
+s2.getCanvasElement().addEventListener('contextmenu', (event) => {
+  event.preventDefault();
+});
+```
+
+[了解更多](https://g.antv.antgroup.com/api/event/faq#%E7%A6%81%E7%94%A8%E5%8F%B3%E9%94%AE%E8%8F%9C%E5%8D%95)
+
 ### S2 有对应的 `Vue` 或者 `Angular` 版本吗？如何获取新版本发布通知？
 
 <embed src="@/docs/common/packages.zh.md"></embed>

diff --git a/s2-site/examples/interaction/custom/demo/disable-context-menu.ts b/s2-site/examples/interaction/custom/demo/disable-context-menu.ts
@@ -0,0 +1,37 @@
+import { PivotSheet, BaseEvent, S2Options } from '@antv/s2';
+import '@antv/s2/dist/style.min.css';
+
+class DisableContextMenuInteraction extends BaseEvent {
+  bindEvents() {
+    this.spreadsheet
+      .getCanvasElement()
+      .addEventListener('contextmenu', (event) => {
+        event.preventDefault();
+      });
+  }
+}
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
+)
+  .then((res) => res.json())
+  .then(async (dataCfg) => {
+    const container = document.getElementById('container');
+
+    const s2Options: S2Options = {
+      width: 600,
+      height: 480,
+      interaction: {
+        customInteractions: [
+          {
+            key: 'DisableContextMenuInteraction',
+            interaction: DisableContextMenuInteraction,
+          },
+        ],
+      },
+    };
+
+    const s2 = new PivotSheet(container, dataCfg, s2Options);
+
+    await s2.render();
+  });
diff --git a/s2-site/examples/interaction/custom/demo/double-click-hide-columns.ts b/s2-site/examples/interaction/custom/demo/double-click-hide-columns.ts
@@ -30,19 +30,7 @@ class HiddenInteraction extends BaseEvent {
   }
 }
 
-class ContextMenuInteraction extends BaseEvent {
-  bindEvents() {
-    // 禁止弹出右键菜单
-    this.spreadsheet.on(S2Event.GLOBAL_CONTEXT_MENU, (event) => {
-      event?.preventDefault?.();
-      console.log('右键', event);
-    });
-  }
-}
-
-fetch(
-  'https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json',
-)
+fetch('https://render.alipay.com/p/yuyan/180020010001215413/s2/basic.json')
   .then((res) => res.json())
   .then(async (data) => {
     const container = document.getElementById('container');
@@ -87,10 +75,6 @@ fetch(
             key: 'HiddenInteraction',
             interaction: HiddenInteraction,
           },
-          {
-            key: 'ContextMenuInteraction',
-            interaction: ContextMenuInteraction,
-          },
         ],
       },
     };

diff --git a/s2-site/examples/interaction/custom/demo/meta.json b/s2-site/examples/interaction/custom/demo/meta.json
@@ -19,6 +19,15 @@
         "en": "Show tooltip when hover row or column"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/c%24ICO1qvb/Kapture%2525202021-12-03%252520at%25252016.30.11.gif"
+    },
+    {
+      "filename": "disable-context-menu.ts",
+      "title": {
+        "zh": "禁用右键菜单",
+        "en": "Disable context menu"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*i57MR6OphToAAAAAAAAAAAAADmJ7AQ/original",
+      "new": true
     }
   ]
 }