feat(geo_map): add option to remove from map

src/public/app/components/app_context.ts

@@ -193,6 +193,11 @@ export type CommandMappings = {
     setZoomFactorAndSave: {
         zoomFactor: string;
     }
+
+    // Geomap
+    deleteFromMap: {
+        noteId: string;
+    }
 };
 
 type EventMappings = {

src/public/app/menus/context_menu.ts

@@ -31,6 +31,7 @@ export interface MenuCommandItem<T extends CommandNames> {
 
 export type MenuItem<T extends CommandNames> = MenuCommandItem<T> | MenuSeparatorItem;
 export type MenuHandler<T extends CommandNames> = (item: MenuCommandItem<T>, e: JQuery.MouseDownEvent<HTMLElement, undefined, HTMLElement, HTMLElement>) => void;
+export type ContextMenuEvent = PointerEvent | MouseEvent | JQuery.ContextMenuEvent;
 
 class ContextMenu {
     private $widget: JQuery<HTMLElement>;

src/public/app/menus/link_context_menu.ts

@@ -1,9 +1,9 @@
 import { t } from "../services/i18n.js";
-import contextMenu from "./context_menu.js";
+import contextMenu, { type ContextMenuEvent } from "./context_menu.js";
 import appContext from "../components/app_context.js";
 import type { ViewScope } from "../services/link.js";
 
-function openContextMenu(notePath: string, e: PointerEvent | MouseEvent | JQuery.ContextMenuEvent, viewScope: ViewScope = {}, hoistedNoteId: string | null = null) {
+function openContextMenu(notePath: string, e: ContextMenuEvent, viewScope: ViewScope = {}, hoistedNoteId: string | null = null) {
     contextMenu.show({
         x: e.pageX,
         y: e.pageY,

src/public/app/widgets/type_widgets/geo_map.ts

@@ -9,6 +9,7 @@ import type { EventData } from "../../components/app_context.js";
 import { t } from "../../services/i18n.js";
 import attributes from "../../services/attributes.js";
 import asset_path from "../../../../services/asset_path.js";
+import openContextMenu from "./geo_map_context_menu.js";
 
 const TPL = `\
 <div class="note-detail-geo-map note-detail-printable">
@@ -178,12 +179,10 @@ export default class GeoMapTypeWidget extends TypeWidget {
             const [ lat, lng ] = latLng.split(",", 2).map((el) => parseFloat(el));
             const icon = L.divIcon({
                 html: `\
-                    <a data-href="#${childNote.noteId}">
+                    <img class="icon" src="${asset_path}/node_modules/leaflet/dist/images/marker-icon.png" />
-                        <img class="icon" src="${asset_path}/node_modules/leaflet/dist/images/marker-icon.png" />
+                    <img class="icon-shadow" src="${asset_path}/node_modules/leaflet/dist/images/marker-shadow.png" />
-                        <img class="icon-shadow" src="${asset_path}/node_modules/leaflet/dist/images/marker-shadow.png" />
+                    <span class="bx ${childNote.getIcon()}"></span>
-                        <span class="bx ${childNote.getIcon()}"></span>
+                    <span class="title-label">${childNote.title}</span>`,
-                        <span class="title-label">${childNote.title}</span>
-                    </a>`,
                 iconSize: [ 25, 41 ],
                 iconAnchor: [ 12, 41 ]
             })
@@ -198,6 +197,11 @@ export default class GeoMapTypeWidget extends TypeWidget {
                 .on("moveend", e => {
                     this.moveMarker(childNote.noteId, (e.target as Marker).getLatLng());
                 });
+
+            marker.on("contextmenu", (e) => {
+                openContextMenu(childNote.noteId, e.originalEvent);
+            });
+
             this.currentMarkerData[childNote.noteId] = marker;
         }
     }
@@ -228,8 +232,9 @@ export default class GeoMapTypeWidget extends TypeWidget {
         this.#changeState(State.Normal);
     }
 
-    async moveMarker(noteId: string, latLng: LatLng) {
+    async moveMarker(noteId: string, latLng: LatLng | null) {
-        await attributes.setLabel(noteId, LOCATION_ATTRIBUTE, [latLng.lat, latLng.lng].join(","));
+        const value = (latLng ? [latLng.lat, latLng.lng].join(",") : "");
+        await attributes.setLabel(noteId, LOCATION_ATTRIBUTE, value);
     }
 
     getData(): any {
@@ -289,4 +294,8 @@ export default class GeoMapTypeWidget extends TypeWidget {
         }
     }
 
+    deleteFromMapEvent({ noteId }: EventData<"deleteFromMap">) {
+        this.moveMarker(noteId, null);
+    }
+
 }

src/public/app/widgets/type_widgets/geo_map_context_menu.ts

@@ -0,0 +1,18 @@
+import appContext from "../../components/app_context.js";
+import type { ContextMenuEvent } from "../../menus/context_menu.js";
+import contextMenu from "../../menus/context_menu.js";
+
+export default function openContextMenu(noteId: string, e: ContextMenuEvent) {
+    contextMenu.show({
+        x: e.pageX,
+        y: e.pageY,
+        items: [
+            { title: "Remove from map", command: "deleteFromMap", uiIcon: "bx bx-trash" }
+        ],
+        selectMenuItemHandler: ({ command }) => {
+            if (command) {
+                appContext.triggerCommand(command, { noteId });
+            }
+        }
+    });
+}