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

chore(dnd-debug): add console.debug logs for dragover/drop, fix highlighting conditions, log drag payload

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-08 13:22:20 +02:00
parent 8a9f51a0c6
commit b534485bde
2 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -243,6 +243,9 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
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));
e.dataTransfer.effectAllowed = 'copyMove'; e.dataTransfer.effectAllowed = 'copyMove';
try {
console.debug('[DnD] dragstart payload', payload);
} catch {}
}, [selectedSongs]); }, [selectedSongs]);
const handleDragEnd = useCallback(() => { const handleDragEnd = useCallback(() => {

32
packages/frontend/src/components/PlaylistManager.tsx
View File

@ -147,8 +147,13 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain'); const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain');
try { try {
const parsed = JSON.parse(json); const parsed = JSON.parse(json);
if (parsed?.type === 'songs') setIsDragOver(true); if (parsed?.type === 'songs') {
} catch {} setIsDragOver(true);
}
console.debug('[DnD] dragover folder', node.name, parsed);
} catch (err) {
console.debug('[DnD] dragover folder parse failed', node.name, err);
}
}} }}
onDragLeave={() => setIsDragOver(false)} onDragLeave={() => setIsDragOver(false)}
onDrop={(e) => { onDrop={(e) => {
@ -158,7 +163,10 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) { if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) {
onDropSongs(node.name, parsed.songIds); onDropSongs(node.name, parsed.songIds);
} }
} catch {} console.debug('[DnD] drop folder', node.name, parsed);
} catch (err) {
console.debug('[DnD] drop folder parse failed', node.name, err);
}
setIsDragOver(false); setIsDragOver(false);
}} }}
borderColor={isDragOver ? 'blue.400' : undefined} borderColor={isDragOver ? 'blue.400' : undefined}
@ -227,8 +235,13 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain'); const json = e.dataTransfer.getData('application/json') || e.dataTransfer.getData('text/plain');
try { try {
const parsed = JSON.parse(json); const parsed = JSON.parse(json);
if (parsed?.type === 'songs') setIsDragOver(true); if (parsed?.type === 'songs') {
} catch {} setIsDragOver(true);
}
console.debug('[DnD] dragover playlist', node.name, parsed);
} catch (err) {
console.debug('[DnD] dragover playlist parse failed', node.name, err);
}
}} }}
onDragLeave={() => setIsDragOver(false)} onDragLeave={() => setIsDragOver(false)}
onDrop={(e) => { onDrop={(e) => {
@ -238,11 +251,14 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) { if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) {
onDropSongs(node.name, parsed.songIds); onDropSongs(node.name, parsed.songIds);
} }
} catch {} console.debug('[DnD] drop playlist', node.name, parsed);
} catch (err) {
console.debug('[DnD] drop playlist parse failed', node.name, err);
}
setIsDragOver(false); setIsDragOver(false);
}} }}
borderColor={isDragOver ? 'blue.400' : undefined} borderColor={isDragOver ? 'blue.400' : (selectedItem === node.name ? 'blue.700' : 'transparent')}
borderWidth={isDragOver ? '1px' : undefined} borderWidth={isDragOver || selectedItem === node.name ? '1px' : undefined}
> >
{level > 0 && ( {level > 0 && (
<Box <Box