diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx index fee1a36bf..430f56694 100644 --- a/apps/client/src/widgets/collections/geomap/index.tsx +++ b/apps/client/src/widgets/collections/geomap/index.tsx @@ -12,7 +12,7 @@ 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 { createNewNote, moveMarker } from "./api"; -import openContextMenu from "./context_menu"; +import openContextMenu, { openMapContextMenu } from "./context_menu"; import toast from "../../../services/toast"; import { t } from "../../../services/i18n"; @@ -66,6 +66,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM }; window.addEventListener("keydown", globalKeyListener); }); + const onClick = useCallback(async (e: LeafletMouseEvent) => { if (state === State.NewNote) { toast.closePersistent("geo-new-note"); @@ -74,6 +75,10 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM } }, [ state ]); + const onContextMenu = useCallback((e: LeafletMouseEvent) => { + openMapContextMenu(note.noteId, e, !isReadOnly); + }, [ note.noteId, isReadOnly ]); + 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 8fe102210..bb4f22c03 100644 --- a/apps/client/src/widgets/collections/geomap/map.tsx +++ b/apps/client/src/widgets/collections/geomap/map.tsx @@ -13,10 +13,11 @@ interface MapProps { layerName: string; viewportChanged: (coordinates: LatLng, zoom: number) => void; children: ComponentChildren; - onClick: (e: LeafletMouseEvent) => void; + onClick?: (e: LeafletMouseEvent) => void; + onContextMenu?: (e: LeafletMouseEvent) => void; } -export default function Map({ coordinates, zoom, layerName, viewportChanged, children, onClick }: MapProps) { +export default function Map({ coordinates, zoom, layerName, viewportChanged, children, onClick, onContextMenu }: MapProps) { const mapRef = useRef(null); const containerRef = useRef(null); @@ -82,7 +83,19 @@ export default function Map({ coordinates, zoom, layerName, viewportChanged, chi }; }, [ mapRef, viewportChanged ]); - useEffect(() => { mapRef.current && mapRef.current.on("click", onClick) }, [ mapRef, onClick ]); + useEffect(() => { + if (onClick && mapRef.current) { + mapRef.current.on("click", onClick); + return () => mapRef.current?.off("click", onClick); + } + }, [ mapRef, onClick ]); + + useEffect(() => { + if (onContextMenu && mapRef.current) { + mapRef.current.on("contextmenu", onContextMenu); + return () => mapRef.current?.off("contextmenu", onContextMenu); + } + }, [ mapRef, onContextMenu ]); return (
{ } const isEditable = !this.isReadOnly; - map.on("contextmenu", (e) => openMapContextMenu(this.parentNote.noteId, e, isEditable)); if (isEditable) { setupDragging(this.$container, map, this.parentNote.noteId);