Performance: trim svg.ts, use Svelte-SVG-componenets where possible (WIP)

src/UI/Base/DragInvitation.svelte

@@ -5,6 +5,7 @@
    */
   import { Store } from "../../Logic/UIEventSource"
   import { onDestroy } from "svelte"
+  import Hand from "../../assets/svg/Hand.svelte";
 
   let mainElem: HTMLElement
   export let hideSignal: Store<any>
@@ -34,7 +35,7 @@
 
 <div bind:this={mainElem} class="pointer-events-none absolute bottom-0 right-0 h-full w-full">
   <div id="hand-container">
-    <img src="./assets/svg/hand.svg" />
+    <Hand />
   </div>
 </div>
 

src/UI/Base/LoginToggle.svelte

@@ -6,6 +6,7 @@
   import Tr from "./Tr.svelte"
   import { OsmConnection } from "../../Logic/Osm/OsmConnection"
   import { ImmutableStore, UIEventSource } from "../../Logic/UIEventSource"
+  import Invalid from "../../assets/svg/Invalid.svelte";
 
   export let state: {
     osmConnection: OsmConnection
@@ -35,7 +36,7 @@
     </slot>
   {:else if $loadingStatus === "error"}
     <div class="alert max-w-64 flex items-center">
-      <img src="./assets/svg/invalid.svg" class="m-2 h-8 w-8 shrink-0" />
+      <Invalid class="m-2 h-8 w-8 shrink-0" />
       <Tr t={offlineModes[$apiState]} />
     </div>
   {:else if $loadingStatus === "logged-in"}

src/UI/Base/LogoutButton.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { OsmConnection } from "../../Logic/Osm/OsmConnection";
+  import Logout from "../../assets/svg/Logout.svelte";
+  import Translations from "../i18n/Translations";
+  import Tr from "./Tr.svelte";
+
+  export let osmConnection: OsmConnection
+</script>
+
+<button on:click={() => {
+                        state.osmConnection.LogOut()
+                    }}>
+  <Logout class="w-6 h-6"/>
+  <Tr t={Translations.t.general.logout}/>
+</button>

src/UI/Base/OpenJosm.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { UIEventSource } from "../../Logic/UIEventSource";
+  import Translations from "../i18n/Translations";
+  import Tr from "./Tr.svelte";
+  import Josm_logo from "../../assets/svg/Josm_logo.svelte";
+  import Constants from "../../Models/Constants";
+  import type { SpecialVisualizationState } from "../SpecialVisualization";
+
+  export let state : SpecialVisualizationState
+  const t = Translations.t.general.attribution;
+  const josmState = new UIEventSource<"OK" | string>(undefined);
+  // Reset after 15s
+  josmState.stabilized(15000).addCallbackD(() => josmState.setData(undefined));
+
+  const showButton = state.osmConnection.userDetails.map(
+    (ud) => ud.loggedIn && ud.csCount >= Constants.userJourney.historyLinkVisible
+  );
+
+  function openJosm() {
+    const bbox = state.mapProperties. bounds.data;
+    if (bbox === undefined) {
+      return;
+    }
+    const top = bbox.getNorth();
+    const bottom = bbox.getSouth();
+    const right = bbox.getEast();
+    const left = bbox.getWest();
+    const josmLink = `http://127.0.0.1:8111/load_and_zoom?left=${left}&right=${right}&top=${top}&bottom=${bottom}`;
+    Utils.download(josmLink)
+      .then((answer) => josmState.setData(answer.replace(/\n/g, "").trim()))
+      .catch(() => josmState.setData("ERROR"));
+  }
+
+</script>
+{#if $showButton}
+  {#if $josmState === undefined}
+    <!-- empty -->
+  {:else if state === "OK"}
+    <Tr cls="thanks" t={t.josmOpened} />
+  {:else}
+    <Tr cls="alert" t={t.josmNotOpened} />
+  {/if}
+
+  <button class="flex items-center" on:click={openJosm}>
+    <Josm_logo class="h-12 w-12 p-2 pr-4" />
+    <Tr t={t.editJosm} />
+  </button>
+{/if}

src/UI/Base/ShareButton.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import ToSvelte from "./ToSvelte.svelte"
   import Svg from "../../Svg"
+  import Share from "../../assets/svg/Share.svelte";
 
   export let generateShareData: () => {
     text: string
@@ -25,6 +26,6 @@
 
 <button on:click={share} class="secondary m-0 h-8 w-8 p-0">
   <slot name="content">
-    <ToSvelte construct={Svg.share_svg().SetClass("w-7 h-7 p-1")} />
+    <Share class="w-7 h-7 p-1"/>
   </slot>
 </button>

src/UI/Base/SvelteUIElement.ts

@@ -23,10 +23,10 @@ export default class SvelteUIElement<
     private readonly _events: Events
     private readonly _slots: Slots
 
-    constructor(svelteElement, props: Props, events?: Events, slots?: Slots) {
+    constructor(svelteElement, props?: Props, events?: Events, slots?: Slots) {
         super()
         this._svelteComponent = svelteElement
-        this._props = props
+        this._props = props ?? <Props>{}
         this._events = events
         this._slots = slots
     }

src/UI/Base/WeblateLink.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Locale from "../i18n/Locale"
   import LinkToWeblate from "./LinkToWeblate"
+  import Translate from "../../assets/svg/Translate.svelte";
 
   /**
    * Shows a small icon which will open up weblate; a contributor can translate the item for 'context' there
@@ -19,7 +20,7 @@
       target="_blank"
       class="weblate-link mx-1"
     >
-      <img src="./assets/svg/translate.svg" class="font-gray" />
+      <Translate class="font-gray" />
     </a>
   {:else if $linkToWeblate}
     <a
@@ -27,7 +28,7 @@
       class="weblate-link hidden-on-mobile mx-1"
       target="_blank"
     >
-      <img src="./assets/svg/translate.svg" class="font-gray inline-block" />
+      <Translate class="font-gray inline-block" />
     </a>
   {/if}
 {/if}