Самый подробный учебный материал по bpmn.js во всей сети - события

внешний интерфейс
Самый подробный учебный материал по bpmn.js во всей сети - события

предисловие

В: Что такое bpmn.js?

"

bpmn.jsЭто набор инструментов рендеринга BPMN2.0 и средство веб-моделирования, которое позволяет выполнять функцию рисования блок-схем во внешнем интерфейсе.

В: Почему я пишу эту серию учебников? 🤔️

"

Из-за потребностей бизнеса компании его необходимо использовать в проектеbpmn.js, Однако из-заbpmn.jsРазработчики игры зарубежные друзья,поэтому отечественных методических материалов мало и нет подробных документов.Поэтому много способов использования и много ям приходится искать самому.Поразмыслив,решил написать серию учебные материалы об этом. чтобы помочь большеbpmn.jsПользователи , или разработчики, которые ищут хороший способ рисовать блок-схемы, в то же время для них это еще и своего рода консолидация.

Поскольку это серия статей, она может часто обновляться.Пожалуйста, простите меня, если вы случайно смахнули его, и это не то, что вам нужно😊.

Не просите похвалы👍 не просите сердца❤️ Я просто надеюсь, что смогу вам немного помочь.

События

В предыдущей главе мы познакомились с использованиемbpmn.jsВзаимодействуйте с фоном, если это правильноbpmn.jsДля тех, кто не знает, перейдите по ссылке:

"Самый подробный учебный материал по bpmn.js во всей сети - http запрос"

Эта глава оbpmn.jsО некоторых событиях вы можете узнать, изучив эту главу:

  • Слушайте средство моделирования и привязывайте события
  • Прослушивание элементов и событий привязки
  • Определить режим работы, прослушивая событие

Слушайте средство моделирования и привязывайте события

Много раз вы ожидаете, что когда пользователь выполняет различные операции, он может контролировать то, что он делает, чтобы делать то, что он хочет.

даshapeВыполняется добавление строки или добавление строки.

Например, некоторые события прослушивания выглядят следующим образом:

  • shape.added добавляет новыйshapeтриггер после;
  • shape.move.end переместить одинshapeтриггер после;
  • shape.removed удаляетshapeтриггер после;

Продолжить кейс проектаbpmn-vue-basicна основе созданияevent.vueдокумент:

И вsuccess()Добавьте в функцию функцию, которая прослушивает события:

// event.vue
<script>
...
success () {
  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(function(event) {
    that.bpmnModeler.on(event, e => {
      console.log(event, e)
      var elementRegistry = bpmnjs.get('elementRegistry')
      var shape = e.element ? elementRegistry.get(e.element.id) : e.shape
      console.log(shape)
    })
  })
},

Как показано на рисунке, здесь можно получить всю информацию о соответствующих узлах:

img1
img1

Адрес кейса Git:Дело LinDaiDai-bpmn.js event.vue

На самом деле я не нашел на официальном сайте описания конкретных событий, это только то, что я нашел.Bpmn.io/diagram. / ...После файла некоторые события, используемые в моем проекте.

"

Прослушивание элементов и событий привязки

Вышеупомянутый мониторингmodelerИ привязать событие, возможно, вам также нужно слушать, чтобы пользователь нажал на графикelementили следить заelementИзменять:

  • element.click щелкает элемент;
  • element.changed При изменении элемента (включая добавление, перемещение и удаление элементов)

продолжатьsuccess()Добавьте событие прослушивателя:

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

НастроеноaddEventBusListener()После функции можно отслеживать, когда элементы нажимаются, добавляются, перемещаются или удаляются.

Но одно очень плохо, при нажатии на "холст", т.е.корневой элементВы также можете инициировать это событие, обычно мы не хотим, чтобы оно запускалось в это время, поэтому мы можемonДобавьте некоторые суждения в обратный вызов, чтобы избежать ненужных ситуаций:

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

На этом этапе мы можем распечатать информацию об узле, возвращенную прослушиванием, чтобы увидеть:

img2
img2

Как показано выше, он распечатаетShapeинформация иDOMинформацию и т. д., но мы можем сосредоточиться только наShapeинформацию (то есть информацию об узлеid、typeд.), в этот момент мы можем использоватьelementRegistryполучитьShapeИнформация:

