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


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) => {
              event.preventDefault();  <---- still calls shape.remove

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.


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.


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

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

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.