Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-28 16:56:34 +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"; import Card from "./card";
interface DragContext { interface DragContext {
api: BoardApi;
column: string; column: string;
draggedColumn: { column: string, index: number } | null;
setDraggedColumn: (column: { column: string, index: number } | null) => void;
columnIndex: number, columnIndex: number,
setDropTarget: (target: string | null) => void, columnItems?: { note: FNote, branch: FBranch }[]
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 }[],
} }
export default function Column({ export default function Column({
column, column,
columnItems, columnIndex,
draggedCard,
setDraggedCard,
dropTarget,
dropPosition,
isDraggingColumn, isDraggingColumn,
columnItems,
api, api,
...restProps
}: { }: {
column: string, columnItems?: { note: FNote, branch: FBranch }[];
dropTarget: string | null,
isDraggingColumn: boolean, isDraggingColumn: boolean,
api: BoardApi api: BoardApi
} & DragContext) { } & DragContext) {
const context = useContext(BoardViewContext); const { columnNameToEdit, setColumnNameToEdit, dropTarget, draggedCard, dropPosition, setDraggedCard} = useContext(BoardViewContext);
const isEditing = (context.columnNameToEdit === column); const isEditing = (columnNameToEdit === column);
const editorRef = useRef<HTMLInputElement>(null); const editorRef = useRef<HTMLInputElement>(null);
const { handleColumnDragStart, handleColumnDragEnd, handleDragOver, handleDragLeave, handleDrop } = useDragging({ const { handleColumnDragStart, handleColumnDragEnd, handleDragOver, handleDragLeave, handleDrop } = useDragging({
api, column, dropPosition, draggedCard, setDraggedCard, columnItems, ...restProps column, columnIndex
}); });
const handleEdit = useCallback(() => { const handleEdit = useCallback(() => {
context.setColumnNameToEdit?.(column); setColumnNameToEdit?.(column);
}, [column]); }, [column]);
const handleContextMenu = useCallback((e: ContextMenuEvent) => { const handleContextMenu = useCallback((e: ContextMenuEvent) => {
@@ -87,7 +73,7 @@ export default function Column({
<TitleEditor <TitleEditor
currentValue={column} currentValue={column}
save={newTitle => api.renameColumn(column, newTitle)} save={newTitle => api.renameColumn(column, newTitle)}
dismiss={() => context.setColumnNameToEdit?.(undefined)} dismiss={() => setColumnNameToEdit?.(undefined)}
/> />
)} )}
</h3> </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) => { const handleColumnDragStart = useCallback((e: DragEvent) => {
e.dataTransfer!.effectAllowed = 'move'; e.dataTransfer!.effectAllowed = 'move';
e.dataTransfer!.setData('text/plain', column); e.dataTransfer!.setData('text/plain', column);
@@ -185,7 +173,7 @@ function useDragging({ api, column, columnIndex, draggedColumn, setDraggedColumn
if (draggedCard.fromColumn !== column) { if (draggedCard.fromColumn !== column) {
// Moving to a different 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 there are items in the target column, reorder
if (targetItems.length > 0 && targetIndex < targetItems.length) { 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); await branches.moveAfterBranch([ draggedCard.branchId ], lastItem.branch.branchId);
} }
} }
onCardDrop();
} }
setDraggedCard(null); 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 }; 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 { createContext } from "preact";
import { onWheelHorizontalScroll } from "../../widget_utils"; import { onWheelHorizontalScroll } from "../../widget_utils";
import Column from "./column"; import Column from "./column";
import BoardApi from "./api";
import FBranch from "../../../entities/fbranch";
import FNote from "../../../entities/fnote";
export interface BoardViewData { export interface BoardViewData {
columns?: BoardColumnData[]; columns?: BoardColumnData[];
@@ -20,10 +23,19 @@ export interface BoardColumnData {
} }
interface BoardViewContextData { interface BoardViewContextData {
api?: BoardApi;
branchIdToEdit?: string; branchIdToEdit?: string;
columnNameToEdit?: string; columnNameToEdit?: string;
setColumnNameToEdit?: Dispatch<StateUpdater<string | undefined>>; setColumnNameToEdit?: Dispatch<StateUpdater<string | undefined>>;
setBranchIdToEdit?: 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>({}); 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 ); return new Api(byColumn, columns ?? [], parentNote, statusAttribute, viewConfig ?? {}, saveConfig, setBranchIdToEdit );
}, [ byColumn, columns, parentNote, statusAttribute, viewConfig, saveConfig, setBranchIdToEdit ]); }, [ byColumn, columns, parentNote, statusAttribute, viewConfig, saveConfig, setBranchIdToEdit ]);
const boardViewContext = useMemo<BoardViewContextData>(() => ({ const boardViewContext = useMemo<BoardViewContextData>(() => ({
branchIdToEdit, branchIdToEdit, setBranchIdToEdit,
columnNameToEdit, columnNameToEdit, setColumnNameToEdit,
setColumnNameToEdit, draggedColumn, setDraggedColumn,
setBranchIdToEdit dropPosition, setDropPosition,
draggedCard, setDraggedCard,
dropTarget, setDropTarget
}), [ branchIdToEdit, columnNameToEdit, setColumnNameToEdit, setBranchIdToEdit ]); }), [ branchIdToEdit, columnNameToEdit, setColumnNameToEdit, setBranchIdToEdit ]);
function refresh() { function refresh() {
@@ -159,15 +173,6 @@ export default function BoardView({ note: parentNote, noteIds, viewConfig, saveC
column={column} column={column}
columnIndex={index} columnIndex={index}
columnItems={byColumn.get(column)} 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} isDraggingColumn={draggedColumn?.column === column}
/> />
</> </>