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
相关推荐
windyrain3 分钟前
ant design pro 模版简化工具
前端·react.js·ant design
浪遏9 分钟前
我的远程实习(六) | 一个demo讲清Auth.js国外平台登录鉴权👈|nextjs
前端·面试·next.js
独好紫罗兰25 分钟前
洛谷题单2-P5715 【深基3.例8】三位数排序-python-流程图重构
开发语言·python·算法
GISer_Jing33 分钟前
React-Markdown详解
前端·react.js·前端框架
太阳花ˉ34 分钟前
React(九)React Hooks
前端·react.js
阳光_你好35 分钟前
详细说明Qt 中共享内存方法: QSharedMemory 对象
开发语言·数据库·qt
鹿屿二向箔1 小时前
阀门流量控制系统MATLAB仿真PID
开发语言·matlab
jiet_h1 小时前
深入解析Kapt —— Kotlin Annotation Processing Tool 技术博客
android·开发语言·kotlin
anda01091 小时前
11-leveldb compact原理和性能优化
java·开发语言·性能优化
tRNA做科研1 小时前
通过Bioconductor/BiocManager安装生物r包详解(问题汇总)
开发语言·r语言·生物信息学·bioconductor·biocmanager