Feature(360): improve showing images, improve typing

src/UI/Image/AttributedImage.svelte

@@ -5,7 +5,7 @@
   import ImageAttribution from "./ImageAttribution.svelte"
   import { Store } from "../../Logic/UIEventSource"
 
-  import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+  import type { HotspotProperties, ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
   import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
   import { UIEventSource } from "../../Logic/UIEventSource"
   import { MagnifyingGlassPlusIcon } from "@babeard/svelte-heroicons/outline"
@@ -13,7 +13,7 @@
   import ImageOperations from "./ImageOperations.svelte"
   import Popup from "../Base/Popup.svelte"
   import { onDestroy } from "svelte"
-  import type { Feature, Point } from "geojson"
+  import type { Feature, Geometry, Point } from "geojson"
   import Loading from "../Base/Loading.svelte"
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
@@ -35,7 +35,7 @@
   export let attributionFormat: "minimal" | "medium" | "large" = "medium"
   let previewedImage: UIEventSource<Partial<ProvidedImage>> = MenuState.previewedImage
   export let canZoom = previewedImage !== undefined
-  export let nearbyFeatures: Feature[] | Store<Feature[]> = []
+  export let nearbyFeatures: Feature<Geometry, HotspotProperties>[] | Store<Feature<Geometry, HotspotProperties>[]> = []
 
   let loaded = false
   let showBigPreview = new UIEventSource(false)
@@ -76,6 +76,7 @@
     }
     state?.geocodedImages.set([f])
   }
+
 </script>
 
 <Popup shown={showBigPreview} bodyPadding="p-0" dismissable={true}>

