From 236d4d87da0ba8941e14dd84451673077f6f3d2a Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Thu, 5 Jun 2025 11:38:29 +0200
Subject: [PATCH] Feature: photoSphereViewer exports the currently seen image

---
 src/UI/Image/photoSphereViewerWrapper.ts | 34 +++++++++++++++---------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/UI/Image/photoSphereViewerWrapper.ts b/src/UI/Image/photoSphereViewerWrapper.ts
index bdbfb6f64e..fc31fd90e7 100644
--- a/src/UI/Image/photoSphereViewerWrapper.ts
+++ b/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)