与 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 (1).png

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