Implement useDrag hook

[axelboc]

This should hopefully make implementing draggable interactions easier (e.g. moving/resizing ROIs), though I'm hoping it will also abstract out a lot of the code from SelectionTool and Pan.

The approach taken by @visx/drag is not great for us because of our multiple coordinate spaces and because it requires capturing events on a transparent rectangle on top of the element that is being dragged.

Instead, the approach I'm proposing makes use of the new event bubbling mechanism introduced in #1473: useDrag automatically registers the pointermove and pointerup event handlers on canvasWrapper with useCanvasEvents, thus making sure that no events are missed. The consumer only needs to register a pointerdown handler on the draggable element.

I've created a story to demonstrate the use of useDrag and how pretty straightforward it is:

[axelboc]

@loichuder I've moved the useDrag story under Experimental as the hook is likely to evolve a lot over the next few releases.

[loichuder]

Looks good !

I wonder if we should not expose a ref handler that consumers will pass to the draggable element instead of having to set themselves startDrag to onPointerDown. It is just an idea: it is fine like this and more easily extendable.

[axelboc]

I wonder if we should not expose a ref handler that consumers will pass to the draggable element instead of having to set themselves startDrag to onPointerDown. It is just an idea: it is fine like this and more easily extendable.

Yeah I did consider this solution, but the problem is that we don't know enough to register the event handler ourselves: perhaps the consumer wants to check for a modifier key or a mouse button, perhaps they're implementing a canvas interaction and need to call shouldInteract, ...

[PeterC-DLS]

This looked handy to me until I tried to integrate it into DvdDragHandle.tsx and came across a limitation that it's tied to the r3f layer. In Davidia, each selection shape has a number of drag handles and the handles are created as children within those shapes (see, e.g., DvdAxisBox.tsx). Each shape is created as an SVGElement (see createShape).

I guess significant refactoring of the selection classes in Davidia's code may be needed to lift the drag handles creation to that createShape function which breaks a lot of my enscapsulation.

[axelboc]

Thanks for sharing the link to your repo. It looks like Davidia is really taking shape (pun intended 🥁)! It's good to see another project using @h5web/lib in depth. Looking forward to seeing in action at some point!

Regarding useDrag, instead of moving your handles up, could you move SvgElement down into the shape components (e.g. into DvdAxisBox)? That being said, it is worth reconsidering whether useDrag should or shouldn't be tied with R3F.

[PeterC-DLS]

My comment was mainly feedback but pushing down SvgElement is a good suggestion. I will see how far I get, thanks!

[PeterC-DLS]

I think it's the fact that I create drag handles programmatically so they are not children of VisCanvas when useThree is called by useDrag (or by useCanvasEvent if I use a customized version of useDrag). The error is "R3F hooks can only be used within the Canvas component!".