Controlled PanZoom

[alextouzel]

Hi there! I'm incorporating PanZoom in an application and I have a use case where it would be useful to have a controlled PanZoom component. I would like to be able to absolutely set the position and the scale when some props are updated. It seems to me like this feature could be useful for many use cases.

One way to achieve it right now is to use the zoomAbs method that is actually not documented in the readme (is this on purpose?) and also never used in the PanZoom component itself.

It works fine with this method but I would have expected one of the following:

1. Document the zoomAbs method in the readme.
2. Add some props to achieve this. Something like initialPosition and initialScale.

EDIT: You cannot absolutely set the position using zoomAbs. You can only set the zoom. So I don't see any way to control the position except using ref.setState({x: 10, y: 10}) but this seems like a terrible pattern to me.

[n1ru4l]

As you told this could be achieved via props. However, depending on how often those changes (e.g. you want to sync em over the network in realtime, etc.) the performance could become very bad.

A more performant solution could be a two-way data binding with the usage of a library like Animated:

https://github.com/animatedjs/animated
https://www.youtube.com/watch?v=xtqUJVqpKNo

Example:

https://codesandbox.io/s/great-mayer-2is9v?from-embed