关于前端:LogicFlow内置菜单插件

🎄Hi~ 大家好，我是小鑫同学，一位长期从事前端开发的编程爱好者，我将应用更为实用的案例输入更多的编程常识，同时我崇奉分享是成长的惟一捷径，在这里也心愿我的每一篇文章都能成为你技术落地的参考~

我在 IT200 总结技术学习；
我在 1024Code 在线编写代码；
我在掘金分享技术文章；
我在 Github 参加开源学习；

var-conv 实用于 VSCode IDE 的代码变量名称疾速转换工具
generator-vite-plugin 疾速生成 Vite 插件模板我的项目
generator-babel-plugin 疾速生成 Babel 插件模板我的项目

LogicFlow 是一款流程图编辑框架，提供了一系列流程图交互、编辑所必须的性能和灵便的节点自定义、插件等拓展机制。LogicFlow 反对前端研发自定义开发各种逻辑编排场景，如流程图、ER 图、BPMN 流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的利用。

这一节将解说疾速上手 LogicFlow 流程图编辑框架的内置菜单插件，我的项目整体基于 Vue3+Vite3+Ts4 开发，为帮忙还为纯熟应用 Vue3 和 Typescript 语法的小伙伴提供便当，如果你曾经很纯熟在 Vue3 中的开发习惯，倡议间接拜访 LogicFlow 将获取残缺的入门指南。

菜单插件的装置和配置同上一节的内置插件配置，同样是将导入的 Menu 对象在 LF 实例化时传入 plugins 选项。

默认的菜单反对状况如下：


节点右键菜单	删除	复制	编辑文案
边右键菜单	删除	❌	编辑文案
画布右键菜单	❌	❌	❌

上面表格中列出的就是每个菜单项所反对的配置选项，仅有 callback 是必传选项：

字段	类型	作用	是否必须	形容
text	string	文案		菜单项展现的文案
className	string	class 名称		每一项默认 class 为 lf-menu-item，设置了此字段，calss 会在原来的根底上增加 className。
icon	boolean	是否创立 icon 的 span 展位		如果简略的文案不能丰盛示意菜单，能够加个 icon 设置为 true, 对应的菜单项会减少 class 为 lf-menu-icon 的 span，通过为其设置背景的形式，丰盛菜单的示意，个别与 className 配合应用。
callback	Function	点击后执行的回调	✅	三种菜单回调中别离能够拿到节点数据 / 边数据 / 事件信息。

默认的菜单必定是不可能笼罩理论的业务场景的，所以菜单插件装置后提供了 addMenuConfig 来裁减原有的菜单项，裁减菜单依然须要在渲染前操作：

上面这段代码配置别离为节点右键菜单增加了分享和属性两个菜单，边右键菜单增加了属性菜单，画布右键菜单增加了分享菜单。

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！');
        }
      },
    ]
})

PS：下面的代码把节点类型为 rect 的菜单替换为了仅有一个分享菜单项，其它的按类型配置雷同。

不同的业务节点会领有不同的状态，不同的状态下反对的菜单项也是不雷同的。

在自定义节点时依据不同的业务状态设置菜单项；
在自定义节点中无奈间接应用 LF 实例，须要通过 graphModel 来派发事件进行音讯告诉；
优先级：指定业务状态设置菜单 > 指定类型元素配置菜单 > 通用菜单配置 > 默认菜单。

上面的代码是很经典的自定义业务节点的代码，其中须要阐明的是 isDisabledNode 为节点预留的 properties 属性挂在的扩大业务节点，eventCenter.emit() 自定义业务节点内派发事件的函数，还须要配置对应的接管函数来解决：

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)
});

这一节的内容就到此结束了，代码量绝对校多，很多配置也依赖后面几节的学习，还有对于自定义 Edge 的增加菜单也是相似的操作，到此内置插件的应用就到此告一段落了，接着还有最初一个大节，就是要自定义插件，自定义插件将更有益于代码的复用，期待一下吧~

如果看完感觉有播种，欢送点赞、评论、分享反对一下。你的反对和必定，是我保持写作的能源~

关于前端:LogicFlow内置菜单插件

🚀技术 & 代码分享

😇举荐几个好用的工具

进入正题

1. 菜单插件装置配置：

2. 菜单项配置：

3. 追加菜单选项：

4. 重置菜单选项：

5. 指定类型元素配置菜单：

6. 指定业务状态设置菜单：

总结