chore: fix cr

packages/g6/src/plugins/contextmenu.ts

@@ -1,9 +1,9 @@
-import { FederatedMouseEvent } from '@antv/g';
-import insertCss from 'insert-css';
+import type { FederatedMouseEvent } from '@antv/g';
+import { insertCss } from 'insert-css';
 import type { RuntimeContext } from '../runtime/types';
 import { PluginEvent } from '../types/plugin';
 import type { Item } from '../utils/contextmenu';
-import { ContextmenuCSS, getContentFromItems } from '../utils/contextmenu';
+import { CONTEXTMENU_CSS, getContentFromItems } from '../utils/contextmenu';
 import { createPluginContainer } from '../utils/dom';
 import type { BasePluginOptions } from './base-plugin';
 import { BasePlugin } from './base-plugin';
@@ -80,7 +80,7 @@ export class Contextmenu extends BasePlugin<ContextmenuOptions> {
     $container!.appendChild(this.$element);
 
     // 设置样式
-    insertCss(ContextmenuCSS);
+    insertCss(CONTEXTMENU_CSS);
 
     this.update(options);
   }
@@ -106,8 +106,11 @@ export class Contextmenu extends BasePlugin<ContextmenuOptions> {
       this.$element.innerHTML = content;
     }
 
-    this.$element.style.left = `${e.client.x + offset[0]}px`;
-    this.$element.style.top = `${e.client.y + offset[1]}px`;
+    // NOTICE: 为什么事件中的 client 是相对浏览器，而不是画布容器？
+    const clientRect = this.context.graph.getCanvas().getContainer()!.getBoundingClientRect();
+
+    this.$element.style.left = `${e.client.x - clientRect.left + offset[0]}px`;
+    this.$element.style.top = `${e.client.y - clientRect.top + offset[1]}px`;
     this.$element.style.display = 'block';
   }
 
@@ -174,6 +177,8 @@ export class Contextmenu extends BasePlugin<ContextmenuOptions> {
   }
 
   private onTriggerEvent = (e: PluginEvent<FederatedMouseEvent>) => {
+    // `contextmenu` 事件默认会触发浏览器的右键菜单，需要阻止默认事件
+    // `click` 事件不需要阻止默认事件
     e.preventDefault?.();
     this.showContextmenu(e);
   };

packages/g6/src/utils/contextmenu.ts

@@ -31,7 +31,7 @@ export function getContentFromItems(items: Item[]) {
 /**
  * Style of the right-click menu, same with `tooltip`.
  */
-export const ContextmenuCSS = `
+export const CONTEXTMENU_CSS = `
   .g6-contextmenu {
     font-size: 12px;
     background-color: rgba(255, 255, 255, 0.96);

packages/site/examples/tool/contextMenu/demo/contextMenu.ts

@@ -1,47 +1,43 @@
-import { Graph as BaseGraph, Extensions, Util, extend } from '@antv/g6';
+import { Graph } from '@antv/g6';
 
-const Graph = extend(BaseGraph, {
-  plugins: {
-    menu: Extensions.Menu,
-  },
-});
-
-const container = document.getElementById('container') as HTMLElement;
-const width = container.scrollWidth;
-const height = (container.scrollHeight || 500) - 110;
-const data = Util.mock(6).circle();
+const data = {
+  nodes: [{ id: 'node-0' }, { id: 'node-1' }, { id: 'node-2' }, { id: 'node-3' }, { id: 'node-4' }, { id: 'node-5' }],
+  edges: [
+    { source: 'node-0', target: 'node-1' },
+    { source: 'node-0', target: 'node-2' },
+    { source: 'node-0', target: 'node-3' },
+    { source: 'node-0', target: 'node-4' },
+    { source: 'node-1', target: 'node-0' },
+    { source: 'node-2', target: 'node-0' },
+    { source: 'node-3', target: 'node-0' },
+    { source: 'node-4', target: 'node-0' },
+    { source: 'node-5', target: 'node-0' },
+  ],
+};
 
 const graph = new Graph({
-  container,
-  width,
-  height,
+  container: 'container',
   data,
-  modes: {
-    default: ['brush-select', 'zoom-canvas', 'activate-relations', 'drag-canvas', 'drag-element'],
+  layout: {
+    type: 'grid',
   },
+  behaviors: ['brush-select', 'zoom-canvas', 'activate-relations', 'drag-canvas', 'drag-element'],
+  plugins: [
+    {
+      type: 'contextmenu',
+      trigger: 'contextmenu', // 'click' or 'contextmenu'
+      onClick: (v) => {
+        alert('You have clicked the「' + v + '」item');
+      },
+      getContextmenuItems: () => {
+        return [
+          { name: '展开一度关系', value: 'spread' },
+          { name: '查看详情', value: 'detail' },
+        ];
+      },
+      enable: (e) => e.targetType === 'node',
+    },
+  ],
 });
 
-const contextMenu = {
-  type: 'menu',
-  key: 'my-context-menu',
-  trigger: 'contextmenu',
-  /**
-   * async string menu
-   * @param e
-   */
-  getContent: (e) => {
-    return `
-    <ul class='g6-contextmenu-ul'>
-      <li class='g6-contextmenu-li' code='delete'> Delete </li>
-      <li class='g6-contextmenu-li' code='add' > Add </li>
-    </ul>
-  `;
-  },
-  handleMenuClick: (target: HTMLLIElement, itemId, graph) => {
-    //@ts-ignore
-    const { value } = Object.values(target.attributes).find((item) => item.name === 'code');
-    alert(`Item ID: ${itemId} \n Code: ${value}`);
-  },
-};
-
-graph.addPlugins([contextMenu]);
+graph.render();