Fire events or callbacks at zoomIn, zoomToElement etc...?

[nodepond]

Is it possible to fire events or callbacks, when a trigger end animation with zoomIn, zoomOut zoomToElement etc was finished? I didn't found it anywhere, I guess this would be a nice enhancement.

Listening to onZoomStop, onPanningStop only triggers events, when user interacts with the transform.

[johnnydanger]

I second this. I need to run a function on callback anytime a zoomIn or zoomOut is called (including double-click, pinch, wheel). It would be great if the state could be returned whenever any change happened—not just pinch, pinch, wheel. Or even just a callback on doubleClick would be fantastic. Thanks for all your hard work building this.

[JeffThorslund]

Anyone have a workaround way to access state after calling zoomIn, or zoomOut?

My use case is adding disabled state to buttons based on scale. Updating on scroll/pinch events with onZoom is working great but I don't have a way to access the state when calling zoomIn, or zoomOut via buttons.

https://codesandbox.io/s/epic-drake-sg5dn

[justinhehli]

Seconding this as well, would be extremely handy to scale certain elements differently manually.

@JeffThorslund, a workaround might be keeping a separate state variable for the scale, which you update manually whenever you call zoomIn, zoomOut. If you know the scaling step size and initial scale, you could always add / subtract the scaling step size to your state on every zoom... call. I've thought about doing it like this in my application for the last few days, just didn't have the time yet. If you choose to implement it, let me know if it worked.

[YuriiDonev]

Faced with the issue, and only issue to get current state after zoomIn or zoomOut is to use ref like this: <TransformWrapper initialScale={ 2 } ref={ (ref) => { console.log('ref ', ref); } } ...

[Ross-Hunter]

useTransformEffect does fire after zoomIn and zoomOut

[hy2850]

Listening to onZoomStop, onPanningStop only triggers events, when user interacts with the transform.

I faced the same issue. Callbacks on onPanning, onPanningStop don't fire during the animation after the user releases the mouse/touch.

Below code Yurrii mentioned doesn't fire during animation too.

<TransformWrapper
initialScale={ 2 }
ref={ (ref) => { console.log('ref ', ref); } }
...

Added) You can use onTransformed listener in TransformWrapper to get reference to the ZoomPanPinch instance even during animation