gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

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

Browse Source
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
1 changed files with 22 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
apps/client/src/widgets/collections/board/index.tsx
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,30 +165,22 @@ 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; {columnDropPosition === index && (
if (draggedColumn && draggedColumn.index < index) { <div className="column-drop-placeholder show" />
visualIndex = index - 1; )}
} <Column
api={api}
return ( column={column}
<> columnIndex={index}
{columnDropPosition === index && ( columnItems={byColumn.get(column)}
<div className="column-drop-placeholder show" /> isDraggingColumn={draggedColumn?.column === column}
)} onColumnHover={handleColumnHover}
<Column isAnyColumnDragging={!!draggedColumn}
api={api} />
column={column} </>
columnIndex={index} ))}
columnItems={byColumn.get(column)}
isDraggingColumn={draggedColumn?.column === column}
onColumnHover={(_, mouseX, rect) => handleColumnHover(visualIndex, mouseX, rect)}
isAnyColumnDragging={!!draggedColumn}
/>
</>
);
})}
{columnDropPosition === columns?.length && draggedColumn && ( {columnDropPosition === columns?.length && draggedColumn && (
<div className="column-drop-placeholder show" /> <div className="column-drop-placeholder show" />
)} )}