Merge branch 'develop'

src/UI/Image/ImageOperations.svelte

@@ -8,7 +8,7 @@
   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 { DownloadIcon, ExternalLinkIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { twMerge } from "tailwind-merge"
   import { UIEventSource } from "../../Logic/UIEventSource"
   import Loading from "../Base/Loading.svelte"
@@ -23,7 +23,7 @@
   export let nearbyFeatures:
     | Feature<Geometry, HotspotProperties>[]
     | Store<Feature<Geometry, HotspotProperties>[]> = []
-
+  let visitUrl = image.provider?.visitUrl(image)
   let isLoaded = new UIEventSource(false)
 </script>
 
@@ -39,22 +39,28 @@
 
   {#if $$slots["dot-menu-actions"]}
     <DotMenu dotsPosition="top-0 left-0" dotsSize="w-8 h-8" hideBackground>
-      <slot name="dot-menu-actions">
-        <button
-          class="no-image-background pointer-events-auto flex items-center"
-          on:click={() => ImageProvider.offerImageAsDownload(image)}
-        >
-          <DownloadIcon class="h-6 w-6 px-2 opacity-100" />
-          <Tr t={Translations.t.general.download.downloadImage} />
-        </button>
-      </slot>
+      <slot name="dot-menu-actions" />
+      <button
+        class="no-image-background pointer-events-auto flex items-center"
+        on:click={() => ImageProvider.offerImageAsDownload(image)}
+      >
+        <DownloadIcon class="h-6 w-6 px-2 opacity-100" />
+        <Tr t={Translations.t.general.download.downloadImage} />
+      </button>
+
+      {#if visitUrl !== undefined}
+        <a href={visitUrl} target="_blank" rel="noopener">
+          <ExternalLinkIcon class="w-6" />
+          <Tr t={Translations.t.image.openOnWebsite.Subs(image.provider)} />
+        </a>
+      {/if}
     </DotMenu>
   {/if}
   <div
     class="pointer-events-none absolute bottom-0 left-0 flex w-full flex-wrap items-end justify-between"
   >
     <div class="pointer-events-auto m-1 w-fit transition-colors duration-200">
-      <ImageAttribution {image} attributionFormat="large" />
+      <ImageAttribution image={$image} attributionFormat="large" />
     </div>
 
     <slot />

src/UI/Image/ImagePreview.svelte

@@ -3,24 +3,22 @@
    * The image preview allows to drag and zoom in to the image
    */
   import panzoom from "panzoom"
-  import type { HotspotProperties, ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
-  import { UIEventSource } from "../../Logic/UIEventSource"
+  import type { HotspotProperties, PanoramaView, ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+  import ImageProvider from "../../Logic/ImageProviders/ImageProvider"
+  import { Store, UIEventSource } from "../../Logic/UIEventSource"
   import Zoomcontrol from "../Zoomcontrol"
   import { onDestroy } from "svelte"
-  import type { PanoramaView } from "../../Logic/ImageProviders/ImageProvider"
   import { PhotoSphereViewerWrapper } from "./photoSphereViewerWrapper"
-
   import type { Feature, Geometry, Point } from "geojson"
-  import { Store } from "../../Logic/UIEventSource"
+  import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
 
   export let nearbyFeatures:
     | Feature<Geometry, HotspotProperties>[]
     | Store<Feature<Geometry, HotspotProperties>[]> = []
-  export let image: Partial<ProvidedImage>
+  export let image: Partial<ProvidedImage> & { url: string, id: string }
   let panzoomInstance = undefined
   let panzoomEl: HTMLElement
   let viewerEl: HTMLElement
-
   export let isLoaded: UIEventSource<boolean> = undefined
 
   onDestroy(Zoomcontrol.createLock())
@@ -32,10 +30,20 @@
   async function initPhotosphere() {
     const imageInfo: Feature<Point, PanoramaView> = await image.provider.getPanoramaInfo(image)
     if (imageInfo === undefined) {
-      console.error("Image info is apperently undefined for", image)
+      console.error("Image info is apparently undefined for", image)
       return
     }
     const viewer = new PhotoSphereViewerWrapper(viewerEl, imageInfo)
+    viewer.imageInfo.addCallbackAndRunD(panoramaInfo => {
+      let provider: ImageProvider
+      if (typeof panoramaInfo.properties.provider === "string") {
+        provider = AllImageProviders.byName(panoramaInfo.properties.provider)
+      } else {
+        provider = panoramaInfo.properties.provider
+      }
+      console.log(">>> Got:", panoramaInfo, "by", provider.name)
+      //actuallyDisplayed.set(image.properties.imageMeta)
+    })
     if (Array.isArray(nearbyFeatures)) {
       viewer.setNearbyFeatures(nearbyFeatures)
     } else {
@@ -77,5 +85,6 @@
       isLoaded?.setData(true)
     }}
     src={image.url_hd ?? image.url}
+    alt=""
   />
 {/if}

src/UI/Image/LinkableImage.svelte

@@ -7,10 +7,10 @@
   import LinkImageAction from "../../Logic/Osm/Actions/LinkImageAction"
   import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
   import { Tag } from "../../Logic/Tags/Tag"
-  import type { Feature } from "geojson"
+  import type { Feature, Point } from "geojson"
   import Translations from "../i18n/Translations"
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
-  import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+  import type { HotspotProperties, ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
   import AttributedImage from "./AttributedImage.svelte"
   import SpecialTranslation from "../Popup/TagRendering/SpecialTranslation.svelte"
   import LoginToggle from "../Base/LoginToggle.svelte"
@@ -30,7 +30,7 @@
 
 
   export let highlighted: UIEventSource<string> = undefined
-  export let nearbyFeatures: Feature[] | Store<Feature[]> = []
+  export let nearbyFeatures: Feature<Point, HotspotProperties>[] | Store<Feature<Point, HotspotProperties>[]> = []
   export let linkable = true
   let targetValue = Object.values(image.osmTags)[0]
   let isLinked = new UIEventSource(Object.values(tags.data).some((v) => targetValue === v))

src/UI/Image/NearbyImages.svelte

@@ -68,6 +68,7 @@
             northOffset: p4c.direction,
             rotation: p4c.direction,
             spherical: p4c.details.isSpherical ? "yes" : "no",
+            provider: p4c.provider
           },
         }
     )

src/UI/Image/photoSphereViewerWrapper.ts

@@ -3,18 +3,26 @@ import "pannellum"
 import { Feature, Geometry, Point } from "geojson"
 import { GeoOperations } from "../../Logic/GeoOperations"
 import { HotspotProperties, PanoramaView } from "../../Logic/ImageProviders/ImageProvider"
+import { Store, UIEventSource } from "../../Logic/UIEventSource"
 
 export class PhotoSphereViewerWrapper {
-    private imageInfo: Feature<Point, PanoramaView>
+    private _imageInfo: UIEventSource<NonNullable<Feature<Point, PanoramaView>>> = new UIEventSource(undefined)
+    public imageInfo: Store<NonNullable<Feature<Point, PanoramaView>>> = this._imageInfo
     private readonly viewer: Pannellum.Viewer
     private nearbyFeatures: Feature<Geometry, HotspotProperties>[] = []
 
+    /**
+     *
+     * @param container The HTML-element to bind to
+     * @param imageInfo An eventSource containing the panorama-info. Might be changed by this component if walking around;
+     * @param nearbyFeatures Nearby features to show a point about, e.g. to walk around
+     */
     constructor(
         container: HTMLElement,
         imageInfo: Feature<Point, PanoramaView>,
         nearbyFeatures?: Feature<Geometry, HotspotProperties>[]
     ) {
-        this.imageInfo = imageInfo
+        this._imageInfo.set(imageInfo)
         this.viewer = pannellum.viewer(container, <any>{
             default: {
                 firstScene: imageInfo.properties.url,
@@ -31,16 +39,17 @@ export class PhotoSphereViewerWrapper {
                     compass: true,
                     showControls: false,
                     northOffset: imageInfo.properties.northOffset,
-                    horizonPitch: imageInfo.properties.pitchOffset,
+                    horizonPitch: imageInfo.properties.pitchOffset
                 },
             },
         })
 
         this.setNearbyFeatures(nearbyFeatures)
+
     }
 
     public calculatePitch(feature: Feature): number {
-        const coors = this.imageInfo.geometry.coordinates
+        const coors = this.imageInfo.data.geometry.coordinates
         const distance = GeoOperations.distanceBetween(
             coors,
             GeoOperations.centerpointCoordinates(feature)
@@ -72,7 +81,6 @@ export class PhotoSphereViewerWrapper {
             return
         }
         this.clearHotspots()
-        this.imageInfo = imageInfo
         this.viewer.addScene(imageInfo.properties.url, <any>{
             panorama: imageInfo.properties.url,
             northOffset: imageInfo.properties.northOffset,
@@ -82,27 +90,29 @@ export class PhotoSphereViewerWrapper {
 
         this.viewer.loadScene(imageInfo.properties.url, 0, imageInfo.properties.northOffset)
         this.setNearbyFeatures(this.nearbyFeatures)
+        this._imageInfo.set(imageInfo)
+
     }
 
     private clearHotspots() {
-        const hotspots =
-            this.viewer.getConfig()["scenes"][this.imageInfo.properties.url].hotSpots ?? []
+        const currentUrl = this.imageInfo.data.properties.url
+        const hotspots = this.viewer.getConfig()["scenes"][currentUrl].hotSpots ?? []
         for (const hotspot of hotspots) {
-            this.viewer.removeHotSpot(hotspot?.id, this.imageInfo.properties.url)
+            this.viewer.removeHotSpot(hotspot?.id, currentUrl)
         }
     }
 
     public setNearbyFeatures(nearbyFeatures: Feature<Geometry, HotspotProperties>[]) {
-        const imageInfo = this.imageInfo
+        const imageInfo = this.imageInfo.data
         if (!this.imageInfo) {
             return
         }
         const northOffs = imageInfo.properties.northOffset
         this.nearbyFeatures = nearbyFeatures
         this.clearHotspots()
-        const centralImageLocation = this.imageInfo.geometry.coordinates
+        const centralImageLocation = imageInfo.geometry.coordinates
         for (const f of nearbyFeatures ?? []) {
-            if (f.properties.gotoPanorama?.properties?.url === this.imageInfo.properties.url) {
+            if (f.properties.gotoPanorama?.properties?.url === imageInfo.properties.url) {
                 continue // This is the current panorama, no need to show it
             }
             const yaw = GeoOperations.bearing(imageInfo, GeoOperations.centerpoint(f))
@@ -128,7 +138,7 @@ export class PhotoSphereViewerWrapper {
                         this.setPanorama(f.properties.gotoPanorama)
                     },
                 },
-                this.imageInfo.properties.url
+                imageInfo.properties.url
             )
             if (f.properties.focus) {
                 this.viewer.setYaw(yaw - northOffs)