Refactoring: convert qr_code to Svelte, deprecate Img.ts

src/UI/Base/Img.ts

@@ -1,11 +1,15 @@
 import { Utils } from "../../Utils"
 import BaseUIElement from "../BaseUIElement"
-
+/**
+ * @deprecated
+*/
 export default class Img extends BaseUIElement {
     private readonly _src: string
     private readonly _rawSvg: boolean
     private readonly _options: { readonly fallbackImage?: string }
 
+    /** @deprecated
+     */
     constructor(
         src: string,
         rawSvg = false,

src/UI/Base/Tr.svelte

@@ -20,10 +20,17 @@
 </script>
 
 {#if $txt}
+  {#if cls}
   <span class={cls}>
     <span lang={$lang}>
       {@html Utils.purify($txt)}
     </span>
     <WeblateLink context={t?.context} />
   </span>
+  {:else}
+     <span lang={$lang}>
+      {@html Utils.purify($txt)}
+    </span>
+    <WeblateLink context={t?.context} />
+  {/if}
 {/if}

src/UI/BigComponents/ShareScreen.svelte

@@ -11,12 +11,8 @@
   import Tr from "../Base/Tr.svelte"
   import Translations from "../i18n/Translations"
   import { Utils } from "../../Utils"
-  import { DocumentDuplicateIcon } from "@rgossiaux/svelte-heroicons/outline"
-  import ToSvelte from "../Base/ToSvelte.svelte"
-  import Img from "../Base/Img"
   import Qr from "../../Utils/Qr"
   import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
-  import Share from "@babeard/svelte-heroicons/solid/Share"
   import Constants from "../../Models/Constants"
   import Copyable from "../Base/Copyable.svelte"
 
@@ -127,9 +123,7 @@
     <Copyable {state} text={linkToShare} />
   </div>
   <div class="flex justify-center">
-    <ToSvelte
+    <img src={new Qr(linkToShare).toImageElement(125)} style="width: 125px"/>
-      construct={() => new Img(new Qr(linkToShare).toImageElement(125)).SetStyle("width: 125px")}
-    />
   </div>
 
   <Tr t={tr.embedIntro} />

src/UI/Popup/QrCode.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { Store, UIEventSource } from "../../Logic/UIEventSource"
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import type { Feature } from "geojson"
+  import Loading from "../Base/Loading.svelte"
+  import Qr from "../../Utils/Qr"
+  import { GeoOperations } from "../../Logic/GeoOperations"
+
+  const smallSize = 100
+  const bigSize = 200
+  let size = new UIEventSource(smallSize)
+
+  export let state: SpecialVisualizationState
+  export let tags: UIEventSource<Record<string, string>>
+  export let feature: Feature
+
+  let [lon, lat] = GeoOperations.centerpointCoordinates(feature)
+
+  const includeLayout = window.location.pathname
+    .split("/")
+    .at(-1)
+    .startsWith("theme")
+  const layout = includeLayout
+    ? "layout=" + state.layout.id + "&"
+    : ""
+  let id: Store<string> = tags.mapD(tags => tags.id)
+  let url = id.mapD(id =>    `${window.location.protocol}//${window.location.host}${window.location.pathname}?${layout}lat=${lat}&lon=${lon}&z=15` +
+    `#${id}`)
+
+
+
+  function toggleSize() {
+    if (size.data !== bigSize) {
+      size.setData(bigSize)
+    } else {
+      size.setData(smallSize)
+    }
+  }
+</script>
+
+{#if $id.startsWith("node/-")}
+  <!-- Not yet uploaded, doesn't have a fixed ID -->
+  <Loading />
+{:else}
+  <img on:click={() => toggleSize()} src={new Qr($url).toImageElement($size)} style={`width: ${$size}px; height: ${$size}px`} />
+{/if}

src/UI/SpecialVisualizations.ts

@@ -96,6 +96,8 @@ import { CombinedFetcher } from "../Logic/Web/NearbyImagesSearch"
 import { And } from "../Logic/Tags/And"
 import CloseNoteButton from "./Popup/Notes/CloseNoteButton.svelte"
 import PendingChangesIndicator from "./BigComponents/PendingChangesIndicator.svelte"
+import Loading from "./Base/Loading"
+import QrCode from "./Popup/QrCode.svelte"
 
 class NearbyImageVis implements SpecialVisualization {
     // Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
@@ -1682,46 +1684,11 @@ export default class SpecialVisualizations {
                 docs: "Generates a QR-code to share the selected object",
                 constr(
                     state: SpecialVisualizationState,
-                    tagSource: UIEventSource<Record<string, string>>,
+                    tags: UIEventSource<Record<string, string>>,
                     argument: string[],
                     feature: Feature
-                ): BaseUIElement {
+                ): SvelteUIElement {
-                    const smallSize = 100
+                    return new SvelteUIElement(QrCode , {state, tags, feature}   )
-                    const bigSize = 200
-                    const size = new UIEventSource(smallSize)
-                    return new VariableUiElement(
-                        tagSource
-                            .map((tags) => tags.id)
-                            .map(
-                                (id) => {
-                                    if (id.startsWith("node/-")) {
-                                        // Not yet uploaded
-                                        return undefined
-                                    }
-                                    const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
-                                    const includeLayout = window.location.pathname
-                                        .split("/")
-                                        .at(-1)
-                                        .startsWith("theme")
-                                    const layout = includeLayout
-                                        ? "layout=" + state.layout.id + "&"
-                                        : ""
-                                    const url =
-                                        `${window.location.protocol}//${window.location.host}${window.location.pathname}?${layout}lat=${lat}&lon=${lon}&z=15` +
-                                        `#${id}`
-                                    return new Img(new Qr(url).toImageElement(size.data)).SetStyle(
-                                        `width: ${size.data}px`
-                                    )
-                                },
-                                [size]
-                            )
-                    ).onClick(() => {
-                        if (size.data !== bigSize) {
-                            size.setData(bigSize)
-                        } else {
-                            size.setData(smallSize)
-                        }
-                    })
                 }
             },
             {