[zoom] panning is jumpy when used with HTML elements

Hi all. The Zoom package seems nice, but I made a sandbox to play around with it and haven't been able to get it to pan without jumping around rapidly:

https://codesandbox.io/s/vibrant-sea-1r8uc?file=/src/App.tsx

I'm specifically interested in using Zoom with native DOM layout, not SVG or other visualizations. Have I configured it incorrectly, or can anyone spot another problem with my test implementation which is causing the drag to jump around erratically?

Hey @a-type 👋 thanks for checking out visx.

I haven't used Zoom with HTML before but it looks like its transform property should support the matrix(...) syntax that Zoom.toString() uses so it might be something else, let me play with your sandbox and circle back.

@hshoff thinks it's probably related to how we handle event positions in @visx/point. For SVG elements we use ScreenCTM which accounts for any transform, but for HTML elements we fall back to the node's bounding box which probably doesn't account for the transform.

Will think about how to possibly handle this correctly (d3's implementation might be useful for ideas as it supports HTML), any thoughts welcome 🙏

Ah, that makes sense - and quite tricky!

I've noticed this behavior in D3's implementation as well: https://codesandbox.io/s/mystifying-colden-759ub?file=/src/App.tsx

However, the panzoom library seems to do exactly what I'm looking for and quite simply. Might be a good implementation to look at: https://codesandbox.io/s/friendly-herschel-iziy9?file=/src/App.tsx

The same problem happened when I was trying to use HTML objects inside the<svg> elements through <foreignObject>. If I drag on the HTML element the whole SVG will jump to the right bottom. panzoom library works for me as well.