LogicFlow内置菜单插件实例详解

const menuConfig = {
  nodeMenu: [
    {
      text: '分享',
      callback() {
        alert('分享成功！');
      }
    },
    {
      text: '属性',
      callback(node: any) {
        alert(`
          节点id：${node.id}
          节点类型：${node.type}
          节点坐标：(x: ${node.x}, y: ${node.y})`
        );
      },
    },
  ],
  edgeMenu: [
    {
      text: '属性',
      callback(edge: any) {
        alert(`
          边id：${edge.id}
          边类型：${edge.type}
          边坐标：(x: ${edge.x}, y: ${edge.y})
          源节点id：${edge.sourceNodeId}
          目标节点id：${edge.targetNodeId}`
        );
      },
    },
  ],
  graphMenu: [
    {
      text: '分享',
      callback() {
        alert('分享成功！');
      }
    },
  ],
};
lf.value.extension.menu.addMenuConfig(menuConfig);

edgeMenu: false, // 删除默认的边右键菜单
graphMenu: [], // 覆盖默认的边右键菜单，与false表现一样

lf.value.extension.menu.setMenuByType({
    type: 'rect',
    menu: [
      {
        text: '分享',
        callback() {
          alert('分享成功ByType！');
        }
      },
    ]
})

import { RectNode, RectNodeModel } from '@logicflow/core';
class CustomNodeModel extends RectNodeModel {
  setAttributes() {
    this.stroke = '#1E90FF';
    this.fill = '#F0F8FF';
    this.radius = 10;
    const { properties: { isDisabledNode } } = this;
    if (!isDisabledNode) {
      // 单独为非禁用的元素设置菜单。
      this.menu = [
        {
          text: 'del',
          callback: (node: any) => {
            this.graphModel.deleteNode(node.id);
            this.graphModel.eventCenter.emit('custom:event', node);
          },
        },
        {
          text: 'edit',
          callback: (node: any) => {
            this.graphModel.setElementStateById(node.id, 2);
          },
        },
        {
          text: 'copy',
          callback: (node: any) => {
            this.graphModel.cloneNode(node.id);
          },
        },
      ];
    }
  }
}
export default {
    type: "CustomNode",
    view: RectNode,
    model: CustomNodeModel,
}

lf.value.on('custom:event', (r) => {
  console.log(r)
});