diff --git a/apps/client/src/widgets/note_tree.ts b/apps/client/src/widgets/note_tree.ts index 46abe10a0..ea6e50325 100644 --- a/apps/client/src/widgets/note_tree.ts +++ b/apps/client/src/widgets/note_tree.ts @@ -186,6 +186,12 @@ interface RefreshContext { noteIdsToReload: Set; } +export interface DragData { + noteId: string; + branchId: string; + title: string; +} + export default class NoteTreeWidget extends NoteContextAwareWidget { private $tree!: JQuery; private $treeActions!: JQuery; diff --git a/apps/client/src/widgets/view_widgets/geo_view/dragging.ts b/apps/client/src/widgets/view_widgets/geo_view/dragging.ts new file mode 100644 index 000000000..df056aad5 --- /dev/null +++ b/apps/client/src/widgets/view_widgets/geo_view/dragging.ts @@ -0,0 +1,38 @@ +import type { Map } from "leaflet"; +import type { DragData } from "../../note_tree.js"; +import { moveMarker } from "./editing"; + +export default function setupDragging($container: JQuery, map: Map) { + $container.on("dragover", (e) => { + // Allow drag. + e.preventDefault(); + }); + $container.on("drop", (e) => { + if (!e.originalEvent) { + return; + } + + const data = e.originalEvent.dataTransfer?.getData('text'); + if (!data) { + return; + } + + try { + const parsedData = JSON.parse(data) as DragData[]; + if (!parsedData.length) { + return; + } + + const { noteId } = parsedData[0]; + + var offset = $container.offset(); + var x = e.originalEvent.clientX - (offset?.left ?? 0); + var y = e.originalEvent.clientY - (offset?.top ?? 0); + + const latlng = map.containerPointToLatLng([ x, y ]); + moveMarker(noteId, latlng); + } catch (e) { + console.warn(e); + } + }); +} diff --git a/apps/client/src/widgets/view_widgets/geo_view/index.ts b/apps/client/src/widgets/view_widgets/geo_view/index.ts index d68eb489a..ebb060693 100644 --- a/apps/client/src/widgets/view_widgets/geo_view/index.ts +++ b/apps/client/src/widgets/view_widgets/geo_view/index.ts @@ -10,6 +10,7 @@ import { CommandListenerData, EventData } from "../../../components/app_context. import { createNewNote, moveMarker } from "./editing.js"; import link from "../../../services/link.js"; import { openMapContextMenu } from "./context_menu.js"; +import setupDragging from "./dragging.js"; const TPL = /*html*/`
@@ -158,6 +159,7 @@ export default class GeoView extends ViewMode { map.on("zoomend", updateFn); map.on("click", (e) => this.#onMapClicked(e)) map.on("contextmenu", (e) => openMapContextMenu(this.parentNote.noteId, e)); + setupDragging(this.$container, map); this.#reloadMarkers();