Zoom in on click to mouse position

[ecemac]

Is your feature request related to a problem? Please describe. I need to zoom in on images with single click, instead of double click. I kind of achieved this by using zoomIn() method, however this both interferes with panning (which I found a workaround with onPanning() method) and also only zooms in the centre of image instead of the mouse position. Double click on the other hand, zooms in wherever the mouse position is.

Describe the solution you'd like There can be a singleClick option which imitates the doubleClick action.

Describe alternatives you've considered I have considered using zoomIn() as a click event, but it only zooms in the centre.

[ecemac]

When could this be added? Anytime soon hopefully? 🙏

[ecemac]

Damn, I actually solved it with some help from a friend. If anyone is looking for something similar, you my solution here

[Nirmalsiliveru]

hi where to add this code const wrapper = document.getElementsByClassName('react-transform-wrapper')?.[0]; const x = wrapper?.getBoundingClientRect().left; const y = wrapper?.getBoundingClientRect().top; const coordinates = { x: x - e.clientX, y: y - e.clientY, }; setTransform( (coordinates.x + wrapper?.clientWidth / (MAX_SCALE * 2)) * MAX_SCALE, (coordinates.y + wrapper?.clientHeight / (MAX_SCALE * 2)) * MAX_SCALE, MAX_SCALE );

[CerealeZ]

Damn, I actually solved it with some help from a friend. If anyone is looking for something similar, you my solution here

Actually, the code zooms to the indicated part, but it does not take into consideration the image limits, which results in a sharp jump to the limit at the moment of a movement.

I figured out a way to zoom respecting those limits, inspired by this W3S example.

The code is as follows:

const calculateZoomPosition = (dimension, scale, mousePosition) =>
    Math.min(
        Math.max(
            (mousePosition + dimension / (scale * 2)) * scale,
            dimension * (1 - 1 * (2 - scale)) * -1
        ),
        0
    );

setTransform(
    calculateZoomPosition(width, MAX_SCALE, coordinates.x),
    calculateZoomPosition(height, MAX_SCALE, coordinates.y),
    MAX_SCALE
);