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('text/plain', JSON.stringify(payload));
e.dataTransfer.effectAllowed = 'copyMove';
try {
console.debug('[DnD] dragstart payload', payload);
} catch {}
}, [selectedSongs]);
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');
try {
const parsed = JSON.parse(json);
if (parsed?.type === 'songs') setIsDragOver(true);
} catch {}
if (parsed?.type === 'songs') {
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)}
onDrop={(e) => {
@ -158,7 +163,10 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) {
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);
}}
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');
try {
const parsed = JSON.parse(json);
if (parsed?.type === 'songs') setIsDragOver(true);
} catch {}
if (parsed?.type === 'songs') {
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)}
onDrop={(e) => {
@ -238,11 +251,14 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
if (parsed?.type === 'songs' && Array.isArray(parsed.songIds) && onDropSongs) {
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);
}}
borderColor={isDragOver ? 'blue.400' : undefined}
borderWidth={isDragOver ? '1px' : undefined}
borderColor={isDragOver ? 'blue.400' : (selectedItem === node.name ? 'blue.700' : 'transparent')}
borderWidth={isDragOver || selectedItem === node.name ? '1px' : undefined}
>
{level > 0 && (
<Box