Touchscreen support on NavigatedViewer


ive got project with bpmn-js Modeler and NavigatedViewer in it. Modeler seems to have touchscreen support on by default. Is it possible to add mobile navigations to navigatedViewer too?


the Modeler ships with the TouchModule.

You can easily create a CustomNavigatedViewer which would inherit from the NavigatedViewer and add the TouchModule on top. See this example: bpmn-js-examples/custom-bundle at master · bpmn-io/bpmn-js-examples · GitHub.

Hi @maxtru,

I have a Angular project with bpmn-js npm package. I was wondering is it possible to implement this solution without UMD bundling? So far I have made TS class “customNavigatedViewer” with all required modules in it, but It doesnt seem to work.

import NavigatedViewer from 'bpmn-js/lib/NavigatedViewer';
import TouchModule from 'diagram-js/lib/navigation/touch';

export class customNavigatedViewer extends NavigatedViewer {
    constructor(options: any) {

        customNavigatedViewer.prototype['_modules'] = [].concat(NavigatedViewer.prototype._modules, [TouchModule]);

I managed to get it working by adding these lines from the example

        customNavigatedViewer.prototype['_customModules'] = [TouchModule];

        customNavigatedViewer.prototype['_modules'] = [].concat(

Thank you and sorry for the inconvenience!

1 Like

Awesome, I am glad you found a solution. Thanks for sharing it here! :slight_smile: