什么是边界事件
在BPMN规范中,事件可以分为有3种,分别为只能发到流程开头的开始事件、只能放到结尾的结束事件和可以放到中间的中间事件。在中间事件中,有一种可以附加到任务或者子流程边缘的的事件,叫做边界事件。虽然边界事件还可以细分为中断和非中断事件,但是对于我们前端来说,其交互体验都一致,所以只需要实现一种就行。这篇文章记录如何使用LogicFlow从0到1实现一个边界事件,希望能帮到有类似需求的同学。至于为什么要自己实现而不是使用bpmn-js, 请参考我之前的文章换掉bpmn-js,让前端更熟悉工作流业务。
下图为bpmn-js中边界事件的效果图和我实现的demo示例效果图:
bpmn-js中的效果
最终实现的效果
实现边界事件的思路
边界事件的功能分析
参考bpmn-js中边界事件的交互,结合我们项目中实际的需求,这里先分析边界事件需要的一些通用的交互功能点。
交互1: 目标节点的高亮提示
当拖动边界事件到可以附加的节点上时,这个节点的变高亮,给出智能提示。
交互2: 边界事件跟随目标节点
边界事件节点附加到目标节点上后,拖动目标节点边界事件可以跟随目标节点一起移动。
交互3: 边界事件脱离目标节点
在bpmn-js交互中,如果一个已经附件到目标节点上的边界事件节点是"原始的"(未设置边界事件的具体功能), 则可以再拖动边界事件节点离开附加节点,然后作为流程中独立的中间事件或者附加到其他节点上。
交互4:保留其他节点交互
边界事件节点仍然具有节点菜单,锚点,选中状态等功能。
交互5:边界事件节点永远在附加节点上方
由于我们项目是使用LogicFlow开发,下面的实现代码也是使用LogicFlow提供的API来实现。如果大家使用的其他框架,可以参考这个思路来自己实现。通过边界事件的功能分析和LogicFlow本身提供的API,我们可以大致把这些交互分配到不同的模块实现。我们可以大致把边界事件这个功能分为3个模块:
- 边界事件节点:实现交互4、交互5
- 目标节点:实现交互1
- LogicFlow插件: 实现交互2、交互3
以上思路参考了LogicFlow Group插件源码,整个边界事件封装为一个插件整个代码结构确实更加清晰了。
模块1:定义边界事件节点
在交互4中提到,边界事件节点仍然具有节点的通用功能,所有这里我们新建一个文件boundary-events-node.js