Zoom out when enabling the download grid, rename fieldBoundaryOpacity to opacity

Author: m-mohr

src/components/GlobalDataPanel.vue

@@ -54,9 +54,9 @@ const handleLocationSelected = (place: PlaceResult) => {
           thumb-color="teal"
           hide-details
         />
-        <h3 class="group">Opacity: {{ settings.fieldBoundariesOpacity }}%</h3>
+        <h3 class="group">Opacity: {{ settings.opacity }}%</h3>
         <v-slider
-          v-model.number="settings.fieldBoundariesOpacity"
+          v-model.number="settings.opacity"
           :min="0"
           :max="100"
           :step="1"

src/composables/__tests__/useDownloadGrid.test.ts

@@ -171,4 +171,27 @@ describe('useDownloadGrid', () => {
     })
     expect(settings.value.downloads).toBe(true)
   })
+
+  it('animates zoom out to level 8 when downloads are enabled at a higher zoom', async () => {
+    const { settings } = useSettings()
+    const { initDownloadGridLayer } = useDownloadGrid()
+    const animate = vi.fn()
+    const fakeMap = {
+      addLayer: vi.fn(),
+      on: vi.fn(),
+      getView: () => ({
+        getZoom: () => 12,
+        animate,
+      }),
+      getTargetElement: () => ({ style: { cursor: '' } }),
+    } as any
+
+    settings.value.downloads = false
+    initDownloadGridLayer(fakeMap)
+
+    settings.value.downloads = true
+    await nextTick()
+
+    expect(animate).toHaveBeenCalledWith({ zoom: 8, duration: 500 })
+  })
 })

src/composables/__tests__/usePermalink.test.ts

@@ -19,7 +19,7 @@ describe('buildGlobalPermalinkParts', () => {
       mode: 'global',
       threshold: 0.65,
       year: 2024,
-      fieldBoundariesOpacity: 55,
+      opacity: 55,
       downloads: true,
     })
 
@@ -42,7 +42,7 @@ describe('parsePermalinkHash', () => {
     expect(state.mode).toBe('global')
     expect(state.threshold).toBe(0.8)
     expect(state.year).toBe(2025)
-    expect(state.fieldBoundariesOpacity).toBe(72)
+    expect(state.opacity).toBe(72)
     expect(state.downloads).toBe(true)
   })
 

src/composables/useDownloadGrid.ts

@@ -24,6 +24,10 @@ const selectedGridCell = ref<GridCell | null>(null)
 const hoveredGridFeature = shallowRef<FeatureLike | null>(null)
 const selectedGridFeature = shallowRef<FeatureLike | null>(null)
 const downloadGridLayer = shallowRef<VectorLayer<VectorSource> | null>(null)
+const currentMap = shallowRef<Map | null>(null)
+
+const DOWNLOAD_GRID_MAX_ZOOM = 8
+const DOWNLOAD_GRID_ZOOM_ANIMATION_DURATION = 500
 
 // Track maps we've already wired up so we don't register duplicate listeners.
 const initializedMaps = new WeakSet<Map>()
@@ -48,11 +52,25 @@ function closeDownloadModal() {
   downloadGridLayer.value?.changed()
 }
 
+function ensureDownloadGridVisibleAtUsableZoom(map: Map | null) {
+  if (!map || !settings.value.downloads) return
+
+  const view = map.getView()
+  const zoom = view.getZoom()
+  if (zoom !== undefined && zoom > DOWNLOAD_GRID_MAX_ZOOM) {
+    view.animate({
+      zoom: DOWNLOAD_GRID_MAX_ZOOM,
+      duration: DOWNLOAD_GRID_ZOOM_ANIMATION_DURATION,
+    })
+  }
+}
+
 // Toggle layer visibility and close the modal when the grid is turned off.
 watch(
   () => settings.value.downloads,
   (visible) => {
     downloadGridLayer.value?.setVisible(visible)
+    if (visible) ensureDownloadGridVisibleAtUsableZoom(currentMap.value)
     if (!visible) closeDownloadModal()
   },
 )
