bpmnjs自定义规则之同方向防止重复连线设置bpmnRules

bpmnjs两个节点同方向连线个数并未做限制，允许重复连多条线：bpmn:SequenceFlow ，但实际项目中同方向只保留一条线即可；

防止两个节点之间在同一方向重复连线，其实有两个方法：

方法一：通过自定义bpmnRules模块添加连线规则判断：

这里要用到bpmnjs中的BpmnRules模块，这个模块是继承于diagram-js中的rules模块，想要自定义规则，先要自定义BpmnRules模块：

bpmnjs自定义之规则BpmnRules模块

自定义完bpmnRules后，直接在init()方法里对连线connection.end事件进行判断并返回false：

BpmnRules.prototype.init = function() {
    this.addRule(['connection.end', 'connect.end'], 10000, function(context) {
        var source = context.source,
               target = context.target;
        if(Array.isArray(source.outgoing) && Array.isArray(target.incoming){
            let hasConnect = source.outgoing.some((out)=>{
                return target.incoming.some(in=>out.id===in.id)
            })
            if(hasConnect){
                retrun false
            }
        }
    });

}

方法二：通过自定义connect模块修改其中的connect.end事件：

bpmnjs没有修改diagram-js的连线模块，所以我们将diagram-js中的connect模块直接拷贝出来在bpmnjs中引入即可，关于connect模块自定义的文章：

bpmnjs自定义之connect连线模块

然后我们将文件diagram-js/lib/features/connect/Connect.js中的connect.end事件找到：

Connect.js

eventBus.on('connect.end', function(event) {
    var context = event.context,
    canExecute = context.canExecute,
    connectionStart = context.connectionStart,
    connectionEnd = {
        x: event.x,
        y: event.y
    },
    source = context.source,
    target = context.target;

    if (!canExecute) {
        return false;
    }

    var attrs = null,
    hints = {
        connectionStart: isReverse(context) ? connectionEnd : connectionStart,
        connectionEnd: isReverse(context) ? connectionStart : connectionEnd
    };

    if (isObject(canExecute)) {
        attrs = canExecute;
    }

    modeling.connect(source, target, attrs, hints);
});

可以看到连线结束事件完了以后就会执行modeling.connect()方法创建两个节点之间的连线，所以我们只需在这之前加上相应的不连线判断就可以阻止连线的生成，好吧，直接修改Connect.js中的connect.end事件代码：

eventBus.on('connect.end', function(event) {
    var context = event.context,
    canExecute = context.canExecute,
    connectionStart = context.connectionStart,
    connectionEnd = {
        x: event.x,
        y: event.y
    },
    source = context.source,
    target = context.target;

    if (!canExecute) {
        return false;
    }
    /**防止同方向重复连线的基本逻辑：
    1、从source到target，开始先连接了source节点，
    2、然后拉动线，hover到target节点，
    3、再点击选中target节点，
    4、连上（执行connect.end事件）
    */
    if(Array.isArray(source.outgoing) && Array.isArray(target.incoming){
        let hasConnect = source.outgoing.some((out)=>{
            return target.incoming.some(in=>out.id===in.id)
        })
        if(hasConnect){
            retrun false
        }
    }
    var attrs = null,
    hints = {
        connectionStart: isReverse(context) ? connectionEnd : connectionStart,
        connectionEnd: isReverse(context) ? connectionStart : connectionEnd
    };

    if (isObject(canExecute)) {
        attrs = canExecute;
    }

    modeling.connect(source, target, attrs, hints);
});

到这里，就介绍完两节点同方向重复连线的问题了，快去试试吧！

引导：

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