From 19b6c8e98dd837c3624ecbb25b510817e55a2c1a Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Mon, 24 May 2021 20:59:51 +0100
Subject: [PATCH] Workaround for occasional context menu issues

---
 src/components/map/MapContextMenu.vue | 35 ++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/components/map/MapContextMenu.vue b/src/components/map/MapContextMenu.vue
index efd2baa..8debf76 100644
--- a/src/components/map/MapContextMenu.vue
+++ b/src/components/map/MapContextMenu.vue
@@ -17,7 +17,7 @@
 
 <script lang="ts">
 import DynmapMap from "@/leaflet/DynmapMap";
-import {computed, defineComponent, onMounted, onUnmounted} from "@vue/runtime-core";
+import {computed, defineComponent, onMounted, onUnmounted, watch} from "@vue/runtime-core";
 import {LeafletMouseEvent} from "leaflet";
 import {useStore} from "@/store";
 import WorldListItem from "@/components/sidebar/WorldListItem.vue";
@@ -37,6 +37,7 @@ export default defineComponent({
 	setup(props) {
 		const store = useStore(),
 			event = ref<LeafletMouseEvent | null>(null),
+			lastMouseMoveEvent = ref<LeafletMouseEvent | null>(null),
 
 			messageCopyLink = computed(() => store.state.messages.contextMenuCopyLink),
 			messageCenterHere = computed(() => store.state.messages.contextMenuCenterHere),
@@ -123,20 +124,36 @@ export default defineComponent({
 			window.removeEventListener('keyup', handleEsc);
 		});
 
-		window.addEventListener('contextmenu', e => {
-			if(e.target && e.target instanceof HTMLElement && e.target.classList.contains('leaflet-zoom-animated')) {
-				e.preventDefault();
-			}
-		});
-
 		props.leaflet.on('contextmenu', (e: LeafletMouseEvent) => {
 			e.originalEvent.stopImmediatePropagation();
 			e.originalEvent.preventDefault();
-			props.leaflet.closePopup();
-			props.leaflet.closeTooltip();
 			event.value = e;
 		});
 
+		//Sometimes contextmenu events don't fire from leaflet for some reason
+		//As a workaround listen on the window and then use the last mousemove event for positioning
+		props.leaflet.on('mousemove', (e: LeafletMouseEvent) => {
+			lastMouseMoveEvent.value = e;
+		});
+
+		window.addEventListener('contextmenu', e => {
+			if(e.target && e.target instanceof HTMLElement && e.target.classList.contains('leaflet-zoom-animated')) {
+				e.preventDefault();
+				e.stopImmediatePropagation();
+
+				if(lastMouseMoveEvent.value) {
+					event.value = lastMouseMoveEvent.value;
+				}
+			}
+		});
+
+		watch(event, value => {
+			if(value) {
+				props.leaflet.closePopup();
+				props.leaflet.closeTooltip();
+			}
+		});
+
 		return {
 			messageCopyLink,
 			messageCenterHere,