feat(collections/geomap): show toast if drag not enabled

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 <a href=\"https://triliumnext.github.io/Docs/Wiki/book-note.html\">wiki</a> for details."
+    "no_children_help": "This collection doesn't have any child notes so there's nothing to display. See <a href=\"https://triliumnext.github.io/Docs/Wiki/book-note.html\">wiki</a> 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..."

apps/client/src/widgets/collections/geomap/index.tsx

@@ -91,7 +91,14 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
     // Dragging
     const containerRef = useRef<HTMLDivElement>(null);
     const apiRef = useRef<L.Map>(null);
-    useNoteTreeDrag(containerRef, async (treeData, e) => {
+    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;
 
@@ -110,6 +117,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
                 await branches.cloneNoteToParentNote(noteId, noteId);
                 await moveMarker(noteId, latlng);
             }
+        }
     });
 
     return (

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<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void) {
     const parentComponent = useContext(ParentComponent);
@@ -588,17 +589,35 @@ export function useImperativeSearchHighlighlighting(highlightedTokens: string[]
     };
 }
 
-export function useNoteTreeDrag(containerRef: MutableRef<HTMLElement | null | undefined>, callback: (data: DragData[], e: DragEvent) => void) {
+export function useNoteTreeDrag(containerRef: MutableRef<HTMLElement | null | undefined>, { dragEnabled, dragNotEnabledMessage, callback }: {
+    dragEnabled: boolean,
+    dragNotEnabledMessage: Omit<ToastOptions, "id" | "closeAfter">;
+    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<HTMLElement | null | un
             callback(parsedData, e);
         }
 
+        function onDragLeave() {
+            toast.closePersistent("drag-not-enabled");
+        }
+
+        container.addEventListener("dragenter", onDragEnter);
         container.addEventListener("dragover", onDragOver);
         container.addEventListener("drop", onDrop);
+        container.addEventListener("dragleave", onDragLeave)
 
         return () => {
+            container.removeEventListener("dragenter", onDragEnter);
             container.removeEventListener("dragover", onDragOver);
             container.removeEventListener("drop", onDrop);
+            container.removeEventListener("dragleave", onDragLeave);
         };
     }, [ containerRef, callback ]);
 }