关于前端:LogicFlow内置插件使用

99次阅读

共计 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,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',
    },
    {
      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 默认分组 & 数据格式:

默认的分组和分组的数据格式如下,通过 typegroup 的节点提供的 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。

总结

这一节的内容就到此结束了,本节中的三个插件都是十分实用的性能,在理论业务中也须要做更多的性能扩大,所有内置的插件应用和自定义是很有必要把握的,下一节筹备了内置插件中一个比拟重要的的插件 菜单,没有胜利运行的小伙伴要连忙调试代码了~


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

正文完
 0