Subsequent drags show right position

DustinBrett · Feb 16, 2025 · 5367c8d · 5367c8d
1 parent 5e30981
commit 5367c8d
Showing 1 changed file with 58 additions and 50 deletions.
diff --git a/components/system/Files/FileManager/useDraggableEntries.ts b/components/system/Files/FileManager/useDraggableEntries.ts
@@ -11,6 +11,7 @@ import {
   updateIconPositions,
 } from "utils/functions";
 import { useFileSystem } from "contexts/fileSystem";
+import { TRANSITIONS_IN_MILLISECONDS } from "utils/constants";
 
 type DraggableEntryProps = {
   draggable: boolean;
@@ -56,6 +57,56 @@ const useDraggableEntries = (
   );
   const isMainContainer =
     fileManagerRef.current?.parentElement?.tagName === "MAIN";
+  const updateDragImage = useCallback(async () => {
+    if (fileManagerRef.current) {
+      const focusedElements = [
+        ...fileManagerRef.current.querySelectorAll<HTMLLIElement>(
+          ".focus-within"
+        ),
+      ];
+
+      if (focusedElements.length > 1) {
+        if (dragImageRef.current) dragImageRef.current.src = "";
+        else dragImageRef.current = new Image();
+
+        const htmlToImage = await getHtmlToImage();
+
+        if (!htmlToImage) return;
+
+        try {
+          const { UNKNOWN_ICON } = await import(
+            "components/system/Files/FileManager/icons"
+          );
+          const elementsHavePositions = focusedElements.every(
+            ({ style }) => style?.gridRowStart && style?.gridColumnStart
+          );
+          const capturedFileManager = await htmlToImage?.toCanvas(
+            fileManagerRef.current,
+            {
+              filter: (element) =>
+                !(element instanceof HTMLSourceElement) &&
+                focusedElements.some((focusedElement) =>
+                  focusedElement.contains(element)
+                ),
+              imagePlaceholder: UNKNOWN_ICON,
+              skipAutoScale: true,
+            }
+          );
+          const trimmedCapture = elementsHavePositions
+            ? trimCanvasToTopLeft(capturedFileManager)
+            : capturedFileManager;
+
+          dragImageRef.current.src = trimmedCapture.toDataURL();
+          capturedImageOffset.current = {
+            x: capturedFileManager.width - trimmedCapture.width,
+            y: capturedFileManager.height - trimmedCapture.height,
+          };
+        } catch {
+          // Ignore failure to capture
+        }
+      }
+    }
+  }, [fileManagerRef]);
   const onDragEnd = useCallback(
     (entryUrl: string): React.DragEventHandler =>
       (event) => {
@@ -72,7 +123,13 @@ const useDraggableEntries = (
             setIconPositions,
             exists
           );
+
           fileManagerRef.current?.removeEventListener("dragover", onDragging);
+
+          setTimeout(() => {
+            adjustedCaptureOffsetRef.current = false;
+            updateDragImage();
+          }, TRANSITIONS_IN_MILLISECONDS.MOUSE_IN_OUT / 2);
         } else if (dropIndex !== -1) {
           setSortOrder(entryUrl, (currentSortOrders) => {
             const sortedEntries = currentSortOrders.filter(
@@ -96,6 +153,7 @@ const useDraggableEntries = (
       setIconPositions,
       setSortOrder,
       sortOrders,
+      updateDragImage,
     ]
   );
   const onDragOver = useCallback(
@@ -196,56 +254,6 @@ const useDraggableEntries = (
       onDragging,
     ]
   );
-  const updateDragImage = useCallback(async () => {
-    if (fileManagerRef.current) {
-      const focusedElements = [
-        ...fileManagerRef.current.querySelectorAll<HTMLLIElement>(
-          ".focus-within"
-        ),
-      ];
-
-      if (focusedElements.length > 1) {
-        if (dragImageRef.current) dragImageRef.current.src = "";
-        else dragImageRef.current = new Image();
-
-        const htmlToImage = await getHtmlToImage();
-
-        if (!htmlToImage) return;
-
-        try {
-          const { UNKNOWN_ICON } = await import(
-            "components/system/Files/FileManager/icons"
-          );
-          const elementsHavePositions = focusedElements.every(
-            ({ style }) => style?.gridRowStart && style?.gridColumnStart
-          );
-          const capturedFileManager = await htmlToImage?.toCanvas(
-            fileManagerRef.current,
-            {
-              filter: (element) =>
-                !(element instanceof HTMLSourceElement) &&
-                focusedElements.some((focusedElement) =>
-                  focusedElement.contains(element)
-                ),
-              imagePlaceholder: UNKNOWN_ICON,
-              skipAutoScale: true,
-            }
-          );
-          const trimmedCapture = elementsHavePositions
-            ? trimCanvasToTopLeft(capturedFileManager)
-            : capturedFileManager;
-
-          dragImageRef.current.src = trimmedCapture.toDataURL();
-          capturedImageOffset.current = {
-            x: capturedFileManager.width - trimmedCapture.width,
-            y: capturedFileManager.height - trimmedCapture.height,
-          };
-        } catch {
-          // Ignore failure to capture
-        }
-      }
-    }
-  }, [fileManagerRef]);
 
   useEffect(() => {
     if (!isSelecting && focusedEntries.length > 1) updateDragImage();