Use Elastic Line Events

1import { useEffect, useState } from "react"
2 
3import { useDimensions } from "@/hooks/use-dimensions"
4import { useMousePosition } from "@/hooks/use-mouse-position"
5 
6interface ElasticLineEvents {
7  isGrabbed: boolean
8  controlPoint: { x: number; y: number }
9}
10 
11export function useElasticLineEvents(
12  containerRef: React.RefObject<SVGSVGElement | null>,
13  isVertical: boolean,
14  grabThreshold: number,
15  releaseThreshold: number
16): ElasticLineEvents {
17  const mousePosition = useMousePosition(containerRef)
18  const dimensions = useDimensions(containerRef)
19  const [isGrabbed, setIsGrabbed] = useState(false)
20  const [controlPoint, setControlPoint] = useState({
21    x: dimensions.width / 2,
22    y: dimensions.height / 2,
23  })
24 
25  useEffect(() => {
26    if (containerRef.current) {
27      const { width, height } = dimensions
28      const x = mousePosition.x
29      const y = mousePosition.y
30 
31      // Check if mouse is outside container bounds
32      const isOutsideBounds = x < 0 || x > width || y < 0 || y > height
33 
34      if (isOutsideBounds) {
35        setIsGrabbed(false)
36        return
37      }
38 
39      let distance: number
40      let newControlPoint: { x: number; y: number }
41 
42      if (isVertical) {
43        const midX = width / 2
44        distance = Math.abs(x - midX)
45        newControlPoint = {
46          x: midX + 2.2 * (x - midX),
47          y: y,
48        }
49      } else {
50        const midY = height / 2
51        distance = Math.abs(y - midY)
52        newControlPoint = {
53          x: x,
54          y: midY + 2.2 * (y - midY),
55        }
56      }
57 
58      setControlPoint(newControlPoint)
59 
60      if (!isGrabbed && distance < grabThreshold) {
61        setIsGrabbed(true)
62      } else if (isGrabbed && distance > releaseThreshold) {
63        setIsGrabbed(false)
64      }
65    }
66  }, [mousePosition, isVertical, isGrabbed, grabThreshold, releaseThreshold])
67 
68  return { isGrabbed, controlPoint }
69}