This example shows how to implement custom modeling rules in bpmn-js.
This example extends the bpmn-js modeler with custom modeling rules.
The rules are added via a custom rules provider. The provider hooks into the rule evaluation for shape.create
and restricts it to elements annotated with a vendor:allowDrop
extension attribute.
this.addRule('shape.create', function(context) {
var shape = context.shape,
target = context.parent;
var shapeBo = shape.businessObject,
targetBo = target.businessObject;
var allowDrop = targetBo.get('vendor:allowDrop');
if (!allowDrop || !shapeBo.$instanceOf(allowDrop)) {
return false;
}
});
Using these custom rules users are able to insert tasks on the following sequence flow:
<bpmn:sequenceFlow id="SequenceFlow_1" vendor:allowDrop="bpmn:Task" />
They would not be able to insert anything if the allowDrop
annotation is missing:
<bpmn:sequenceFlow id="SequenceFlow_1"/>
To learn more, check out an example diagram and the accompanying test cases.
One time installation of all dependencies via npm:
npm install
Execute the test suite to spin up the example in your browser:
npm run dev
Go to localhost:9876/debug.html to inspect the example in your Browser.
MIT