Merge master

src/UI/Image/AttributedImage.svelte

@@ -1,34 +1,36 @@
 <script lang="ts">
-    /**
-     * Shows an image with attribution
-     */
-    import ImageAttribution from "./ImageAttribution.svelte"
-    import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
-    import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
-    import { UIEventSource } from "../../Logic/UIEventSource"
+  /**
+   * Shows an image with attribution
+   */
+  import ImageAttribution from "./ImageAttribution.svelte"
+  import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+  import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
+  import { UIEventSource } from "../../Logic/UIEventSource"
 
-    export let image: ProvidedImage
-    let fallbackImage: string = undefined
-    if (image.provider === Mapillary.singleton) {
-        fallbackImage = "./assets/svg/blocked.svg"
-    }
+  export let image: ProvidedImage
+  let fallbackImage: string = undefined
+  if (image.provider === Mapillary.singleton) {
+    fallbackImage = "./assets/svg/blocked.svg"
+  }
 
-    let imgEl: HTMLImageElement
-    export let imgClass: string = undefined
-    export let previewedImage: UIEventSource<string>  = undefined
+  let imgEl: HTMLImageElement
+  export let imgClass: string = undefined
+  export let previewedImage: UIEventSource<ProvidedImage> = undefined
 </script>
 
-
 <div class="relative">
-  <img bind:this={imgEl} src={image.url} class={imgClass ?? ""} 
+  <img bind:this={imgEl}
+       class={imgClass ?? ""}
+       class:cursor-pointer={previewedImage !== undefined}
        on:click={() => {previewedImage?.setData(image)}}
        on:error={(event) => {
     if(fallbackImage){
       imgEl.src = fallbackImage
     }
-  }}>
+  }}
+       src={image.url}>
 
   <div class="absolute bottom-0 left-0">
-    <ImageAttribution {image}/>
+    <ImageAttribution {image} />
   </div>
 </div>