Refactoring: remove unused asset, further stripping of Svg.ts

src/UI/Base/LoginButton.svelte

@@ -2,15 +2,14 @@
   import { OsmConnection } from "../../Logic/Osm/OsmConnection"
   import Translations from "../i18n/Translations.js"
   import Tr from "./Tr.svelte"
-  import ToSvelte from "./ToSvelte.svelte"
-  import Svg from "../../Svg"
+  import Login from "../../assets/svg/Login.svelte"
 
   export let osmConnection: OsmConnection
   export let clss: string | undefined = undefined
 </script>
 
 <button class={clss} on:click={() => osmConnection.AttemptLogin()} style="margin-left: 0">
-  <ToSvelte construct={Svg.login_svg().SetClass("w-12 m-1")} />
+  <Login class="w-12 m-1" />
   <slot>
     <Tr t={Translations.t.general.loginWithOpenStreetMap} />
   </slot>

src/UI/BigComponents/BackgroundSwitcher.svelte

@@ -1,88 +0,0 @@
-<script lang="ts">
-  import { Store, UIEventSource } from "../../Logic/UIEventSource"
-  import type { RasterLayerPolygon } from "../../Models/RasterLayers"
-  import { AvailableRasterLayers } from "../../Models/RasterLayers"
-  import { createEventDispatcher, onDestroy } from "svelte"
-  import Svg from "../../Svg"
-  import { Map as MlMap } from "maplibre-gl"
-  import type { MapProperties } from "../../Models/MapProperties"
-  import OverlayMap from "../Map/OverlayMap.svelte"
-  import RasterLayerPicker from "../Map/RasterLayerPicker.svelte"
-
-  export let mapproperties: MapProperties
-  export let normalMap: UIEventSource<MlMap>
-  /**
-   * The current background (raster) layer of the polygon.
-   * This is undefined if a vector layer is used
-   */
-  let rasterLayer: UIEventSource<RasterLayerPolygon | undefined> = mapproperties.rasterLayer
-  let name = rasterLayer.data?.properties?.name
-  let icon = Svg.satellite_svg()
-  onDestroy(
-    rasterLayer.addCallback((polygon) => {
-      name = polygon.properties?.name
-    })
-  )
-  /**
-   * The layers that this component can offer as a choice.
-   */
-  export let availableRasterLayers: Store<RasterLayerPolygon[]>
-
-  let raster0 = new UIEventSource<RasterLayerPolygon>(undefined)
-
-  let raster1 = new UIEventSource<RasterLayerPolygon>(undefined)
-
-  let currentLayer: RasterLayerPolygon
-
-  function updatedAltLayer() {
-    const available = availableRasterLayers.data
-    const current = rasterLayer.data
-    const defaultLayer = AvailableRasterLayers.maptilerDefaultLayer
-    const firstOther = available.find((l) => l !== defaultLayer)
-    const secondOther = available.find((l) => l !== defaultLayer && l !== firstOther)
-    raster0.setData(firstOther === current ? defaultLayer : firstOther)
-    raster1.setData(secondOther === current ? defaultLayer : secondOther)
-  }
-
-  updatedAltLayer()
-  onDestroy(mapproperties.rasterLayer.addCallbackAndRunD(updatedAltLayer))
-  onDestroy(availableRasterLayers.addCallbackAndRunD(updatedAltLayer))
-
-  function use(rasterLayer: UIEventSource<RasterLayerPolygon>): () => void {
-    return () => {
-      currentLayer = undefined
-      mapproperties.rasterLayer.setData(rasterLayer.data)
-    }
-  }
-
-  const dispatch = createEventDispatcher<{ copyright_clicked }>()
-</script>
-
-<div class="flex items-end opacity-50 hover:opacity-100">
-  <div class="flex flex-col md:flex-row">
-    <button class="m-0 h-12 w-16 overflow-hidden p-0 md:h-16 md:w-16" on:click={use(raster0)}>
-      <OverlayMap
-        placedOverMap={normalMap}
-        placedOverMapProperties={mapproperties}
-        rasterLayer={raster0}
-      />
-    </button>
-    <button class="m-0 h-12 w-16 overflow-hidden p-0 md:h-16 md:w-16" on:click={use(raster1)}>
-      <OverlayMap
-        placedOverMap={normalMap}
-        placedOverMapProperties={mapproperties}
-        rasterLayer={raster1}
-      />
-    </button>
-  </div>
-  <div class="ml-1 flex h-fit flex-col gap-y-1 text-sm">
-    <div class="low-interaction w-64 rounded p-1">
-      <RasterLayerPicker
-        availableLayers={availableRasterLayers}
-        value={mapproperties.rasterLayer}
-      />
-    </div>
-
-    <button class="small" on:click={() => dispatch("copyright_clicked")}>© OpenStreetMap</button>
-  </div>
-</div>

