search

BetterTyped / react-zoom-pan-pinch

🖼 React library to support easy zoom, pan, pinch on various html dom elements like <img> and <div>
MIT License
1.47k stars 266 forks source link

wheel step prop doesnt work #495

Open MartinArauz opened 2 months ago

MartinArauz commented 2 months ago

Describe the bug I have an svg with many paths. I'm testing the step property of weel, but it doesn't alter the zoom sensitivity in any way:

<TransformWrapper initialScale={6.0} initialPositionX={initialPosition.x} initialPositionY={initialPosition.y} minScale={1} disabled={false} limitToBounds={true} onZoom={(value) => handleZoom(value)} wheel={{step: 0.5}}

Desktop (please complete the following information):

rohmunen commented 1 month ago

I've recently ran into this. I think it's because smooth prop is set to true by default. So to achieve what you want you can try altering smoothStep instead of step: wheel={{ smoothStep: 0.5 }}. Another way is to change smooth prop on TransformWrapper to false and keep wheel={{step: 0.5}} prop.

reference: https://bettertyped.github.io/react-zoom-pan-pinch/?path=/docs/docs-props--page