bpmn.js元素事件监听

╰+攻爆jí腚メ 2022-10-28 13:26 562阅读 0赞

如果在编辑流程图的过程中，需要对图中元素的动作进行监听，比如：

*  `shape.added` 新增一个 `shape` 之后触发
 *  `shape.removed` 删除一个 `shape` 之后触发
 *  `connect.end` 连线完成后触发

官网提供了很多[其他事件][Link 1]  
接下来一起来测试一下吧

## 监听 modeler并绑定事件 ##

还是在之前项目 `vue-bpmn` 的基础上，在 `views` 文件夹下新增 `event.vue` 文件  
在 `success()` 函数中添加上监听事件的函数

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]

## 监听 element 并绑定事件 ##

此小节主要是用于监听用户点击图形上的 `element` 或者监听某个 `element` 改变，比如：

*  `element.click`：点击元素
 *  `element.changed`：当元素发生改变的时候（包括新增、移动、删除元素）

还是在 `success()` 上添加监听事件 `addEventBusListener()` ，配置好后，当元素被点击、新增、移动和删除的时候就能监听到了

> 当点击画布的时候，有可能根元素也会触发此事件，一般是不想让它触发的，我们可以在 `eventBus.on()` 的回调函数中添加一个判断来避免这个问题。

eventBus.on(eventType, e => { 
      if (!e || e.element.type == 'bpmn:Process') return // 这里根元素是 bpmn:Process
      console.log(e)
    })

我们可以使用 `elementRegistry` 来获取 `shape` 信息，使用 `e.element` 和 `shape` 获取到的信息是一样的，不过更推荐用`elementRegistry` 来获取 `shape` 信息

// 监听 element 
        addEventBusListener () { 
          const eventBus = this.bpmnModeler.get('eventBus') // 需要使用 eventBus
          const eventType = ['element.click', 'element.changed'] // 需要监听的事件集合
          eventType.forEach (eventType => { 
            eventBus.on(eventType, e => { 
              if (!e || e.element.type == 'bpmn:Process') return // 这里根元素是 bpmn:Process
              console.log(e)
              const elementRegistry = this.bpmnModeler.get('elementRegistry')
              const shape = elementRegistry.get(e.element.id) // 传递 id 进去
              console.log(shape) // {Shape}
              console.log(e.element) // {Shape}
              console.log(JSON.stringify(shape) === JSON.stringify(e.element)) // true
            })
          })
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 1]

[Link 1]: https://github.com/bpmn-io/diagram-js/blob/master/lib/features/modeling/Modeling.js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70]: /images/20221024/e795d035ac814ac787ba01be0f2699b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MTU3ODI1_size_16_color_FFFFFF_t_70 1]: /images/20221024/63dcafe83da843248337dc22b118139b.png