bpmn-js 事件总线处理

bpmn-js中使用EventBus作为事件的处理句柄,EventBus的使用和我们常规使用的事件总线没啥大的区别,其源码位于:/diagram-js/lib/core/EventBus.js bpmn-js使用diagram-js实现流程图的web端绘制呈现工具)。

EventBus使用

事件总线使用基本都是以监听、回调的方式来实现的。diagram-js提供的EventBus也不无例外。如下为EventBus使用方式。

1、添加监听事件

diagram-js提供的EventBus在监听方式上提供了几种不同的选择,如下,可根据需要选择不同的监听方式:

  • 普通监听

  • 带参监听

  • 返回值监听

  • 优先级监听

  • 上下文监听

    • // listen for event
    • eventBus.on('foo', function(event) {
    • // access event type
    • event.type; // 'foo'
    • // stop propagation to other listeners
    • event.stopPropagation();
    • // prevent event default
    • event.preventDefault();
    • });
    • // listen for event with custom payload
    • eventBus.on('bar', function(event, payload) {
    • console.log(payload);
    • });
    • // listen for event returning value
    • eventBus.on('foobar', function(event) {
    • // stop event propagation + prevent default
    • return false;
    • // stop event propagation + return custom result
    • return {
    • complex: 'listening result'
      
    • };
    • });
    • // listen with custom priority (default=1000, higher is better)
    • eventBus.on('priorityfoo', 1500, function(event) {
    • console.log('invoked first!');
    • });
    • // listen for event and pass the context (this)
    • eventBus.on('foobar', function(event) {
    • this.foo();
    • }, this);

2、发送事件

EventBus通过fire来发送事件,发送事件可配合上述不同类型监听实现。

 *
 * // false indicates that the default action
 * // was prevented by listeners
 * if (eventBus.fire('foo') === false) {
 *   console.log('default has been prevented!');
 * };
 *
 *
 * // custom args + return value listener
 * eventBus.on('sum', function(event, a, b) {
 *   return a + b;
 * });
 *
 * // you can pass custom arguments + retrieve result values.
 * var sum = eventBus.fire('sum', 1, 2);
 * console.log(sum); // 3

3、其他操作

  • off:移除监听回调,若回调函数为空,则移除该监听的所有回调
  • createEvent: 创建一个可被EventBus识别的事件
  • once:注册一个只能被监听一次的事件

如何使用eventbus?

我们可以通过bpmn-js获取的viewer/modeler对象在diagram-js加载完成后添加事件监听。通过bpmn-js提供的eventbus来进行事件监听可以帮助我们给流程编辑器添加钩子和流程图交互配置,如通过监听事件适当添加配置属性。

1、使用viewer进行监听

viewer可以在加载完成diagram-js加载完成后通过viewer.get('eventBus')获取eventbus

var viewer = new BpmnJS({ container: bpmnContainer});

try {
    await viewer.importXML(diagramXM); // 此处异步操作完成后可进行事件操作

    var eventBus = viewer.get('eventBus');

    // you may hook into any of the following events
    var events = [
      'element.hover',
      'element.out',
      'element.click',
      'element.dblclick',
      'element.mousedown',
      'element.mouseup'
    ];

    events.forEach(function(event) {

  
      eventBus.on(event, function(e) {
        // e.element = the model element
        // e.gfx = the graphical element

        log(event, 'on', e.element.id);
      });
   });


} catch (err) {
	console.error('Error happened: ', err);
}

可以通过off来取消监听,但需要改变下写法:

var viewer = new BpmnJS({ container: bpmnContainer});

try {
    await viewer.importXML(diagramXM); // 此处异步操作完成后可进行事件操作

    var eventBus = viewer.get('eventBus');

    function ensureHoveringProcess(event) {
      event.element = rootElement;
      event.gfx = rootElementGfx;
    }
  eventBus.on('element.hover', ensureHoveringProcess)
  // 监听之后
   eventBus.off('element.hover', ensureHoveringProcess);
// 或者如下取消所有element.hover的监听
  eventBus.off('element.hover')


} catch (err) {
	console.error('Error happened: ', err);
}

2、使用Modeler进行监听

modeler可以直接使用modeler对象进行监听和取消监听操作,而无需额外获取:

modeler.on('commandStack.changed', () => {
  // user modeled something or
  // performed an undo/redo operation
});

modeler.on('element.changed', (event) => {
  const element = event.element;

  // the element was changed by the user
});

3、依赖注入

bpmn-js提供给我们足够大的自定义空间,通过在modeler/viewer中的additionalModules配置让我们可以进行各类插件的自定义改装操作,可参照Bpmn-js自定义Palette

const bpmnModeler = new BpmnModeler({
        container: this.$refs["bpmn-canvas"],
        additionalModules: [],

});

而自定义的additionalModules通过使用$inject属性来声明依赖注入的各个模块。如此我们也可以通过这种方式创建一个单独进行logger记录的插件:

 // logger插件
  function InteractionLogger(eventBus) {
    eventBus.on('element.hover', function(event) {
      console.log()
   })
 }
 
 InteractionLogger.$inject = [ 'eventBus' ]; // 注入插件模块
 
  // 插件模块声明
 var extensionModule = {
   __init__: [ 'interactionLogger' ],
  interactionLogger: [ 'type', InteractionLogger ]
};

// viewer加载
var bpmnViewer = new Viewer({
  container:viewerContainer, 
  additionalModules: [ extensionModule ] 
});
// modeler加载
var bpmnModeler = new BpmnModeler({
  container:viewerContainer, 
  additionalModules: [ extensionModule ] 
})

我们也可以通过自定义元素shape、palette时注入eventbus,添加我们自己的事件监听。

内置事件

通过diagram-js实现的元素绘制、布局相应的其会在内部内置元素的各类事件以提供我们调试,跟踪事件以及其他额外元素操作使用,在使用bpmn-js较为常见的事件监听如下:

1、元素事件类

element.changed,
element.out,
element.hover,
element.updateId,
element.marker.update,
bpmnElement.added

2、copyPaste类

moddleCopy.canCopyProperties,
moddleCopy.canSetCopiedProperty,
copyPaste.canCopyElements,
copyPaste.elementsCopied,
copyPaste.pasteElements,
copyPaste.pasteElement,
copyPaste.createTree,
copyPaste.copyElement

3、contextPad类

contextPad.trigger,
contextPad.open,
contextPad.create,
contextPad.close

4、render类

canvas.viewbox.changing,
canvas.init,
canvas.viewbox.changed,
canvas.resized,
render.shape,
render.getShapePath,
render.connection,
render.getConnectionPath,
canvas.destroy,
diagram.init,
diagram.destroy,
diagram.clear

5、connect类

connection.added,
connection.removed,
connect.ended,
connect.canceled
相关推荐
可峰科技8 分钟前
斗破QT编程入门系列之二:认识Qt:编写一个HelloWorld程序(四星斗师)
开发语言·qt
清灵xmf11 分钟前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
全栈开发圈12 分钟前
新书速览|Java网络爬虫精解与实践
java·开发语言·爬虫
面试鸭17 分钟前
离谱!买个人信息买到网安公司头上???
java·开发语言·职场和发展
小白学大数据18 分钟前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
Python大数据分析@21 分钟前
python操作CSV和excel,如何来做?
开发语言·python·excel
qq_3901617726 分钟前
防抖函数--应用场景及示例
前端·javascript
上海_彭彭1 小时前
【提效工具开发】Python功能模块执行和 SQL 执行 需求整理
开发语言·python·sql·测试工具·element
334554321 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel