Feature: add zoomable image when clicked

src/UI/Image/AttributedImage.svelte

@@ -0,0 +1,29 @@
+<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"
+
+    export let image: ProvidedImage
+    let fallbackImage: string = undefined
+    if (image.provider === Mapillary.singleton) {
+        fallbackImage = "./assets/svg/blocked.svg"
+    }
+
+    let imgEl: HTMLImageElement
+</script>
+
+
+<div class="relative">
+  <img bind:this={imgEl} src={image.url} on:error={(event) => {
+    if(fallbackImage){
+      imgEl.src = fallbackImage
+    }
+  }}>
+
+  <div class="absolute bottom-0 left-0">
+    <ImageAttribution {image}/>
+  </div>
+</div>

src/UI/Image/AttributedImage.ts

@@ -1,45 +0,0 @@
-import Combine from "../Base/Combine"
-import Attribution from "./Attribution"
-import Img from "../Base/Img"
-import ImageProvider from "../../Logic/ImageProviders/ImageProvider"
-import BaseUIElement from "../BaseUIElement"
-import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
-import { UIEventSource } from "../../Logic/UIEventSource"
-import { Feature } from "geojson"
-import { GeoOperations } from "../../Logic/GeoOperations"
-
-export class AttributedImage extends Combine {
-    constructor(imageInfo: {
-        id: string,
-        url: string;
-        provider?: ImageProvider;
-        date?: Date
-    }, feature?: Feature) {
-        let img: BaseUIElement
-        img = new Img(imageInfo.url, false, {
-            fallbackImage:
-                imageInfo.provider === Mapillary.singleton ? "./assets/svg/blocked.svg" : undefined,
-        })
-
-        let location: {
-            lon: number,
-            lat: number
-        } = undefined
-        if (feature) {
-
-            const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
-            location = { lon, lat }
-        }
-        let attr: BaseUIElement = undefined
-        if (imageInfo.provider !== undefined) {
-            attr = new Attribution(
-                UIEventSource.FromPromise(imageInfo.provider?.DownloadAttribution(imageInfo.url)),
-                imageInfo.provider?.SourceIcon(imageInfo.id, location),
-                imageInfo.date,
-            )
-        }
-
-        super([img, attr])
-        this.SetClass("block relative h-full")
-    }
-}

