chore(react/collections/board): simply column dragging slightly

This commit is contained in:
Elian Doran 2025-09-13 11:02:56 +03:00
parent 4f469d0d3c
commit cbc2ee3cd1
No known key found for this signature in database

View File

@ -132,21 +132,18 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
e.preventDefault(); e.preventDefault();
}, [draggedColumn]); }, [draggedColumn]);
const handleColumnHover = useCallback((visualIndex: number, mouseX: number, columnRect: DOMRect) => { const handleColumnHover = useCallback((index: number, mouseX: number, columnRect: DOMRect) => {
if (!draggedColumn) return; if (!draggedColumn) return;
const columnMiddle = columnRect.left + columnRect.width / 2; const columnMiddle = columnRect.left + columnRect.width / 2;
// Determine drop position based on mouse position relative to column center // Determine if we should insert before or after this column
let dropIndex = mouseX < columnMiddle ? visualIndex : visualIndex + 1; const insertBefore = mouseX < columnMiddle;
// Convert visual index back to actual array index // Calculate the target position
if (draggedColumn.index <= visualIndex) { let targetIndex = insertBefore ? index : index + 1;
// Add 1 because the dragged column (which is hidden) comes before this position
dropIndex += 1;
}
setColumnDropPosition(dropIndex); setColumnDropPosition(targetIndex);
}, [draggedColumn]); }, [draggedColumn]);
const handleContainerDrop = useCallback((e: DragEvent) => { const handleContainerDrop = useCallback((e: DragEvent) => {
@ -168,14 +165,7 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
onDragOver={handleColumnDragOver} onDragOver={handleColumnDragOver}
onDrop={handleContainerDrop} onDrop={handleContainerDrop}
> >
{byColumn && columns?.map((column, index) => { {byColumn && columns?.map((column, index) => (
// Calculate visual index (skipping hidden dragged column)
let visualIndex = index;
if (draggedColumn && draggedColumn.index < index) {
visualIndex = index - 1;
}
return (
<> <>
{columnDropPosition === index && ( {columnDropPosition === index && (
<div className="column-drop-placeholder show" /> <div className="column-drop-placeholder show" />
@ -186,12 +176,11 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
columnIndex={index} columnIndex={index}
columnItems={byColumn.get(column)} columnItems={byColumn.get(column)}
isDraggingColumn={draggedColumn?.column === column} isDraggingColumn={draggedColumn?.column === column}
onColumnHover={(_, mouseX, rect) => handleColumnHover(visualIndex, mouseX, rect)} onColumnHover={handleColumnHover}
isAnyColumnDragging={!!draggedColumn} isAnyColumnDragging={!!draggedColumn}
/> />
</> </>
); ))}
})}
{columnDropPosition === columns?.length && draggedColumn && ( {columnDropPosition === columns?.length && draggedColumn && (
<div className="column-drop-placeholder show" /> <div className="column-drop-placeholder show" />
)} )}