Function useModalDrag

src/hooks/useModalDrag.ts:98–144

({ estimatedWidth, estimatedHeight, isOpen, initialPosition }: UseModalDragOptions)

}

export function useModalDrag({ estimatedWidth, estimatedHeight, isOpen, initialPosition }: UseModalDragOptions) {
  const initialEstimatedPosition = isOpen
    ? getEstimatedModalPosition({ estimatedWidth, estimatedHeight, initialPosition })
    : { x: 0, y: 0 };
  const positionResetKey = getModalPositionResetKey({ estimatedWidth, estimatedHeight, isOpen, initialPosition });
  const [position, setPosition] = useResetKeyedState(positionResetKey, initialEstimatedPosition);
  const panelRef = useRef<HTMLDivElement>(null);
  const positionRef = useRef(position);
  useEffect(() => { positionRef.current = position; }, [position]);

  const centerModal = useCallback(() => {
    if (panelRef.current) {
      const rect = panelRef.current.getBoundingClientRect();
      const viewportW = window.innerWidth;
      const viewportH = window.innerHeight;
      setPosition({
        x: (viewportW - rect.width) / 2,
        y: Math.max(MODAL_POSITION.minTop, (viewportH - rect.height) / 2),
      });
    }
  }, [setPosition]);

  // Re-center on the measured DOM size after the estimated centered position renders.
  useEffect(() => {
    if (!isOpen || initialPosition) return;

    const frameId = requestAnimationFrame(centerModal);
    return () => cancelAnimationFrame(frameId);
  }, [isOpen, centerModal, initialPosition]);

  const handleDragStart = useCallback((event: ModalDragStartEvent) => {
    const startX = event.clientX;
    const startY = event.clientY;
    const startPosX = positionRef.current.x;
    const startPosY = positionRef.current.y;

    const onMove = (ev: PointerEvent) => {
      setPosition({
        x: startPosX + ev.clientX - startX,
        y: startPosY + ev.clientY - startY,
      });
    };
    startCapturedPointerDrag({ event, onMove });
  }, [setPosition]);

  return { position, panelRef, handleDragStart, centerModal };
}