chore: automated housekeeping...

src/UI/Image/AttributedImage.svelte

@@ -31,14 +31,18 @@
   export let canZoom = previewedImage !== undefined
   let loaded = false
   let showBigPreview = new UIEventSource(false)
-  onDestroy(showBigPreview.addCallbackAndRun(shown => {
-    if (!shown) {
-      previewedImage.set(undefined)
-    }
-  }))
-  onDestroy(previewedImage.addCallbackAndRun(previewedImage => {
-    showBigPreview.set(previewedImage?.id === image.id)
-  }))
+  onDestroy(
+    showBigPreview.addCallbackAndRun((shown) => {
+      if (!shown) {
+        previewedImage.set(undefined)
+      }
+    })
+  )
+  onDestroy(
+    previewedImage.addCallbackAndRun((previewedImage) => {
+      showBigPreview.set(previewedImage?.id === image.id)
+    })
+  )
 
   function highlight(entered: boolean = true) {
     if (!entered) {
@@ -72,43 +76,49 @@
     </ImageOperations>
   </div>
   <div class="absolute top-4 right-4">
-    <CloseButton class="normal-background"
-                 on:click={() => {console.log("Closing");previewedImage.set(undefined)}}></CloseButton>
+    <CloseButton
+      class="normal-background"
+      on:click={() => {
+        console.log("Closing")
+        previewedImage.set(undefined)
+      }}
+    />
   </div>
 </Popup>
 {#if image.status !== undefined && image.status !== "ready"}
-  <div class="h-full flex flex-col justify-center">
+  <div class="flex h-full flex-col justify-center">
     <Loading>
-      <Tr t={Translations.t.image.processing}/>
+      <Tr t={Translations.t.image.processing} />
     </Loading>
   </div>
 {:else}
   <div class="relative shrink-0">
-    <div class="relative w-fit"
-         on:mouseenter={() => highlight()}
-         on:mouseleave={() => highlight(false)}
+    <div
+      class="relative w-fit"
+      on:mouseenter={() => highlight()}
+      on:mouseleave={() => highlight(false)}
     >
-
       <img
         bind:this={imgEl}
         on:load={() => (loaded = true)}
         class={imgClass ?? ""}
         class:cursor-zoom-in={canZoom}
         on:click={() => {
-        previewedImage?.set(image)
-    }}
+          previewedImage?.set(image)
+        }}
         on:error={() => {
-        if (fallbackImage) {
-          imgEl.src = fallbackImage
-        }
-      }}
+          if (fallbackImage) {
+            imgEl.src = fallbackImage
+          }
+        }}
         src={image.url}
       />
 
       {#if canZoom && loaded}
         <div
           class="bg-black-transparent absolute right-0 top-0 rounded-bl-full"
-          on:click={() => previewedImage.set(image)}>
+          on:click={() => previewedImage.set(image)}
+        >
           <MagnifyingGlassPlusIcon class="h-8 w-8 cursor-zoom-in pl-3 pb-3" color="white" />
         </div>
       {/if}

src/UI/Image/ImageOperations.svelte

@@ -56,7 +56,5 @@
     </div>
 
     <slot />
-
-
   </div>
 </div>

src/UI/Image/LinkableImage.svelte

@@ -35,7 +35,7 @@
     key: undefined,
     provider: AllImageProviders.byName(image.provider),
     date: new Date(image.date),
-    id: Object.values(image.osmTags)[0]
+    id: Object.values(image.osmTags)[0],
   }
 
   async function applyLink(isLinked: boolean) {
@@ -46,7 +46,7 @@
     if (isLinked) {
       const action = new LinkImageAction(currentTags.id, key, url, tags, {
         theme: tags.data._orig_theme ?? state.theme.id,
-        changeType: "link-image"
+        changeType: "link-image",
       })
       await state.changes.applyAction(action)
     } else {
@@ -55,7 +55,7 @@
         if (v === url) {
           const action = new ChangeTagAction(currentTags.id, new Tag(k, ""), currentTags, {
             theme: tags.data._orig_theme ?? state.theme.id,
-            changeType: "remove-image"
+            changeType: "remove-image",
           })
           state.changes.applyAction(action)
         }
@@ -67,9 +67,8 @@
 
   let element: HTMLDivElement
   if (highlighted) {
-
     onDestroy(
-      highlighted.addCallbackD(highlightedUrl => {
+      highlighted.addCallbackD((highlightedUrl) => {
         if (highlightedUrl === image.pictureUrl) {
           Utils.scrollIntoView(element)
         }

src/UI/Image/NearbyImages.svelte

@@ -25,7 +25,6 @@
   import { BBox } from "../../Logic/BBox"
   import PanoramaxLink from "../BigComponents/PanoramaxLink.svelte"
 
-
   export let tags: UIEventSource<OsmTags>
   export let state: SpecialVisualizationState
   export let lon: number
@@ -38,7 +37,7 @@
   let imagesProvider = state.nearbyImageSearcher
 
   let loadedImages = AllImageProviders.LoadImagesFor(tags).mapD(
-    (loaded) => new Set(loaded.map((img) => img.url)),
+    (loaded) => new Set(loaded.map((img) => img.url))
   )
   let imageState = imagesProvider.getImagesAround(lon, lat)
   let result: Store<P4CPicture[]> = imageState.images.mapD(
@@ -47,53 +46,61 @@
         .filter(
           (p: P4CPicture) =>
             !loadedImages.data.has(p.pictureUrl) && // We don't show any image which is already linked
-            !p.details.isSpherical,
+            !p.details.isSpherical
         )
         .slice(0, 25),
-    [loadedImages],
+    [loadedImages]
   )
 
-  let asFeatures = result.map(p4cs => p4cs.map(p4c => (<Feature<Point>>{
-    type: "Feature",
-    geometry: {
-      type: "Point",
-      coordinates: [p4c.coordinates.lng, p4c.coordinates.lat],
-    },
-    properties: {
-      id: p4c.pictureUrl,
-      rotation: p4c.direction,
-    },
-  })))
+  let asFeatures = result.map((p4cs) =>
+    p4cs.map(
+      (p4c) =>
+        <Feature<Point>>{
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [p4c.coordinates.lng, p4c.coordinates.lat],
+          },
+          properties: {
+            id: p4c.pictureUrl,
+            rotation: p4c.direction,
+          },
+        }
+    )
+  )
 
   let selected = new UIEventSource<P4CPicture>(undefined)
-  let selectedAsFeature = selected.mapD(s => {
-    return [<Feature<Point>>{
-      type: "Feature",
-      geometry: {
-        type: "Point",
-        coordinates: [s.coordinates.lng, s.coordinates.lat],
+  let selectedAsFeature = selected.mapD((s) => {
+    return [
+      <Feature<Point>>{
+        type: "Feature",
+        geometry: {
+          type: "Point",
+          coordinates: [s.coordinates.lng, s.coordinates.lat],
+        },
+        properties: {
+          id: s.pictureUrl,
+          selected: "yes",
+          rotation: s.direction,
+        },
       },
-      properties: {
-        id: s.pictureUrl,
-        selected: "yes",
-        rotation: s.direction,
-      },
-    }]
+    ]
   })
 
   let someLoading = imageState.state.mapD((stateRecord) =>
-    Object.values(stateRecord).some((v) => v === "loading"),
+    Object.values(stateRecord).some((v) => v === "loading")
   )
   let errors = imageState.state.mapD((stateRecord) =>
-    Object.keys(stateRecord).filter((k) => stateRecord[k] === "error"),
+    Object.keys(stateRecord).filter((k) => stateRecord[k] === "error")
   )
   let highlighted = new UIEventSource<string>(undefined)
 
-  onDestroy(highlighted.addCallbackD(hl => {
-      const p4c = result.data?.find(i => i.pictureUrl === hl)
+  onDestroy(
+    highlighted.addCallbackD((hl) => {
+      const p4c = result.data?.find((i) => i.pictureUrl === hl)
       selected.set(p4c)
-    },
-  ))
+    })
+  )
 
   let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
   let mapProperties = new MapLibreAdaptor(map, {
@@ -104,7 +111,6 @@
     location: new UIEventSource({ lon, lat }),
   })
 
-
   const geocodedImageLayer = new LayerConfig(<LayerConfigJson>geocoded_image)
   new ShowDataLayer(map, {
     features: new StaticFeatureSource(asFeatures),
@@ -115,15 +121,10 @@
     },
   })
 
-
-  ShowDataLayer.showMultipleLayers(
-    map,
-    new StaticFeatureSource([feature]),
-    state.theme.layers,
-  )
+  ShowDataLayer.showMultipleLayers(map, new StaticFeatureSource([feature]), state.theme.layers)
 
   onDestroy(
-    asFeatures.addCallbackAndRunD(features => {
+    asFeatures.addCallbackAndRunD((features) => {
       if (features.length == 0) {
         return
       }
@@ -132,7 +133,7 @@
         bbox = bbox.unionWith(BBox.get(f))
       }
       mapProperties.maxbounds.set(bbox.pad(4))
-    }),
+    })
   )
 
   new ShowDataLayer(map, {
@@ -142,8 +143,6 @@
       highlighted.set(feature.properties.id)
     },
   })
-
-
 </script>
 
 <div class="flex flex-col">
@@ -158,16 +157,23 @@
   {:else}
     <div class="flex w-full space-x-4 overflow-x-auto" style="scroll-snap-type: x proximity">
       {#each $result as image (image.pictureUrl)}
-        <span class="w-fit shrink-0" style="scroll-snap-align: start"
-              on:mouseenter={() => {highlighted.set(image.pictureUrl)}}
-              on:mouseleave={() =>{ highlighted.set(undefined); selected.set(undefined)}}
+        <span
+          class="w-fit shrink-0"
+          style="scroll-snap-align: start"
+          on:mouseenter={() => {
+            highlighted.set(image.pictureUrl)
+          }}
+          on:mouseleave={() => {
+            highlighted.set(undefined)
+            selected.set(undefined)
+          }}
         >
           <LinkableImage {tags} {image} {state} {feature} {layer} {linkable} {highlighted} />
         </span>
       {/each}
     </div>
   {/if}
-  <div class="w-full flex flex-wrap justify-end gap-x-8 pt-2">
+  <div class="flex w-full flex-wrap justify-end gap-x-8 pt-2">
     <PanoramaxLink
       large={false}
       mapProperties={{ zoom: new ImmutableStore(16), location: new ImmutableStore({ lon, lat }) }}
@@ -178,7 +184,6 @@
     />
   </div>
 
-
   <div class="my-2 flex justify-between">
     <div>
       {#if $someLoading && $result.length > 0}
@@ -193,7 +198,6 @@
     </div>
   </div>
 
-
   <div class="h-48">
     <MaplibreMap interactive={false} {map} {mapProperties} />
   </div>

src/UI/Image/NearbyImagesCollapsed.svelte

@@ -30,7 +30,13 @@
 </script>
 
 {#if enableLogin.data}
-  <button on:click={() => {shown.set(!shown.data)}}><Tr t={t.seeNearby}/> </button>
+  <button
+    on:click={() => {
+      shown.set(!shown.data)
+    }}
+  >
+    <Tr t={t.seeNearby} />
+  </button>
   <Popup {shown} bodyPadding="p-4">
     <span slot="header">
       <Tr t={t.seeNearby} />

src/UI/Image/UploadImage.svelte

@@ -49,16 +49,20 @@
         }
 
         if (layer?.id === "note") {
-          const uploadResult = await state?.imageUploadManager.uploadImageWithLicense(tags.data.id,
+          const uploadResult = await state?.imageUploadManager.uploadImageWithLicense(
+            tags.data.id,
             state.osmConnection.userDetails.data?.name ?? "Anonymous",
-            file, "image", noBlur)
+            file,
+            "image",
+            noBlur
+          )
           if (!uploadResult) {
             return
           }
           const url = uploadResult.absoluteUrl
           await state.osmConnection.addCommentToNote(tags.data.id, url)
           NoteCommentElement.addCommentTo(url, <UIEventSource<any>>tags, {
-            osmConnection: state.osmConnection
+            osmConnection: state.osmConnection,
           })
           return
         }
@@ -88,7 +92,7 @@
       multiple={true}
       on:submit={(e) => handleFiles(e.detail)}
     >
-      <div class="flex items-center text-2xl w-full justify-center">
+      <div class="flex w-full items-center justify-center text-2xl">
         {#if image !== undefined}
           <img src={image} aria-hidden="true" />
         {:else}
@@ -98,19 +102,17 @@
           {labelText}
         {:else}
           <div class="flex flex-col">
-
             <Tr t={t.addPicture} />
             {#if noBlur}
-          <span class="subtle text-sm">
-            <Tr t={t.upload.noBlur}/>
-          </span>
+              <span class="subtle text-sm">
+                <Tr t={t.upload.noBlur} />
+              </span>
             {/if}
           </div>
         {/if}
-
       </div>
     </FileSelector>
-    <div class="text-xs subtle italic">
+    <div class="subtle text-xs italic">
       <Tr t={Translations.t.general.attribution.panoramaxLicenseCCBYSA} />
       <span class="mx-1">—</span>
       <Tr t={t.respectPrivacy} />