Allows to render custom dragable Elements

[Alexandre Fauquette]

Before all, thanks for this inspiring library 🤓

I was looking to create a graph with draggable points. But I do not see an easy way to customize how draggable elements are defined.

For now, there are:

• useMovablePoint(initialPoint, props) which deal with saving position and constraint, and memorize the movable point
• <MovablePoint /> which add the drag interaction, and render the component

What about adding a props Component to <MovablePoint /> the expect a React element with props{ ref, displayX, displayY, dragging } Such that if Component is defined, the <MovablePoint /> renders this component. Otherwise it renders the default one

DefaultComponent example

const DefaultComponent = ({ ref, dragging, displayX, displayY }) => {
  const ringSize = 15
	return <g
      ref={ref}
      style={{ "--movable-point-color": color, "--movable-point-ring-size": `${ringSize}px`,}}
      className={`mafs-movable-point ${dragging ? "mafs-movable-point-dragging" : ""}`}
      tabIndex={0}
    >
      <circle className="mafs-movable-point-hitbox" r={30} cx={displayX} cy={displayY}></circle>
      <circle
        className="mafs-movable-point-focus"
        r={ringSize + 1}
        cx={displayX}
        cy={displayY}
      ></circle>
      <circle className="mafs-movable-point-ring" r={ringSize} cx={displayX} cy={displayY}></circle>
      <circle className="mafs-movable-point-point" r={6} cx={displayX} cy={displayY}></circle>
    </g>
}

[Steven Petryk]

I think having a higher order "draggable" abstraction would be useful! It would basically be a wrapper around @use-gesture/react, but which takes into account view and user transforms.