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 ]);
}