从0到1实现BPMN边界事件节点

什么是边界事件

在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个模块：

1. 边界事件节点：实现交互4、交互5
2. 目标节点：实现交互1
3. LogicFlow插件: 实现交互2、交互3

以上思路参考了LogicFlow Group插件源码，整个边界事件封装为一个插件整个代码结构确实更加清晰了。

模块1：定义边界事件节点

在交互4中提到，边界事件节点仍然具有节点的通用功能，所有这里我们新建一个文件boundary-events-node.js，通过自定