chore(react/collections/geomap): bring back map context menu

This commit is contained in:
Elian Doran 2025-09-04 21:46:05 +03:00
parent dd2b718974
commit 3b66522a5e
No known key found for this signature in database
3 changed files with 23 additions and 5 deletions

View File

@ -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 (
<div className={`geo-view ${state === State.NewNote ? "placing-note" : ""}`}>
<Map
@ -86,6 +91,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
spacedUpdate.scheduleUpdate();
}}
onClick={onClick}
onContextMenu={onContextMenu}
>
{notes.map(note => <NoteMarker note={note} editable={!isReadOnly} />)}
</Map>

View File

@ -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<L.Map>(null);
const containerRef = useRef<HTMLDivElement>(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 (
<div

View File

@ -54,7 +54,6 @@ export default class GeoView extends ViewMode<MapData> {
}
const isEditable = !this.isReadOnly;
map.on("contextmenu", (e) => openMapContextMenu(this.parentNote.noteId, e, isEditable));
if (isEditable) {
setupDragging(this.$container, map, this.parentNote.noteId);