在 g6-editor 中构建出与 gg-editor 同等水平的右键菜单

为什么需要构建右键菜单？

右键菜单，是图形编辑器中不可或缺的组成部分。g6-editor 作为一款功能强大的图形编辑器，它也为用户提供了构建右键菜单的功能。这样做的好处有：

• 增强用户体验：通过右键菜单，用户可以在编辑图形时，快速地对图形进行各种操作，从而提升用户体验。
• 提升工作效率：右键菜单可以帮助用户快速地访问常用的命令，从而提高工作效率。
• 简化图形编辑流程：右键菜单可以帮助用户轻松地管理图形，从而简化图形编辑流程。

如何构建右键菜单

构建右键菜单，需要借助 g6-editor 的扩展能力。g6-editor 支持用户通过扩展的方式，来添加自定义的控件和功能。要构建右键菜单，我们首先需要创建一个自定义控件。

class ContextMenu extends g6.Controls.Menu {
  constructor(cfg) {
    super(cfg);
  }

  // 重写 Menu 的 show 方法，以便在显示右键菜单时，调整右键菜单的位置
  show(ev) {
    super.show(ev);
    const { x, y } = ev;
    this.updatePosition({ x, y });
  }
}

接下来，我们需要将这个自定义控件添加到 g6-editor 中。

const editor = new g6.Editor({
  container: 'mountNode',
  controls: [
    // 添加自定义右键菜单控件
    new ContextMenu({
      getContent: () => {
        // 返回右键菜单的内容
        return [
          {
            label: '复制',
            action: 'copy',
          },
          {
            label: '粘贴',
            action: 'paste',
          },
          {
            label: '删除',
            action: 'delete',
          },
        ];
      },
    }),
  ],
});

这样，我们就成功地在 g6-editor 中构建出了一个右键菜单。

如何扩展右键菜单

右键菜单的构建只是第一步，我们还可以对其进行进一步的扩展，以满足不同的需求。

• 添加自定义右键菜单项

我们可以通过修改右键菜单的内容，来添加自定义的右键菜单项。

const editor = new g6.Editor({
  container: 'mountNode',
  controls: [
    new ContextMenu({
      getContent: () => {
        // 返回右键菜单的内容
        return [
          {
            label: '复制',
            action: 'copy',
          },
          {
            label: '粘贴',
            action: 'paste',
          },
          {
            label: '删除',
            action: 'delete',
          },
          // 添加自定义右键菜单项
          {
            label: '自定义菜单项',
            action: 'customAction',
          },
        ];
      },
    }),
  ],
});

• 处理右键菜单中的点击事件

我们可以通过监听右键菜单中的点击事件，来执行相应的操作。

const editor = new g6.Editor({
  container: 'mountNode',
  controls: [
    new ContextMenu({
      getContent: () => {
        // 返回右键菜单的内容
        return [
          {
            label: '复制',
            action: 'copy',
          },
          {
            label: '粘贴',
            action: 'paste',
          },
          {
            label: '删除',
            action: 'delete',
          },
          // 添加自定义右键菜单项
          {
            label: '自定义菜单项',
            action: 'customAction',
          },
        ];
      },
      onClick: (ev, item) => {
        // 处理右键菜单中的点击事件
        switch (item.action) {
          case 'copy':
            // 执行复制操作
            break;
          case 'paste':
            // 执行粘贴操作
            break;
          case 'delete':
            // 执行删除操作
            break;
          case 'customAction':
            // 执行自定义操作
            break;
        }
      },
    }),
  ],
});

• 支持快捷键菜单

我们可以通过监听键盘事件，来支持快捷键菜单。

const editor = new g6.Editor({
  container: 'mountNode',
  controls: [
    new ContextMenu({
      getContent: () => {
        // 返回右键菜单的内容
        return [
          {
            label: '复制',
            action: 'copy',
            shortcut: 'Ctrl+C',
          },
          {
            label: '粘贴',
            action: 'paste',
            shortcut: 'Ctrl+V',
          },
          {
            label: '删除',
            action: 'delete',
            shortcut: 'Delete',
          },
          // 添加自定义右键菜单项
          {
            label: '自定义菜单项',
            action: 'customAction',
            shortcut: 'Alt+C',
          },
        ];
      },
      onClick: (ev, item) => {
        // 处理右键菜单中的点击事件
        switch (item.action) {
          case 'copy':
            // 执行复制操作
            break;
          case 'paste':
            // 执行粘贴操作
            break;
          case 'delete':
            // 执行删除操作
            break;
          case 'customAction':
            // 执行自定义操作
            break;
        }
      },
    }),
  ],
});

// 监听键盘事件，支持快捷键菜单
document.addEventListener('keydown', (ev) => {
  const { keyCode, ctrlKey, altKey } = ev;
  if (ctrlKey && keyCode === 67) {
    // 执行复制操作
  } else if (ctrlKey && keyCode === 86) {
    // 执行粘贴操作
  } else if (altKey && keyCode === 67) {
    // 执行自定义操作
  }
});

通过以上步骤，我们就可以在 g6-editor 中构建出一个功能强大的右键菜单，并对其进行扩展，以满足不同的需求。