Zooming Behavior Inconsistency(zoomImage)

[uplSuraj]

Issue: Zooming Behavior Inconsistency

Description:
When attempting to decrease the zoom value in the component, the image continues to zoom in instead of zooming out, resulting in an unexpected behavior. The issue occurs despite handling the zoom functionality with buttons and a range input.

Steps to Reproduce:

Open the component.
Set the initial zoom value to a value greater than 1.
Attempt to decrease the zoom value using either the provided buttons or the range input.
Expected Behavior:
When decreasing the zoom value, the image should zoom out, reducing its size.

Actual Behavior:
Despite attempting to decrease the zoom value, the image continues to zoom in, enlarging its size, which is unexpected.

Additional Information:

The issue seems to persist regardless of the zoom value set initially.
The issue might be related to how the zoom functionality is implemented or how the Cropper component handles zooming operations.
Proposed Solution:
Investigate the zoom functionality implementation in the component, ensuring that decreasing the zoom value effectively zooms out the image. Check for any potential bugs or inconsistencies in the zoom logic, and adjust the implementation accordingly to achieve the expected behavior.

Environment:

Framework/Libraries: Next JS, MUI (Material-UI), Tailwind CSS
Cropper Component: react-advanced-cropper
Browser/Platform: Google Chrome

This is the Function by which i was handling the zoom value
const handleZoomChange = (event: any) => {
const value = parseFloat(event.target.value);
setZoomValue(value);
if (cropperRef.current && cropperRef.current.zoomImage) {
cropperRef.current.zoomImage(value);
}
};

[Norserium]

@uplSuraj, check the value of value. It should be smaller than 1 to zoom out.