From 2592fa63ac64db290747a4c211c7ffad3cc3e7c5 Mon Sep 17 00:00:00 2001 From: Kwashie A <104215256+Kwash67@users.noreply.github.com> Date: Fri, 28 Nov 2025 00:00:18 +0000 Subject: [PATCH 1/6] fixed bug --- gcs/src/components/mapComponents/markerPin.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gcs/src/components/mapComponents/markerPin.jsx b/gcs/src/components/mapComponents/markerPin.jsx index 1ecd4de49..09ecd7f71 100644 --- a/gcs/src/components/mapComponents/markerPin.jsx +++ b/gcs/src/components/mapComponents/markerPin.jsx @@ -40,7 +40,7 @@ const MarkerPin = React.memo( dispatch( updateContextMenuState({ isOpen: true, - position: { x: e.nativeEvent.layerX, y: e.nativeEvent.layerY }, + position: { x: e.clientX, y: e.clientY }, // absolute screen coords gpsCoords: { lat: lat, lng: lon }, markerId: id, }), From b3435793a32728c34b49158d520dbb2b3c847642 Mon Sep 17 00:00:00 2001 From: "Kwashie A." <104215256+Kwash67@users.noreply.github.com> Date: Fri, 28 Nov 2025 11:12:24 +0000 Subject: [PATCH 2/6] using map container-relative coords Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- gcs/src/components/mapComponents/markerPin.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gcs/src/components/mapComponents/markerPin.jsx b/gcs/src/components/mapComponents/markerPin.jsx index 09ecd7f71..79d365358 100644 --- a/gcs/src/components/mapComponents/markerPin.jsx +++ b/gcs/src/components/mapComponents/markerPin.jsx @@ -40,7 +40,7 @@ const MarkerPin = React.memo( dispatch( updateContextMenuState({ isOpen: true, - position: { x: e.clientX, y: e.clientY }, // absolute screen coords + position: { x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY }, // map container-relative coords gpsCoords: { lat: lat, lng: lon }, markerId: id, }), From bb4a08cf6d94389d14a8579224fff04bb0ddb452 Mon Sep 17 00:00:00 2001 From: Kwashie A <104215256+Kwash67@users.noreply.github.com> Date: Fri, 28 Nov 2025 12:50:52 +0000 Subject: [PATCH 3/6] added a helper to get container relative coords --- gcs/src/components/mapComponents/markerPin.jsx | 8 +++++++- gcs/src/components/missions/missionsMap.jsx | 5 ++++- gcs/src/helpers/pointer.js | 9 +++++++++ 3 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 gcs/src/helpers/pointer.js diff --git a/gcs/src/components/mapComponents/markerPin.jsx b/gcs/src/components/mapComponents/markerPin.jsx index 79d365358..c96baa465 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, @@ -37,10 +38,15 @@ const MarkerPin = React.memo( }} onContextMenu={(e) => { e.preventDefault() + e.stopPropagation() + const container = e.currentTarget.closest( + ".maplibregl-map, .mapboxgl-map", + ) + const pt = getContainerPointFromEvent(e.nativeEvent, container) dispatch( updateContextMenuState({ isOpen: true, - position: { x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY }, // map container-relative coords + 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..6ff276b13 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,12 @@ function MapSectionNonMemo({ onDragStart={onDragstart} onContextMenu={(e) => { e.preventDefault() + const canvas = e.target.getCanvas() + 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..627ea2ac9 --- /dev/null +++ b/gcs/src/helpers/pointer.js @@ -0,0 +1,9 @@ +export function getContainerPointFromEvent(event, container) { + 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 } +} From 482b80776db75a873353683f4ce243600fcf5def Mon Sep 17 00:00:00 2001 From: Kwashie A <104215256+Kwash67@users.noreply.github.com> Date: Fri, 28 Nov 2025 14:05:46 +0000 Subject: [PATCH 4/6] random bug, preventing rightclicking from initiating a drag on the waypoint --- gcs/src/components/mapComponents/markerPin.jsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/gcs/src/components/mapComponents/markerPin.jsx b/gcs/src/components/mapComponents/markerPin.jsx index c96baa465..9f1b36cfb 100644 --- a/gcs/src/components/mapComponents/markerPin.jsx +++ b/gcs/src/components/mapComponents/markerPin.jsx @@ -32,6 +32,13 @@ 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() From e92a5478908f662350b306ace464751ad77be162 Mon Sep 17 00:00:00 2001 From: Kwashie A <104215256+Kwash67@users.noreply.github.com> Date: Fri, 28 Nov 2025 14:29:43 +0000 Subject: [PATCH 5/6] added some null validation --- gcs/src/helpers/pointer.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/gcs/src/helpers/pointer.js b/gcs/src/helpers/pointer.js index 627ea2ac9..667697501 100644 --- a/gcs/src/helpers/pointer.js +++ b/gcs/src/helpers/pointer.js @@ -1,8 +1,21 @@ +// 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 } From ca6aa2327cdfa1eb4dbd9e4b3c3a64e8fb566625 Mon Sep 17 00:00:00 2001 From: Kwashie A <104215256+Kwash67@users.noreply.github.com> Date: Fri, 28 Nov 2025 14:42:25 +0000 Subject: [PATCH 6/6] throwing in some comments --- gcs/src/components/mapComponents/markerPin.jsx | 2 ++ gcs/src/components/missions/missionsMap.jsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/gcs/src/components/mapComponents/markerPin.jsx b/gcs/src/components/mapComponents/markerPin.jsx index 9f1b36cfb..01cbc4bd3 100644 --- a/gcs/src/components/mapComponents/markerPin.jsx +++ b/gcs/src/components/mapComponents/markerPin.jsx @@ -46,9 +46,11 @@ const MarkerPin = React.memo( 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({ diff --git a/gcs/src/components/missions/missionsMap.jsx b/gcs/src/components/missions/missionsMap.jsx index 6ff276b13..d6a6d3fbc 100644 --- a/gcs/src/components/missions/missionsMap.jsx +++ b/gcs/src/components/missions/missionsMap.jsx @@ -294,7 +294,9 @@ 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({