diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue index 9bfe9062..473a73ca 100644 --- a/src/components/maps/overlay/SearchMarkers.vue +++ b/src/components/maps/overlay/SearchMarkers.vue @@ -4,7 +4,7 @@ import { useStore } from '@nanostores/vue' import { $world } from '../worldStore'; import { useFocus, useMagicKeys, whenever } from '@vueuse/core'; -import { computed, onMounted, ref } from 'vue'; +import { computed, onMounted, ref, onUpdated } from 'vue'; $world.listen(() => {}) await allTasks() @@ -48,7 +48,10 @@ whenever(shortcutKeyCombo, () => { q.value = "" }) -// Player geolocation (uses native JS to avoid changing leaflet library) +/** + * Player geolocation + * Uses native JS to avoid changing leaflet library + */ onMounted(() => { const playerBtnRef = document.querySelector('[data-to-players]') const flyToPlayers = new CustomEvent('fly-to', { bubbles: true, detail: players.markerCoords }) @@ -57,6 +60,27 @@ onMounted(() => { playerBtnRef.dispatchEvent(flyToPlayers) }) }) + +/** + * Marker geolocation + * We need to use onUpdated hook because the list is not always rendered, and it often rebuilt. +*/ +onUpdated(() => { + const markerBtnRefs = document.querySelectorAll('[data-to-marker]') + + markerBtnRefs.forEach((btn) => { + const { toMarker } = (btn as HTMLButtonElement).dataset + if (!toMarker) return + const rawCoords = toMarker?.split(',') + const detail = { + x: rawCoords[0], + y: rawCoords[1] + } + const flyToMarker = new CustomEvent('fly-to', { bubbles: true, detail }) + + btn.addEventListener('click', () => btn.dispatchEvent(flyToMarker)) + }) +})