A11y: reset zoom (chromium-browsers only) when getting back to the map or when opening a picture

src/UI/Image/ImagePreview.svelte

@@ -5,12 +5,16 @@
   import panzoom from "panzoom"
   import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
   import { UIEventSource } from "../../Logic/UIEventSource"
+  import Zoomcontrol from "../Zoomcontrol"
+  import { onDestroy, onMount } from "svelte"
 
   export let image: ProvidedImage
   let panzoomInstance = undefined
   let panzoomEl: HTMLElement
   export let isLoaded: UIEventSource<boolean> = undefined
-
+  
+  onDestroy(Zoomcontrol.createLock())
+  
   $: {
     if (panzoomEl) {
       panzoomInstance = panzoom(panzoomEl, {

src/UI/Map/RasterLayerPicker.svelte

@@ -76,7 +76,7 @@
 </script>
 
 {#if hasLayers}
-  <form class="flex h-full w-full flex-col">
+  <form class="flex h-full w-full flex-col" on:submit|preventDefault={() => {}}>
     <button
       tabindex="-1"
       on:click={() => apply()}

src/UI/ThemeViewGUI.svelte

@@ -395,7 +395,7 @@
   <!-- Floatover with the selected element, if applicable -->
   <FloatOver
     on:close={() => {
-      selectedElement.setData(undefined)
+      state.selectedElement.setData(undefined)
     }}
   >
     <div class="flex h-full w-full">

src/UI/Zoomcontrol.ts

@@ -0,0 +1,70 @@
+import { Stores, UIEventSource } from "../Logic/UIEventSource"
+
+/**
+ * Utilities to (re)set user zoom (this is when the user enlarges HTML-elements by pinching out a non-map element).
+ * If the user zooms in and goes back to the map, it should reset to 1.0
+ */
+export default class Zoomcontrol {
+    private static readonly singleton = new Zoomcontrol()
+    private static readonly initialValue =
+        "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=1"
+    private static readonly noZoom =
+        "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=1"
+
+    private readonly viewportElement: HTMLMetaElement
+
+    private readonly _allowZooming: UIEventSource<boolean>
+    private readonly _lockTokens: Set<any> = new Set<any>()
+
+    private constructor() {
+        const metaElems = document.getElementsByTagName("head")[0].getElementsByTagName("meta")
+        this.viewportElement = Array.from(metaElems).find(
+            (meta) => meta.getAttribute("name") === "viewport"
+        )
+        this._allowZooming = new UIEventSource<boolean>(true)
+        this._allowZooming.addCallback((allowed) => {
+            this.apply(allowed ? Zoomcontrol.initialValue : Zoomcontrol.noZoom)
+        })
+        Stores.Chronic(1000).addCallback((_) =>
+            console.log(this.viewportElement.getAttribute("content"))
+        )
+    }
+
+    private _resetZoom() {
+        this.apply(Zoomcontrol.noZoom)
+        requestAnimationFrame(() => {
+            // Does not work on firefox, see https://bugzilla.mozilla.org/show_bug.cgi?id=1873934
+            this.allowZoomIfUnlocked()
+        })
+    }
+
+    private apply(fullSpec: string) {
+        this.viewportElement.setAttribute("content", fullSpec)
+    }
+
+    public static createLock(): () => void {
+        return Zoomcontrol.singleton._createLock()
+    }
+
+    private allowZoomIfUnlocked() {
+        if (this._lockTokens.size > 0) {
+            return
+        }
+        this.apply(Zoomcontrol.initialValue)
+    }
+
+    private _createLock(): () => void {
+        const token = {}
+        const lockTokens = this._lockTokens
+        lockTokens.add(token)
+        this._resetZoom()
+        return () => {
+            lockTokens.delete(token)
+            this.allowZoomIfUnlocked()
+        }
+    }
+
+    public static resetzoom() {
+        this.singleton._resetZoom()
+    }
+}