i implemented CustomRules like that.
import inherits from 'inherits';
import {
isExpanded,
isEventSubProcess,
isInterrupting,
hasErrorEventDefinition,
hasEscalationEventDefinition,
hasCompensateEventDefinition
} from 'bpmn-js/lib/util/DiUtil';
import {
isAny
} from 'bpmn-js/lib/features/modeling/util/ModelingUtil.js';
import {
find,
some,
every,
forEach
} from 'min-dash';
import {
isLabel
} from 'bpmn-js/lib/util/LabelUtil';
import {
is
} from 'bpmn-js/lib/util/ModelUtil';
import RuleProvider from 'diagram-js/lib/features/rules/RuleProvider';
let HIGH_PRIORITY = 1500;
/**
* Specific rules for custom elements
*/
export default function CustomRules(eventBus) {
RuleProvider.call(this, eventBus);
}
inherits(CustomRules, RuleProvider);
CustomRules.prototype.init = function() {
this.addRule('connection.create', HIGH_PRIORITY, function(context) {
let source = context.source,
target = context.target,
hints = context.hints || {},
targetParent = hints.targetParent,
targetAttach = hints.targetAttach;
if (targetAttach) {
return false;
}
// temporarily set target parent for scoping
// checks to work
if (targetParent) {
target.parent = targetParent;
}
try {
return canConnect(source, target);
} finally {
// unset temporary target parent
if (targetParent) {
target.parent = null;
}
}
});
this.addRule('elements.move', function(context) {
var target = context.target,
shapes = context.shapes,
position = context.position;
return canMove(shapes, target, position);
});
};
/**
* Can source and target be connected?
*/
function canConnect(source, target) {
if (is(target, 'bpmn:Task')) {
return { type: 'bpmn:SequenceFlow' };
} else {
return false;
}
}
function canMove(elements, target) {
// do not move selection containing boundary events
if (some(elements, isBoundaryEvent)) {
return false;
}
// do not move selection containing lanes
if (some(elements, isLane)) {
return false;
}
// allow default move check to start move operation
if (!target) {
return true;
}
return elements.every(function(element) {
return canDrop(element, target);
});
}
function canDrop(element, target, position) {
// can move labels everywhere
if (isLabel(element)) {
return true;
}
// disallow to create elements on collapsed pools
if (is(target, 'bpmn:Participant') && !isExpanded(target)) {
return false;
}
// allow to create new participants on
// on existing collaboration and process diagrams
if (is(element, 'bpmn:Participant')) {
return is(target, 'bpmn:Process') || is(target, 'bpmn:Collaboration');
}
// allow creating lanes on participants and other lanes only
if (is(element, 'bpmn:Lane')) {
return is(target, 'bpmn:Participant') || is(target, 'bpmn:Lane');
}
if (is(element, 'bpmn:BoundaryEvent')) {
return false;
}
// drop flow elements onto flow element containers
// and participants
if (is(element, 'bpmn:FlowElement') && !is(element, 'bpmn:DataStoreReference')) {
if (is(target, 'bpmn:FlowElementsContainer')) {
return isExpanded(target);
}
return isAny(target, [ 'bpmn:Participant', 'bpmn:Lane' ]);
}
// account for the fact that data associations are always
// rendered and moved to top (Process or Collaboration level)
//
// artifacts may be placed wherever, too
if (isAny(element, [ 'bpmn:Artifact', 'bpmn:DataAssociation', 'bpmn:DataStoreReference' ])) {
return isAny(target, [
'bpmn:Collaboration',
'bpmn:Lane',
'bpmn:Participant',
'bpmn:Process',
'bpmn:SubProcess' ]);
}
if (is(element, 'bpmn:MessageFlow')) {
return is(target, 'bpmn:Collaboration')
|| element.source.parent == target
|| element.target.parent == target;
}
return false;
}
function isBoundaryEvent(element) {
return !isLabel(element) && is(element, 'bpmn:BoundaryEvent');
}
function isLane(element) {
return is(element, 'bpmn:Lane');
}
CustomRules.$inject = [ 'eventBus' ];
I succeeded in connecting the connections by implementing custom rules.
But there is a problem.
- when i move any element, the connection disappears. and in xmlData
So how do i implement it?
Can you tell me why disappear connection?