Horizontal and Veritcal scroll to BPMNViewer

Developers
1

Hi,

How can i add horizontal and vertical scroll to canvas. I am using BPMNViewer to render bpmn xml.

Can you please provide me any details how to implement this

Thanks
Vijay

2

Can you share your code? In which way exactly are you using bpmn-js?

3

Hi Philipp,

Here is the code.


import * as BpmnViewer from 'bpmn-js/dist/bpmn-viewer.development.js';

  this.bpmnViewer = new BpmnViewer({
      container: this.dc.nativeElement,
    });

    this.overlays = this.bpmnViewer.get('overlays');
    this.canvas = this.bpmnViewer.get('canvas');
    this.eventBus = this.bpmnViewer.get('eventBus');

    this.bpmnViewer.importXML(this.bpmnXML, (err) => {
      if (err) {
        console.log('error rendering', err);
      } else {
        console.log('rendered');
      }
    });

    this.canvas.zoom('fit-viewport');

Thanks
Vijay

4

Fix: import BpmnNavigatedViewer from 'bpmn-js/dist/bpmn-navigated-viewer.development.js';

5

Thank you Philip, it worked.

With navigated viewer I am able to scroll it vertically and drag it horizontally . This perfectly works for me, however if I still want to enable a scroll bar horizontally rather dragging it how can I do that.

Thanks
Vijay

6

The canvas is endless, how is that supposed to work?