nils/papercrate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dragging

Browse Source
This commit is contained in:
nils
2025-10-15 16:50:45 +02:00
parent abee49a335
commit 2d2e046c9d
3 changed files with 207 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/index.jsx
+142 -55
View File
@@ -1873,6 +1873,23 @@ const AppLayout = () => {
[visibleDocuments],
);
const documentLookup = useMemo(() => {
const map = new Map();
const push = (items) => {
(items || []).forEach((doc) => {
if (doc?.id) {
map.set(doc.id, doc);
}
});
};
push(documents);
if (Array.isArray(searchResults)) {
push(searchResults);
}
return map;
}, [documents, searchResults]);
const applySelection = useCallback(
(ids, { anchor, interactedIds = [] } = {}) => {
const visibleSet = new Set(visibleDocumentIds);
@@ -2101,44 +2118,6 @@ const AppLayout = () => {
}, [focusedRowKey, navigableRowKeys, focusedDocumentId]);
const handleDocumentDragStart = useCallback(
(event, documentOrId) => {
const documentId = typeof documentOrId === 'string' ? documentOrId : documentOrId?.id;
if (!documentId) {
return;
}
const isAlreadySelected = selectedDocumentIds.includes(documentId);
const selection = isAlreadySelected ? [...selectedDocumentIds] : [documentId];
if (!isAlreadySelected) {
applySelection([documentId], {
anchor: documentId,
interactedIds: [documentId],
});
}
setDraggedDocumentIds(selection);
event.dataTransfer.effectAllowed = 'move';
try {
event.dataTransfer.setData(
'application/x-papercrate-doc-list',
JSON.stringify(selection),
);
} catch (
// eslint-disable-next-line no-empty
error
) {}
event.currentTarget.classList.add('dragging');
},
[selectedDocumentIds, applySelection],
);
const handleDocumentDragEnd = useCallback((event) => {
setDraggedDocumentIds([]);
event.currentTarget.classList.remove('dragging');
}, []);
const ensureFolderData = useCallback(
async (folderId, { force = false } = {}) => {
if (!force && folderContents.has(folderId)) {
@@ -3264,6 +3243,131 @@ const AppLayout = () => {
],
);
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(
(documentsForPreview) => {
destroyDragPreview();
const docs = (documentsForPreview || []).filter(Boolean);
if (!docs.length) {
return null;
}
const maxVisible = 4;
const size = 64;
const canvasSize = Math.round(size * 1.6);
const visibleDocs = docs.slice(0, maxVisible);
const wrapper = document.createElement('div');
wrapper.className = 'document-drag-preview';
wrapper.style.setProperty('--drag-preview-size', `${canvasSize}px`);
visibleDocs.forEach((doc, index) => {
const layer = document.createElement('div');
layer.className = 'document-drag-preview__thumb';
const rotationMagnitude = Math.random() * 8 + 2; // 2..10 degrees
const rotation = (index % 2 === 0 ? 1 : -1) * rotationMagnitude;
layer.style.setProperty('--rotation-deg', `${rotation}deg`);
const rowEl = doc?.id ? document.getElementById(`document-row-${doc.id}`) : null;
const thumbnailEl = rowEl?.querySelector('.document-thumbnail');
const placeholderEl = rowEl?.querySelector('.thumb-placeholder');
let content = null;
if (thumbnailEl instanceof HTMLImageElement) {
content = thumbnailEl.cloneNode(true);
content.draggable = false;
content.style.pointerEvents = 'none';
} else if (placeholderEl instanceof HTMLElement) {
content = placeholderEl.cloneNode(true);
content.style.pointerEvents = 'none';
}
if (content) {
layer.appendChild(content);
} else {
layer.textContent = 'DOC';
}
wrapper.appendChild(layer);
});
if (docs.length > 1) {
const badge = document.createElement('div');
badge.className = 'document-drag-preview__count';
badge.textContent = docs.length > maxVisible ? `+${docs.length - maxVisible}` : `${docs.length}`;
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 isAlreadySelected = selectedDocumentIds.includes(documentId);
const selection = isAlreadySelected ? [...selectedDocumentIds] : [documentId];
if (!isAlreadySelected) {
applySelection([documentId], {
anchor: documentId,
interactedIds: [documentId],
});
}
const previewDocs = selection
.map((id) => documentLookup.get(id) || null)
.filter(Boolean);
const previewNode = createDragPreview(previewDocs);
setDraggedDocumentIds(selection);
event.dataTransfer.effectAllowed = 'move';
try {
event.dataTransfer.setData(
'application/x-papercrate-doc-list',
JSON.stringify(selection),
);
} catch (
// eslint-disable-next-line no-empty
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],
);
const handleDocumentDragEnd = useCallback(
(event) => {
setDraggedDocumentIds([]);
event.currentTarget.classList.remove('dragging');
destroyDragPreview();
},
[destroyDragPreview],
);
const ensurePreviewUrl = useCallback(
async (documentId, { force = false } = {}) => {
if (!documentId) return null;
@@ -4598,23 +4702,6 @@ const AppLayout = () => {
return list.find((doc) => doc.id === focusedDocumentId) || null;
}, [searchResults, documents, focusedDocumentId]);
const documentLookup = useMemo(() => {
const map = new Map();
documents.forEach((doc) => {
if (doc?.id) {
map.set(doc.id, doc);
}
});
if (Array.isArray(searchResults)) {
searchResults.forEach((doc) => {
if (doc?.id) {
map.set(doc.id, doc);
}
});
}
return map;
}, [documents, searchResults]);
const handleDocumentDelete = useCallback(
async (documentId) => {
if (!documentId) return;