MapComplete/src/UI/Image/photoSphereViewerWrapper.ts

import "pannellum"

import { Feature, Geometry, Point } from "geojson"
import { GeoOperations } from "../../Logic/GeoOperations"
import { HotspotProperties, PanoramaView } from "../../Logic/ImageProviders/ImageProvider"


export class PhotoSphereViewerWrapper {

    private imageInfo: Feature<Point, PanoramaView>
    private readonly viewer: Pannellum.Viewer
    private nearbyFeatures: Feature<Geometry, HotspotProperties>[] = []

    constructor(container: HTMLElement, imageInfo: Feature<Point, PanoramaView>, nearbyFeatures?: Feature<Geometry, HotspotProperties>[]) {
        this.imageInfo = imageInfo
        this.viewer = pannellum.viewer(container,
            <any>{
                default: {
                    firstScene: imageInfo.properties.url,
                    sceneFadeDuration: 250
                },
                scenes: {
                    [imageInfo.properties.url]:
                        {
                            type: "equirectangular",
                            hfov: 110,
                            panorama: imageInfo.properties.url,
                            autoLoad: true,
                            hotSpots: [],
                            sceneFadeDuration: 250,
                            compass: true,
                            showControls: false,
                            northOffset: imageInfo.properties.northOffset,
                            horizonPitch: imageInfo.properties.pitchOffset
                        }
                }
            }
        )

        this.setNearbyFeatures(nearbyFeatures)
    }

    public calculatePitch(feature: Feature): number {
        const coors = this.imageInfo.geometry.coordinates
        const distance = GeoOperations.distanceBetween(
            <[number, number]>coors, GeoOperations.centerpointCoordinates(feature)
        )

        // In: -pi/2 up to pi/2
        const alpha = Math.atan(distance / 4) // in radians
        const degrees = alpha * 360 / (2 * Math.PI)
        return -degrees
    }

    private setPanorama(imageInfo: Feature<Point, PanoramaView>) {
        if (this.viewer?.getScene() === imageInfo?.properties?.url) {
            // Already the current scene
            return
        }
        this.clearHotspots()
        this.imageInfo = imageInfo
        this.viewer.addScene(imageInfo.properties.url, <any>{
            panorama: imageInfo.properties.url,
            northOffset: imageInfo.properties.northOffset,
            type: "equirectangular"
        })

        this.viewer.loadScene(imageInfo.properties.url, 0, imageInfo.properties.northOffset)
        this.setNearbyFeatures(this.nearbyFeatures)
    }

    private clearHotspots() {
        const hotspots = this.viewer.getConfig()["scenes"][this.imageInfo.properties.url].hotSpots ?? []
        for (const hotspot of hotspots) {
            this.viewer.removeHotSpot(hotspot?.id, this.imageInfo.properties.url)
        }
    }

    public setNearbyFeatures(nearbyFeatures: Feature<Geometry, HotspotProperties>[]) {
        const imageInfo = this.imageInfo
        const northOffs = imageInfo.properties.northOffset
        this.nearbyFeatures = nearbyFeatures
        this.clearHotspots()
        for (const f of nearbyFeatures ?? []) {
            if (f.properties.gotoPanorama?.properties?.url === this.imageInfo.properties.url) {
                continue // This is the current panorama, no need to show it
            }
            const yaw = GeoOperations.bearing(imageInfo, GeoOperations.centerpoint(f))
            let pitch = 0
            if (f.properties.pitch === "auto") {
                pitch = this.calculatePitch(f)
            } else if (!isNaN(f.properties.pitch)) {
                pitch = f.properties.pitch
            }
            this.viewer.addHotSpot({
                type: f.properties.gotoPanorama !== undefined ? "scene" : "info",
                yaw: (yaw - northOffs) % 360,
                pitch,
                text: f.properties.name,
                clickHandlerFunc: () => {
                    this.setPanorama(f.properties.gotoPanorama)
                }
            }, this.imageInfo.properties.url)
            if (f.properties.focus) {
                this.viewer.setYaw(yaw - northOffs)
            }
        }
    }


}