LogicFlow 自定义业务节点
![LogicFlow自定义业务节点](https://static001.geekbang.org/infoq/83/838cfcd22cb8b931706184157793c5ad.png)
🎄Hi~ 大家好,我是小鑫同学,一位长期从事前端开发的编程爱好者,我将使用更为实用的案例输出更多的编程知识,同时我信奉分享是成长的唯一捷径,在这里也希望我的每一篇文章都能成为你技术落地的参考~
🚀技术 &代码分享
😇推荐几个好用的工具
var-conv 适用于 VSCode IDE 的代码变量名称快速转换工具
generator-vite-plugin 快速生成 Vite 插件模板项目
generator-babel-plugin 快速生成 Babel 插件模板项目
进入正题
LogicFlow 是一款流程图编辑框架,提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow 支持前端研发自定义开发各种逻辑编排场景,如流程图、ER 图、BPMN 流程等。在工作审批配置、机器人逻辑编排、无代码平台流程配置都有较好的应用。
这一节将讲解快速上手 LogicFlow 流程图编辑框架的自定义业务节点内容,代码要在上一节的基础上进行开发,使用 1024code 在线编写代码的小伙伴可以直接 fork 上一节的代码开始,这一节的大致内容包括了,准备自定义业务节点的模板、注册和使用、自定义样式、自定义形状、自定义外观几个方面,做好准备后我们就开始了。
1. 认识自定义业务节点模板:
LF 框架自定义业务节点使用到了面向对象中继承的概念,通过继承 LF 提供的 XxxNode
和 XxxNodeModel
类后对相关的函数进行重写,并在默认导出时提供 type
、view 和
model`;
下面这段代码继承了 Rect 相关的 RectNode
和 RectNodeModel
,如果要继承其他的内置对象还请查看官方文档或源码:
2. 优先进行注册和使用:
自定义业务模板准备好以后就可以先进行注册和使用了,第一个是因为在继承内置类后虽然没有进行任何的函数重写但是不耽误渲染结果;第二个是因为一开始并不熟悉,所以要及时注册和使用起来看到效果,也是方便后续的自定义。
2.1 注册自定义业务节点:
注册过程主要分两个步骤:
第一要将上面编写的
CustomNode.ts
导入到App.vue
;第二要将
CustomNode
对象通过 lf 实例中的register()
函数在render()
前注册;
2.2 如何使用自定义业务节点:
在成功注册后即可通过 render
函数来渲染业务流程中的一切元素的数据,自定义的业务节点和内置的默认节点使用方式相同,都是通过 type
选项来标识;
3. 自定义业务节点样式:
自定义业务节点样式(绿色描边),需要重写 RectNodeModel
类中的 getNodeStyle()
函数,通过关键词 super
获取到父类中的节点样式,并改变 stroke
的值为绿色,最后将修改完成的 style
返回;
4. 自定义业务节点形状:
自定义业务节点形状(圆角矩形)和自定义业务节点样式一样的简单,重写 RectNodeModel 类中的 initNodeData(data: any)函数就可以了;
5. 自定义业务节点外观:
前面的自定义业务节点样式和形状都是在原有内置对象的基础上进行属性的调整,为了实习更高的自定义的外观,需要用到类似 Vue
中的 h 函数
(渲染函数),通过重写 RectNode
中的 Shape()
并借助渲染函数实现外观的自定义;
第一步:重写
getShape
函数,获取props
中存储的当前节点的信息,如位置、尺寸和样式等;第二步:节点的外观要基于
SVG
实现,下面的案例要在业务组件左上角显示一个 ICON,ICON 可以从iconfont
找一个自己喜欢的;
6. 重启项目预览效果:
至此自定义业务节点基本完成,这种样式也是大多数流程管理系统中常见的一种风格,接着补充一下 graphData
数据,来看一下最终的效果~
![](https://static001.geekbang.org/infoq/ee/eed4d1a65b66611a9813559babe92984.png)
总结
这一节的内容就到此结束了,自定义业务节点的样式、形状和外观都搞定了吗?尤其是外观的自定义需要渲染 SVG
标签,所以掌握一些 SVG
相关的数据或掌握使用工具的生成 SVG
数据还是很有必要的,感觉把这一节的代码熟悉熟悉,接着要对 LF 中的 Edge
进行自定义了。
如果看完觉得有收获,欢迎点赞、评论、分享支持一下。你的支持和肯定,是我坚持写作的动力~
版权声明: 本文为 InfoQ 作者【小鑫同学】的原创文章。
原文链接:【http://xie.infoq.cn/article/b8567cc2f0e20b07eb79c5947】。文章转载请联系作者。
评论