340 lines
11 KiB
JavaScript
340 lines
11 KiB
JavaScript
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();
|
|
|
|
if (typeof document === 'undefined') {
|
|
return null;
|
|
}
|
|
|
|
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.setProperty('--drag-preview-size', `${canvasSize}px`);
|
|
wrapper.style.width = `${canvasSize}px`;
|
|
wrapper.style.height = `${canvasSize}px`;
|
|
|
|
visibleItems.forEach((item, index) => {
|
|
const layer = document.createElement('div');
|
|
layer.className = 'document-drag-preview__item';
|
|
layer.style.setProperty('--index', String(index));
|
|
const rotationMagnitude = Math.random() * 8 + 2;
|
|
const rotation = (index % 2 === 0 ? 1 : -1) * rotationMagnitude;
|
|
layer.style.setProperty('--rotation-deg', `${rotation}deg`);
|
|
|
|
if (item.type === 'document') {
|
|
const doc = item.payload;
|
|
const rowEl = doc?.id
|
|
? document.getElementById(`document-row-${doc.id}`)
|
|
|| document.getElementById(`document-card-${doc.id}`)
|
|
: null;
|
|
const wrapperEl = rowEl?.querySelector('.document-thumbnail-wrapper');
|
|
const thumbnailEl = rowEl?.querySelector('.document-thumbnail');
|
|
const placeholderEl = rowEl?.querySelector('.thumb-placeholder');
|
|
const aspectAttr = wrapperEl?.dataset?.thumbnailAspect;
|
|
const aspectRatio = aspectAttr ? parseFloat(aspectAttr) : null;
|
|
|
|
let thumbWidth = size;
|
|
let thumbHeight = size;
|
|
if (Number.isFinite(aspectRatio) && aspectRatio > 0) {
|
|
if (aspectRatio >= 1) {
|
|
thumbWidth = size;
|
|
thumbHeight = Math.max(size / aspectRatio, size * 0.5);
|
|
} else {
|
|
thumbHeight = size;
|
|
thumbWidth = Math.max(size * aspectRatio, size * 0.5);
|
|
}
|
|
}
|
|
layer.style.width = `${Math.round(thumbWidth)}px`;
|
|
layer.style.height = `${Math.round(thumbHeight)}px`;
|
|
|
|
const thumbSrc = thumbnailEl?.currentSrc || thumbnailEl?.src || null;
|
|
if (thumbSrc) {
|
|
layer.classList.add('document-drag-preview__item--image');
|
|
layer.style.backgroundImage = `url("${thumbSrc}")`;
|
|
} else if (placeholderEl instanceof HTMLElement) {
|
|
const clone = placeholderEl.cloneNode(true);
|
|
clone.style.pointerEvents = 'none';
|
|
layer.appendChild(clone);
|
|
} else {
|
|
layer.textContent = doc?.title || 'Document';
|
|
}
|
|
} else {
|
|
const payload = item.payload;
|
|
const folderId = typeof payload === 'string' ? payload : payload?.id;
|
|
const rowEl = folderId
|
|
? document.getElementById(`folder-row-${folderId}`)
|
|
|| document.getElementById(`folder-card-${folderId}`)
|
|
: null;
|
|
const iconEl = rowEl?.querySelector('.thumb-icon, .folder-card__icon');
|
|
layer.style.width = `${size}px`;
|
|
layer.style.height = `${size}px`;
|
|
layer.classList.add('document-drag-preview__item--folder');
|
|
|
|
let content = null;
|
|
if (iconEl instanceof HTMLElement) {
|
|
const cloneSource = iconEl.classList.contains('folder-card__icon')
|
|
? iconEl.querySelector('svg') || iconEl
|
|
: iconEl;
|
|
content = cloneSource.cloneNode(true);
|
|
content.classList.add('document-drag-preview__folder-thumb');
|
|
const svg = content.querySelector('svg');
|
|
if (svg) {
|
|
svg.setAttribute('width', '48');
|
|
svg.setAttribute('height', '48');
|
|
}
|
|
}
|
|
|
|
if (!content) {
|
|
content = document.createElement('div');
|
|
content.className = 'document-drag-preview__folder-placeholder';
|
|
content.textContent = 'Folder';
|
|
}
|
|
|
|
layer.appendChild(content);
|
|
}
|
|
|
|
wrapper.appendChild(layer);
|
|
});
|
|
|
|
if (totalCount > 1) {
|
|
const badge = document.createElement('div');
|
|
badge.className = 'document-drag-preview__count';
|
|
badge.textContent = `${totalCount}`;
|
|
wrapper.appendChild(badge);
|
|
}
|
|
|
|
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 = [];
|
|
|
|
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,
|
|
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 previewNode = createDragPreview({
|
|
documents: effectiveDocumentSelection
|
|
.map((id) => documentLookup.get(id) || null)
|
|
.filter(Boolean),
|
|
folders: uniqueFolders,
|
|
});
|
|
event.currentTarget.classList.add('dragging');
|
|
|
|
if (previewNode) {
|
|
const width = previewNode.offsetWidth || 96;
|
|
const height = previewNode.offsetHeight || 96;
|
|
event.dataTransfer.setDragImage(previewNode, width / 2, height / 2);
|
|
}
|
|
},
|
|
[
|
|
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;
|