diff --git a/gcs/src/components/mapComponents/markerPin.jsx b/gcs/src/components/mapComponents/markerPin.jsx index 1ecd4de49..01cbc4bd3 100644 --- a/gcs/src/components/mapComponents/markerPin.jsx +++ b/gcs/src/components/mapComponents/markerPin.jsx @@ -10,6 +10,7 @@ import { Tooltip } from "@mantine/core" import { Marker } from "react-map-gl" import { useDispatch } from "react-redux" import { coordToInt } from "../../helpers/dataFormatters" +import { getContainerPointFromEvent } from "../../helpers/pointer" import { updateContextMenuState, updateDrawingItem, @@ -31,16 +32,30 @@ const MarkerPin = React.memo( return (
{ + // Prevent right-click from initiating a drag on the marker + if (e.button === 2) { + e.preventDefault() + e.stopPropagation() + } + }} onClick={(e) => { e.preventDefault() e.stopPropagation() }} onContextMenu={(e) => { e.preventDefault() + e.stopPropagation() + // get map container + const container = e.currentTarget.closest( + ".maplibregl-map, .mapboxgl-map", + ) + // use helper to get point inside container + const pt = getContainerPointFromEvent(e.nativeEvent, container) dispatch( updateContextMenuState({ isOpen: true, - position: { x: e.nativeEvent.layerX, y: e.nativeEvent.layerY }, + position: { x: pt.x, y: pt.y }, gpsCoords: { lat: lat, lng: lon }, markerId: id, }), diff --git a/gcs/src/components/missions/missionsMap.jsx b/gcs/src/components/missions/missionsMap.jsx index 1fe7933cf..d6a6d3fbc 100644 --- a/gcs/src/components/missions/missionsMap.jsx +++ b/gcs/src/components/missions/missionsMap.jsx @@ -58,6 +58,7 @@ import { updateContextMenuState, } from "../../redux/slices/missionSlice" import ContextMenuSpecificCommandItems from "../mapComponents/contextMenuSpecificCommandItems" +import { getContainerPointFromEvent } from "../../helpers/pointer" const tailwindColors = resolveConfig(tailwindConfig).theme.colors @@ -293,10 +294,14 @@ function MapSectionNonMemo({ onDragStart={onDragstart} onContextMenu={(e) => { e.preventDefault() + // get map container + const canvas = e.target.getCanvas() + // use helper to get point inside container + const pt = getContainerPointFromEvent(e.originalEvent ?? e, canvas) dispatch( updateContextMenuState({ isOpen: true, - position: e.point, + position: pt, gpsCoords: e.lngLat, markerId: null, }), diff --git a/gcs/src/helpers/pointer.js b/gcs/src/helpers/pointer.js new file mode 100644 index 000000000..667697501 --- /dev/null +++ b/gcs/src/helpers/pointer.js @@ -0,0 +1,22 @@ +// Returns the point (x, y) inside a container for a pointer event. +export function getContainerPointFromEvent(event, container) { + // Validate event and coordinates + const hasClientCoords = + event && + typeof event.clientX === "number" && + typeof event.clientY === "number" + + if (!hasClientCoords) { + // Fallback safely if event is invalid; caller expects an {x, y} object + return { x: 0, y: 0 } + } + + const rect = + container && typeof container.getBoundingClientRect === "function" + ? container.getBoundingClientRect() + : { left: 0, top: 0 } + + const x = event.clientX - rect.left + const y = event.clientY - rect.top + return { x, y } +}