How to add zoom in, zoom out , Reset Zoom ,Toggle Full Screen , Download as SVG , Download BPMN Diagram shortcut keys in angular bpmn js plugin?

Hi All,

I am using BPMN js plugin in Angular 6.0.0 . By default i see only the bpmn js logo available in the viewer. how to enable zoom in, zoom out , Reset Zoom ,Toggle Full Screen , Download as SVG , Download BPMN Diagram icons and its actions as like demo.bpmn.io viewer .

Any suggestion or sample code snippet will be really helpful.

The actions at demo.bpmn.io use Modeler APIs, but the buttons themselves are not part of the library. You can create your own buttons in your project and add event handlers to them, e.g.

template:

<button (click)="zoomIn()">zoom in</button>

in the component

// component method
public zoomIn() {
  this.BpmnJS.get('zoomScroll').stepZoom(1);
}
4 Likes