MapComplete/src/UI/Image/photoSphereViewerWrapper.ts

import "pannellum"

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


export class PhotoSphereViewerWrapper {

    private readonly imageInfo: Feature<Point, PanoramaView>
    private readonly viewer: Pannellum.Viewer


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

        /* for (let i = 0; i < 360; i += 45) {

             viewer.addHotSpot({
                 type: "info",
                 yaw: i,
                 text: "YAW " + i
             })
         }

         console.log("North offset:", imageInfo.properties.northOffset)
         viewer.addHotSpot({
             type: "info",
             yaw: -northOffs,
             text: "Supposedely north "
         })*/

        this.setNearbyFeatures(nearbyFeatures)
    }

    public setNearbyFeatures(nearbyFeatures: Feature[]) {
        const imageInfo = this.imageInfo
        const northOffs = imageInfo.properties.northOffset

        const hotspots = this.viewer.getConfig().hotSpots ?? []
        for (const hotspot of hotspots) {
            this.viewer.removeHotSpot(hotspot.id)
        }
        // this.viewer.removeHotSpot()
        for (const f of nearbyFeatures ?? []) {
            const yaw = GeoOperations.bearing(imageInfo, GeoOperations.centerpoint(f))
            this.viewer.addHotSpot({
                type: "info",
                yaw: (yaw - northOffs) % 360,
                text: f.properties.name
            })
        }
    }


}