Event remove listerner (shape.remove)

Developers Modeler
1

Hi, I want to do something special when the user delete an element.
Right now I found listener “shape.remove” but actually this event fires also when the user is creating a new element.
The question is why?
Would you please help me?

2

It should be fairly straight forward for you to put a debugger statement in the event listener and capture a stack trace of where shape.remove is being fired.

Please provide us with more context:

  • which modeling tool do you use
  • what exactly would you like to achieve
  • under which circumstances (reproducible scenario / stack traces, interaction demo) do things awry

Thanks!

3

Thanks for your reply.

I am using “bpmn-js”: “^0.27.5”, Visual Studio 2017 Community Edition and TypeScript 2.7.
I want when the user deletes a task boundary event then I am going to update my model. but the event (shape.remove) fires on creating and deleting the element. It is strange for me.

Thanks

4

I found something that are related to my code. I am going to check it first.
Thanks.

5

It is becase we have the following listener

this.modeler.on('create.ended', 1500, this.handleCreateEnded as (obj: BPMN.Event) => void);

_this.handleCreateEnded = function (e) {
            var shape = e.context.shape;
            var target = e.context.target;
            if (shape.type == "bpmn:EndEvent")
                return;
            if (shape.type == "bpmn:BoundaryEvent") {
                shape = _this.bpmnReplace.replaceElement(shape, {
                    type: "bpmn:BoundaryEvent",
                    eventDefinitionType: "bpmn:TimerEventDefinition"
                });
            }
            else if (shape.type == "bpmn:IntermediateThrowEvent") {
                shape = _this.bpmnReplace.replaceElement(shape, {
                    type: "bpmn:IntermediateCatchEvent",
                    eventDefinitionType: "bpmn:TimerEventDefinition"
                });
            }
            _this.props.entities[shape.id] = _this.newModel(shape);
        };

but I don`t know how can I handle both?

6

Can you describe on a conceptual level what exactly you want to achieve, regardless of how it might be implemented?

7

Hi philippfromme,

Thanks for your reply.

Yes, I want to use only Intermediate catch event and boundary events (only Interrupting and Non-Interrupting), so when the user uses “Create IntermediateEvent/Boundary” to create the node, I have the following code to apply the limitations:

this.modeler.on('create.ended', 1500, this.handleCreateEnded as (obj: BPMN.Event) => void);

handleCreateEnded = (e: BPMN.EndedEvent) => {

        let shape = e.context.shape;
        const target = e.context.target;

        if (shape.type == "bpmn:EndEvent")
            return;

        if (shape.type == "bpmn:BoundaryEvent") {
            shape = this.bpmnReplace.replaceElement(shape, {
                type: "bpmn:BoundaryEvent",
                eventDefinitionType: "bpmn:TimerEventDefinition"
            });
        }
        else if (shape.type == "bpmn:IntermediateThrowEvent") {
            shape = this.bpmnReplace.replaceElement(shape, {
                type: "bpmn:IntermediateCatchEvent",
                eventDefinitionType: "bpmn:TimerEventDefinition"
            });
        }

        this.props.entities[shape.id!] = this.newModel(shape);
    }

and when the user deletes a boundary timer I want to update my model.
because of this code (using this.bpmnReplace.replaceElement) we will have firing of “shape.remove” event on creating a node too. So I cannot distinguish between real deleting and replacing a shape on “shape.remove”.

best regards