Zoom with a custom slider in a navigated viewer

tdauth · December 2, 2020, 12:11pm

Hi,
I want to create a website with a navigated viewer. The website contains a custom slider which should provide the zoom functionality since the user has to use Ctrl+Mouse Wheel by default to zoom in and out. Some users don’t know this, so the slider might be helpful.
I use the zoom scroll functions (How add zoom [+] and zoom [-]) However, I don’t know how to get the current zoom distance.
I don’t want to store the current delta manually since it might change in other calls like resetting the zoom etc.and I didn’t find any way to register a callback which is called when the delta changes.
I found ZoomScroll._totalDelta but it seems to be 0 all the time.
Is there any way to get the current delta/distance and use it when chaning the slider to pass a correct delta?

Btw. is there any option to reenable zooming with the mouse wheel (without Ctrl)?

philippfromme · December 3, 2020, 7:50am

Canvas has a function called zoom. If you call this function without any arguments it will return the current zoom. I’ve created a small example of using a range input for zooming: https://codesandbox.io/s/bpmn-js-zoom-through-range-input-kzx8p

As for zooming with the mouse wheel only, this behavior is hard-coded:

github.com

bpmn-io/diagram-js/blob/develop/lib/navigation/zoomscroll/ZoomScroll.js#L116


  return;
}
var element = this._container;
event.preventDefault();
// pinch to zoom is mapped to wheel + ctrlKey = true
// in modern browsers (!)
var isZoom = event.ctrlKey;
var isHorizontalScroll = event.shiftKey;
var factor = -1 * this._scale,
    delta;
if (isZoom) {
  factor *= event.deltaMode === 0 ? 0.020 : 0.32;
} else {
  factor *= event.deltaMode === 0 ? 1.0 : 16.0;

If you want to change this behavior you have to override this module.

tdauth · December 3, 2020, 10:21am

Hey, thx but in your example when I use the mouse wheel and Ctrl to zoom it won’t affect the slider. Is there no way to register a callback which will move the slider?

philippfromme · December 3, 2020, 7:21pm

You can listen for the canvas.viewbox.changing event which is fired before the zoom is changed and for canvas.viewbox.changed which is fired afterwards.