[@visx/zoom] Panning when mouse leaves element/window

[boy51]

Hi all,

I'm having the problem that panning doesn't work as soon as the mouse leaves the <Zoom /> Element or the window. I'm using zoom in a similar way as shown in the example https://airbnb.io/visx/zoom-i

There we can see this issue happening as well.

I know that browsers can handle mouse move outside of the window just fine and I realized its not working because the mousemove is applied in the svg itself. If I attach mousemove to the window, it will continue firing if there was a mousedown before mouse moves outside the window.

So clearly I have to handle this event with window.addEventListener("mousemove", () => ...). But I don't know how to handle this, because zoom is a render prop and I would have to attach the event listener in an effect.

Also implementation is taking the position from the event. So I'm not clear what will happen if I pass the event from a listener on window.

Surely its a bad idea to put zoom into state to use it in the effect?

Appreciate any help on this.