Dmn Modeler event not working

Developers Modeler
1

hi
dmn Modeler event not working

dmnModeler.on('element.dblclick', 0, (event) => {
  event.originalEvent.preventDefault();
  event.originalEvent.stopPropagation();
  console.log(event.element);
   
  }
2

It’s hard to help you without having additional knowledge about your setup.
For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it.

3

bmpn js event work

import BpmnJS from 'bpmn-js/lib/Modeler';
bpmnModeler = new BpmnJS({
  container: '#canvas',
  keyboard: {
    bindTo: window
  },
 
});

bpmnModeler.on('element.contextmenu', 0, (event) => {
  event.originalEvent.preventDefault();
  event.originalEvent.stopPropagation();   
  console.log((event.element));
  
});

but dmn js event not fire

import DmnJS from 'dmn-js/lib/Modeler';
var dmnModeler = new DmnJS({
  container: '#canvas',  
});
dmnModeler.on("element.contextmenu", function(event) {
    alert(event.element.id + " was clicked");
});
4

The DMN Modeler follows a multi-editor approach. Therefore every has its own eventBus. Also see this thread for a short explanation: Are there two instances of EventBus's.

Therefore without specify the editor, the event handler won’t be recognized in most cases. You can find in the code base which editor fires which contextmenu event: https://github.com/bpmn-io/dmn-js/search?q=element.contextmenu&unscoped_q=element.contextmenu

5

error
Uncaught TypeError: dmnModeler.get is not a function

 var eventBus = dmnModeler.get('eventBus');

// you may hook into any of the following events
var events = [
  'element.hover',
  'element.out',
  'element.click',
  'element.dblclick',
  'element.mousedown',
  'element.mouseup'
];

events.forEach(function(event) {

  eventBus.on(event, function(e) {
    // e.element = the model element
    // e.gfx = the graphical element

    log(event, 'on', e.element.id);
  });
});
6

error
Uncaught TypeError: dmnModeler.get is not a function

var dmnModeler = new DmnJS({
  container: '#canvas',  
});
 var eventBus = dmnModeler.get('eventBus');

// you may hook into any of the following events
var events = [
  'element.hover',
  'element.out',
  'element.click',
  'element.dblclick',
  'element.mousedown',
  'element.mouseup'
];

events.forEach(function(event) {

  eventBus.on(event, function(e) {
    // e.element = the model element
    // e.gfx = the graphical element

    log(event, 'on', e.element.id);
  });
});
7

As I mentioned before, dmn-js offers a multi editor editor, what means you have to get the active editor before continuing

const activeEditor = dmnModeler.getActiveViewer();

const eventBus = activeEditor.get('eventBus');

Please see this example on how to listen to the element.contextmenu event for the current active editor.

1 Like
8

thank you so much
My problem was solved