G6

上下文菜单，也被称为右键菜单，是当用户在某个特定区域上点击后出现的一个菜单。支持在点击前后，触发自定义事件。

createGraph(
  {
    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' },
      ],
    },
    node: { style: { fill: '#7e3feb' } },
    layout: { type: 'grid' },
    behaviors: ['drag-canvas'],
    plugins: ['grid-line', { type: 'contextmenu', key: 'contextmenu' }],
  },
  { width: 600, height: 300 },
  (gui, graph) => {
    const options = {
      type: 'contextmenu',
      trigger: 'contextmenu',
      offsetX: 4,
      offsetY: 4,
      enable: 'always',
    };
    const optionFolder = gui.addFolder('Contextmenu Options');
    optionFolder.add(options, 'type').disable(true);
    optionFolder.add(options, 'trigger', ['click', 'contextmenu']);
    optionFolder.add(options, 'offsetX', 0, 10, 1);
    optionFolder.add(options, 'offsetY', 0, 10, 1);
    optionFolder.add(options, 'enable', ['always', 'node', 'edge']);

    optionFolder.onChange((e) => {
      const { offsetX, offsetY, enable, ...rest } = e.object;
      let enableFn = () => true;
      if ((enable === 'node') | (enable === 'edge')) {
        enableFn = (e) => e.targetType === enable;
      }
      graph.updatePlugin({
        key: 'contextmenu',
        offset: [offsetX, offsetY],
        enable: enableFn,
        ...rest,
      });
      graph.render();
    });

    const apiFolder = gui.addFolder('Contextmenu API');
    const instance = graph.getPluginInstance('contextmenu');
    apiFolder.add(instance, 'hide');
  },
);

参考示例：

上下文菜单

配置项

Required type

contextmenu | string

此插件已内置，你可以通过 type: 'contextmenu' 来使用它。

className

string Default: 'g6-contextmenu'

给菜单的 DOM 追加的类名

enable

boolean | ((event: IElementEvent) => boolean) Default: true

是否可用，通过参数判断是否支持右键菜单，默认是全部可用

getContent

(event: IElementEvent ) => HTMLElement | string | Promise<HTMLElement | string>

返回菜单的内容，支持 Promise 类型的返回值，也可以使用 getItems 进行快捷配置

getItems

(event: IElementEvent) => Item[] | Promise<Item[]>

返回菜单的项目列表，支持 Promise 类型的返回值。是 getContent 的快捷配置

loadingContent

HTMLElement | string

当 getContent 返回一个 Promise 时，使用的菜单内容

offset

[number, number] Default: [4, 4]

菜单显式 X、Y 方向的偏移量

onClick

(value: string, target: HTMLElement, current: Node | Edge | Combo) => void

当菜单被点击后，触发的回调方法

trigger

'click' | 'contextmenu' Default: 'contextmenu'

如何触发右键菜单

'click' : 点击触发
'contextmenu' : 右键触发

API

Contextmenu.hide()

隐藏上下文菜单

hide(): void;

Contextmenu 上下文菜单

配置项