I want to implement custom Rules

Developers
1

31

import inherits from 'inherits';

import {
  is
} from 'bpmn-js/lib/util/ModelUtil';

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

var HIGH_PRIORITY = 1500;

/**
 * Specific rules for custom elements
 */
export default function CustomRules(eventBus) {
  RuleProvider.call(this, eventBus);
}

inherits(CustomRules, RuleProvider);

CustomRules.prototype.init = function() {
  /**
   * Can source and target be connected?
   */
  function canConnect(source, target) {
    // allow connection between custom shape and task
      if (is(target, 'bpmn:ServiceTask')) {
        return { type: 'bpmn:SequenceFlow' };
      } else {
        return false;
      }
  }

  this.addRule('connection.create', HIGH_PRIORITY, function(context) {
    let source = context.source,
      target = context.target;

    return canConnect(source, target);
  });
};

CustomRules.$inject = [ 'eventBus' ];

I succeeded in connecting the connections by implementing custom rules.
But there is problems.

  1. line is drawn backwards subProcess.
  2. when i move any element, the line disappears. and in xmlData

How do i implement it?

2

Please explain what you’re trying to achieve.