Touchscreen support on NavigatedViewer

Developers
1

Hi,

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?

2

Hi,

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.

3

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) {
        super(options);

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

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

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

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

Thank you and sorry for the inconvenience!

1 Like
5

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