Make mouse wheel scroll to do zoom in/out in diagram

Developers
1

Hey,
We are using BPMN diagram in our react project, we have used version "bpmn-js": "8.7.1". We have one component for diagram using BpmnNavigatedViewer . Now We want to implement zoom in/out on mouse wheel scroll, just like how we have on google map. Currently when we scroll mouse wheel, it scrolls the diagram inside the canvas.
I have gone through other posts in this forum and read that this should zoom automatically and it’s the default behaviour. (131) Is there any configuration or style change to achieve this? Am I missing something?

2

Have you tried pressing Ctrl when scrolling?

3

Yes, Ctrl + Scrolling works. But I want to zoom without pressing it. Just like we have for google maps.

4

To achieve that, you’d need to implement a custom extension which would replace the ZoomScroll module.

You can read more on why we decided on the way it’s implemented at Zooming or vertical scrolling: What should be the default mouse wheel action?

5

Thanks, Is there any documentation or something which can guide how to implement custom extension to replace the ZoomScroll

6

You could check out this example to look up how to override the default modules in bpmn-js.