Used absolute coordinates on screen for context menu

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 (
       <div
+        onMouseDown={(e) => {
+          // 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,
             }),

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,
             }),

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 }
+}