src/UI/Image/ImageAttribution.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+    import { LicenseInfo } from "../../Logic/ImageProviders/LicenseInfo"
+    import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+    import { Store, UIEventSource } from "../../Logic/UIEventSource"
+    import ToSvelte from "../Base/ToSvelte.svelte"
+    import { EyeIcon } from "@rgossiaux/svelte-heroicons/solid"
+
+    /**
+     * A small element showing the attribution of a single image
+     */
+    export let image: ProvidedImage
+    let license: Store<LicenseInfo> = UIEventSource.FromPromise(image.provider?.DownloadAttribution(image.url))
+    let icon = image.provider?.SourceIcon(image.id)?.SetClass("block h-8 w-8 pr-2")
+
+</script>
+
+
+{#if $license !== undefined}
+  <div class="flex bg-black text-white text-sm p-0.5 pl-5 pr-3 rounded-lg no-images">
+
+    {#if icon !== undefined}
+      <ToSvelte construct={icon} />
+    {/if}
+
+
+    <div class="flex flex-col">
+      {#if $license.title}
+        {#if $license.informationLocation}
+          <a href={$license.informationLocation} target="_blank" rel="noopener nofollower">{$license.title}</a>
+        {:else}
+          $license.title
+        {/if}
+      {/if}
+
+      {#if $license.artist}
+        <div class="font-bold">
+          {$license.artist}
+        </div>
+      {/if}
+
+      <div class="flex justify-between">
+
+        {#if $license.license !== undefined || $license.licenseShortName !== undefined}
+          <div>
+            {$license?.license ?? $license?.licenseShortName}
+          </div>
+        {/if}
+
+        {#if $license.date}
+          <div>
+            {$license.date.toLocaleDateString()}
+          </div>
+        {/if}
+      </div>
+
+      {#if $license.views}
+        <div class="flex justify-around self-center">
+        <EyeIcon class="w-4 h-4 pr-1"/>
+          {$license.views}
+        </div>
+      {/if}
+
+    </div>
+  </div>
+
+{/if}

src/UI/Image/ImageCarousel.ts

@@ -1,21 +1,22 @@
 import { SlideShow } from "./SlideShow"
-import { Store } from "../../Logic/UIEventSource"
+import { Store, UIEventSource } from "../../Logic/UIEventSource"
 import Combine from "../Base/Combine"
 import DeleteImage from "./DeleteImage"
-import { AttributedImage } from "./AttributedImage"
 import BaseUIElement from "../BaseUIElement"
 import Toggle from "../Input/Toggle"
-import ImageProvider from "../../Logic/ImageProviders/ImageProvider"
+import ImageProvider, { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
 import { OsmConnection } from "../../Logic/Osm/OsmConnection"
 import { Changes } from "../../Logic/Osm/Changes"
 import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
 import { Feature } from "geojson"
+import SvelteUIElement from "../Base/SvelteUIElement"
+import AttributedImage from "./AttributedImage.svelte"
 
 export class ImageCarousel extends Toggle {
     constructor(
         images: Store<{ id:string, key: string; url: string; provider: ImageProvider }[]>,
         tags: Store<any>,
-        state: { osmConnection?: OsmConnection; changes?: Changes; layout: LayoutConfig },
+        state: { osmConnection?: OsmConnection; changes?: Changes; layout: LayoutConfig, previewedImage?: UIEventSource<ProvidedImage> },
         feature: Feature
     ) {
         const uiElements = images.map(
@@ -23,7 +24,7 @@ export class ImageCarousel extends Toggle {
                 const uiElements: BaseUIElement[] = []
                 for (const url of imageURLS) {
                     try {
-                        let image = new AttributedImage(url, feature)
+                        let image: BaseUIElement = new SvelteUIElement(AttributedImage, {image: url})
 
                         if (url.key !== undefined) {
                             image = new Combine([
@@ -36,6 +37,7 @@ export class ImageCarousel extends Toggle {
                         image
                             .SetClass("w-full block")
                             .SetStyle("min-width: 50px; background: grey;")
+                            .onClick(() => state.previewedImage.setData(url))
                         uiElements.push(image)
                     } catch (e) {
                         console.error("Could not generate image element for", url.url, "due to", e)

src/UI/Image/ImageOperations.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">/**
+ * The 'imageOperations' previews an image and offers some extra tools (e.g. download)
+ */
+
+import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+import ImageAttribution from "./ImageAttribution.svelte"
+import ImagePreview from "./ImagePreview.svelte"
+import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid"
+import { Utils } from "../../Utils"
+
+export let image: ProvidedImage
+
+async function download() {
+    const response = await fetch(image.url)
+    const blob = await response.blob()
+    Utils.offerContentsAsDownloadableFile(blob, new URL(image.url).pathname.split("/").at(-1), {
+        mimetype: "image/jpg",
+    })
+}
+
+</script>
+
+<div class="w-full h-full relative">
+  <div class="absolute top-0 left-0">
+    <ImagePreview image={image} />
+  </div>
+  <div class="absolute bottom-0 left-0 w-full pointer-events-none flex justify-between items-end">
+    <div class="pointer-events-auto w-fit opacity-50 hover:opacity-100 transition-colors duration-200">
+      <ImageAttribution image={image} />
+    </div>
+
+    <button
+      class="no-image-background flex items-center pointer-events-auto bg-black opacity-50 hover:opacity-100 text-white transition-colors duration-200"
+      on:click={() => download()}>
+      <DownloadIcon class="w-6 h-6 px-2 opacity-100" />
+      Download
+    </button>
+  </div>
+
+
+</div>

src/UI/Image/ImagePreview.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { Store } from "../../Logic/UIEventSource"
+
+    /**
+     * The image preview allows to drag and zoom in to the image
+     */
+    import * as panzoom from "panzoom"
+    import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+
+    export let image : ProvidedImage
+    let panzoomInstance = undefined
+    let panzoomEl: HTMLElement
+
+    $: {
+        if (panzoomEl) {
+            panzoomInstance = panzoom(panzoomEl, { bounds: true,
+                boundsPadding: 1,
+                minZoom: 1,
+                maxZoom: 25
+            })
+        } else {
+            panzoomInstance?.dispose()
+        }
+    }
+
+</script>
+
+<img bind:this={panzoomEl} src={image.url} />
+ 

src/UI/Image/LinkableImage.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import { Store } from "../../Logic/UIEventSource"
+    import type { OsmTags } from "../../Models/OsmFeature"
+    import type { SpecialVisualizationState } from "../SpecialVisualization"
+    import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
+    import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
+    import LinkImageAction from "../../Logic/Osm/Actions/LinkImageAction"
+    import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
+    import { Tag } from "../../Logic/Tags/Tag"
+    import { GeoOperations } from "../../Logic/GeoOperations"
+    import type { Feature } from "geojson"
+    import Translations from "../i18n/Translations"
+    import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+    import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+    import AttributedImage from "./AttributedImage.svelte"
+    import SpecialTranslation from "../Popup/TagRendering/SpecialTranslation.svelte"
+
+    export let tags: Store<OsmTags>
+  export let lon: number
+  export let lat: number
+  export let state: SpecialVisualizationState
+  export let image: P4CPicture
+  export let feature: Feature
+  export let layer: LayerConfig
+
+  export let linkable = true
+  let isLinked = Object.values(tags.data).some((v) => image.pictureUrl === v)
+
+  const t = Translations.t.image.nearby
+  const c = [lon, lat]
+  const providedImage: ProvidedImage = {
+      url: image.thumbUrl ?? image.pictureUrl,
+      provider: AllImageProviders.byName(image.provider),
+      date: new Date(image.date),
+      id: Object.values(image.osmTags)[0]
+  }
+  let distance = Math.round(
+    GeoOperations.distanceBetween([image.coordinates.lng, image.coordinates.lat], c)
+  )
+
+  $: {
+    const currentTags = tags.data
+    const key = Object.keys(image.osmTags)[0]
+    const url = image.osmTags[key]
+    if (isLinked) {
+      const action = new LinkImageAction(currentTags.id, key, url, tags, {
+        theme: tags.data._orig_theme ??  state.layout.id,
+        changeType: "link-image",
+      })
+      state.changes.applyAction(action)
+    } else {
+      for (const k in currentTags) {
+        const v = currentTags[k]
+        if (v === url) {
+          const action = new ChangeTagAction(currentTags.id, new Tag(k, ""), currentTags, {
+            theme: tags.data._orig_theme ?? state.layout.id,
+            changeType: "remove-image",
+          })
+          state.changes.applyAction(action)
+        }
+      }
+    }
+  }
+</script>
+
+<div class="flex w-fit shrink-0 flex-col">
+  <AttributedImage image={providedImage} />
+  {#if linkable}
+    <label>
+      <input bind:checked={isLinked} type="checkbox" />
+      <SpecialTranslation t={t.link} {tags} {state} {layer} {feature} />
+    </label>
+  {/if}
+</div>

src/UI/Image/NearbyImages.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    /**
+     * Show nearby images which can be clicked
+     */
+    import type { OsmTags } from "../../Models/OsmFeature"
+    import { Store, UIEventSource } from "../../Logic/UIEventSource"
+    import type { SpecialVisualizationState } from "../SpecialVisualization"
+    import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
+    import NearbyImagesSearch from "../../Logic/Web/NearbyImagesSearch"
+    import LinkableImage from "./LinkableImage.svelte"
+    import type { Feature } from "geojson"
+    import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+    import Loading from "../Base/Loading.svelte"
+    import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
+    import Tr from "../Base/Tr.svelte"
+    import Translations from "../i18n/Translations"
+    import LoginToggle from "../Base/LoginToggle.svelte"
+
+    export let tags: Store<OsmTags>
+    export let state: SpecialVisualizationState
+    export let lon: number
+    export let lat: number
+    export let feature: Feature
+
+    export let linkable: boolean = true
+    export let layer: LayerConfig
+
+    let imagesProvider = new NearbyImagesSearch(
+        {
+            lon,
+            lat,
+            allowSpherical: new UIEventSource<boolean>(false),
+            blacklist: AllImageProviders.LoadImagesFor(tags),
+        },
+        state.indexedFeatures,
+    )
+
+    let images: Store<P4CPicture[]> = imagesProvider.store.map((images) => images.slice(0, 20))
+    let allDone = imagesProvider.allDone
+</script>
+<LoginToggle {state}>
+  <div class="interactive border-interactive rounded-2xl p-2">
+    <div class="flex justify-between">
+      <h4>
+        <Tr t={Translations.t.image.nearby.title} />
+      </h4>
+      <slot name="corner" />
+    </div>
+    {#if !$allDone}
+      <Loading />
+    {:else if $images.length === 0}
+      <Tr t={Translations.t.image.nearby.noNearbyImages} cls="alert" />
+    {:else}
+      <div class="flex w-full space-x-1 overflow-x-auto" style="scroll-snap-type: x proximity">
+        {#each $images as image (image.pictureUrl)}
+        <span class="w-fit shrink-0" style="scroll-snap-align: start">
+          <LinkableImage {tags} {image} {state} {lon} {lat} {feature} {layer} {linkable} />
+        </span>
+        {/each}
+      </div>
+    {/if}
+  </div>
+</LoginToggle>

src/UI/Image/NearbyImagesCollapsed.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { Store } from "../../Logic/UIEventSource"
+  import type { OsmTags } from "../../Models/OsmFeature"
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import type { Feature } from "geojson"
+  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+  import Translations from "../i18n/Translations"
+  import Tr from "../Base/Tr.svelte"
+  import NearbyImages from "./NearbyImages.svelte"
+  import Svg from "../../Svg"
+  import ToSvelte from "../Base/ToSvelte.svelte"
+  import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
+  import exp from "constants"
+  import Camera_plus from "../../assets/svg/Camera_plus.svelte"
+  import LoginToggle from "../Base/LoginToggle.svelte"
+
+  export let tags: Store<OsmTags>
+  export let state: SpecialVisualizationState
+  export let lon: number
+  export let lat: number
+  export let feature: Feature
+
+  export let linkable: boolean = true
+  export let layer: LayerConfig
+  const t = Translations.t.image.nearby
+
+  let expanded = false
+</script>
+<LoginToggle {state}>
+  
+{#if expanded}
+  <NearbyImages {tags} {state} {lon} {lat} {feature} {linkable}>
+    <XCircleIcon
+      slot="corner"
+      class="h-6 w-6 cursor-pointer"
+      on:click={() => {
+        expanded = false
+      }}
+    />
+  </NearbyImages>
+{:else}
+  <button
+    class="flex w-full items-center"
+    on:click={() => {
+      expanded = true
+    }}
+  >
+    <Camera_plus class="mr-2 block h-8 w-8 p-1" />
+    <Tr t={t.seeNearby} />
+  </button>
+{/if}
+</LoginToggle>