@vuer-ai/vuer-uikit 0.0.48 → 0.0.49

package/src/hooks/useDragSelect.ts

@@ -8,6 +8,7 @@ export function useDragSelect(options: UseDragSelectOptions = {}) {
   const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
   const [isDragging, setIsDragging] = useState(false);
   const [dragMode, setDragMode] = useState<'toggle' | 'replace'>('toggle');
+  const [dragStartItem, setDragStartItem] = useState<string | null>(null);
 
   // Notify when selection changes
   useEffect(() => {
@@ -17,14 +18,17 @@ export function useDragSelect(options: UseDragSelectOptions = {}) {
   const handleMouseDown = useCallback((id: string, e: React.MouseEvent) => {
     e.preventDefault();
     setIsDragging(true);
+    setDragStartItem(id);
 
     // Determine drag mode based on modifier keys
     const mode = e.ctrlKey || e.metaKey ? 'replace' : 'toggle';
     setDragMode(mode);
 
     if (mode === 'replace') {
+      // In replace mode, start fresh selection
       setSelectedItems(new Set([id]));
     } else {
+      // In toggle mode, toggle the starting item
       setSelectedItems((prev) => {
         const newSet = new Set(prev);
         if (newSet.has(id)) {
@@ -40,10 +44,12 @@ export function useDragSelect(options: UseDragSelectOptions = {}) {
   const handleMouseEnter = useCallback(
     (id: string) => {
       if (!isDragging) return;
+      if (id === dragStartItem) return; // Don't re-process the starting item
 
       if (dragMode === 'replace') {
         setSelectedItems((prev) => new Set([...prev, id]));
       } else {
+        // In toggle mode, each item toggles its own state
         setSelectedItems((prev) => {
           const newSet = new Set(prev);
           if (newSet.has(id)) {
@@ -55,11 +61,12 @@ export function useDragSelect(options: UseDragSelectOptions = {}) {
         });
       }
     },
-    [isDragging, dragMode]
+    [isDragging, dragMode, dragStartItem]
   );
 
   const handleMouseUp = useCallback(() => {
     setIsDragging(false);
+    setDragStartItem(null);
   }, []);
 
   const clearSelection = useCallback(() => {
@@ -82,7 +89,10 @@ export function useDragSelect(options: UseDragSelectOptions = {}) {
 
   // Handle global mouse up and escape key
   useEffect(() => {
-    const handleGlobalMouseUp = () => setIsDragging(false);
+    const handleGlobalMouseUp = () => {
+      setIsDragging(false);
+      setDragStartItem(null);
+    };
     const handleEscape = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         clearSelection();