react-zoom-pan-pinch
react-zoom-pan-pinch copied to clipboard
Step option for pinch does not seem to work
Describe the bug I can't seem to change the step for a pinch event, adding the step option seems to make no difference.
To Reproduce
use client";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
export default function Gestures({ children }: { children: React.ReactNode }) {
return (
<TransformWrapper pinch={{ step: 20 }}>
<TransformComponent
contentStyle={{
touchAction: "none",
position: "fixed",
width: "100vw",
height: "100vh",
}}
>
{children}
</TransformComponent>
</TransformWrapper>
);
}
Expected behavior I expect the amount zoomed in for a pinch gesture to increase
Desktop (please complete the following information): Mac Next.js Chrome
I'm experiencing this as well, along with a few other oddities that might be related:
When pinching, onPinchingStart()
is not firing at all; however onZoomStart()
is.
When wheel.activationKeys
are supplied, pinching is also affected;Â i.e. pinching does not work without holding down the wheel activation keys.
FWIW I have my trackpad sensitivity set to max, and when comparing behaviour here to that of e.g. Google Maps, with one exaggerated pinch gesture I'm able to zoom in on Google Maps ~200%. With the same gesture using this plugin, I'm only able to zoom in ~30% — regardless of pinch.step
.
Desktop macOS Arc
I think the onPinch()
only works if you're using mobile, in desktop when you use pinch gesture, it actually calls onWheel
event
Just found out if you increase smoothStep
, it will speed up pinch on trackpad
<TransformWrapper wheel={{ step: 0.9, smoothStep: 0.01 }}>