diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index 574b70688..c6d0bdac3 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -966,7 +966,9 @@ "no_attachments": "This note has no attachments." }, "book": { - "no_children_help": "This collection doesn't have any child notes so there's nothing to display. See wiki for details." + "no_children_help": "This collection doesn't have any child notes so there's nothing to display. See wiki for details.", + "drag_locked_title": "Locked for editing", + "drag_locked_message": "Dragging not allowed since the collection is locked for editing." }, "editable_code": { "placeholder": "Type the content of your code note here..." diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx index d53158b4a..4f1784850 100644 --- a/apps/client/src/widgets/collections/geomap/index.tsx +++ b/apps/client/src/widgets/collections/geomap/index.tsx @@ -91,24 +91,32 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM // Dragging const containerRef = useRef(null); const apiRef = useRef(null); - useNoteTreeDrag(containerRef, async (treeData, e) => { - const api = apiRef.current; - if (!note || !api || isReadOnly) return; + useNoteTreeDrag(containerRef, { + dragEnabled: !isReadOnly, + dragNotEnabledMessage: { + icon: "bx bx-lock-alt", + title: t("book.drag_locked_title"), + message: t("book.drag_locked_message") + }, + async callback(treeData, e) { + const api = apiRef.current; + if (!note || !api || isReadOnly) return; - const { noteId } = treeData[0]; + const { noteId } = treeData[0]; - const offset = containerRef.current?.getBoundingClientRect(); - const x = e.clientX - (offset?.left ?? 0); - const y = e.clientY - (offset?.top ?? 0); - const latlng = api.containerPointToLatLng([ x, y ]); + const offset = containerRef.current?.getBoundingClientRect(); + const x = e.clientX - (offset?.left ?? 0); + const y = e.clientY - (offset?.top ?? 0); + const latlng = api.containerPointToLatLng([ x, y ]); - const targetNote = await froca.getNote(noteId, true); - const parents = targetNote?.getParentNoteIds(); - if (parents?.includes(note.noteId)) { - await moveMarker(noteId, latlng); - } else { - await branches.cloneNoteToParentNote(noteId, noteId); - await moveMarker(noteId, latlng); + const targetNote = await froca.getNote(noteId, true); + const parents = targetNote?.getParentNoteIds(); + if (parents?.includes(note.noteId)) { + await moveMarker(noteId, latlng); + } else { + await branches.cloneNoteToParentNote(noteId, noteId); + await moveMarker(noteId, latlng); + } } }); diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 48a9590e5..06ea554ec 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -18,6 +18,7 @@ import keyboard_actions from "../../services/keyboard_actions"; import Mark from "mark.js"; import { DragData } from "../note_tree"; import Component from "../../components/component"; +import toast, { ToastOptions } from "../../services/toast"; export function useTriliumEvent(eventName: T, handler: (data: EventData) => void) { const parentComponent = useContext(ParentComponent); @@ -588,17 +589,35 @@ export function useImperativeSearchHighlighlighting(highlightedTokens: string[] }; } -export function useNoteTreeDrag(containerRef: MutableRef, callback: (data: DragData[], e: DragEvent) => void) { +export function useNoteTreeDrag(containerRef: MutableRef, { dragEnabled, dragNotEnabledMessage, callback }: { + dragEnabled: boolean, + dragNotEnabledMessage: Omit; + callback: (data: DragData[], e: DragEvent) => void +}) { useEffect(() => { const container = containerRef.current; if (!container) return; + function onDragEnter(e: DragEvent) { + if (!dragEnabled) { + toast.showPersistent({ + ...dragNotEnabledMessage, + id: "drag-not-enabled", + closeAfter: 5000 + }); + } + } + function onDragOver(e: DragEvent) { - // Allow drag. e.preventDefault(); } function onDrop(e: DragEvent) { + toast.closePersistent("drag-not-enabled"); + if (!dragEnabled) { + return; + } + const data = e.dataTransfer?.getData('text'); if (!data) { return; @@ -612,12 +631,20 @@ export function useNoteTreeDrag(containerRef: MutableRef { + container.removeEventListener("dragenter", onDragEnter); container.removeEventListener("dragover", onDragOver); container.removeEventListener("drop", onDrop); + container.removeEventListener("dragleave", onDragLeave); }; }, [ containerRef, callback ]); }