Restrict boundary events to be attached to graphics of the specified type

[xu.zhang]

I want to restrict bounding events to be attached only to certain types of shape and not to the canvas. Here’s what I do now：

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

export default class CustomRules extends RuleProvider {
  constructor(eventBus, commandStack) {
    super(eventBus);
    this.init();
  }

  init() {
    this.addRule(['shape.create'], 1500, function (context) {
      const shape = Array.isArray(context.shapes) ? context.shapes[0] : context.shape
      const target = context.target
      console.log(shape, target)
      const shapeBo = shape.businessObject
      const targetBo = target?.businessObject;
      if (shapeBo.$type === 'bpmn:BoundaryEvent') {
        if (targetBo && targetBo.$type === 'bpmn:FlowNode') {
          return true;
        } else {
          return false;
        }
      }
      return true
    })
  }
}

CustomRules.$inject = ['eventBus']

But this only limits the time the shape is created. Once the shape has been created, it cannot be constrained if you move it. I also tried this.addRule(['elements.move'], 1500, xxx). But the consequence of this is that you can’t drag the shape once it’s created.
Thank you all

[philippfromme]

Just to clarify, you want to prevent this, right?

[xu.zhang]

Yes, I want to prevent boundary events from being dragged onto the canvas

[philippfromme]

You’d have to override the rule allowing this operation: https://github.com/bpmn-io/bpmn-js/blob/develop/lib/features/rules/BpmnRules.js#L610

[xu.zhang]

I tried to add judgment in canInsert, like this:

if (is(shape, 'bpmn:BoundaryEvent') && is(connection.parent, 'bpmn:Process')) {
      return false
}

But boundary events can still be dragged onto the canvas，Full code here:

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

export default class CustomRules extends RuleProvider {
  constructor(eventBus, bpmnRules) {
    super(eventBus);
    bpmnRules.canInsert = function (shape, connection, position) {
      if (!connection) {
        return false;
      }

      if (Array.isArray(shape)) {
        if (shape.length !== 1) {
          return false;
        }

        shape = shape[ 0 ];
      }

      
      if (is(shape, 'bpmn:BoundaryEvent') && is(connection.parent, 'bpmn:Process')) {
        return false
      }

      if (connection.source === shape ||
        connection.target === shape) {
        return false;
      }

      // return true if shape can be inserted into connection parent
      return (
        isAny(connection, [ 'bpmn:SequenceFlow', 'bpmn:MessageFlow' ]) &&
        !isLabel(connection) &&
        is(shape, 'bpmn:FlowNode') &&
        !is(shape, 'bpmn:BoundaryEvent') &&
        this.canDrop(shape, connection.parent, position));
    }
    this.init();
  }
}

CustomRules.$inject = ['eventBus', 'bpmnRules']

[xu.zhang]

In the end, I achieved the desired effect in this way. Thank you very much for your help

function imposeMove({ context }) {
  if (is(context.shape, 'bpmn:BoundaryEvent') && is(context.target, 'bpmn:Process')) {
    return false;
  }
}

export default class CustomRules extends RuleProvider {
  constructor(eventBus, bpmnRules, commandStack) {
    super(eventBus);
    this.init();
    eventBus.on(['shape.move.end'], 10000, imposeMove)
  }
}

CustomRules.$inject = ['eventBus', 'bpmnRules', 'commandStack']

a fly in the ointment, when the drag boundary event hovers over the canvas, the canvas does not turn red.