Allows to render custom dragable Elements
alexfauquette opened this issue · comments
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>
}
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.