I want to implement CustomRules


#1

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' ];

55

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

  1. when i move any element, the connection disappears. and in xmlData

So how do i implement it?
Can you tell me why disappear connection?


#2

You’re missing rules for connection.reconnectStart and connection.reconnectEnd. This is what happens (most of the time) when you move an already connected element. See an example: https://github.com/bpmn-io/bpmn-js/blob/master/lib/features/rules/BpmnRules.js#L88


#3

57 50

I created the above SubProcess first and created the following SubProcess.

When dragging the above SubProcess, it looks like the above picture,
and when dragging the below SubProcess, it looks like the below picture.

Why the connection is drawn behind the SubProcess?


#4

Answer provided in other thread.