Adding inertia option to visx-drag [enhancement]

[mcioffi]

Enhancement Request

Add inertia option to the visx-drag package that allows drag to mimic inertia upon the dragEnd event. Similar d3 extensions exists, e.g. d3-inertia

I have a good idea based on d3-inertia, but posting here in the community in case others are interested too.

[williaster]

Love this idea!! curious to hear more about what you (or others) are thinking

[mcioffi]

@williaster ditto! The basic physics to kick off the velocity calculations on dragmove should not be much, to feed into the dragend when inertia kicks in, but these two areas should be decided on:

1. Repainting mechanism: if basic requestAnimationFrame is used throughout visx, might be easy choice, but is there a performance gain from the official d3-timer? not sure, would love to hear ... considering that with inertia, multiple drag objects can be initiated, and moving at the same time
2. Config options: ones i can think of include (a) restrict within bounds, which visx/drag seems to already account for with a clamping mechanism, and (b) the strength of the "friction" to use on the inertia when slowing it down
3. Disable interaction during inertia: objects mid-flight moving during inertia should probably not be able to be interacted with until at rest again when velocity is zero

[mcioffi]

Attaching a screencast for a work-in-progress PR, to demonstrate some of those discussion points. For (1) this does use d3-timer, which seems to handle concurrent repaints very well, for (2) clamping will restrict movement along the boundary, but does not consider bouncing off the boundary, which may be desired, and for (3) grabbing an object mid-flight inertia is allowed

https://github.com/airbnb/visx/assets/734184/1ec9f264-6267-4f70-90c4-94cf2672ee44