src/UI/BigComponents/Histogram.ts

@@ -5,7 +5,9 @@ import Combine from "../Base/Combine"
 import { FixedUiElement } from "../Base/FixedUiElement"
 import { Utils } from "../../Utils"
 import BaseUIElement from "../BaseUIElement"
-import Svg from "../../Svg"
+import SvelteUIElement from "../Base/SvelteUIElement"
+import Up from "../../assets/svg/Up.svelte"
+import Circle from "../../assets/svg/Circle.svelte"
 
 export default class Histogram<T> extends VariableUiElement {
     private static defaultPalette = [
@@ -34,11 +36,11 @@ export default class Histogram<T> extends VariableUiElement {
             sortMode.map((m) => {
                 switch (m) {
                     case "name":
-                        return Svg.up_svg()
+                        return new SvelteUIElement(Up)
                     case "name-rev":
-                        return Svg.up_svg().SetStyle("transform: rotate(180deg)")
+                        return new SvelteUIElement(Up).SetStyle("transform: rotate(180deg)")
                     default:
-                        return Svg.circle_svg()
+                        return new SvelteUIElement(Circle)
                 }
             })
         )
@@ -56,11 +58,11 @@ export default class Histogram<T> extends VariableUiElement {
             sortMode.map((m) => {
                 switch (m) {
                     case "count":
-                        return Svg.up_svg()
+                        return new SvelteUIElement(Up)
                     case "count-rev":
-                        return Svg.up_svg().SetStyle("transform: rotate(180deg)")
+                        return new SvelteUIElement(Up).SetStyle("transform: rotate(180deg)")
                     default:
-                        return Svg.circle_svg()
+                        return new SvelteUIElement(Circle)
                 }
             })
         )

src/UI/BigComponents/NoThemeResultButton.svelte

@@ -17,6 +17,7 @@
   import ToSvelte from "../Base/ToSvelte.svelte"
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
+  import Search_disable from "../../assets/svg/Search_disable.svelte"
 
   export let search: UIEventSource<string>
 
@@ -27,8 +28,8 @@
   <h5>{t.noMatchingThemes.toString()}</h5>
   <div class="flex justify-center">
     <button on:click={() => search.setData("")}>
-      <ToSvelte construct={Svg.search_disable_svg().SetClass("w-6 mr-2")} />
-      <Tr slot="message" t={t.noSearch} />
+      <Search_disable class="w-6 mr-2" />
+      <Tr t={t.noSearch} />
     </button>
   </div>
 </div>

src/UI/BigComponents/ShareScreen.svelte

@@ -14,6 +14,7 @@
   import Svg from "../../Svg"
   import ToSvelte from "../Base/ToSvelte.svelte"
   import { DocumentDuplicateIcon } from "@rgossiaux/svelte-heroicons/outline"
+  import Share from "../../assets/svg/Share.svelte"
 
   export let state: ThemeViewState
   const tr = Translations.t.general.sharescreen
@@ -73,7 +74,7 @@
   <div class="flex">
     {#if typeof navigator?.share === "function"}
       <button class="h-8 w-8 shrink-0 p-1" on:click={shareCurrentLink}>
-        <ToSvelte construct={Svg.share_svg()} />
+        <Share/>
       </button>
     {/if}
     {#if navigator.clipboard !== undefined}

src/UI/StylesheetTestGui.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import Svg from "../Svg"
   import Loading from "./Base/Loading.svelte"
-  import ToSvelte from "./Base/ToSvelte.svelte"
   import Community from "../assets/svg/Community.svelte"
+  import Login from "../assets/svg/Login.svelte"
 </script>
 
 <div>
@@ -23,7 +22,7 @@
     <div class="information">Some important information</div>
     <div class="thanks">Thank you! Operation successful</div>
 
-    <ToSvelte construct={Svg.login_svg().SetClass("w-12 h-12")} />
+    <Login class="w-12 h-12" />
     <Loading>Loading...</Loading>
   </div>
 
@@ -92,7 +91,7 @@
     <div class="information">Some important information</div>
     <div class="thanks">Thank you! Operation successful</div>
 
-    <ToSvelte construct={Svg.login_svg().SetClass("w-12 h-12")} />
+    <Login class="w-12 h-12" />
     <Loading>Loading...</Loading>
   </div>
 
@@ -134,7 +133,7 @@
     <div class="information">Some important information</div>
     <div class="thanks">Thank you! Operation successful</div>
 
-    <ToSvelte construct={Svg.login_svg().SetClass("w-12 h-12")} />
+    <Login class="w-12 h-12" />
     <Loading>Loading...</Loading>
     <div>
       <label for="html0">