cleanup

frontend/src/hooks/documents/useDocumentDragHandlers.js

@@ -0,0 +1,252 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+const useDocumentDragHandlers = ({
+  selectedEntries,
+  selectedDocumentIds,
+  selectedFolderIds,
+  applySelection,
+  handleEntrySelection,
+  documentLookup,
+  setDraggedDocumentIds,
+  setDraggedFolderId,
+  resolveDocumentRowKey,
+  resolveFolderRowKey,
+  documentsViewMode,
+}) => {
+  const dragPreviewRef = useRef(null);
+
+  const destroyDragPreview = useCallback(() => {
+    const node = dragPreviewRef.current;
+    if (node && node.parentNode) {
+      node.parentNode.removeChild(node);
+    }
+    dragPreviewRef.current = null;
+  }, []);
+
+  useEffect(() => destroyDragPreview, [destroyDragPreview]);
+
+  const createDragPreview = useCallback(
+    ({ documents = [], folders = [] } = {}) => {
+      destroyDragPreview();
+
+      const docEntries = (documents || []).filter(Boolean);
+      const folderEntries = (folders || []).filter(Boolean);
+      const totalCount = docEntries.length + folderEntries.length;
+      if (!totalCount) {
+        return null;
+      }
+
+      const maxVisible = 4;
+      const size = 64;
+      const canvasSize = Math.round(size * 1.6);
+
+      const visibleItems = [];
+      docEntries.slice(0, maxVisible).forEach((doc) => {
+        visibleItems.push({ type: 'document', payload: doc });
+      });
+
+      if (visibleItems.length < maxVisible) {
+        folderEntries
+          .slice(0, maxVisible - visibleItems.length)
+          .forEach((folderId) => visibleItems.push({ type: 'folder', payload: folderId }));
+      }
+
+      const wrapper = document.createElement('div');
+      wrapper.className = 'document-drag-preview';
+      wrapper.style.width = `${canvasSize}px`;
+      wrapper.style.height = `${canvasSize}px`;
+
+      visibleItems.forEach((item, index) => {
+        const slot = document.createElement('div');
+        slot.className = 'document-drag-preview__item';
+        slot.style.setProperty('--index', String(index));
+        slot.style.width = `${size}px`;
+        slot.style.height = `${size}px`;
+
+        if (item.type === 'document') {
+          slot.textContent = item.payload?.title || 'Document';
+        } else {
+          slot.textContent = 'Folder';
+        }
+        wrapper.appendChild(slot);
+      });
+
+      document.body.appendChild(wrapper);
+      dragPreviewRef.current = wrapper;
+      return wrapper;
+    },
+    [destroyDragPreview],
+  );
+
+  const handleDocumentDragStart = useCallback(
+    (event, documentOrId) => {
+      const documentId = typeof documentOrId === 'string' ? documentOrId : documentOrId?.id;
+      if (!documentId) {
+        return;
+      }
+
+      const documentKey = resolveDocumentRowKey(documentId);
+      if (!documentKey) {
+        return;
+      }
+
+      const isGridView = documentsViewMode === 'grid';
+      const isAlreadySelected = selectedDocumentIds.includes(documentId);
+      const selection = isAlreadySelected
+        ? [...selectedDocumentIds]
+        : isGridView
+          ? [...selectedDocumentIds, documentId]
+          : [documentId];
+      const folderSelection = selectedFolderIds.length ? [...selectedFolderIds] : [];
+
+      if (!isAlreadySelected && !isGridView) {
+        applySelection([documentKey], {
+          anchor: documentKey,
+          interactedKeys: [documentKey],
+        });
+      }
+
+      const previewDocs = selection.map((id) => documentLookup.get(id) || null).filter(Boolean);
+      const previewNode = createDragPreview({
+        documents: previewDocs,
+        folders: folderSelection,
+      });
+
+      setDraggedDocumentIds(selection);
+      if (folderSelection.length) {
+        setDraggedFolderId(folderSelection[0] || null);
+      }
+      event.dataTransfer.effectAllowed = 'move';
+      try {
+        event.dataTransfer.setData(
+          'application/x-papercrate-doc-list',
+          JSON.stringify(selection),
+        );
+        if (folderSelection.length) {
+          event.dataTransfer.setData(
+            'application/x-papercrate-folder-list',
+            JSON.stringify(folderSelection),
+          );
+          if (folderSelection.length === 1) {
+            event.dataTransfer.setData('application/x-papercrate-folder', folderSelection[0]);
+          }
+        }
+      } catch (error) {
+        console.warn('[documents] Failed to populate drag payload', error);
+      }
+      if (previewNode) {
+        const width = previewNode.offsetWidth || 96;
+        const height = previewNode.offsetHeight || 96;
+        event.dataTransfer.setDragImage(previewNode, width / 2, height / 2);
+      }
+      event.currentTarget.classList.add('dragging');
+    },
+    [
+      selectedDocumentIds,
+      selectedFolderIds,
+      applySelection,
+      documentLookup,
+      createDragPreview,
+      setDraggedFolderId,
+      setDraggedDocumentIds,
+      documentsViewMode,
+      resolveDocumentRowKey,
+    ],
+  );
+
+  const handleDocumentDragEnd = useCallback(
+    (event) => {
+      setDraggedDocumentIds([]);
+      event.currentTarget.classList.remove('dragging');
+      destroyDragPreview();
+      setDraggedFolderId(null);
+    },
+    [destroyDragPreview, setDraggedFolderId, setDraggedDocumentIds],
+  );
+
+  const handleFolderDragStart = useCallback(
+    (event, folderId) => {
+      if (folderId === 'root') {
+        return;
+      }
+      event.stopPropagation();
+      const folderKey = resolveFolderRowKey(folderId);
+      const isAlreadySelected = folderKey ? selectedEntries.includes(folderKey) : false;
+
+      let effectiveFolderSelection = selectedFolderIds;
+      let effectiveDocumentSelection = selectedDocumentIds;
+
+      if (!isAlreadySelected && folderKey) {
+        effectiveFolderSelection = [folderId];
+        effectiveDocumentSelection = [];
+        handleEntrySelection(folderKey, { preventDefault: () => {} });
+      }
+
+      const uniqueFolders = effectiveFolderSelection.length
+        ? Array.from(new Set(effectiveFolderSelection.filter(Boolean)))
+        : [folderId];
+
+      setDraggedFolderId(folderId);
+      if (effectiveDocumentSelection.length) {
+        setDraggedDocumentIds(effectiveDocumentSelection);
+      }
+
+      event.dataTransfer.effectAllowed = 'move';
+      try {
+        event.dataTransfer.setData(
+          'application/x-papercrate-folder-list',
+          JSON.stringify(uniqueFolders),
+        );
+        if (uniqueFolders.length === 1) {
+          event.dataTransfer.setData('application/x-papercrate-folder', uniqueFolders[0]);
+        }
+        if (effectiveDocumentSelection.length) {
+          event.dataTransfer.setData(
+            'application/x-papercrate-doc-list',
+            JSON.stringify(effectiveDocumentSelection),
+          );
+        }
+      } catch (error) {
+        console.warn('[documents] Failed to populate folder drag payload', error);
+      }
+
+      const previewDocs = effectiveDocumentSelection
+        .map((id) => documentLookup.get(id) || null)
+        .filter(Boolean);
+      createDragPreview({ documents: previewDocs, folders: uniqueFolders });
+      event.currentTarget.classList.add('dragging');
+    },
+    [
+      selectedFolderIds,
+      selectedEntries,
+      selectedDocumentIds,
+      handleEntrySelection,
+      setDraggedFolderId,
+      setDraggedDocumentIds,
+      documentLookup,
+      createDragPreview,
+      resolveFolderRowKey,
+    ],
+  );
+
+  const handleFolderDragEnd = useCallback(
+    (event) => {
+      if (event?.currentTarget) {
+        event.currentTarget.classList.remove('dragging');
+      }
+      setDraggedFolderId(null);
+      setDraggedDocumentIds([]);
+      destroyDragPreview();
+    },
+    [setDraggedFolderId, setDraggedDocumentIds, destroyDragPreview],
+  );
+
+  return {
+    handleDocumentDragStart,
+    handleDocumentDragEnd,
+    handleFolderDragStart,
+    handleFolderDragEnd,
+  };
+};
+
+export default useDocumentDragHandlers;