fix:解决拖拽问题

src/hooks/useDragAndDrop.ts

@@ -0,0 +1,143 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useScale } from "@/contexts/ScaleContext";
+
+interface DragState<T = any> {
+  isDragging: boolean;
+  dragData: T | null;
+  mousePosition: { x: number; y: number };
+}
+
+/**
+ * 自定义拖拽 Hook
+ * 支持页面 scale 缩放的拖拽功能
+ */
+export function useDragAndDrop<T = any>() {
+  const { scale, offsetX, offsetY } = useScale();
+  const [state, setState] = useState<DragState<T>>({
+    isDragging: false,
+    dragData: null,
+    mousePosition: { x: 0, y: 0 },
+  });
+
+  // 开始拖拽
+  const startDrag = useCallback((data: T, event?: React.MouseEvent) => {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      // 立即获取鼠标初始位置
+      setState({
+        isDragging: true,
+        dragData: data,
+        mousePosition: { x: event.clientX, y: event.clientY },
+      });
+    } else {
+      setState({
+        isDragging: true,
+        dragData: data,
+        mousePosition: { x: 0, y: 0 },
+      });
+    }
+  }, []);
+
+  // 结束拖拽
+  const endDrag = useCallback(() => {
+    setState({
+      isDragging: false,
+      dragData: null,
+      mousePosition: { x: 0, y: 0 },
+    });
+  }, []);
+
+  // 监听鼠标移动
+  useEffect(() => {
+    if (!state.isDragging) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      setState((prev) => ({
+        ...prev,
+        mousePosition: { x: e.clientX, y: e.clientY },
+      }));
+    };
+
+    const handleMouseUp = () => {
+      // 拖拽结束的逻辑由外部处理
+      // 这里只是提供一个安全机制
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [state.isDragging]);
+
+  // 将屏幕坐标转换为缩放后的页面坐标
+  const screenToScaledCoords = useCallback(
+    (screenX: number, screenY: number) => {
+      return {
+        x: (screenX - offsetX) / scale,
+        y: (screenY - offsetY) / scale,
+      };
+    },
+    [scale, offsetX, offsetY]
+  );
+
+  // 检查点是否在元素内
+  const isPointInElement = useCallback(
+    (pointX: number, pointY: number, element: HTMLElement | null): boolean => {
+      if (!element) return false;
+
+      const rect = element.getBoundingClientRect();
+      return (
+        pointX >= rect.left &&
+        pointX <= rect.right &&
+        pointY >= rect.top &&
+        pointY <= rect.bottom
+      );
+    },
+    []
+  );
+
+  return {
+    isDragging: state.isDragging,
+    dragData: state.dragData,
+    mousePosition: state.mousePosition,
+    startDrag,
+    endDrag,
+    screenToScaledCoords,
+    isPointInElement,
+  };
+}
+
+/**
+ * 放置区域 Hook
+ * 用于检测拖拽元素是否悬停在放置区域上
+ */
+export function useDropZone() {
+  const dropZoneRef = useRef<HTMLDivElement>(null);
+  const [isOver, setIsOver] = useState(false);
+
+  // 检查鼠标是否在放置区域内
+  const checkIsOver = useCallback((mouseX: number, mouseY: number) => {
+    if (!dropZoneRef.current) return false;
+
+    const rect = dropZoneRef.current.getBoundingClientRect();
+    const over =
+      mouseX >= rect.left &&
+      mouseX <= rect.right &&
+      mouseY >= rect.top &&
+      mouseY <= rect.bottom;
+
+    setIsOver(over);
+    return over;
+  }, []);
+
+  return {
+    dropZoneRef,
+    isOver,
+    checkIsOver,
+  };
+}