bpmnjs自定义之bpmnRules规则模块

bpmnjs的规则模块bpmnRules是继承diagram-js的基础上自己新增了很多规则组成；

我们首先来简单看一下这两个模块的基本内容，直接找到node_modules依赖文件路径：bpmn-js/lib/features/rules/BpmnRules.js与diagram-js/lib/features/rules/RuleProvider.js：

BpmnRules.js

import RuleProvider from 'diagram-js/lib/features/rules/RuleProvider';

export default function BpmnRules(eventBus) {
    RuleProvider.call(this, eventBus);
}
inherits(BpmnRules, RuleProvider);
BpmnRules.$inject = [ 'eventBus' ];

BpmnRules.prototype.init = function() {

    this.addRule('connection.start', 100, function(context) {
        var source = context.source;
        return canStartConnection(source);
    });
    .........
}
BpmnRules.prototype.canConnect = canConnect;

function canConnect(source, target, connection) {
    ..........
    if (canConnectSequenceFlow(source, target)) {
        return { type: 'bpmn:SequenceFlow' };
    }
    return false;
}
    ......

RuleProvider.js

export default function RuleProvider(eventBus) {
    CommandInterceptor.call(this, eventBus);
    this.init();
}
RuleProvider.$inject = [ 'eventBus' ];
inherits(RuleProvider, CommandInterceptor);

RuleProvider.prototype.addRule = function(actions, priority, fn) {
    var self = this;
    if (typeof actions === 'string') {
        actions = [ actions ];
    }
    actions.forEach(function(action) {
        self.canExecute(action, priority, function(context, action, event) {
            return fn(context);
        }, true);
    });
};

从上面两个文件的部分内容可以知道，其实bpmnjs的bpmnRules模块已经写了不少规则，只需要使用diagram-js的addRule()方法就可以给对应的事件添加相应的校验规则，下面我们来自定义bpmnRules模块：

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

bpmnjs如何自定义Modeler？vue+bpmnjs

直接将BpmnRules.js文件拷出来，当作自己自定义的模块在custom/index.js里引入即可，这样可以在保留原有规则的基础上扩展自己的新规则：

import customBpmnRules from './BpmnRule.js';

export default {
  __init__: [ 'bpmnRules' ],
  bpmnRules: [ 'type', customBpmnRules ]
};

然后直接在上面的init方法里加上自己的规则即可：

BpmnRules.prototype.init = function(){
    this.addRule('connection.end', 1000, function(context) {
        var element = context.source;
        if(element.id===xxx){
            return false
        }
        ......
    });
}

已经很明了了吧，根据对象属性或者模块参数进行校验，返回true则通过，false则禁止；

好了，自定义规则的内容讲到这，下一篇讲讲同方向禁止重复连线的规则的方法；

引导：

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