Merge feature/svelte into develop

UI/Base/Minimap.ts

@@ -3,7 +3,6 @@ import Loc from "../../Models/Loc"
 import BaseLayer from "../../Models/BaseLayer"
 import { UIEventSource } from "../../Logic/UIEventSource"
 import { BBox } from "../../Logic/BBox"
-import { deprecate } from "util"
 
 export interface MinimapOptions {
     background?: UIEventSource<BaseLayer>

UI/Base/MinimapImplementation.ts

@@ -23,7 +23,7 @@ import StrayClickHandler from "../../Logic/Actors/StrayClickHandler"
  * The stray-click-hanlders adds a marker to the map if no feature was clicked.
  * Shows the given uiToShow-element in the messagebox
  */
-export class StrayClickHandlerImplementation {
+class StrayClickHandlerImplementation {
     private _lastMarker
 
     constructor(
@@ -91,6 +91,7 @@ export class StrayClickHandlerImplementation {
         })
     }
 }
+
 export default class MinimapImplementation extends BaseUIElement implements MinimapObj {
     private static _nextId = 0
     public readonly leafletMap: UIEventSource<Map>

UI/Base/SubtleButton.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { Store } from "../../Logic/UIEventSource";
+  import BaseUIElement from "../BaseUIElement";
+  import Img from "./Img";
+  import Translations from "../i18n/Translations";
+  import { ImmutableStore } from "../../Logic/UIEventSource.js";
+
+  export let imageUrl: string | BaseUIElement = undefined;
+  export let message: string | BaseUIElement = undefined;
+  export let options: {
+    url?: string | Store<string>
+    newTab?: boolean
+    imgSize?: string
+    extraClasses?: string
+  } = {};
+
+  // Website to open when clicked
+  let href : Store<string> = undefined
+  if(options?.url){
+     href = typeof options?.url == "string" ? new ImmutableStore(options.url) : options.url;
+  }
+
+  let imgElem: HTMLElement;
+  let msgElem: HTMLElement;
+  let imgClasses = "block justify-center shrink-0 mr-4 " + (options?.imgSize ?? "h-11 w-11");
+
+  onMount(() => {
+    // Image
+    if (imgElem && imageUrl) {
+      let img: BaseUIElement;
+
+      if ((imageUrl ?? "") === "") {
+        img = undefined;
+      } else if (typeof imageUrl !== "string") {
+        img = imageUrl?.SetClass(imgClasses);
+      }
+      if (img) imgElem.replaceWith(img.ConstructElement());
+    }
+
+    // Message
+    if (msgElem && message) {
+      let msg = Translations.W(message)?.SetClass("block text-ellipsis no-images flex-shrink");
+      msgElem.replaceWith(msg.ConstructElement());
+    }
+  });
+</script>
+
+<svelte:element
+  class={(options.extraClasses??"") + 'flex hover:shadow-xl transition-[color,background-color,box-shadow] hover:bg-unsubtle'}
+  href={$href}
+  target={options?.newTab ? "_blank" : ""}
+  this={href === undefined ? "span" : "a"}
+>
+  <slot name="image">
+    {#if imageUrl !== undefined}
+      {#if typeof imageUrl === "string"}
+        <Img src={imageUrl} class={imgClasses+ " bg-red border border-black"}></Img>
+      {:else }
+        <template bind:this={imgElem} />
+      {/if}
+    {/if}
+  </slot>
+
+  <slot name="message">
+    <template bind:this={msgElem} />
+  </slot>
+</svelte:element>
+
+<style lang="scss">
+
+  span,
+  a {
+    @apply flex p-3 my-2 py-4 rounded-lg shrink-0;
+    @apply items-center w-full no-underline;
+    @apply bg-subtle text-black;
+
+    :global(span) {
+      @apply block text-ellipsis;
+    }
+  }
+</style>

UI/Base/SubtleButton.ts

@@ -1,13 +1,11 @@
-import Translations from "../i18n/Translations"
-import Combine from "./Combine"
 import BaseUIElement from "../BaseUIElement"
-import Link from "./Link"
-import Img from "./Img"
 import { Store, UIEventSource } from "../../Logic/UIEventSource"
 import { UIElement } from "../UIElement"
 import { VariableUiElement } from "./VariableUIElement"
 import Lazy from "./Lazy"
 import Loading from "./Loading"
+import SubtleButtonSvelte from "./SubtleButton.svelte"
+import SvelteUIElement from "./SvelteUIElement"
 
 export class SubtleButton extends UIElement {
     private readonly imageUrl: string | BaseUIElement
@@ -15,7 +13,7 @@ export class SubtleButton extends UIElement {
     private readonly options: {
         url?: string | Store<string>
         newTab?: boolean
-        imgSize?: string
+        imgSize?: string,
         extraClasses?: string
     }
 
@@ -25,9 +23,9 @@ export class SubtleButton extends UIElement {
         options: {
             url?: string | Store<string>
             newTab?: boolean
-            imgSize?: "h-11 w-11" | string
+            imgSize?: "h-11 w-11" | string,
             extraClasses?: string
-        } = undefined
+        } = {}
     ) {
         super()
         this.imageUrl = imageUrl
@@ -36,30 +34,11 @@ export class SubtleButton extends UIElement {
     }
 
     protected InnerRender(): string | BaseUIElement {
-        const classes =
-            "block flex p-3 my-2 bg-subtle rounded-lg hover:shadow-xl hover:bg-unsubtle transition-colors transition-shadow link-no-underline " +
-            (this?.options?.extraClasses ?? "")
-        const message = Translations.W(this.message)?.SetClass(
-            "block text-ellipsis no-images flex-shrink"
-        )
-        let img
-        const imgClasses =
-            "block justify-center flex-none mr-4 " + (this.options?.imgSize ?? "h-11 w-11")
-        if ((this.imageUrl ?? "") === "") {
-            img = undefined
-        } else if (typeof this.imageUrl === "string") {
-            img = new Img(this.imageUrl)?.SetClass(imgClasses)
-        } else {
-            img = this.imageUrl?.SetClass(imgClasses)
-        }
-        const button = new Combine([img, message]).SetClass("flex items-center group w-full")
-
-        if (this.options?.url == undefined) {
-            this.SetClass(classes)
-            return button
-        }
-
-        return new Link(button, this.options.url, this.options.newTab ?? false).SetClass(classes)
+        return new SvelteUIElement(SubtleButtonSvelte, {
+            imageUrl: this?.imageUrl ?? undefined,
+            message: this?.message ?? "",
+            options: this?.options ?? {},
+        })
     }
 
     public OnClickWithLoading(

UI/Base/SvelteUIElement.ts

@@ -0,0 +1,37 @@
+import BaseUIElement from "../BaseUIElement"
+
+import { SvelteComponentTyped } from "svelte"
+
+/**
+ * The SvelteUIComponent serves as a translating class which which wraps a SvelteElement into the BaseUIElement framework.
+ */
+export default class SvelteUIElement<
+    Props extends Record<string, any> = any,
+    Events extends Record<string, any> = any,
+    Slots extends Record<string, any> = any
+> extends BaseUIElement {
+    private readonly _svelteComponent: {
+        new (args: {
+            target: HTMLElement
+            props: Props
+            events?: Events
+            slots?: Slots
+        }): SvelteComponentTyped<Props, Events, Slots>
+    }
+    private readonly _props: Props
+
+    constructor(svelteElement, props: Props) {
+        super()
+        this._svelteComponent = svelteElement
+        this._props = props
+    }
+
+    protected InnerConstructElement(): HTMLElement {
+        const el = document.createElement("div")
+        new this._svelteComponent({
+            target: el,
+            props: this._props,
+        })
+        return el
+    }
+}

UI/Base/ToSvelte.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import BaseUIElement from "../BaseUIElement.js"
+  import { onMount } from "svelte"
+
+  export let construct: BaseUIElement | (() => BaseUIElement)
+  let elem: HTMLElement
+
+  onMount(() => {
+    let html =
+      typeof construct === "function"
+        ? construct().ConstructElement()
+        : construct.ConstructElement()
+
+    elem.replaceWith(html)
+  })
+</script>
+
+<span bind:this={elem} />