Add a hook to create dragable elements

docs/app/guides/interaction/movable-points/page.tsx

@@ -6,6 +6,8 @@ import PointsAlongFunction from "guide-examples/display/PointsAlongFunction"
 import PointsAlongFunctionSource from "!raw-loader!guide-examples/display/PointsAlongFunction"
 import DynamicMovablePoints from "guide-examples/display/DynamicMovablePoints"
 import DynamicMovablePointsSource from "!raw-loader!guide-examples/display/DynamicMovablePoints"
+import CustomMovablePoints from "guide-examples/display/CustomMovablePoints"
+import CustomMovablePointsSource from "!raw-loader!guide-examples/display/CustomMovablePoints"
 import SnapPoint from "guide-examples/SnapPoint"
 import SnapPointSource from "!raw-loader!guide-examples/SnapPoint"
 import { Advanced } from "components/Advanced"
@@ -115,6 +117,20 @@ function Stopwatch() {
 
       <CodeAndExample component={<DynamicMovablePoints />} source={DynamicMovablePointsSource} />
 
+      <h2 className="flex flex-col gap-1">
+        <div>
+          <Advanced />
+        </div>
+        <span>Create movable elements</span>
+      </h2>
+
+      <p>
+        <code>useDragElement</code> is a hook that helps you creat eyour own movable element while
+        respecting a11y rules for keyboard interactions.
+      </p>
+
+      <CodeAndExample component={<CustomMovablePoints />} source={CustomMovablePointsSource} />
+
       <PropTable of={MovablePoint} />
     </>
   )

docs/components/guide-examples/display/CustomMovablePoints.tsx

@@ -0,0 +1,69 @@
+"use client"
+import * as React from "react"
+// prettier-ignore
+import { Mafs, Coordinates, MovablePoint, useDragElement, Line, Theme, vec } from "mafs"
+
+type CustomDragElementProps = {
+  point: vec.Vector2
+  onMove: (point: vec.Vector2) => void
+}
+
+const CustomDragElement = ({
+  point,
+  onMove,
+}: CustomDragElementProps) => {
+  const { ref, dragging, displayX, displayY } =
+    useDragElement({
+      point,
+      onMove,
+    })
+
+  return (
+    <g
+      ref={ref}
+      className={`mafs-movable-point ${
+        dragging ? "mafs-movable-point-dragging" : ""
+      }`}
+      tabIndex={0}
+    >
+      <g
+        style={{
+          transform: `translate(${displayX}px, ${displayY}px)`,
+        }}
+      >
+        <circle
+          className="mafs-movable-point-hitbox"
+          r={30}
+          cx={0}
+          cy={0}
+          style={{
+            stroke: "white",
+            strokeWidth: 2,
+          }}
+        />
+        <text
+          textAnchor="middle"
+          alignmentBaseline="middle"
+          style={{
+            pointerEvents: "none",
+          }}
+        >
+          A
+        </text>
+      </g>
+    </g>
+  )
+}
+export default function CustomMovablePoints() {
+  const [point, onMove] = React.useState<vec.Vector2>([
+    1, 2,
+  ])
+
+  return (
+    <Mafs>
+      <Coordinates.Cartesian />
+
+      <CustomDragElement point={point} onMove={onMove} />
+    </Mafs>
+  )
+}