Logarithmic zoom

[aarcangeli]

First of all, I want to thank the team for this fantastic project.

I found it a bit surprising that the zoom is implemented with a linear progression, as most applications (Photoshop, Paint, Chrome, to name a few) use logarithmic zoom.

In any case, I written an external tweak that makes logarithmic zoom possible, thanks to the rich props of the component.
I hope this can be helpful to someone else.

const ref = useRef<Cropper>(null);

<Cropper
  ref={ref}
  onWheelRequest={(e) => {
    if (!ref.current) return true;
    e.preventDefault();
    const point = Cropper.getMousePoint(e);
    const spinY = normalizeWheel(e).spinY;
    const newZoom = zoom * Math.pow(1.1, -spinY);
    console.log(`${(newZoom * 100).toFixed(0)}%`);
    ref.current.setNewZoom(newZoom, point, {
      shouldUpdatePosition: true,
    });
    return false;
  }}
  // ...
/>

With this script, the zoom factors progress as follows:
100% -> 110% -> 121% -> 133% -> 146% -> 161% -> 177% -> 195% -> 214% -> ...

[ValentinH]

Thanks for the kind words.

I wasn't aware of logarithmic zoom when building this library to be honest 😅.
I've always felt that the wheel zoom wasn't feeling great, now I understand why.
Would you like to submit a PR to update the default wheel handling to implement the logarithmic zoom? 🙂