Convert center and boundingBox from getters to reactive variables

nimiq · Sep 4, 2023 · af85db0 · af85db0
1 parent db6666c
commit af85db0
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 37 deletions.
diff --git a/src/components/elements/FilterModal.vue b/src/components/elements/FilterModal.vue
@@ -42,15 +42,14 @@ const nFilters = computed(() => {
 })
 
 const { locations } = storeToRefs(useLocations())
-const { boundingBox } = useMap()
-const { zoom } = storeToRefs(useMap())
+const { boundingBox, zoom } = storeToRefs(useMap())
 
 function updateFilters() {
   filtersStore.setSelectedCategories(unappliedFiltersCategories.value)
   filtersStore.setSelectedCurrencies(unappliedFiltersCurrencies.value)
 
   // re-render the clusters in the map
-  useCluster().cluster(locations.value, boundingBox()!, zoom.value)
+  useCluster().cluster(locations.value, boundingBox.value!, zoom.value)
 }
 
 function clearFilters() {

diff --git a/src/components/elements/TheMapInstance.vue b/src/components/elements/TheMapInstance.vue
@@ -43,7 +43,7 @@ const mapGestureBehaviour
 <template>
   <GoogleMap
     ref="mapInstance" :language="detectLanguage()" disable-default-ui :gesture-handling="mapGestureBehaviour" :keyboard-shortcuts="false"
-    class="w-full h-full" :styles="googleMapStyles" :max-zoom="21" :min-zoom="3" :restriction="restriction" @bounds_changed="mapStore.onBoundsChanged"
+    class="w-full h-full" :styles="googleMapStyles" :max-zoom="21" :min-zoom="3" :restriction="restriction"
     @idle.once="setInitialMapPosition"
   >
     <MapMarkers />

diff --git a/src/stores/map.ts b/src/stores/map.ts
@@ -10,29 +10,61 @@ import type { EstimatedMapPosition, MapPosition, Point } from '@/types'
 export const useMap = defineStore('map', () => {
   const mapInstance = shallowRef<typeof GoogleMap>()
   const map = computed(() => mapInstance.value?.map as google.maps.Map | undefined)
-  const center = () => map.value?.getCenter()?.toJSON() as Point | undefined
+  const center = ref(map.value?.getCenter()?.toJSON() as Point | undefined)
   const zoom = ref(map.value?.getZoom() ?? 3)
+  const boundingBox = ref(boundsToBox(map.value?.getBounds()))
+
+  const router = useRouter()
+  const route = useRoute()
+
+  const locationsStore = useLocations()
+  const { cluster } = useCluster()
+  const { selectedUuid } = storeToRefs(useLocations())
+
+  async function onBoundsChanged() {
+    const bbox = boundingBox.value
+    if (!bbox)
+      return
+    router.push({
+      name: 'coords',
+      params: { ...center.value, zoom: zoom.value },
+      query: { ...route.query, uuid: selectedUuid.value ? selectedUuid.value : undefined },
+      replace: true,
+    })
+    await locationsStore.getLocations(bbox)
+    cluster(locationsStore.locations, bbox, zoom.value)
+  }
+
+  // Make the API request after the map has not been moved for 300ms or after 700ms
+  const onBoundsChangedDebounced = useDebounceFn(onBoundsChanged, 300, { maxWait: 2000 })
+
+  function boundsToBox(bounds?: google.maps.LatLngBounds) {
+    if (!bounds)
+      return undefined
+    const { lat: swLat, lng: swLng } = bounds.getSouthWest().toJSON()
+    const { lat: neLat, lng: neLng } = bounds.getNorthEast().toJSON()
+    return { swLat, swLng, neLat, neLng }
+  }
 
   const unwatch = watch(map, (map) => {
     if (!map)
       return
+    map.addListener('center_changed', () => {
+      center.value = map.getCenter()?.toJSON() as Point | undefined
+    })
     map.addListener('zoom_changed', () => {
       zoom.value = map.getZoom()!
     })
+    map.addListener('bounds_changed', () => {
+      boundingBox.value = boundsToBox(map.getBounds())
+      onBoundsChangedDebounced()
+    })
     unwatch()
   })
 
   const increaseZoom = () => map.value?.setZoom(zoom.value + 1)
   const decreaseZoom = () => map.value?.setZoom(zoom.value - 1)
 
-  const boundingBox = () => {
-    if (!map.value?.getBounds())
-      return
-    const { lat: swLat, lng: swLng } = map.value.getBounds()!.getSouthWest().toJSON()
-    const { lat: neLat, lng: neLng } = map.value.getBounds()!.getNorthEast().toJSON()
-    return { swLat, swLng, neLat, neLng }
-  }
-
   function setPosition(p?: MapPosition | EstimatedMapPosition | google.maps.LatLngBounds) {
     if (!map.value || !p)
       return
@@ -61,27 +93,6 @@ export const useMap = defineStore('map', () => {
     setPosition(res.results[0]?.geometry.viewport)
   }
 
-  const router = useRouter()
-  const route = useRoute()
-
-  const locationsStore = useLocations()
-  const { cluster } = useCluster()
-  const { selectedUuid } = storeToRefs(useLocations())
-
-  async function onBoundsChanged() {
-    const bbox = boundingBox()
-    if (!bbox)
-      return
-    router.push({
-      name: 'coords',
-      params: { ...center(), zoom: zoom.value },
-      query: { ...route.query, uuid: selectedUuid.value ? selectedUuid.value : undefined },
-      replace: true,
-    })
-    await locationsStore.getLocations(boundingBox()!)
-    cluster(locationsStore.locations, boundingBox()!, zoom.value)
-  }
-
   return {
     map,
     mapInstance,
@@ -96,8 +107,5 @@ export const useMap = defineStore('map', () => {
     decreaseZoom,
 
     goToPlaceId,
-
-    // Make the API request after the map has not been moved for 300ms or after 700ms
-    onBoundsChanged: useDebounceFn(onBoundsChanged, 300, { maxWait: 2000 }),
   }
 })