diff --git a/client/src/components/SessionUsersPanel.tsx b/client/src/components/SessionUsersPanel.tsx index 8f30b34..83b0dd1 100644 --- a/client/src/components/SessionUsersPanel.tsx +++ b/client/src/components/SessionUsersPanel.tsx @@ -49,60 +49,80 @@ export default function SessionUsersPanel() { const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 }); const containerRef = useRef(null); const dragOffset = useRef({ x: 0, y: 0 }); + const dragStartPos = useRef({ x: 0, y: 0 }); + const isDragStarted = useRef(false); + const DRAG_THRESHOLD = 15; const handleMouseMove = (e: MouseEvent) => { - if (!isDragging || !containerRef.current) return; - setDragPosition({ - x: e.clientX - dragOffset.current.x, - y: e.clientY - dragOffset.current.y, - }); + if (!containerRef.current) return; + + if (!isDragStarted.current) { + const distance = Math.hypot( + e.clientX - dragStartPos.current.x, + e.clientY - dragStartPos.current.y + ); + + if (distance >= DRAG_THRESHOLD) { + isDragStarted.current = true; + setIsDragging(true); + } else { + return; + } + } + + if (isDragStarted.current) { + setDragPosition({ + x: e.clientX - dragOffset.current.x, + y: e.clientY - dragOffset.current.y, + }); + } }; const handleMouseUp = () => { - if (!isDragging || !containerRef.current) return; + if (!containerRef.current) return; - // Определяем, к какой стороне прилипнуть const rect = containerRef.current.getBoundingClientRect(); - const centerY = rect.top + rect.height / 2; - const centerX = rect.left + rect.width / 2; - const viewportWidth = window.innerWidth; - const viewportHeight = window.innerHeight; - const shouldBeTop = centerY < viewportHeight / 2; - const shouldBeLeft = centerX < viewportWidth / 2; + const center = { + x: rect.left + rect.width / 2, + y: rect.top + rect.height / 2, + }; + const shouldBeTop = center.y < window.innerHeight / 2; + const shouldBeLeft = center.x < window.innerWidth / 2; - setIsDragging(false); + setIsDragging(!isDragStarted.current); setIsTop(shouldBeTop); setIsLeft(shouldBeLeft); + isDragStarted.current = false; + + window.removeEventListener("mousemove", handleMouseMove); + window.removeEventListener("mouseup", handleMouseUp); }; const handleMouseDown = (e: React.MouseEvent) => { if (!containerRef.current) return; + const rect = containerRef.current.getBoundingClientRect(); - dragOffset.current = { - x: e.clientX - rect.left, - y: e.clientY - rect.top, - }; - setDragPosition({ - x: rect.left, - y: rect.top, - }); - setIsDragging(true); + const r_pos = { x: rect.left, y: rect.top }; + const c_pos = { x: e.clientX, y: e.clientY }; + + dragStartPos.current = c_pos; + dragOffset.current = { x: c_pos.x - r_pos.x, y: c_pos.y - r_pos.y }; + setDragPosition({ x: r_pos.x, y: r_pos.y }); + + isDragStarted.current = false; + window.addEventListener("mousemove", handleMouseMove); + window.addEventListener("mouseup", handleMouseUp); }; useEffect(() => { - if (isDragging) { - window.addEventListener("mousemove", handleMouseMove); - window.addEventListener("mouseup", handleMouseUp); - } - return () => { window.removeEventListener("mousemove", handleMouseMove); window.removeEventListener("mouseup", handleMouseUp); }; - }, [handleMouseMove, handleMouseUp, isDragging]); + }, []); const getStyle = (): React.CSSProperties => { - if (isDragging) { + if (isDragStarted.current && isDragging) { return { left: `${dragPosition.x}px`, top: `${dragPosition.y}px`, @@ -124,7 +144,7 @@ export default function SessionUsersPanel() { ref={containerRef} onMouseDown={handleMouseDown} className={`flex gap-4 absolute ${ - isDragging ? "cursor-grabbing" : "cursor-grab" + isDragStarted.current ? "cursor-grabbing" : "cursor-grab" }`} style={getStyle()} >