master/rekordbox-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(reorder): enable landing indicator and drop handling for multi-drag; start reorder on multi-select; relax guards to allow multi block moves

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-08 15:39:00 +02:00
parent d13fe81ade
commit 0073f8146d
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/frontend/src/components/PaginatedSongList.tsx
View File

@ -251,6 +251,7 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
const ids = selectedSongs.size > 0 ? Array.from(selectedSongs) : songIdsFallback; const ids = selectedSongs.size > 0 ? Array.from(selectedSongs) : songIdsFallback;
dragSelectionRef.current = ids; dragSelectionRef.current = ids;
setIsDragging(true); setIsDragging(true);
setIsReorderDragging(true);
const payload = { type: 'songs', songIds: ids, count: ids.length }; const payload = { type: 'songs', songIds: ids, count: ids.length };
e.dataTransfer.setData('application/json', JSON.stringify(payload)); e.dataTransfer.setData('application/json', JSON.stringify(payload));
e.dataTransfer.setData('text/plain', JSON.stringify(payload)); e.dataTransfer.setData('text/plain', JSON.stringify(payload));
@ -280,12 +281,12 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
onDragStart={handleDragStart} onDragStart={handleDragStart}
// Simple playlist reordering within same list by dragging rows // Simple playlist reordering within same list by dragging rows
onRowDragOver={(e: React.DragEvent) => { onRowDragOver={(e: React.DragEvent) => {
if (!onReorder || !currentPlaylist || selectedSongs.size > 0) return; if (!onReorder || !currentPlaylist) return;
e.preventDefault(); e.preventDefault();
setDragHoverIndex(index); setDragHoverIndex(index);
}} }}
onRowDrop={async (e: React.DragEvent) => { onRowDrop={async (e: React.DragEvent) => {
if (!onReorder || !currentPlaylist || selectedSongs.size > 0) return; if (!onReorder || !currentPlaylist) return;
e.preventDefault(); e.preventDefault();
const fromId = e.dataTransfer.getData('text/song-id'); const fromId = e.dataTransfer.getData('text/song-id');
const multiJson = e.dataTransfer.getData('application/json'); const multiJson = e.dataTransfer.getData('application/json');
@ -301,8 +302,8 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
if (!fromId && !multiIds) return; if (!fromId && !multiIds) return;
const fromIndex = fromId ? songs.findIndex(s => s.id === fromId) : -1; const fromIndex = fromId ? songs.findIndex(s => s.id === fromId) : -1;
const toIndex = index; const toIndex = index;
if (fromIndex < 0 || toIndex < 0) return; if (toIndex < 0) return;
if (fromIndex === toIndex) return; if (fromId && fromIndex >= 0 && fromIndex === toIndex) return;
const toId = songs[index].id; const toId = songs[index].id;
// If multiple, move block; else move single // If multiple, move block; else move single
if (multiIds && multiIds.length > 0) { if (multiIds && multiIds.length > 0) {
@ -316,7 +317,7 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
}} }}
onRowDragStartCapture={(e: React.DragEvent) => { onRowDragStartCapture={(e: React.DragEvent) => {
// Provide a simple id for intra-list reorder // Provide a simple id for intra-list reorder
if (!currentPlaylist || selectedSongs.size > 0) return; if (!currentPlaylist) return;
e.dataTransfer.setData('text/song-id', song.id); e.dataTransfer.setData('text/song-id', song.id);
// Explicitly set effect to move for better UX // Explicitly set effect to move for better UX
try { e.dataTransfer.effectAllowed = 'move'; } catch {} try { e.dataTransfer.effectAllowed = 'move'; } catch {}