How to add zoom in, zoom out and keyboard shortcut keys to angular bpmn example?

Developers
1

I gone through the below example. I did not find zoomin/zoom out, keyboard shortcut keys and resize. Can you please tell me how to add to canvas?

2

Hi @Chandishwar,

as you mentioned correctly, these functionalities are not activated in the example. We considered adding some per default but followed up in just adding some documentation link in the README (cf. https://github.com/bpmn-io/bpmn-js-example-angular/commit/e41e74debc31c9438fe7916cd5cd5faa556fcd34).

To answer your question: You can simply add the keyboard bindings to your Modeler


import * as BpmnJS from 'bpmn-js/dist/bpmn-modeler.production.min.js';

var bpmnJS = new BpmnJS({
    keyboard: { bindTo: document }
});

By using the Modeler also the Resize and Zoom modules will be available in the editor.

1 Like
3

It seems keyboard shortcuts are binding to document /window, my case I used bpmn modeler in angular material tabs, so every tab should work independently, but it is not working as expected. If I do copy (ctrl +c) and paste (ctrl +V) bpmnshape in one tab other tab also pasted.
How should I restrict the keyboard actions to the respective tab?

4

Can someone please help on this?
Let me know if you need any more info

5

One possible solution is not binding the keyboard and using EditorActions to trigger actions on the currently active modeler only.

6

could you please provide small code snippet how to bind the keyboard actions for current active modeler,
Thanks in advance