How to zoomIn/zoomOut with onWheel gesture?

[dmagunov]

Hello,

I am trying to build zoomIn/zoomOut functionality with wheel and pinch gestures. For pinch, I am using the code I've found here

How can I recreate the same behavior ("velocity/delta") using onWheel gesture? Thanks.

[dbismut]

onPinch kinda supports wheel events out of the box with the control key pressed, just so you know.

Otherwise have a look at the source code here https://github.com/pmndrs/use-gesture/blob/main/packages/core/src/engines/PinchEngine.ts#L267

[dmagunov]

Thanks, yes, I saw it. As I understand, what I need is to control this expression by a setting param (or just remove it). Or recreate this behavior in the onWheel callback.

[dbismut]

I could probably add an option to make the control key customizable / optional.

Otherwise you would need to make your own logic in onWheel (it should be pretty trivial, you just need to map offset to scale with a transform function option to translate wheel movement into scale), and reconcile that offset with onPinch using the from option for both handlers.

EDIT: well you actually only need reconciliation if you have a usecase where onWheel and onPinch would be used at the same time.

[dmagunov]

Thanks, will do. Also it will be very handy to have this option customizable (check against Ctrl), for example when you need to recreate Google Maps behavior using mouseWheel zoom.

[dbismut]

@dmagunov #477

[dmagunov]

Thanks @dbismut!