Merge branch 'develop' into feature/json-editor

src/UI/Base/Checkbox.svelte

@@ -6,10 +6,14 @@
    */
   export let selected: UIEventSource<boolean>
   let _c: boolean = selected.data ?? true
+  let id = `checkbox-input-${Math.round(Math.random()*100000000)}`
   $: selected.set(_c)
+  selected.addCallbackD(s => {
+      _c = s
+  })
 </script>
 
 <label class="no-image-background flex items-center gap-1">
-  <input bind:checked={_c} type="checkbox" />
+  <input bind:checked={_c} type="checkbox" {id} />
   <slot />
 </label>

src/UI/Base/DirectionIndicator.svelte

@@ -39,9 +39,9 @@
 
   let relativeDirections = Translations.t.general.visualFeedback.directionsRelative
   let absoluteDirections = Translations.t.general.visualFeedback.directionsAbsolute
-  
-  function round10(n :number){
-    if(n < 50){
+
+  function round10(n: number) {
+    if (n < 50) {
       return n
     }
     return Math.round(n / 10) * 10
@@ -132,7 +132,10 @@
   so we use a 'div' and add on:click manually
   -->
   <div
-    class={twMerge("soft relative flex justify-center items-center border border-black rounded-full cursor-pointer p-1", size)}
+    class={twMerge(
+      "soft relative flex cursor-pointer items-center justify-center rounded-full border border-black p-1",
+      size
+    )}
     on:click={() => focusMap()}
     use:ariaLabelStore={label}
   >
@@ -140,18 +143,18 @@
   </div>
 {:else}
   <div
-    class={twMerge("soft relative rounded-full border-black border", size)}
+    class={twMerge("soft relative rounded-full border border-black", size)}
     on:click={() => focusMap()}
     use:ariaLabelStore={label}
   >
     <div
       class={twMerge(
-        "absolute top-0 left-0 flex items-center justify-center break-words text-xs cursor-pointer",
+        "absolute top-0 left-0 flex cursor-pointer items-center justify-center break-words text-xs",
         size
       )}
     >
       <div aria-hidden="true">
-      {GeoOperations.distanceToHuman($bearingAndDistGps?.dist)}
+        {GeoOperations.distanceToHuman($bearingAndDistGps?.dist)}
       </div>
       <div class="offscreen">
         {$label}
@@ -170,11 +173,11 @@
 
 <style>
   .offscreen {
-      clip: rect(1px, 1px, 1px, 1px);
-      height: 1px;
-      overflow: hidden;
-      position: absolute;
-      white-space: nowrap; /* added line */
-      width: 1px;
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap; /* added line */
+    width: 1px;
   }
 </style>

src/UI/Base/FileSelector.svelte

@@ -16,19 +16,22 @@
     if (e.target["id"] == id) {
       return
     }
-    if(formElement.contains(e.target) || document.getElementsByClassName("selected-element-view")[0]?.contains(e.target)){
+    if (
+      formElement.contains(e.target) ||
+      document.getElementsByClassName("selected-element-view")[0]?.contains(e.target)
+    ) {
       e.preventDefault()
-      
-      if(e.type === "drop"){
+
+      if (e.type === "drop") {
         console.log("Got a 'drop'", e)
         drawAttention = false
         dispatcher("submit", e.dataTransfer.files)
         return
       }
-      
+
       drawAttention = true
       e.dataTransfer.dropEffect = "copy"
-      
+
       return
       /*
       drawAttention = false
@@ -50,7 +53,6 @@
     window.removeEventListener("dragover", handleDragEvent)
     window.removeEventListener("drop", handleDragEvent)
   })
-
 </script>
 
 <form

src/UI/Base/FloatOver.svelte

@@ -28,7 +28,7 @@
   style="z-index: 21"
   use:trapFocus
 >
-  <div class="h-full content normal-background" on:click|stopPropagation={() => {}}>
+  <div class="content normal-background h-full" on:click|stopPropagation={() => {}}>
     <div class="h-full rounded-xl">
       <slot />
     </div>

src/UI/Base/LoginButton.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <button class={clss} on:click={() => osmConnection.AttemptLogin()} style="margin-left: 0">
-  <Login class="w-12 m-1" />
+  <Login class="m-1 w-12" />
   <slot>
     <Tr t={Translations.t.general.loginWithOpenStreetMap} />
   </slot>

src/UI/Base/ToSvelte.svelte

@@ -8,7 +8,7 @@
   onMount(() => {
     const uiElem = typeof construct === "function" ? construct() : construct
     html = uiElem?.ConstructElement()
-    
+
     if (html !== undefined) {
       elem?.replaceWith(html)
     }