Modeling connection remove issue

Developers
1

Hello everyone!
I am writing to ask you about an error I am having when deleting a Connection element. First, I have an event listener for “commandStack.connection.create.postExecute” and “commandStack.shape.create.postExecute” to delete elements that meet a specific condition right after they have been created. The method that eliminates the element itself is this:

eventBus.on([“commandStack.connection.create.postExecute”, “commandStack.shape.create.postExecute”], (event) => {
let id = method to get the id
if(condition) this.removeElement(id)
})

removeElement(id) {
let elementRegistry = this.bpmnModeler.get(‘elementRegistry’);
let modeling = this.bpmnModeler.get(‘modeling’);
let element = elementRegistry.get(id);
if(element)
modeling.removeElements([ element ]);
}

The problem I have only happens with flow elements. For example, if the user adds a flow element to the canvas that achieves the condition to be deleted, after deleting that flow element, the error in this image appears:
Captura de pantalla 2023-12-13 a la(s) 18.59.28

Do you have any idea why is this happening and how to solve it?
Thank you!

2

Hello again. I could finally fix this issue by inserting a setTimeout like this:

if(condition){
    setTimeout(() => {
    this.removeElement(id);
    }, 0);
}

I still don´t exactly understand why it worked using a setTimeout only in the case of Sequence Flows, but perhaps this solution will we useful for any other person facing a similar problem

3

You’d generally want to avoid executing commands within the context of an event listener as this breaks undo and redo. commandStack.connection.create.postExecute is an event you’d want to listen to only in very rare cases. I think what you are looking for is a command interceptor: bpmn-js Command Interceptor Starter - CodeSandbox

Can you describe in simple terms what kind of behavior you want to achieve?

4

Hi!
Yes, in fact, the solution that I implemented was used within a class that extends CommandInterceptor. What I am trying to achieve is that if any canvas element exceeds a maximum value of a businessObject property (which always increments), that element should not appear or should be automatically removed from the canvas. I also tried to achieve this using a CustomRuleProvider, but since this option didn’t work either, I decided that the element would be inserted into the canvas and if the property exceeded the maximum value, it would be instantly deleted

5

An event you could listen to is elements.changed which is fired after command execution providing you with a list of all the elements that have changed. You could listen to that event to execute your custom logic.

6

Good morning, sorry for the inconvenience. I have a little issue with setting rules in the pre-packaged plugin. The thing is, I want to set up a rule so that when a task is created and a connection is established, it shouldn’t be able to connect to an existing exclusive gateway. The problem is that when I set the parameters, this happens. How could I fix it?
2024-11-11 09-46-56

Here is my rules code.

class CustomRules {
    constructor(eventBus) {
        eventBus.on([
          'commandStack.shape.create.canExecute'
        ], 10000, ({ context }) => {
          const { target, shape } = context;

          if (target.type === 'bpmn:SequenceFlow') {
            // disallow inserting into flow
            return false;
          }

          if (shape && target && shape.id === target.id) {

            return false;
          }
        });

        eventBus.on([
            'commandStack.elements.move.canExecute'
          ], 10000, ({ context }) => {
            const { shapes, target } = context;
console.log(shapes[0].type);

if (shapes[0].type === 'bpmn:BusinessRuleTask' || shapes[0].type === 'bpmn:ManualTask' || shapes[0].type === 'bpmn:ServiceTask') {
            // Prevent moving elements onto sequence flows
            if (target && target.type === 'bpmn:SequenceFlow') {
            return false;
            }

            // Prevent moving elements onto themselves
            if (shapes && shapes.length && target) {
            const movingOntoSelf = shapes.some(shape => shape.id === target.id);
            if (movingOntoSelf) {
                return false;
            }
            }


        }else{

            if (target && target.type === 'bpmn:SequenceFlow') {
                return false;
                }


        }
            // Allow valid movements return true;

          });

        eventBus.on([
            'commandStack.connection.reconnect.canExecute'
          ], 10000, ({ context }) => {

            const { target, source } = context;

            var connection = context.connection;

        if (connection.id.replace('Flow_', '')  !== source.id) {
              return false;
            }

            if (source && target && source.id === target.id) {
              return false;
            }

            if (target.type === 'bpmn:ExclusiveGateway') {
                return false;
                }
          });

          eventBus.on([
            'commandStack.connection.create.canExecute'
          ], 10000, ({ context }) => {

            const { target, source } = context;

            var connection = context.connection;

            if (source && target && source.id === target.id) {
              return false;
            }

            if (target.type === 'bpmn:ExclusiveGateway') {
                return false;
            }

          });


      }
     }
 CustomRules.$inject = ['eventBus'];
7

Sorry for doing this, but when I tried to create a new post, it said access denied.