threshold for cameras drag;

client/src/components/SessionUsersPanel.tsx

@@ -49,60 +49,80 @@ export default function SessionUsersPanel() {
   const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
   const containerRef = useRef<HTMLDivElement>(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<HTMLDivElement>) => {
     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()}
     >