I am using camunda modeller at my react page with this versions.
“bpmn-js”: “^3.4.3”,
“bpmn-js-properties-panel”: “^0.31.0”,
“camunda-bpmn-moddle”: “^3.2.0”,
“camunda-dmn-moddle”: “^1.0.0”,

My question is when I click a task, properties panel changing for that event.
If I want to click task how can I catch that onlick event in my react page? There is any override method for the onclick event for catch it in where I use modeller at my page?

Actually I want to open a react dialog when I click on task event for this reason I have to catch onclick event when click on task at in my where I add this modeller.

Thank you!


There are actually two ways to do this.

The easiest one that I’d recommend you is to simply set up a listener on the Modeler instance, i.e.

var modeler = new Modeler({ ... });

modeler.on('element.click', function(event) {
  // do stuff

Alternatively, you could create a custom module in which you set eventBus listener for element.click events. So the module would look like this:

export default function ClickHandler(eventBus) {
  eventBus.on('element.click', function(event) {
    // do stuff

ClickHandler.$inject = [ 'eventBus' ];

For modules usage you can use one of the examples: https://github.com/bpmn-io/bpmn-js-examples/tree/master/custom-modeling-rules




Thank you so much.