共计 10010 个字符，预计需要花费 26 分钟才能阅读完成。
🎄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 将获取残缺的入门指南。
1. 内置插件介绍：
这里介绍三个比拟常见的性能，这样的性能也被 LF 做了内置的插件来进行简略的实现，在你的理论业务中还是须要通过插件的扩大来实现更加丰盛的性能。那么这三个性能和每个性能对应的插件别离是：
- 第一个性能是通常在页面左侧的拖拽面板，对应的插件是
DndPanel，用来将代表不同业务的节点拖至流程画布中； - 第二个性能就是框选性能，对应的插件是
SelectionSelect，用来框选一个或多个业务节点，以便下一步的操作； - 第三个性能就是分组，对应的插件是
Group，用来将一组具备关联性的节点放到一个分组。
这三个插件的配置曾经在上一节中实现，你只须要 fork 上一节的代码就能够开始本节的学习了，筹备好就要开始了~
2. 拖拽面板插件的配置 & 应用：
拖拽面板的插件配置绝对简略，只须要把握上面这几个配置就能够搞定了：
| 名称 | 类型 | 形容 |
|---|---|---|
| type | string | 指定用户鼠标能够拖入的节点类型，包含自定义节点类型，不传则不会创立节点，只会触发 callback |
| text | string | 创立节点的文本 |
| properties | object | 创立节点的 properties |
| label | string | 拖拽面板节点文本形容 |
| icon | string | 拖拽面板上显示的图标，能够传入图标 url 地址或 base64 编码 |
| className | string | 额定传入能够拖拽项的 class, 用于自定义拖拽项的款式 |
| callback | fn | 用户鼠标按下拖拽项后触发的回调 |
2.1 配置拖拽面板数据：
案例配置中筹备了三中业务节点类型，别离是开始节点、用户工作节点和完结节点，它们的配置如下：
const patternItems = [
{
type: 'circle',
text: '开始',
label: '开始节点',
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAAXNSR0IArs4c6QAABQVJREFUWEfNWF1oHFUU/s5sUhVTyc5GUBqlpDObWol9UYr2webNIqQgQrA1LdZgsjNNpBZbsQHrTy2VaqXdnU2qVhEsgpW2CmkFSQtqffGvNBKT2QYLUhCzs9EoKN2ZI3d2NzvZ7M9ksxEH9mXvOd/55tw7557vEKp8moZ+vt120i0SuIWZwyBaDYcCAE8yMEmgyfrlDV/8uvW2v6oJQQtxajz8fSMtu7kTRJ0EtPvyJRqGg/NSHY9M9ajf+fIB4ItY4+DkWsm2uyChE4xmD/iomx3GFEk0Jf5nh5uY0ESglQDf47FNA4jaaUR/71evVCJYkVjIMHUmvASG7AYGvpWYTzmSdCYVUUbLBbg1llAcwkYGbwQgfgIhCeaopbfuK+dblpgcT5wA82M5QgAdS2nKsUpvW2xdjo13gqQ+AOvFOgGfJjW1oxRWSWJyPHEVzHe6IEwDSV3ZXw2hQp9QLLGXiV/J/n/N0tQVxXCLEpONiR8AWpvJFG9JaeETtSCVwwgaE5sJ9EFmZ/knSw/fVYg/j5gcN3eC8YYwtDS14hlcDGHZMDnr/6alqTu9WHMChwbNTezgtGvg4AFrh/r1YgJX8pWj5v2QcDGTOedF7wcxSyw4dKWN0s4wCM0gPGNF1MOVgGuxnt8hTtppWpcrJbPE5Jh5CIRdohykNPXeWgT1iyEb5pfZr3V2S11ioqJLNzZcFsWTQT1+SkJjfGwloW4Xk/P2dG/rJb8kypSSDwGkpQDWiRvCJRaMTfQQ0eBCsiXHxveBpBcATDI721J6q3jrqh/ZMM8CeChXmjLEDHNE3H3MvD+lhwf8oHuIiWL5GzNttXTlnB/fYjbBmPkcEQ4wcCGlqe0Uio+vYJZ+EcaSJN031bvqGz/gXmJZ+78hBbqs3paTfvwLbeRBcw0c/OjymLFvocaj5gYpgPMAxixNXeMXtAixrCtvt7Twu35xvHayYYq7924wbSTZMLsBvMXAJylN3eQXsDQxcQ9Sf1JTjvrFytkFDfMMAR3M0CkUmzjIRLvBOG7p6pN+wcoRExgEPJ/U1AN+8YSdHDPfAWE7GK+TbCQ+BvgRInotGVH2+AWqREzgODbap/vUC34xQ/HEQWbeDaZTJMfNj8B4dCmIEfMTST38XnXEjImXARqo9VaC6HK6/oYNf3TfYfklNmcrQ3Gzixnv1/LwA7joLAtsnu5uueqXVLae5g9/MJ5YT8yiao9amtrmF6jMGfvsunPTlpkdzUm/WDk72UhccnWCKBdChjn29WtikYnaKvXxsyD5Kykfn/mkbNPjiX71n4WSEvrAJjaFX33D8oY5VxIxDyT1sK8Wel7GCMetiP9yU0g8ZCT6GHwERMNWRHm4Fpc4QHTEiihPLzRLBVV/2FVSTM9aunKo6rYnaCSeIvAQE72aiih7F0Uqo6Dmtz3Zqvv/axQFMVdtsz0ihG0t5VqlTOblXInWWgC4qhuIul/oEsi2QpJzZVwJMTJbBjzq+7+Sb8VUeXHB61HhSyHj5sg2oKgaLz0i8KjxWso5r6AupcKzbVPp4+kFEUKllkMVAPPUt5dJxRGAq85tRF0hnB1DgflcIBA4XUkfiD6ebXQQ4UGhgDKBazCGyr1BVqVvKzK4G2PALD64wyq3f88/tR3cedNbzahTyDGJ6XOq47M1H3UWO4VC9tlpSZUCUIhZZZIUsGj188Nh6c/0V1N7Vs9UKrLF1v8FJ5yEXcWLNvkAAAAASUVORK5CYII=',
},
{
type: 'rect',
label: '用户工作',
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAAXNSR0IArs4c6QAABeNJREFUWEfNWH+IFHUU/7zZ0grCdu4iFD3Km9mL7J/8QWQX9IvSLIukMisyNc6d8YIif0RFRkZmUpDu7B1l2Q9NsyKy8gf9pDMJT4PQ6Hb2TDSM4Pa7WZB4uvNiZnb2ZuZmd+fOf+7BwN5837z3+b7f7wgjlGiE4sJZAbtonXm9lIBCzCqTpAAWM0m/SeAeJuwXi9Vfh3vxIQOTM/kZAN8Mwr0AJtRRfIgI29mi74Wu7BwKyNjAktn8tcRoB/i+gAJCPxh/OY9NhEuchzEqCIS2MmFdMa3siQMwFjA5Y74KwuM+gTvB9LXE/E3fEvVAlKLG9eZki+hGEN8EYEaFh/Ga0NUn6oGrC0zOmj+CcY0riHtAtEak1bfqCfafy1lzAZiXAdRStupekVan15JRE5hsmOz7eNvphKX929bSNxRQHu+FnT2N55YkA8A93juhqVX1Vz1oMMxNDMxzwoaxqaCrD0a6zMhPKYGmEfHVjk2ZfkqA9/Vpyv4o/oaM+T4THnDDEZsLmur8DlMksGQ2t4qYnna9Zz0v9JaVUR8njdzrBGqPOmPwuqKWeizqTM70rARJzzniiV8splPP1AXmZh93uTfijoKWSkcKN3KvAPRk+Ww32/HnfOPE0S3lmFwrtNTSSMsZuSyDFrvgqDWcrYMsJhv5LW5J4J7TCW6Niqlkpvd+ImtzNYsGLMLSvKLe/EEYXGPnkbFW6XQ3gHEAbRWaMtfPEwCWXN9zG0nSFw4DYWG17JMN80M7iAn4eXTiROvxtqn/+YWO6+y+4FRpTBcDVwHYJjTVLsaDKHABy5pVXNLypccUACZn8h0gbgOwS2jqQO0JiZQz5jEQxoPxltDVhdFKzQ0gLADjD6GrkR3CtVr/QYBkMHUKXXFc69rFR3I2fxzMY2sFvM3uAasV4JXEqAHMllXJUqI/RVoZNwhYuSF/6xxImC4Wq3ujLOEAK7sSwG6hqbdGWswwd5WToKor7e+S2d7bia3t9m+rhBv+ble/C1hMNsxFAN4AoV+k1dHVQLkWG0j3qFh0Kz02ODJqlBtPh5w1T9m9lZjnFPTUJwFgDZncy0y0DMAxoalNtYCVrXYQwCRPOeOccrk40+LVKACHhKZeGUPW0fKk8qjQ1DdDFst/DPDdYHQLXZ1WT1jIpVHsNV0YiO2MuQ+EqUy0vJhW1oSA5T4CaM5QgDnBmzUfYsYdlUZP2GvPYIW0+l6cy5WTyQXGvLyop4LAktn8KmK221AsV8ZVGodPNkzXlb7aWSkX5Zu/Gyf44ygbCo8X/BJwZ5+mfhZ0ZYd5BSwccqqFhSnVBkC/wmRn7xj0owmJUpMEaaKT8rAOo5Q4ilE4WmxrPlEPYKhMTfL2hGCBNUw305iWCl1ZW01o0sjNkkDzvLGoGp891ljgzUUt5ba5CEpmzAwRtHAGB4A1ZM2XmLECwE6hqTPDchoyuflMWAhQa+jsJECm+45VAOcHz7mLGBsKempjyOJNOGN1E+FiIqwupNWnvPNwr5wB4h2ufF4q9FTFanI2/zaY5w8I5h/A9I5Eia4+baJTwzxqNA63WFxqBfHDAF1XOSDaKNLKI97fcibXASK7N9uzz0z/JlVj7MHJM6POG//PoglCNkwbrNPUmXBAYnqhoCmf1osf+7zByN9lET9LjMllfscbsi+m64499of+QRHgr8C8x1fJI10cB6D/cnabAkn2Rd1xPM6gaDNGrGtAyA1xwIR5BoeDjSp6nau6jATXNjoiNOWy4YAZBM7I/w7wpc57QtU1Lv76RtjF7CwYVVO/FnC7xBBROxiVMWlY65unxL/GuZdE1kpIq4ttzXYbqUvJzt4mqWStYKCy1NRa2zyBdTdxNyF865yb24KYdliStKWYbv48Cp09AEqWNZeJZzqjc5mqrWthGbGADWTrCPuniv82ziZFidmQMNvZD2oQA3nALtjSjqKmuIU7JsW2WJQ8uwEnJJaZyHlgWSCJ+iRGXwmlI0Xt8l9i4hjEdlbAhqs0zncjFtj/TvCsRdmJzTwAAAAASUVORK5CYII=',
},
{
type: 'circle',
text: '完结',
label: '完结节点',
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAAXNSR0IArs4c6QAAA+ZJREFUWEfNmF+oFHUUx7/nt3rpIeTO3MQMfLGZNRBS0JesBy1D8soVMyqKnrypO5tCPSRk4A1UsIcCb/tb/FMPgoJRkaXlg5ebgvmSiILi3d/US0Rl985chB5aunNidnZ2Z9bdnb17dZuFfdj9nT+fOef3O+fMj5DSD6WUC3MC6x9VazOCdSaqfOF5IEGTgjHpCdjOTvNWtw8+azDtk4mNRJkhCAyBeXGC45tE+JY9uujkjfOzgewYTCvaTxNjF8CvzMZBXZZOM2HUzRmXO9HvCEwrlvYT094Gg3cBXCHgEjP+ZBJ/+OvE3qNEWMTgNSB6Hoy+mB7jYydvvpMElwg2INVJBl6rGSIa85gPTz9SPo+Xl5fbOVhw/Fc9U/7nJYC3E7CqbgNXnJy5pp1uWzBdKm5QftOxzONJT9tsXZP2dgIfia45ltnSf8sFvah+BOOp0BAjs8K1lt7oBirU0aT9AoG/C38TcGrKMl9vZrMpmF5QH4HwdqjQ7sm6AY1mgokPuLns+4127gHTZGmQQGfrkaKNrmV83w1AKx1N/vIkYeZ6zQfRM42nNQ42zvP0W/YlUJBCBu1wLeNoKwd6YWIEQjA8j5z8spHZwMf3HJ12LOPVqH4MrOKIxL4AClddy1zdzpkm1TgBa32ZbtKtSfVTeFoZ8czEwDSpzhAw1Em0fJm5g9VPKoNHXSu7O3Iw6jHRpXIB9INQ/nf+Q4vvDi9xHmTEHj6sFvbNw28A5jNgu5Zp3gPWXyitFETXggU+51jZTUl7Zq4R8+3rUo0BeDbI0swK13qiUpJqqRwoqjeYcaL6594pyzzYC7ABqd5j4IDvSwCbJy3zmxiYVrT3E3PQDxnDTt78tBdgekFtAyHoJoRtTs78LAamy9IXAG0NuMQm13r8XC/ANPnzIMGr1E1m3uPmsx82gNlfAvzi/wpGtMfNGXGwgULpEBO9220qk6LrzWDd9C7zh0a5WCqB2pBQ2/y6VMMAjnW7+bsFi25+Yt46lc9+FUulP7+LDMaDVNLXrmVsSXLml4skmXCdZ/BB04hJ5Y/cG3y5aFTrld/vk7ftv6sT57Rzp7wII+0HwU6hWsp9frNPn+z7C8ACEP3u5IzHQtl4r5T2WYAHK/TA5ulqTZkzQAsD/VINCeBMsK/piJM3djYHizRxEI05OWP9g4Ly7epF+wKYn6twed6g+9ay6BAZcd0w9iBySu43YPSwAQljj+88nYNiNSypHK3DlKXyZaQGl8bXtxAulS+8IVwqrwjqcCm8VInWsNRdQzUrsNXGbxCzySQMwGMmcVuAJ5hwtacXd/e7A7Syl3gN1SuQRj//ARDQB0UouH96AAAAAElFTkSuQmCC',
}
]
2.2 将配置实现的数据装载到 LF：
插件正确装置后就能够在 LF 实例的 extension 属性中读取对应的插件对象了，这里要通过 dndPanel.setPatternItems(data) 函数来为 LF 实例装载数据：
// 在执行 render 前配置
lf.value.extension.dndPanel.setPatternItems(patternItems);
lf.value.render();
数据配置胜利后就能够看到页面左侧的拖拽面板了，在你的我的项目中试一下吧~
3. 框选插件的配置 & 应用：
框选插件在应用时必须要提到的是，开启框选性能的形式有两种，其中一种是通过 LF 实例化时的选项进行开启和敞开、第二种就是通过插件提供的开启和敞开的函数动静实现。
3.1 开启 & 敞开框选：
- 通过选项开闭：因为框选性能和画布拖拽性能属于互斥性能，所以是通过
stopMoveGraph一个选项管制的，如果选项开启则示意禁止挪动画布（开启框选），反之则是开启挪动画布（禁止框选），我在源码处预留了这个选项，你能够关上正文尝试一下； - 通过插件提供的函数开闭：须要联合后面的拖拽面板，这也是合乎应用习惯的一种形式，当须要框选节点时点击拖拽面板的框选图标开启框选性能，在框选完结后敞开框选性能，前面的案例会展现这一块；
开启函数：
lf.extension.selectionSelect.openSelectionSelect();
敞开函数：
lf.extension.selectionSelect.closeSelectionSelect();
3.2 框选的灵活区域：
- 默认须要框选整个节点才选中节点
- 默认须要框选边的终点、起点才选中边
能够应用 setSelectionSense 函数调整：
lf.extension.selectionSelect.setSelectionSense(false, true);
| 参数 | 默认值 | 形容 |
|---|---|---|
| isWholeEdge | true | 是否要边的终点起点都在选区范畴才算选中 |
| isWholeNode | true | 是否要节点的全副点都在选区范畴才算选中 |
3.3 联合 DndPanel 管制框选性能：
在 Dndpanel 示例的 patternItems 数据中新增上面的配置，通过点击元素后触发的 callback 事件启用框选，并监听选中事件后敞开框选来实现性能的切换；
const patternItems = [{
label: '选区',
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAAXNSR0IArs4c6QAAAUdJREFUWEftV9ENwiAQPXAB7Q7GMWzX0TiDdgZjHcd2DNMd1AHsYWgCuTbFlFw/aANfDfCOxzt4PQQE2kSgvCAS881MVGwyxTZF/egHUw3kn9O21P10XCisXsfdRfevr3UqVnA22Pdhm5nvoZh0nK7nTKUOIgBSOhkbyCgxO64wp8TkCtpNKYCSLpwUtaLx+uMLIqYw17tBlKVRLLnXZ0C0incUk2iVNv0abzFCtqnmK0ZS5XuI+/OT2/MCHGJcAlx89DFfBf/ahQlGfcp3gaEzpoTcD/mcv12EdPg7BhsSMZdPTZFKGoP63KhUcglw8fOzi9ahSXNJ7qvM2LjjqouQDn+wt9JVCPqmbnKD5RLg4ud3K7k75uLnfytBSoVfqGxp7fA5/UqSrtLaYDgVbHwlkXfnqJ94sA9e7q3i4qOP+SoYFVuMYj+QKUM2eJOYrwAAAABJRU5ErkJggg==',
callback: () => {lf.value!.extension.selectionSelect.openSelectionSelect();
lf.value!.once('selection:selected', () => {lf.value!.extension.selectionSelect.closeSelectionSelect();
});
}
}]
胜利配置后就能够点击选区后去选中几个拖拽好的节点了~
4. 分组插件的配置 & 应用：
分组插件的应用还是很简略的，这里须要重点关注一下自定义分组，因为这里跟后面大节的自定义业务节点和自定义 Edge 一样，须要继承内置类去进行各种函数的重写。
4.1 默认分组 & 数据格式：
默认的分组和分组的数据格式如下，通过 type 为 group 的节点提供的 children 属性填充进去须要放到一组的节点 ID，就实现了分组；
const graphData = {
nodes: [
{
type: 'group',
x: 200,
y: 200,
children: ["node_2"],
},
{
id: 'node_2',
type: 'circle',
x: 200,
y: 200,
}
]
}
4.2 自定义分组：
- 筹备自定义分组的模板：
import {GroupNode} from "@logicflow/extension";
class MyGroup extends GroupNode.view { }
class MyGroupModel extends GroupNode.model { }
export default {
type: "my-group",
model: MyGroupModel,
view: MyGroup
};
- 优先注册 & 应用：
// 导入模块
import MyGroup from "./MyGroup";
lf.value.register(MyGroup);
const graphData = {
nodes: [
{
type: 'my-group', // 换为自定义分组的 type 名称
x: 200,
y: 200,
children: ["node_2"]
},
// ... 省略局部代码
]
}
- 自定义款式：
重写
getNodeStyle函数
getNodeStyle() {const style = super.getNodeStyle();
style.stroke = "#AEAFAE";
style.strokeWidth = 1;
return style;
}
- 自定义形态：
重写
initNodeData函数
initNodeData(data: any) {super.initNodeData(data);
this.isRestrict = true;
this.resizable = true;
this.width = 200;
this.height = 180;
}
- 更多的状态：
groupModel 除节点通用的属性外，还有上面这些状态属性的反对，倡议在 setAttributes 函数配置；
setAttributes(): void {
this.isRestrict = true;
this.resizable = true;
this.foldable = true;
}
| 名称 | 类型 | 形容 |
|---|---|---|
| isRestrict | boolean | 是否限度分组子节点拖出分组，默认 false |
| resizable | boolean | 分组是否反对手动调整大小，默认 false |
| foldable | boolean | 分组是否显示开展收起按钮，默认 false |
| width | number | 分组宽度 |
| height | number | 分组高度 |
| foldedWidth | number | 分组折叠后的宽度 |
| foldedHeight | number | 分组折叠后的高度 |
| isFolded | boolean | 只读，示意分组是否被折叠。 |
| isGroup | boolean | 只读，永远为 true, 用于辨认 model 为 group。 |
总结
这一节的内容就到此结束了，本节中的三个插件都是十分实用的性能，在理论业务中也须要做更多的性能扩大，所有内置的插件应用和自定义是很有必要把握的，下一节筹备了内置插件中一个比拟重要的的插件 菜单，没有胜利运行的小伙伴要连忙调试代码了~
如果看完感觉有播种，欢送点赞、评论、分享反对一下。你的反对和必定，是我保持写作的能源~
正文完