diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx index 7a09d4eb6..4e6ced7a6 100644 --- a/apps/client/src/widgets/collections/geomap/index.tsx +++ b/apps/client/src/widgets/collections/geomap/index.tsx @@ -67,6 +67,10 @@ function NoteMarker({ note, editable }: { note: FNote, editable: boolean }) { const latLng = location?.split(",", 2).map((el) => parseFloat(el)) as [ number, number ] | undefined; const icon = useMemo(() => buildIcon(iconClass, colorClass ?? undefined, title, note.noteId), [ iconClass, colorClass, title, note.noteId]); + const onClick = useCallback(() => { + appContext.triggerCommand("openInPopup", { noteIdOrPath: note.noteId }); + }, [ note.noteId ]); + // Middle click to open in new tab const onMouseDown = useCallback((e: MouseEvent) => { if (e.button === 1) { @@ -83,9 +87,10 @@ function NoteMarker({ note, editable }: { note: FNote, editable: boolean }) { return latLng && } diff --git a/apps/client/src/widgets/collections/geomap/marker.tsx b/apps/client/src/widgets/collections/geomap/marker.tsx index 5c250097b..009d60034 100644 --- a/apps/client/src/widgets/collections/geomap/marker.tsx +++ b/apps/client/src/widgets/collections/geomap/marker.tsx @@ -5,12 +5,13 @@ import { DivIcon, Icon, LatLng, Marker as LeafletMarker, marker, MarkerOptions } export interface MarkerProps { coordinates: [ number, number ]; icon?: Icon | DivIcon; - mouseDown?: (e: MouseEvent) => void; - dragged?: ((newCoordinates: LatLng) => void); + onClick?: () => void; + onMouseDown?: (e: MouseEvent) => void; + onDragged?: ((newCoordinates: LatLng) => void); draggable?: boolean; } -export default function Marker({ coordinates, icon, draggable, dragged, mouseDown }: MarkerProps) { +export default function Marker({ coordinates, icon, draggable, onClick, onDragged, onMouseDown }: MarkerProps) { const parentMap = useContext(ParentMap); useEffect(() => { @@ -25,21 +26,25 @@ export default function Marker({ coordinates, icon, draggable, dragged, mouseDow const newMarker = marker(coordinates, options); - if (mouseDown) { - newMarker.on("mousedown", e => mouseDown(e.originalEvent)); + if (onClick) { + newMarker.on("click", () => onClick()); } - if (dragged) { + if (onMouseDown) { + newMarker.on("mousedown", e => onMouseDown(e.originalEvent)); + } + + if (onDragged) { newMarker.on("moveend", e => { const coordinates = (e.target as LeafletMarker).getLatLng(); - dragged(coordinates); + onDragged(coordinates); }); } newMarker.addTo(parentMap); return () => newMarker.removeFrom(parentMap); - }, [ parentMap, coordinates, mouseDown ]); + }, [ parentMap, coordinates, onMouseDown, onDragged ]); return (
) } diff --git a/apps/client/src/widgets/view_widgets/geo_view/markers.ts b/apps/client/src/widgets/view_widgets/geo_view/markers.ts index 8cfad222d..f32824283 100644 --- a/apps/client/src/widgets/view_widgets/geo_view/markers.ts +++ b/apps/client/src/widgets/view_widgets/geo_view/markers.ts @@ -3,7 +3,6 @@ import type FNote from "../../../entities/fnote.js"; import openContextMenu from "./context_menu.js"; import server from "../../../services/server.js"; import { moveMarker } from "./editing.js"; -import appContext from "../../../components/app_context.js"; import L from "leaflet"; let gpxLoaded = false; @@ -13,12 +12,6 @@ export default function processNoteWithMarker(map: Map, note: FNote, location: s openContextMenu(note.noteId, e, isEditable); }); - if (!isEditable) { - newMarker.on("click", (e) => { - appContext.triggerCommand("openInPopup", { noteIdOrPath: note.noteId }); - }); - } - return newMarker; }