From 50121153dd58c30140ebd9233b9704d3b79077b8 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 4 Sep 2025 21:37:08 +0300 Subject: [PATCH] chore(react/collections/geomap): bring back adding new items --- .../src/widgets/collections/geomap/index.css | 2 +- .../src/widgets/collections/geomap/index.tsx | 44 +++++++++++++++++-- .../src/widgets/collections/geomap/map.tsx | 8 +++- .../widgets/view_widgets/geo_view/index.ts | 40 +---------------- 4 files changed, 49 insertions(+), 45 deletions(-) diff --git a/apps/client/src/widgets/collections/geomap/index.css b/apps/client/src/widgets/collections/geomap/index.css index 668962ff1..45dbf33f6 100644 --- a/apps/client/src/widgets/collections/geomap/index.css +++ b/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; } diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx index 1b8d35834..fee1a36bf 100644 --- a/apps/client/src/widgets/collections/geomap/index.tsx +++ b/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) { + const [ state, setState ] = useState(State.Normal); const [ layerName ] = useNoteLabel(note, "map:style"); const [ isReadOnly ] = useNoteLabelBoolean(note, "readOnly"); const [ notes, setNotes ] = useState([]); @@ -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 ( -
+
{notes.map(note => )} diff --git a/apps/client/src/widgets/collections/geomap/map.tsx b/apps/client/src/widgets/collections/geomap/map.tsx index f959606c7..1a0f642cc 100644 --- a/apps/client/src/widgets/collections/geomap/map.tsx +++ b/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(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(null); const containerRef = useRef(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
{children} 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 3a3a286be..43c6f70d5 100644 --- a/apps/client/src/widgets/view_widgets/geo_view/index.ts +++ b/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 { @@ -38,7 +35,6 @@ export default class GeoView extends ViewMode { this.currentMarkerData = {}; this.currentTrackData = {}; - this._state = State.Normal; args.$parent.append(this.$root); } @@ -127,7 +123,6 @@ export default class GeoView extends ViewMode { #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 { } } - 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); }