Draggable Avatar

1'use client';
2import React, { useState, useRef, useEffect } from 'react';
3import { motion, PanInfo } from 'motion/react';
4 
5interface DraggableAvatarProps {
6  image?: string;
7  borderColor?: string;
8  range?: number;
9  size?: number;
10}
11 
12export default function DraggableAvatar({
13  image = 'https://cdn.pixabay.com/photo/2023/06/26/04/38/ai-generated-8088680_1280.jpg',
14  borderColor = '#60A5FA',
15  range = 300,
16  size = 100,
17}: DraggableAvatarProps) {
18  const [isHolding, setIsHolding] = useState(false);
19  const [constraints, setConstraints] = useState({
20    left: -range,
21    right: range,
22    top: -range,
23    bottom: range,
24  });
25  const containerRef = useRef<HTMLDivElement>(null);
26  const motionRef = useRef<HTMLDivElement>(null);
27  const lineLength = 45;
28  const lineLengthHolding = 30;
29  const markerSize = 12;
30 
31  useEffect(() => {
32    const updateConstraints = () => {
33      if (containerRef.current) {
34        const rect = containerRef.current.getBoundingClientRect();
35        const maxX = Math.min(range, window.innerWidth - rect.left - size);
36        const maxY = Math.min(
37          range,
38          window.innerHeight - rect.top - size - lineLength - markerSize,
39        );
40        const minX = Math.max(-range, -rect.left);
41        const minY = Math.max(-range, -rect.top);
42 
43        setConstraints({
44          left: minX,
45          right: maxX,
46          top: minY,
47          bottom: maxY,
48        });
49      }
50    };
51 
52    updateConstraints();
53    window.addEventListener('resize', updateConstraints);
54    return () => window.removeEventListener('resize', updateConstraints);
55  }, [range, size, lineLength, markerSize]);
56 
57  const handleDragEnd = (
58    _event: MouseEvent | TouchEvent | PointerEvent,
59    info: PanInfo,
60  ) => {
61    setIsHolding(false);
62    const distance = Math.sqrt(info.offset.x ** 2 + info.offset.y ** 2);
63 
64    if (distance > range && motionRef.current) {
65      const angle = Math.atan2(info.offset.y, info.offset.x);
66      const newX = Math.cos(angle) * range;
67      const newY = Math.sin(angle) * range;
68 
69      motionRef.current.style.transform = `translate(${newX}px, ${newY}px)`;
70    }
71  };
72 
73  const currentLineLength = isHolding ? lineLengthHolding : lineLength;
74 
75  return (
76    <div ref={containerRef} className='relative'>
77      <motion.div
78        ref={motionRef}
79        drag
80        dragElastic={0}
81        dragMomentum={false}
82        dragConstraints={constraints}
83        onPointerDown={() => setIsHolding(true)}
84// … truncated