itm-holding-package/src/hooks/useDraggable.ts

ITM HOLDING PACKAGES

import { useEffect, useRef, useState } from 'react';

interface Position {
  x: number;
  y: number;
}

interface UseDraggableProps {
  initialPosition?: Position;
  boundaryElement?: HTMLElement | null;
  onPositionChange?: (position: Position) => void;
}

interface UseDraggableReturn {
  position: Position;
  isDragging: boolean;
  elementRef: React.RefObject<HTMLDivElement | null>;
}

export const useDraggable = ({
  initialPosition = { x: 20, y: 20 },
  boundaryElement = null,
  onPositionChange,
}: UseDraggableProps = {}): UseDraggableReturn => {
  const [position, setPosition] = useState<Position>(initialPosition);
  const [isDragging, setIsDragging] = useState(false);
  const elementRef = useRef<HTMLDivElement | null>(null);
  
  // Pour stocker la position initiale du clic lors du drag
  const dragStartRef = useRef<Position>({ x: 0, y: 0 });
  
  useEffect(() => {
    const element = elementRef.current;
    if (!element) return;

    const handleMouseDown = (e: MouseEvent) => {
      setIsDragging(true);
      const rect = element.getBoundingClientRect();
      
      // Stocker la position initiale du clic
      dragStartRef.current = {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top,
      };
      
      document.body.classList.add('dragging');
    };

    const handleMouseMove = (e: MouseEvent) => {
      if (!isDragging) return;

      let newX = e.clientX - dragStartRef.current.x;
      let newY = e.clientY - dragStartRef.current.y;

      // Si un élément boundary est fourni, limiter le mouvement
      if (boundaryElement) {
        const boundaryRect = boundaryElement.getBoundingClientRect();
        const elementRect = element.getBoundingClientRect();

        newX = Math.max(0, Math.min(newX, boundaryRect.width - elementRect.width));
        newY = Math.max(0, Math.min(newY, boundaryRect.height - elementRect.height));
      }

      setPosition({ x: newX, y: newY });
      onPositionChange?.({ x: newX, y: newY });
    };

    const handleMouseUp = () => {
      setIsDragging(false);
      document.body.classList.remove('dragging');
    };

    // Ajouter les event listeners
    element.addEventListener('mousedown', handleMouseDown);
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);

    // Cleanup
    return () => {
      element.removeEventListener('mousedown', handleMouseDown);
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
      document.body.classList.remove('dragging');
    };
  }, [isDragging, position, boundaryElement, onPositionChange]);

  return {
    position,
    isDragging,
    elementRef,
  };
};