首发于 语雀文档

与 g6-editor 相比的话，在 ContextMenu 也同样少了许多功能，需要自己做更多在在不同选中状态下的差异显示隐藏控制。

如果业务需要的右键菜单功能比较复杂的话，可能需要像 DetailPanel（详情面板）一样封装一层。

导入

  1. import { ContextMenu } from "gg-editor";

使用

界面 UI 上搭配了 AntDesign 组件库使用

  1. <ContextMenu
  2.   type="node"
  3.   renderContent={(item, position, hide) => {
  4.     const { x: left, y: top } = position;
  5.     return (
  6.       <div style={{ position: 'absolute', top, left }}>
  7.         <Menu mode="vertical" selectable={false} onClick={hide}>
  8.           <Menu.Item>
  9.             <Command name={EditorCommand.Copy}>
  10.               复制
  11.             </Command>
  12.           </Menu.Item>
  13.           <Menu.Item>
  14.             <Command name={EditorCommand.Remove}>
  15.               删除
  16.             </Command>
  17.           </Menu.Item>
  18.         </Menu>
  19.       </div>
  20.     );
  21.   }}
  22. />

ContextMenu API

image.png

| type | 菜单类型
可枚举，分别是 canvas（画布）、node（节点）、edge（边）
- 如果值是 node（节点），那么右键菜单只在右键点击的是 节点 的情况下，才会显示。
- 如果值是 edge（边），那么右键菜单只在右键点击的是 边 的情况下，才会显示。
- 如果值是 canvas（画布），那么右键菜单只在右键点击的是 画布 的情况下，才会显示。
默认是 canvas（画布） | | —- | —- | | render | 菜单内容
可接收选项的类型是函数。
函数需要返回 renderContent（菜单内容）的DOM。
函数有三个参数，你可以使用，分别是：
1. item（所选节点或边）
2. position（鼠标位置）
3. hide（右键菜单隐藏函数） |