"modeler.createDiagram or modeler.importXML calls up unintended shape.removed

Developers Modeler
1

Hello,

I am using BPMN modeler to create diagrams. I have a business requirement where double clicking on any Subprocess element will clear the canvas and user will be able to create diagram related to that sub-process whose linking I have handled inside angular code. More like parent-child relationship using subprocess-collapsed and subprocess-expanded element.

Now, I am using “shape.remove” to listen to event which are triggered by context-pad trash-icon click or using context-pad to delete, which will delete all the parent entries against that label.

On my double click handler I have to clear the canvas for which Ive used modeler.createDiagram() function which eventually calls “shape.remove” each time until it clear all the elements inside the canvas. How can I stop the modeler.createDiagram() to not call the shape.remove event handler since I have already tried using
event.preventDefault() and event.stopPropogation() for stopping this behaviour as well as returning false … Here is some part of my code.

this.eventBus.on('element.dblclick', (event) => {
    
              modeler.createDiagram();  
              event.preventDefault();  <---- still calls shape.remove
              event.stopPropogation()
    });

Or if there’s any way I can differentiate between context-pad delete button click event and shape.remove element. In short I looking an event listener for context-pad delete button click or at least differentiate that event.

Your help will be highly appreciated.

Thanks

2

Hi Vicky,

have you tried intercepting shape.delete and using the CommandInterceptor to perform the operation you described after having clicked on the trash-icon?

See this sandbox.

Best
Max

3

Instead of deleting all the elements one by one you can call bpmnJS#clear.

Example: https://codesandbox.io/s/clear-diagram-example-d3gp9

6

Thanks Max and Philips for the replies much appreciated. But, I did override the context-pad module to get a hook inside the onRemoveElement function and used it to differentiate. But @maxtru had given some solid solution.

Thanks