Ctrl+Left mouse click event on activities

Developers
1

I found this article: https://github.com/bpmn-io/bpmn-js-examples/blob/master/interaction/README.md
Now I want to register a click event with the ctrl key when clicking on BPMN activities.
There is only the event ‘element.click’ for the event bus. How can I detect the ctrl key?

In jQuery I can do something like:

obj.on(‘mousedown’, function (e) {
// ctrl+click
if (e.button == 0 && e.ctrlKey) {

but for the event bus there is no event object. I have tried some variants to detect whether the Ctrl key is pressed globally in the document:

function detectCtrlKeyDown(e) {
const evtobj = window.event ? event : e;
console.log('OnKeyDown: ’ + JSON.stringify(evtobj));

if (evtobj.ctrlKey) {
    isCtrlKeyPressed = true;
    alert("you stopped pressing one of the 'Ctrl' key");
}

}

function detectCtrlKeyUp(e) {
console.log('OnKeyUp: ’ + JSON.stringify(e));

if (e.ctrlKey) {
    isCtrlKeyPressed = false;
    alert("you stopped pressing one of the 'Ctrl' key");
}

}

//document.onkeydown = detectCtrlKeyDown;
document.onkeypress = detectCtrlKeyDown;
document.onkeyup = detectCtrlKeyUp;

but it doesn’t really work this way. The key down event is not triggered and I need my flag isCtrlKeyPressed. Is there a better way?

2

The original event is actually part of the event fired by the event bus. diagram-js has a couple of helpers that you can use to detect whether the Ctrl key was pressed when you clicked:

import {
  hasPrimaryModifier,
  hasSecondaryModifier,
  isPrimaryButton
} from 'diagram-js/lib/util/Mouse';

// ...

eventBus.on('element.click', function(event) {
  if (!isPrimaryButton(event)) {
    return;
  }

  const hasModifier = hasPrimaryModifier(event) || hasSecondaryModifier(event);

  // ...
});