From e843e95b29659b548ed20a7f7bb4234a80894ddc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20K=C3=BCnzi?= Date: Thu, 26 Sep 2024 15:01:44 +0200 Subject: [PATCH 1/2] PB-1003: no more long mouse clicks Issue : pressing the left mouse button for a long period of time would cause the location popup to appear Cause : in openlayers, the singleClick event represents both mouse left clicks and mobiles touchdown events Fix : We check the pointer type of the original event, ensuring we only handle the cases where this was triggered on a mobile. --- .../openlayers/utils/useMapInteractions.composable.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/modules/map/components/openlayers/utils/useMapInteractions.composable.js b/src/modules/map/components/openlayers/utils/useMapInteractions.composable.js index 743a9aa1a..9a334b1e4 100644 --- a/src/modules/map/components/openlayers/utils/useMapInteractions.composable.js +++ b/src/modules/map/components/openlayers/utils/useMapInteractions.composable.js @@ -212,7 +212,8 @@ export default function useMapInteractions(map) { // triggering a long click on the same spot after 500ms, so that mobile cas have access to the // LocationPopup by touching the same-ish spot for 500ms longClickTimeout = setTimeout(() => { - if (!mapHasMoved) { + // we need to ensure long mouse clicks don't trigger this. + if (!mapHasMoved && event.originalEvent.pointerType === 'touch') { // we are outside of OL event handling, on the HTML element, so we do not receive map pixel and coordinate automatically const pixel = map.getEventPixel(event) const coordinate = map.getCoordinateFromPixel(pixel) From ec4ad7fca018d0752078df470e35b3a5420562dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20K=C3=BCnzi?= Date: Mon, 7 Oct 2024 09:00:43 +0200 Subject: [PATCH 2/2] PB-1003: support for IOS and double event correction - IOS doesn't always react to a 'touch' event, which means we must account for them when handling which events can generate long presses. - when long pressing on the screen, we sometimes had a double event firing: one where it was triggered by the long press and registered correctly, and one 'contextmenu' event which had not the boolean required. We add a small check so we ensure contextmenu events don't cause single touch events too --- .../utils/useMapInteractions.composable.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/modules/map/components/openlayers/utils/useMapInteractions.composable.js b/src/modules/map/components/openlayers/utils/useMapInteractions.composable.js index 9a334b1e4..b4de6fb6a 100644 --- a/src/modules/map/components/openlayers/utils/useMapInteractions.composable.js +++ b/src/modules/map/components/openlayers/utils/useMapInteractions.composable.js @@ -20,6 +20,11 @@ import log from '@/utils/logging' const dispatcher = { dispatcher: 'useMapInteractions.composable', } +const longPressEvents = [ + 'touch', + 'pen', + '', // This is necessary for IoS support +] export default function useMapInteractions(map) { const store = useStore() @@ -184,7 +189,7 @@ export default function useMapInteractions(map) { function onMapRightClick(event) { clearTimeout(longClickTimeout) - longClickTriggered = event.updateLongClickTriggered ?? false + longClickTriggered = event.updateLongClickTriggered ?? event.type === 'contextmenu' store.dispatch('click', { clickInfo: new ClickInfo({ coordinate: event.coordinate, @@ -213,7 +218,11 @@ export default function useMapInteractions(map) { // LocationPopup by touching the same-ish spot for 500ms longClickTimeout = setTimeout(() => { // we need to ensure long mouse clicks don't trigger this. - if (!mapHasMoved && event.originalEvent.pointerType === 'touch') { + if ( + !mapHasMoved && + (longPressEvents.includes(event.originalEvent?.pointerType) || + longPressEvents.includes(event.pointerType)) + ) { // we are outside of OL event handling, on the HTML element, so we do not receive map pixel and coordinate automatically const pixel = map.getEventPixel(event) const coordinate = map.getCoordinateFromPixel(pixel)