Create <PanZoom>

[techniq]

Just throwing this here so I don't forget about it (and document some ideas). It would be useful to have a <PanZoom> component to handle panning and zooming an SVG canvas for large visuals.

• Programatic panning and zooming (support for directional arrow UI / keyboard input / focus on element)
• Panning via mouse (grab and drag)
• Mini-map
  • Using upcoming @vx/brush?
• Setting explicit coordinates / zoom (pan/zoom to highlight specific area/item)
• Support animations / smooth transitions
• Make sure drag performance is good (sync on rAF?)

There is already a nice component that does a lot of this, but also includes it's own UI. I think we should provide the foundation to build something similar, but allow the user to build their own UI.

• https://github.com/chrvadala/react-svg-pan-zoom
  • https://chrvadala.github.io/react-svg-pan-zoom/

I currently have some progress here (see PanZoom2 which uses the new @vx/drag)

Additional zoom examples:

• https://github.com/d3/d3-zoom
• https://gist.github.com/iammerrick/c4bbac856222d65d3a11dad1c42bdcca
  • https://codepen.io/iammerrick/full/BzPprd
• https://bl.ocks.org/nitaku/6545ba8d7146a4843e4bd1b0fa9f1268
• https://bl.ocks.org/sgruhier/50990c01fe5b6993e82b8994951e23d0

[JCQuintas]

I believe I've improved on the code that was inside your sandbox.

It seems extending Drag instead of Component improves performance a bit. But I didn't make any performance tests, only my own feeling.

Having Access to Drag dxand dy allows us to reset the center of the graph as well as the scale. It also enabled the creation of zoomTo, which enables setting a custom zoom and centerOn that allow moving to a specific coordinate.

You can check it out here: https://codesandbox.io/s/20mw1079zy

[JCQuintas]

Eventually I removed @vx/drag and implemented all of its methods since I had to re-center X and Y on pretty much every interaction for the zoom not to screw up. It's a working example and I didn't find any 'bugs' yet, but I feel it still might be too naive.

Ultimatelly I would preffer the drag/drop events to be used rather than click, but I couldn't make it work.

[hshoff]

should be fixed in: #418