src/UI/Image/ImageCarousel.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { Store, UIEventSource } from "../../Logic/UIEventSource.js"
-  import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+  import type { HotspotProperties, ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
   import DeletableImage from "./DeletableImage.svelte"
   import LoadingPlaceholder from "../Base/LoadingPlaceholder.svelte"
-  import type { Feature, Point } from "geojson"
+  import type { Feature, Geometry } from "geojson"
   import ThemeViewState from "../../Models/ThemeViewState"
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
   import { GeoOperations } from "../../Logic/GeoOperations"
@@ -14,7 +14,7 @@
   export let feature: Feature
   export let estimated: Store<number>
   export let layer: LayerConfig
-  let zoomToFeature: Feature<Point> = {
+  let zoomToFeature: Feature<Geometry, HotspotProperties> = {
     type: "Feature",
     geometry: {
       type: "Point",

src/UI/Image/ImageOperations.svelte

@@ -4,6 +4,7 @@
    */
 
   import ImageProvider from "../../Logic/ImageProviders/ImageProvider"
+  import type { HotspotProperties } from "../../Logic/ImageProviders/ImageProvider"
   import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
   import ImageAttribution from "./ImageAttribution.svelte"
   import ImagePreview from "./ImagePreview.svelte"
@@ -14,14 +15,15 @@
   import Tr from "../Base/Tr.svelte"
   import Translations from "../i18n/Translations"
   import DotMenu from "../Base/DotMenu.svelte"
-  import type { Feature } from "geojson"
+  import type { Feature, Geometry } from "geojson"
   import { Store } from "../../Logic/UIEventSource"
 
   export let image: Partial<ProvidedImage> & { id: string; url: string }
   export let clss: string = undefined
-  export let nearbyFeatures: Feature[] | Store<Feature[]> = []
+  export let nearbyFeatures: Feature<Geometry, HotspotProperties>[] | Store<Feature<Geometry, HotspotProperties>[]> = []
 
   let isLoaded = new UIEventSource(false)
+  console.log(">>> slots are", $$slots)
 </script>
 
 <div class={twMerge("relative h-full w-full", clss)}>
@@ -34,6 +36,7 @@
     <ImagePreview {image} {isLoaded} {nearbyFeatures} />
   </div>
 
+  {#if $$slots["dot-menu-actions"]}
   <DotMenu dotsPosition="top-0 left-0" dotsSize="w-8 h-8" hideBackground>
     <slot name="dot-menu-actions">
       <button
@@ -45,6 +48,7 @@
       </button>
     </slot>
   </DotMenu>
+  {/if}
   <div
     class="pointer-events-none absolute bottom-0 left-0 flex w-full flex-wrap items-end justify-between"
   >

src/UI/Image/ImagePreview.svelte

@@ -3,18 +3,18 @@
    * The image preview allows to drag and zoom in to the image
    */
   import panzoom from "panzoom"
-  import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
+  import type { HotspotProperties, ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
   import { 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, Point } from "geojson"
+  import type { Feature, Geometry, Point } from "geojson"
   import { Store } from "../../Logic/UIEventSource"
 
 
-  export let nearbyFeatures: Feature[] | Store<Feature[]> = []
+  export let nearbyFeatures: Feature<Geometry, HotspotProperties>[] | Store<Feature<Geometry, HotspotProperties>[]> = []
   export let image: Partial<ProvidedImage>
   let panzoomInstance = undefined
   let panzoomEl: HTMLElement
@@ -25,9 +25,12 @@
   onDestroy(Zoomcontrol.createLock())
 
   async function initPhotosphere() {
-    let f: Feature<Point, PanoramaView> = await image.provider.getPanoramaInfo(image)
-
-    const viewer = new PhotoSphereViewerWrapper(viewerEl, f)
+    const imageInfo: Feature<Point, PanoramaView> = await image.provider.getPanoramaInfo(image)
+    if (imageInfo === undefined) {
+      console.error("Image info is apperently undefined for", image)
+      return
+    }
+    const viewer = new PhotoSphereViewerWrapper(viewerEl, imageInfo)
     if (Array.isArray(nearbyFeatures)) {
       viewer.setNearbyFeatures(nearbyFeatures)
     } else {

src/UI/Image/LinkableImage.svelte

@@ -2,7 +2,6 @@
   import { UIEventSource } from "../../Logic/UIEventSource"
   import type { Store } from "../../Logic/UIEventSource"
   import type { OsmTags } from "../../Models/OsmFeature"
-  import type { SpecialVisualizationState } from "../SpecialVisualization"
   import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
   import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
   import LinkImageAction from "../../Logic/Osm/Actions/LinkImageAction"
@@ -17,8 +16,11 @@
   import LoginToggle from "../Base/LoginToggle.svelte"
   import { onDestroy } from "svelte"
   import { Utils } from "../../Utils"
+  import ThemeViewState from "../../Models/ThemeViewState"
+  import { MenuState } from "../../Models/MenuState"
+
   export let tags: UIEventSource<OsmTags>
-  export let state: SpecialVisualizationState
+  export let state: ThemeViewState
   export let image: P4CPicture
   export let feature: Feature
   export let layer: LayerConfig
@@ -28,6 +30,11 @@
   export let linkable = true
   let targetValue = Object.values(image.osmTags)[0]
   let isLinked = new UIEventSource(Object.values(tags.data).some((v) => targetValue === v))
+  isLinked.addCallbackAndRun(linked => {
+    if (linked) {
+      MenuState.previewedImage.set(undefined)
+    }
+  })
   const t = Translations.t.image.nearby
   const providedImage: ProvidedImage = {
     url: image.thumbUrl ?? image.pictureUrl,
@@ -38,6 +45,7 @@
     id: Object.values(image.osmTags)[0],
     isSpherical: image.details.isSpherical
   }
+
   async function applyLink(isLinked: boolean) {
     console.log("Applying linked image", isLinked, targetValue)
     const currentTags = tags.data
@@ -46,7 +54,7 @@
     if (isLinked) {
       const action = new LinkImageAction(currentTags.id, key, url, tags, {
         theme: tags.data._orig_theme ?? state.theme.id,
-        changeType: "link-image",
+        changeType: "link-image"
       })
       await state.changes.applyAction(action)
     } else {
@@ -55,7 +63,7 @@
         if (v === url) {
           const action = new ChangeTagAction(currentTags.id, new Tag(k, ""), currentTags, {
             theme: tags.data._orig_theme ?? state.theme.id,
-            changeType: "remove-image",
+            changeType: "remove-image"
           })
           state.changes.applyAction(action)
         }
@@ -89,7 +97,21 @@
     {nearbyFeatures}
     imgClass="max-h-64 w-auto sm:h-32 md:h-64"
     attributionFormat="minimal"
-  />
+  >
+    <svelte:fragment slot="dot-menu-actions">
+
+      <LoginToggle {state} silentFail={true} hiddenFail={true}>
+
+        {#if linkable}
+          <label>
+            <input bind:checked={$isLinked} type="checkbox" />
+            <SpecialTranslation t={t.link} {tags} {state} {layer} {feature} />
+          </label>
+        {/if}
+      </LoginToggle>
+    </svelte:fragment>
+
+  </AttributedImage>
   <LoginToggle {state} silentFail={true}>
     {#if linkable}
       <label>

src/UI/Image/photoSphereViewerWrapper.ts

@@ -78,6 +78,9 @@ export class PhotoSphereViewerWrapper {
 
     public setNearbyFeatures(nearbyFeatures: Feature<Geometry, HotspotProperties>[]) {
         const imageInfo = this.imageInfo
+        if (!this.imageInfo) {
+            return
+        }
         const northOffs = imageInfo.properties.northOffset
         this.nearbyFeatures = nearbyFeatures
         this.clearHotspots()