eventBus.on(eventType, function(e) {
  if (!e || e.element.type == 'bpmn:Process') return // 这里我的根元素是bpmn:Process
  console.log(e)
  var elementRegistry = this.bpmnModeler.get('elementRegistry')
  var 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
})

Или вы можете просто использоватьe.elementполучитьShapeинформации, я сравнивал их и они одинаковые.Но официальную рекомендуется использоватьelementRegistryПуть.

Определить режим работы, прослушивая событие

Мы представили вышеmodelerиelementВ приложении событий нужно больше знать о том, что хочет сделать пользователь, чтобы можно было написать соответствующую бизнес-логику.

Здесь я буду использовать сценарии, которые я использую в своей работе, в качестве примера для объяснения.

  • Добавлена ​​форма
  • Добавлено соединение
  • Убрана форма и соединение
  • Перемещенные фигуры и линии
// event.vue
    ...
    success () {
      this.addModelerListener()
      this.addEventBusListener()
    },
    // 添加绑定事件
    addBpmnListener () {
      const that = this
      // 获取a标签dom节点
      const downloadLink = this.$refs.saveDiagram
      const downloadSvgLink = this.$refs.saveSvg
        // 给图绑定事件，当图有发生改变就会触发这个事件
      this.bpmnModeler.on('commandStack.changed', function () {
        that.saveSVG(function(err, svg) {
            that.setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg)
        })
        that.saveDiagram(function(err, xml) {
            that.setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml)
        })
      })
    },
    addModelerListener() {
      // 监听 modeler
      const bpmnjs = this.bpmnModeler
      const that = this
      // 'shape.removed', 'connect.end', 'connect.move'
      const events = ['shape.added', 'shape.move.end', 'shape.removed']
      events.forEach(function(event) {
        that.bpmnModeler.on(event, e => {
          var elementRegistry = bpmnjs.get('elementRegistry')
          var shape = e.element ? elementRegistry.get(e.element.id) : e.shape
          // console.log(shape)
          if (event === 'shape.added') {
            console.log('新增了shape')
          } else if (event === 'shape.move.end') {
            console.log('移动了shape')
          } else if (event === 'shape.removed') {
            console.log('删除了shape')
          }
        })
      })
    },
    addEventBusListener() {
      // 监听 element
      let that = this
      const eventBus = this.bpmnModeler.get('eventBus')
      const eventTypes = ['element.click', 'element.changed']
      eventTypes.forEach(function(eventType) {
        eventBus.on(eventType, function(e) {
          if (!e || e.element.type == 'bpmn:Process') return
          if (eventType === 'element.changed') {
            that.elementChanged(eventType, e)
          } else if (eventType === 'element.click') {
            console.log('点击了element')
          }
        })
      })
    },
    elementChanged(eventType, e) {
      var shape = this.getShape(e.element.id)
      if (!shape) {
        // 若是shape为null则表示删除, 无论是shape还是connect删除都调用此处
        console.log('无效的shape')
        // 由于上面已经用 shape.removed 检测了shape的删除, 因此这里只判断是否是线
        if (this.isSequenceFlow(shape.type)) {
          console.log('删除了线')
        }
      }
      if (!this.isInvalid(shape.type)) {
        if (this.isSequenceFlow(shape.type)) {
          console.log('改变了线')
        }
      }
    },
    getShape(id) {
      var elementRegistry = this.bpmnModeler.get('elementRegistry')
      return elementRegistry.get(id)
    },
    isInvalid (param) { // 判断是否是无效的值
      return param === null || param === undefined || param === ''
    },
    isSequenceFlow (type) { // 判断是否是线
      return type === 'bpmn:SequenceFlow'
    }

Адрес кейса Git:Дело LinDaiDai-bpmn.js event.vueЕсли вам это нравится, пожалуйста, дайтеStar🌟 Да, спасибо😊

послесловие

Полный каталог серии можно найти здесь:«Вся сеть — это самый подробный учебник по bpmn.js»

Рекомендации по сериалу:

"Самый подробный учебник по bpmn.js во всей сети - основы"

"Самый подробный учебный материал по bpmn.js во всей сети - http запрос"

"Самый подробный учебник по bpmn.js во всей сети - рендерер"

"Самый подробный учебник по bpmn.js во всей сети - contextPad"

"Самый подробный учебник по bpmn.js во всей сети - редактирование и удаление узлов"

Категории