bpmnjs自定义之connect连线模块

bpmnjs没有修改diagram-js的连线模块，所以我们将diagram-js中的connect模块直接拷贝出来在bpmnjs中引入替换connect模块即可，文件目录在：diagram-js/lib/features/connect/Connect.js，看下部分代码：

export default function Connect(eventBus, dragging, modeling, rules) {
// rules
function canConnect(source, target) {
    return rules.allowed('connection.create', {
        source: source,
        target: target
    });
}

function canConnectReverse(source, target) {
    return canConnect(target, source);
}

// event handlers
eventBus.on('connect.hover', function(event) {
    var context = event.context,
    start = context.start,
    hover = event.hover,
    canExecute;

    // cache hover state
    context.hover = hover;

    canExecute = context.canExecute = canConnect(start, hover);

    // ignore hover
    if (isNil(canExecute)) {
        return;
    }

    if (canExecute !== false) {
        context.source = start;
        context.target = hover;

        return;
    }

    canExecute = context.canExecute = canConnectReverse(start, hover);

    // ignore hover
    if (isNil(canExecute)) {
        return;
    }

    if (canExecute !== false) {
        context.source = hover;
        context.target = start;
    }
});

同样，自定义connect模块做法和其他模块自定义一样，前面已经说了自定义了Modeler以及部分模块的方法，还不会的同学可以先点这里了解：

bpmnjs如何自定义Modeler？vue+bpmnjs

然后在自定义模块引入的文件custom/index.js中加入connect模块：

import customConnect from './Connect.js';

export default {
  connect: [ 'type', customConnect ]
};

可以看到自定义connect模块不需要像bpmnRules模块一样需要执行init方法；

其实就这么简单，以后其他模块的自定义都可以仿照这样来，快去试试吧！

引导：

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