bpmnjs如何实现全局连线工具持续连线一直连线的功能？

bpmnjs全局连线工具在自定义完左侧工具栏palette后，变成连完一个图形就会自动关闭，而我们的项目需求是多个图形连线时可以一次过连多个图形，想要实现这个功能要有一定的bpmnjs基础，bpmnjs目前是没有官方文档或者api可以使用，只能自己摸索，所有的资料只有下载下来的依赖文件，实现这个功能我们直接找到diagram.js/features/global-connect文件夹，将GlobalConnect.js文件放到项目合适目录位置，在自定义modeler组件的地方引入这个文件，接下来就可以在这个文件上修改或者增加代码实现全局连线工具一直连的功能，首先找到这个文件里面的这些代码：

eventBus.on([ 'global-connect.ended' ], function(event) {
    var context = event.context,
        startTarget = context.startTarget,
        startPosition = {
          x: event.x,
          y: event.y
        };

    var canStartConnect = self.canStartConnect(startTarget);

    if (!canStartConnect) {
      return;
    }

    eventBus.once('element.out', function() {
      eventBus.once([ 'connect.ended', 'connect.canceled' ], function() {
        eventBus.fire('global-connect.drag.ended');

      });

      connect.start(null, startTarget, startPosition);
    });

    return false;
  });

上面的代码就是全局连线工具使用结束后执行的语句，最后的结束点在上面代码的eventBus.fire语句，我们在这句话下一行增加自定义代码：self.restart(endEvent)，最终变成：

eventBus.on([ 'global-connect.ended' ], function(event) {
    var context = event.context,
        startTarget = context.startTarget,
        startPosition = {
          x: event.x,
          y: event.y
        };

    var canStartConnect = self.canStartConnect(startTarget);

    if (!canStartConnect) {
      return;
    }

    eventBus.once('element.out', function() {
      eventBus.once([ 'connect.ended', 'connect.canceled' ], function(endEvent) {
        eventBus.fire('global-connect.drag.ended');
        self.restart(endEvent);
      });

      connect.start(null, startTarget, startPosition);
    });

    return false;
  });
//self是构造函数原有的this的定义

注意上面代码endEvent变量的来源，然后我们再在GlobalConnect对象的原型链上自定义restart()方法：

//先在GlobalConnect构造函数里增加这三个定义：
  this._eventBus = eventBus;
  this._connect = connect;
  this._toolManager = toolManager;

//然后自定义restart()方法
GlobalConnect.prototype.restart = function(event) {
    var self = this;
      var startTarget = event.hover,
        startPosition = {
          x: event.x,
          y: event.y
        };

    var canStartConnect = self.canStartConnect(startTarget);

    if (!canStartConnect) {
      return;
    }
    this._toolManager.setActive('global-connect');//持续常亮选中'global-connect'工具
    this._eventBus.once('element.out', function() {
      self._eventBus.once([ 'connect.ended', 'connect.canceled' ], function(endEvent) {
        self._eventBus.fire('global-connect.drag.ended');
        self.restart(endEvent);
      });

      self._connect.start(null, startTarget, startPosition);
    });
};

可以发现几乎是重写了一遍eventBus.on([“global-connect.ended”])事件的内容，重点在于知道事件最终停止的地方以及变换连线的起始图形对象(startTarget)；
once方法是仅执行一次的意思，fire方法是执行的意思；
好啦，就写到这里，后续有时间会再补充关于bpmnjs的其他教程，赶紧先去试试啦。

引导：

关于bpmnjs+vue的更多篇章，小编已经全部整理在这里：
bpmnjs+vue中文文档API常见方法使用总结