[FEAT] Pan/scroll/translate the BPMN diagram with the mouse wheel

[tbouffard]

[UPDATE 2023-11-12] Originally named https://github.com/process-analytics/bpmn-visualization-js/issues/845

Is your feature request related to a problem? Please describe.

Allow to scroll the diagram with the mouse wheel. This is particularly useful when the BPMN container has a fixed size and has no scrollbar.
As for other mouse navigation controls, this feature can be activated by configuration.

Describe the solution you'd like

Something similar to the POC demonstrated in process-analytics/bpmn-visualization-js#555

• mouse wheel only: move the diagram vertically
• SHIFT + mouse wheel: move the diagram horizontally

These are the regular way to control scrollbars in web browsers.
Notice that when the BPMN container has scrollbars, this should be delegated to the browser because it already handles it.

Additional context

Note: We may need to measure rendering performance of this feature as we do for process-analytics/bpmn-visualization-js#839.

It is already possible to use the scrollbars to scroll the diagram (see process-analytics/bpmn-visualization-js#735 and process-analytics/bpmn-visualization-examples#216).

The implementation should

• be provided by a plugin: MouseScrollPlugin (be consistent with [FEAT] Allow to Pan/translate/scroll the BPMN diagram with buttons #164 and [FEAT] Add a plugin to translate/scroll the diagram with keyboard keys #167)
• do nothing when the BPMN container has scrollbars (ignore mouse event), because this can already handled by the browser.
• eventually used throttle and debounce (if possible avoid to do it as it increase complexity) as this is currently done for the mouse zoom support in bpmn-visualization
  • reuse the "navigation" configuration in GlobalOptions
  • for default values and values validation (min/max), we may have to duplicate the code from bpmn-visualization

Notice that the usage of throttle/debounce won't be necessary if we implement something like process-analytics/bpmn-visualization-js#2199

About the event management, the zoom support in bpmn-visualization could be probably improved by following the suggestion stated by Chromium (the following has been seen in the Brave browser). We may directly implement it here:

plugins-support.js:20 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event.
Consider marking event handler as 'passive' to make the page more responsive.
See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ build.js:9808
addMouseWheelListener @ build.js:10219
registerMouseWheelZoomListeners @ bpmn-visualization.esm.js:1166
configureNavigationSupport @ bpmn-visualization.esm.js:2961
configure @ bpmn-visualization.esm.js:2937
BpmnVisualization @ bpmn-visualization.esm.js:4817
BpmnVisualization @ plugins-support.js:20
(anonymous) @ overlays.ts:30
plugins-support.js:20 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event.
Consider marking event handler as 'passive' to make the page more responsive.
See https://www.chromestatus.com/feature/5745543795965952