bpmn.js元素事件监听

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

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

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

监听 nodeler并绑定事件

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

<script>
...
    success () {
      console.log('创建成功')
      this.addModelerListener()
    },
    // 监听 modeler
    addModelerListener () {
      const bpmnjs = this.bpmnModeler
      const that = this
      // 这里用 forEach 给 modeler 上添加要绑定的事件
      const events = ['shape.added', 'shape.move.end', 'shape.removed', 'connect.end', 'connect.move']
      events.forEach(event => {
        that.bpmnModeler.on (event, e => {
          console.log(event, e)
          const elementRegistry = bpmnjs.get('elementRegistry')
          const shape = e.element ? elementRegistry.get(e.element.id) : e.shape
          console.log(shape)
          // 通过监听事件判断操作方式
          if (event === 'shape.added') {
            console.log('新增了shape')
          } else if (event === 'shape.removed') {
            console.log('删除了shape')
          }
        })
      })
    }
...
</script>

效果图

监听 element 并绑定事件

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

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

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

<script>
...
    success () {
      this.addEventBusListener()
    },
    // 监听 element 
    addEventBusListener () {
      const eventBus = this.bpmnModeler.get('eventBus') // 需要使用 eventBus
      const eventType = ['element.click', 'element.changed'] // 需要监听的事件集合
      eventType.forEach (eventType => {
        eventBus.on(eventType, e => {
          console.log(e)
        })
      })
    }
...
</script>

当点击画布的时候，有可能根元素也会触发此事件，一般是不想让它触发的，我们可以在 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
    })
  })
}