@@ -70,11 +88,13 @@ export default function useDownloadGrid() {
   const initDownloadGridLayer = (map: Map) => {
     if (initializedMaps.has(map)) return
     initializedMaps.add(map)
+    currentMap.value = map
 
     const layer = createDownloadGridLayer(hoveredGridFeature, selectedGridFeature)
     downloadGridLayer.value = layer
     map.addLayer(layer)
     layer.setVisible(settings.value.downloads)
+    ensureDownloadGridVisibleAtUsableZoom(map)
 
     map.on('pointermove', (event) => {
       if (!settings.value.downloads) return

src/composables/useMap.ts

@@ -94,16 +94,14 @@ watch(
       }
 
       globalPredictionsController.value = createGlobalPredictionsLayer(settings.value)
-      globalPredictionsController.value.layer.setOpacity(
-        settings.value.fieldBoundariesOpacity / 100,
-      )
+      globalPredictionsController.value.layer.setOpacity(settings.value.opacity / 100)
       map.value.addLayer(globalPredictionsController.value.layer)
     }
   },
 )
 
 watch(
-  () => settings.value.fieldBoundariesOpacity,
+  () => settings.value.opacity,
   (opacity) => {
     const olOpacity = opacity / 100
     globalPredictionsController.value?.layer.setOpacity(olOpacity)
@@ -162,14 +160,12 @@ const updateLayers = () => {
     if (!globalPredictionsController.value) {
       // Only handle first initialization here, year changes are handled by a watcher on year above
       globalPredictionsController.value = createGlobalPredictionsLayer(settings.value)
-      globalPredictionsController.value.layer.setOpacity(
-        settings.value.fieldBoundariesOpacity / 100,
-      )
+      globalPredictionsController.value.layer.setOpacity(settings.value.opacity / 100)
       map.value.addLayer(globalPredictionsController.value.layer)
     }
     if (!globalOverviewLayer.value) {
       globalOverviewLayer.value = createGlobalOverviewLayer(settings.value)
-      globalOverviewLayer.value.setOpacity(settings.value.fieldBoundariesOpacity / 100)
+      globalOverviewLayer.value.setOpacity(settings.value.opacity / 100)
       map.value.addLayer(globalOverviewLayer.value)
     }
 

src/composables/usePermalink.ts

@@ -30,7 +30,7 @@ export interface PermalinkStateInference extends PermalinkState {
 
 export interface PermalinkStateGlobal extends PermalinkState {
   threshold: number
-  fieldBoundariesOpacity: number
+  opacity: number
   downloads: boolean
 }
 
@@ -39,7 +39,7 @@ export function buildGlobalPermalinkParts(settings: Settings): string[] {
   if (settings.year) {
     hashParts.push(`year:${settings.year}`)
   }
-  hashParts.push(`opacity:${settings.fieldBoundariesOpacity}`)
+  hashParts.push(`opacity:${settings.opacity}`)
   hashParts.push(`downloads:${settings.downloads ? 1 : 0}`)
   return hashParts
 }
@@ -64,7 +64,7 @@ export function parsePermalinkHash(
     center: [0, 0],
     year: 2025,
     threshold: 0.4,
-    fieldBoundariesOpacity: 90,
+    opacity: 90,
     downloads: false,
   }
 
@@ -169,7 +169,7 @@ export function parsePermalinkHash(
         zoom,
         center,
         threshold: defaultGlobalState.threshold,
-        fieldBoundariesOpacity: defaultGlobalState.fieldBoundariesOpacity,
+        opacity: defaultGlobalState.opacity,
         downloads: defaultGlobalState.downloads,
       }
 
@@ -182,7 +182,7 @@ export function parsePermalinkHash(
           if (!isNaN(year)) result.year = year
         } else if (part.startsWith('opacity:')) {
           const opacity = parseInt(part.substring(8), 10)
-          result.fieldBoundariesOpacity = isNaN(opacity) ? 90 : opacity
+          result.opacity = isNaN(opacity) ? 90 : opacity
         } else if (part.startsWith('downloads:')) {
           result.downloads = part.substring(10) === '1'
         }
@@ -313,7 +313,7 @@ export default function usePermalink() {
         center,
         threshold: settings.value.threshold,
         year: settings.value.year,
-        fieldBoundariesOpacity: settings.value.fieldBoundariesOpacity,
+        opacity: settings.value.opacity,
         downloads: settings.value.downloads,
       }
     }
@@ -351,7 +351,7 @@ export default function usePermalink() {
 
   function restoreGlobalState(state: PermalinkStateGlobal) {
     settings.value.threshold = state.threshold
-    settings.value.fieldBoundariesOpacity = state.fieldBoundariesOpacity
+    settings.value.opacity = state.opacity
     settings.value.downloads = state.downloads
     if (state.year) {
       settings.value.year = state.year
@@ -384,7 +384,7 @@ export default function usePermalink() {
         settings.value.areaCoverage,
         settings.value.buffer,
         settings.value.threshold,
-        settings.value.fieldBoundariesOpacity,
+        settings.value.opacity,
         settings.value.downloads,
       ],
       () => {

src/composables/useSettings.ts

@@ -12,7 +12,7 @@ export interface Settings {
   expertMode: boolean
   mode: string
   threshold: number
-  fieldBoundariesOpacity: number
+  opacity: number
   downloads: boolean
 }
 
@@ -59,7 +59,7 @@ const defaultSettings: Settings = {
   expertMode: false,
   mode: defaultMode,
   threshold: 0.4,
-  fieldBoundariesOpacity: 90,
+  opacity: 90,
   downloads: false,
 }