Downscaling seems to not work properly with limitToBounds

[dariuszwisniewski]

In case of the scale below 1 with no bounds limit content seems to be positioned randomly while using zoomIn and zoomOut functions.

Configuration:
const options = { minScale: 0.1, maxScale: 3, limitToBounds: false, };

Everything seems to be fine while limitToBounds is set to true.

Video:
https://www.youtube.com/watch?v=h2qhwRi5KbU

[prc5]

Thanks for reporting, and for the video! I will take a look over the weekend 👍

[dariuszwisniewski]

I think it's about mouseX and mousY calculation in the handleZoomControls function. In case of the "negative" scale (scale < 1) you should probably multiply instead of divide. The other way would be to calculate ratio and then do the multiplication.

The base idea:

    var mouseX = (Math.abs(positionX) + wrapperWidth / 2);
    var mouseY = (Math.abs(positionY) + wrapperHeight / 2);
    if (scale < 1) {
        mouseX = mouseX * scale;
        mouseY = mouseY * scale;
    } else {
        mouseX = mouseX / scale;
        mouseY = mouseY / scale;
    }