gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 07:08:55 +02:00
Code Issues Actions 18 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();
}, [draggedColumn]);
const handleColumnHover = useCallback((visualIndex: number, mouseX: number, columnRect: DOMRect) => {
const handleColumnHover = useCallback((index: number, mouseX: number, columnRect: DOMRect) => {
if (!draggedColumn) return;
const columnMiddle = columnRect.left + columnRect.width / 2;
// Determine drop position based on mouse position relative to column center
let dropIndex = mouseX < columnMiddle ? visualIndex : visualIndex + 1;
// Determine if we should insert before or after this column
const insertBefore = mouseX < columnMiddle;
// Convert visual index back to actual array index
if (draggedColumn.index <= visualIndex) {
// Add 1 because the dragged column (which is hidden) comes before this position
dropIndex += 1;
}
// Calculate the target position
let targetIndex = insertBefore ? index : index + 1;
setColumnDropPosition(dropIndex);
setColumnDropPosition(targetIndex);
}, [draggedColumn]);
const handleContainerDrop = useCallback((e: DragEvent) => {
@ -168,30 +165,22 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
onDragOver={handleColumnDragOver}
onDrop={handleContainerDrop}
>
{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 && (
<div className="column-drop-placeholder show" />
)}
<Column
api={api}
column={column}
columnIndex={index}
columnItems={byColumn.get(column)}
isDraggingColumn={draggedColumn?.column === column}
onColumnHover={(_, mouseX, rect) => handleColumnHover(visualIndex, mouseX, rect)}
isAnyColumnDragging={!!draggedColumn}
/>
</>
);
})}
{byColumn && columns?.map((column, index) => (
<>
{columnDropPosition === index && (
<div className="column-drop-placeholder show" />
)}
<Column
api={api}
column={column}
columnIndex={index}
columnItems={byColumn.get(column)}
isDraggingColumn={draggedColumn?.column === column}
onColumnHover={handleColumnHover}
isAnyColumnDragging={!!draggedColumn}
/>
</>
))}
{columnDropPosition === columns?.length && draggedColumn && (
<div className="column-drop-placeholder show" />
)}