Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-27 00:06:30 +01:00
Code Issues Packages Projects Releases Activity

chore(collections/board): use context for column dragging

Browse Source
This commit is contained in:
Elian Doran
2025-09-12 14:48:05 +03:00
parent f55a39eab6
commit 2972a23f19
2 changed files with 32 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
apps/client/src/widgets/collections/board/column.tsx
View File

@@ -11,45 +11,31 @@ import BoardApi from "./api";
import Card from "./card";
interface DragContext {
api: BoardApi;
column: string;
draggedColumn: { column: string, index: number } | null;
setDraggedColumn: (column: { column: string, index: number } | null) => void;
columnIndex: number,
setDropTarget: (target: string | null) => void,
setDropPosition: (position: { column: string, index: number } | null) => void;
onCardDrop: () => void;
dropPosition: { column: string, index: number } | null;
draggedCard: { noteId: string, branchId: string, fromColumn: string, index: number } | null;
setDraggedCard: (card: { noteId: string, branchId: string, fromColumn: string, index: number } | null) => void;
columnItems?: { note: FNote, branch: FBranch }[],
columnItems?: { note: FNote, branch: FBranch }[]
}
export default function Column({
column,
columnItems,
draggedCard,
setDraggedCard,
dropTarget,
dropPosition,
columnIndex,
isDraggingColumn,
columnItems,
api,
...restProps
}: {
column: string,
dropTarget: string | null,
columnItems?: { note: FNote, branch: FBranch }[];
isDraggingColumn: boolean,
api: BoardApi
} & DragContext) {
const context = useContext(BoardViewContext);
const isEditing = (context.columnNameToEdit === column);
const { columnNameToEdit, setColumnNameToEdit, dropTarget, draggedCard, dropPosition, setDraggedCard} = useContext(BoardViewContext);
const isEditing = (columnNameToEdit === column);
const editorRef = useRef<HTMLInputElement>(null);
const { handleColumnDragStart, handleColumnDragEnd, handleDragOver, handleDragLeave, handleDrop } = useDragging({
api, column, dropPosition, draggedCard, setDraggedCard, columnItems, ...restProps
column, columnIndex
});
const handleEdit = useCallback(() => {
context.setColumnNameToEdit?.(column);
setColumnNameToEdit?.(column);
}, [column]);
const handleContextMenu = useCallback((e: ContextMenuEvent) => {
@@ -87,7 +73,7 @@ export default function Column({
<TitleEditor
currentValue={column}
save={newTitle => api.renameColumn(column, newTitle)}
dismiss={() => context.setColumnNameToEdit?.(undefined)}
dismiss={() => setColumnNameToEdit?.(undefined)}
/>
)}
</h3>
@@ -127,7 +113,9 @@ export default function Column({
)
}
function useDragging({ api, column, columnIndex, draggedColumn, setDraggedColumn, setDropTarget, setDropPosition, onCardDrop, draggedCard, dropPosition, setDraggedCard, columnItems }: DragContext) {
function useDragging({ column, columnIndex, columnItems }: DragContext) {
const { api, draggedColumn, setDraggedColumn, setDropTarget, setDropPosition, draggedCard, dropPosition, setDraggedCard } = useContext(BoardViewContext);
const handleColumnDragStart = useCallback((e: DragEvent) => {
e.dataTransfer!.effectAllowed = 'move';
e.dataTransfer!.setData('text/plain', column);
@@ -185,7 +173,7 @@ function useDragging({ api, column, columnIndex, draggedColumn, setDraggedColumn
if (draggedCard.fromColumn !== column) {
// Moving to a different column
await api.changeColumn(draggedCard.noteId, column);
await api?.changeColumn(draggedCard.noteId, column);
// If there are items in the target column, reorder
if (targetItems.length > 0 && targetIndex < targetItems.length) {
@@ -209,11 +197,9 @@ function useDragging({ api, column, columnIndex, draggedColumn, setDraggedColumn
await branches.moveAfterBranch([ draggedCard.branchId ], lastItem.branch.branchId);
}
}
onCardDrop();
}
setDraggedCard(null);
}, [draggedCard, draggedColumn, dropPosition, columnItems, column, setDraggedCard, setDropTarget, setDropPosition, onCardDrop]);
}, [draggedCard, draggedColumn, dropPosition, columnItems, column, setDraggedCard, setDropTarget, setDropPosition]);
return { handleColumnDragStart, handleColumnDragEnd, handleDragOver, handleDragLeave, handleDrop };
}

31
apps/client/src/widgets/collections/board/index.tsx
View File

@@ -10,6 +10,9 @@ import FormTextBox from "../../react/FormTextBox";
import { createContext } from "preact";
import { onWheelHorizontalScroll } from "../../widget_utils";
import Column from "./column";
import BoardApi from "./api";
import FBranch from "../../../entities/fbranch";
import FNote from "../../../entities/fnote";
export interface BoardViewData {
columns?: BoardColumnData[];
@@ -20,10 +23,19 @@ export interface BoardColumnData {
}
interface BoardViewContextData {
api?: BoardApi;
branchIdToEdit?: string;
columnNameToEdit?: string;
setColumnNameToEdit?: Dispatch<StateUpdater<string | undefined>>;
setBranchIdToEdit?: Dispatch<StateUpdater<string | undefined>>;
draggedColumn: { column: string, index: number } | null;
setDraggedColumn: (column: { column: string, index: number } | null) => void;
dropPosition: { column: string, index: number } | null;
setDropPosition: (position: { column: string, index: number } | null) => void;
draggedCard: { noteId: string, branchId: string, fromColumn: string, index: number } | null;
setDraggedCard: (card: { noteId: string, branchId: string, fromColumn: string, index: number } | null) => void;
setDropTarget: (target: string | null) => void,
dropTarget: string | null
}
export const BoardViewContext = createContext<BoardViewContextData>({});
@@ -43,10 +55,12 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
return new Api(byColumn, columns ?? [], parentNote, statusAttribute, viewConfig ?? {}, saveConfig, setBranchIdToEdit );
}, [ byColumn, columns, parentNote, statusAttribute, viewConfig, saveConfig, setBranchIdToEdit ]);
const boardViewContext = useMemo<BoardViewContextData>(() => ({
branchIdToEdit,
columnNameToEdit,
setColumnNameToEdit,
setBranchIdToEdit
branchIdToEdit, setBranchIdToEdit,
columnNameToEdit, setColumnNameToEdit,
draggedColumn, setDraggedColumn,
dropPosition, setDropPosition,
draggedCard, setDraggedCard,
dropTarget, setDropTarget
}), [ branchIdToEdit, columnNameToEdit, setColumnNameToEdit, setBranchIdToEdit ]);
function refresh() {
@@ -159,15 +173,6 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
column={column}
columnIndex={index}
columnItems={byColumn.get(column)}
draggedCard={draggedCard}
setDraggedCard={setDraggedCard}
dropTarget={dropTarget}
setDropTarget={setDropTarget}
dropPosition={dropPosition}
setDropPosition={setDropPosition}
onCardDrop={refresh}
draggedColumn={draggedColumn}
setDraggedColumn={setDraggedColumn}
isDraggingColumn={draggedColumn?.column === column}
/>
</>