Feature(360): attempt to fix CSP

scripts/generateLayouts.ts

@@ -426,7 +426,7 @@ class GenerateLayouts extends Script {
         const csp: Record<string, string> = {
             "default-src": "'self'",
             "child-src": "'self' blob: ",
-            "img-src": "* data:", // maplibre depends on 'data:' to load
+            "img-src": "* data: blob:", // maplibre depends on 'data:' to load
             "report-to": "https://report.mapcomplete.org/csp",
             "worker-src": "'self' blob:", // Vite somehow loads the worker via a 'blob'
             "style-src": "'self' 'unsafe-inline'", // unsafe-inline is needed to change the default background pin colours

src/Logic/ImageProviders/ImageProvider.ts

@@ -33,6 +33,30 @@ export interface PanoramaView {
     pitchOffset?: number
 }
 
+/**
+ * The property of "nearbyFeatures" in ImagePreview.svelte.
+ * These properties declare how they are rendered
+ */
+export interface HotspotProperties {
+    /**
+     * The popup text when hovering
+     */
+    name: string
+
+    /**
+     * If true: the panorama view will automatically turn towards this object
+     */
+    focus: boolean
+    /**
+     * The pitch degrees to display this.
+     * If "auto": will determine the pitch automatically based on distance
+     */
+    pitch: number | "auto"
+
+    gotoPanorama: Feature<Point, PanoramaView>
+
+}
+
 export default abstract class ImageProvider {
     public abstract readonly defaultKeyPrefixes: string[]
 

src/UI/Image/ImagePreview.svelte

@@ -6,7 +6,7 @@
   import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
   import { UIEventSource } from "../../Logic/UIEventSource"
   import Zoomcontrol from "../Zoomcontrol"
-  import { getContext, onDestroy } from "svelte"
+  import { onDestroy } from "svelte"
   import type { PanoramaView } from "./photoSphereViewerWrapper"
   import { PhotoSphereViewerWrapper } from "./photoSphereViewerWrapper"
 

src/UI/Image/NearbyImages.svelte

@@ -25,6 +25,7 @@
   import { BBox } from "../../Logic/BBox"
   import PanoramaxLink from "../BigComponents/PanoramaxLink.svelte"
   import { GeoOperations } from "../../Logic/GeoOperations"
+  import type { PanoramaView } from "../../Logic/ImageProviders/ImageProvider"
 
   export let tags: UIEventSource<OsmTags>
   export let state: SpecialVisualizationState
@@ -55,14 +56,16 @@
   let asFeatures = result.map((p4cs) =>
     p4cs.map(
       (p4c) =>
-        <Feature<Point>>{
+        <Feature<Point, PanoramaView>>{
           type: "Feature",
           geometry: {
             type: "Point",
             coordinates: [p4c.coordinates.lng, p4c.coordinates.lat]
           },
-          properties: {
+          properties: <PanoramaView>{
             id: p4c.pictureUrl,
+            url: p4c.pictureUrl,
+            northOffset: p4c.direction,
             rotation: p4c.direction,
             spherical: p4c.details.isSpherical ? "yes" : "no"
           }
@@ -145,15 +148,24 @@
       highlighted.set(feature.properties.id)
     }
   })
-  let nearbyFeatures: Feature[] = [{
+  let nearbyFeatures: Store<Feature[]> = asFeatures.map(nearbyPoints => {
-    type: "Feature",
+    return [{
-    geometry: { type: "Point", coordinates: GeoOperations.centerpointCoordinates(feature) },
+      type: "Feature",
-    properties: {
+      geometry: { type: "Point", coordinates: GeoOperations.centerpointCoordinates(feature) },
-      name: layer.title?.GetRenderValue(feature.properties).Subs(feature.properties).txt,
+      properties: {
-      focus: true
+        name: layer.title?.GetRenderValue(feature.properties).Subs(feature.properties).txt,
-    }
+        focus: true
-  }
+      }
-  ]
+    }, ...nearbyPoints.filter(p => p.properties.spherical === "yes").map(f => ({
+      ...f, properties: {
+        name: "Nearby panorama",
+        pitch: "auto",
+        type: "scene",
+        gotoPanorama: f
+      }
+    }))
+    ]
+  })
 
   onDestroy(
     tags.addCallbackAndRunD((tags) => {

src/UI/Image/photoSphereViewerWrapper.ts

@@ -1,65 +1,106 @@
 import "pannellum"
 
-import { Feature, Point } from "geojson"
+import { Feature, Geometry, Point } from "geojson"
 import { GeoOperations } from "../../Logic/GeoOperations"
-import { PanoramaView } from "../../Logic/ImageProviders/ImageProvider"
+import { HotspotProperties, PanoramaView } from "../../Logic/ImageProviders/ImageProvider"
 
 
 export class PhotoSphereViewerWrapper {
 
-    private readonly imageInfo: Feature<Point, PanoramaView>
+    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>[]) {
-    constructor(container: HTMLElement, imageInfo: Feature<Point, PanoramaView>, nearbyFeatures?: Feature[]) {
         this.imageInfo = imageInfo
-        this.viewer = pannellum.viewer(container, {
+        this.viewer = pannellum.viewer(container,
-            type: "equirectangular",
+            <any>{
-            hfov: 110,
+                default: {
-            panorama: imageInfo.properties.url,
+                    firstScene: imageInfo.properties.url,
-            autoLoad: true,
+                    sceneFadeDuration: 250
-            hotSpots: [],
+                },
-            compass: true,
+                scenes: {
-            showControls: false,
+                    [imageInfo.properties.url]:
-            northOffset: imageInfo.properties.northOffset,
+                        {
-            horizonPitch: imageInfo.properties.pitchOffset
+                            type: "equirectangular",
-        })
+                            hfov: 110,
-
+                            panorama: imageInfo.properties.url,
-        /* for (let i = 0; i < 360; i += 45) {
+                            autoLoad: true,
-
+                            hotSpots: [],
-             viewer.addHotSpot({
+                            sceneFadeDuration: 250,
-                 type: "info",
+                            compass: true,
-                 yaw: i,
+                            showControls: false,
-                 text: "YAW " + i
+                            northOffset: imageInfo.properties.northOffset,
-             })
+                            horizonPitch: imageInfo.properties.pitchOffset
-         }
+                        }
-
+                }
-         console.log("North offset:", imageInfo.properties.northOffset)
+            }
-         viewer.addHotSpot({
+        )
-             type: "info",
-             yaw: -northOffs,
-             text: "Supposedely north "
-         })*/
 
         this.setNearbyFeatures(nearbyFeatures)
     }
 
-    public setNearbyFeatures(nearbyFeatures: Feature[]) {
+    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
-        const hotspots = this.viewer.getConfig().hotSpots ?? []
+        this.clearHotspots()
-        for (const hotspot of hotspots) {
-            this.viewer.removeHotSpot(hotspot.id)
-        }
-        // this.viewer.removeHotSpot()
         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: "info",
+                type: f.properties.gotoPanorama !== undefined ? "scene" : "info",
                 yaw: (yaw - northOffs) % 360,
-                text: f.properties.name
+                pitch,
-            })
+                text: f.properties.name,
+                clickHandlerFunc: () => {
+                    this.setPanorama(f.properties.gotoPanorama)
+                }
+            }, this.imageInfo.properties.url)
             if (f.properties.focus) {
                 this.viewer.setYaw(yaw - northOffs)
             }