chore(react/collections/geomap): bring back adding new items

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

@@ -18,7 +18,7 @@
   z-index: 997;
 }
 
-.geo-map-container.placing-note {
+.geo-view.placing-note .geo-map-container {
   cursor: crosshair;
 }
 

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

@@ -1,7 +1,7 @@
 import Map from "./map";
 import "./index.css";
 import { ViewModeProps } from "../interface";
-import { useNoteLabel, useNoteLabelBoolean, useNoteProperty, useSpacedUpdate } from "../../react/hooks";
+import { useNoteLabel, useNoteLabelBoolean, useNoteProperty, useSpacedUpdate, useTriliumEvent } from "../../react/hooks";
 import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
 import { divIcon, LatLng, LeafletMouseEvent } from "leaflet";
 import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
@@ -11,8 +11,10 @@ import FNote from "../../../entities/fnote";
 import markerIcon from "leaflet/dist/images/marker-icon.png";
 import markerIconShadow from "leaflet/dist/images/marker-shadow.png";
 import appContext from "../../../components/app_context";
-import { moveMarker } from "./api";
+import { createNewNote, moveMarker } from "./api";
 import openContextMenu from "./context_menu";
+import toast from "../../../services/toast";
+import { t } from "../../../services/i18n";
 
 const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
 const DEFAULT_ZOOM = 2;
@@ -25,7 +27,13 @@ interface MapData {
     };
 }
 
+enum State {
+    Normal,
+    NewNote
+}
+
 export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewModeProps<MapData>) {
+    const [ state, setState ] = useState(State.Normal);
     const [ layerName ] = useNoteLabel(note, "map:style");
     const [ isReadOnly ] = useNoteLabelBoolean(note, "readOnly");
     const [ notes, setNotes ] = useState<FNote[]>([]);
@@ -37,8 +45,37 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
 
     useEffect(() => { froca.getNotes(noteIds).then(setNotes) }, [ noteIds ]);
 
+    // Note creation.
+    useTriliumEvent("geoMapCreateChildNote", () => {
+         toast.showPersistent({
+            icon: "plus",
+            id: "geo-new-note",
+            title: "New note",
+            message: t("geo-map.create-child-note-instruction")
+        });
+
+        setState(State.NewNote);
+
+        const globalKeyListener: (this: Window, ev: KeyboardEvent) => any = (e) => {
+            if (e.key === "Escape") {
+                setState(State.Normal);
+
+                window.removeEventListener("keydown", globalKeyListener);
+                toast.closePersistent("geo-new-note");
+            }
+        };
+        window.addEventListener("keydown", globalKeyListener);
+    });
+    const onClick = useCallback(async (e: LeafletMouseEvent) => {
+        if (state === State.NewNote) {
+            toast.closePersistent("geo-new-note");
+            await createNewNote(note.noteId, e);
+            setState(State.Normal);
+        }
+    }, [ state ]);
+
     return (
-        <div className="geo-view">
+        <div className={`geo-view ${state === State.NewNote ? "placing-note" : ""}`}>
             <Map
                 coordinates={viewConfig?.view?.center ?? DEFAULT_COORDINATES}
                 zoom={viewConfig?.view?.zoom ?? DEFAULT_ZOOM}
@@ -48,6 +85,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
                     viewConfig.view = { center: coordinates, zoom };
                     spacedUpdate.scheduleUpdate();
                 }}
+                onClick={onClick}
             >
                 {notes.map(note => <NoteMarker note={note} editable={!isReadOnly} />)}
             </Map>

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

@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState } from "preact/hooks";
-import L, { LatLng, Layer } from "leaflet";
+import L, { LatLng, Layer, LeafletMouseEvent } from "leaflet";
 import "leaflet/dist/leaflet.css";
 import { MAP_LAYERS } from "./map_layer";
 import { ComponentChildren, createContext } from "preact";
+import { map } from "jquery";
 
 export const ParentMap = createContext<L.Map | null>(null);
 
@@ -12,9 +13,10 @@ interface MapProps {
     layerName: string;
     viewportChanged: (coordinates: LatLng, zoom: number) => void;
     children: ComponentChildren;
+    onClick: (e: LeafletMouseEvent) => void;
 }
 
-export default function Map({ coordinates, zoom, layerName, viewportChanged, children }: MapProps) {
+export default function Map({ coordinates, zoom, layerName, viewportChanged, children, onClick }: MapProps) {
     const mapRef = useRef<L.Map>(null);
     const containerRef = useRef<HTMLDivElement>(null);
 
@@ -80,6 +82,8 @@ export default function Map({ coordinates, zoom, layerName, viewportChanged, chi
         };
     }, [ mapRef, viewportChanged ]);
 
+    useEffect(() => { mapRef.current && mapRef.current.on("click", onClick) }, [ mapRef, onClick ]);
+
     return <div ref={containerRef} className="geo-map-container">
         <ParentMap.Provider value={mapRef.current}>
             {children}

apps/client/src/widgets/view_widgets/geo_view/index.ts

@@ -13,10 +13,7 @@ import attributes from "../../../services/attributes.js";
 import { DEFAULT_MAP_LAYER_NAME, MAP_LAYERS } from "./map_layer.js";
 
 
-enum State {
+
-    Normal,
-    NewNote
-}
 
 export default class GeoView extends ViewMode<MapData> {
 
@@ -38,7 +35,6 @@ export default class GeoView extends ViewMode<MapData> {
 
         this.currentMarkerData = {};
         this.currentTrackData = {};
-        this._state = State.Normal;
 
         args.$parent.append(this.$root);
     }
@@ -127,7 +123,6 @@ export default class GeoView extends ViewMode<MapData> {
 
     #changeState(newState: State) {
         this._state = newState;
-        this.$container.toggleClass("placing-note", newState === State.NewNote);
         if (hasTouchBar) {
             this.triggerCommand("refreshTouchBar");
         }
@@ -153,39 +148,6 @@ export default class GeoView extends ViewMode<MapData> {
         }
     }
 
-    async geoMapCreateChildNoteEvent({ ntxId }: EventData<"geoMapCreateChildNote">) {
-        toast.showPersistent({
-            icon: "plus",
-            id: "geo-new-note",
-            title: "New note",
-            message: t("geo-map.create-child-note-instruction")
-        });
-
-        this.#changeState(State.NewNote);
-
-        const globalKeyListener: (this: Window, ev: KeyboardEvent) => any = (e) => {
-            if (e.key !== "Escape") {
-                return;
-            }
-
-            this.#changeState(State.Normal);
-
-            window.removeEventListener("keydown", globalKeyListener);
-            toast.closePersistent("geo-new-note");
-        };
-        window.addEventListener("keydown", globalKeyListener);
-    }
-
-    async #onMapClicked(e: LeafletMouseEvent) {
-        if (this._state !== State.NewNote) {
-            return;
-        }
-
-        toast.closePersistent("geo-new-note");
-        await createNewNote(this.parentNote.noteId, e);
-        this.#changeState(State.Normal);
-    }
-
     deleteFromMapEvent({ noteId }: EventData<"deleteFromMap">) {
         moveMarker(noteId, null);
     }