Feature(360): actually show spheres when it is already linked

src/UI/Image/AttributedImage.svelte

@@ -21,6 +21,7 @@
   import LoadingPlaceholder from "../Base/LoadingPlaceholder.svelte"
   import { MenuState } from "../../Models/MenuState"
   import ThemeViewState from "../../Models/ThemeViewState"
+  import Panorama360 from "../../assets/svg/Panorama360.svelte"
 
   export let image: Partial<ProvidedImage> & { id: string; url: string }
   let fallbackImage: string = undefined
@@ -48,7 +49,7 @@
       previewedImage.addCallbackAndRun((previewedImage) => {
         showBigPreview.set(
           previewedImage !== undefined &&
-            (previewedImage?.id ?? previewedImage?.url) === (image.id ?? image.url)
+          (previewedImage?.id ?? previewedImage?.url) === (image.id ?? image.url)
         )
       })
     )
@@ -66,12 +67,12 @@
       type: "Feature",
       properties: {
         id: image.id,
-        rotation: image.rotation,
+        rotation: image.rotation
       },
       geometry: {
         type: "Point",
-        coordinates: [image.lon, image.lat],
-      },
+        coordinates: [image.lon, image.lat]
+      }
     }
     state?.geocodedImages.set([f])
   }
@@ -100,10 +101,10 @@
       <Tr t={Translations.t.image.processing} />
     </Loading>
   </div>
-{:else}
+{:else if image.status !== "hidden"}
   <div class="relative shrink-0">
     <div
-      class="relative w-fit"
+      class={"relative w-fit"}
       on:mouseenter={() => highlight()}
       on:mouseleave={() => highlight(false)}
     >
@@ -132,6 +133,16 @@
         src={image.url}
       />
 
+      {#if image.isSpherical}
+        <div class="absolute top-0 left-0 w-full h-full flex justify-center items-center pointer-events-none">
+          <div class="bg-black opacity-50 rounded-full p-[3.25rem]">
+            <div class="w-0 h-0 relative flex items-center justify-center">
+              <Panorama360 class="absolute w-16 h-16" color="#ffffff" />
+            </div>
+          </div>
+        </div>
+      {/if}
+
       {#if canZoom && loaded}
         <div
           class="bg-black-transparent absolute right-0 top-0 rounded-bl-full"
@@ -145,4 +156,7 @@
       <ImageAttribution {image} {attributionFormat} />
     </div>
   </div>
+
+{:else if image.status === "hidden"}
+  <div class="subtle">This image has been reported</div>
 {/if}

src/UI/Image/DeletableImage.svelte

@@ -5,9 +5,8 @@
   import Popup from "../Base/Popup.svelte"
   import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
   import NextButton from "../Base/NextButton.svelte"
-  import { UIEventSource } from "../../Logic/UIEventSource"
+  import { Store, UIEventSource } from "../../Logic/UIEventSource"
   import AttributedImage from "./AttributedImage.svelte"
-  import type { SpecialVisualizationState } from "../SpecialVisualization"
   import Dropdown from "../Base/Dropdown.svelte"
   import { REPORT_REASONS, ReportReason } from "panoramax-js"
   import { onDestroy } from "svelte"
@@ -19,10 +18,14 @@
   import ChangeTagAction from "../../Logic/Osm/Actions/ChangeTagAction"
   import { Tag } from "../../Logic/Tags/Tag"
   import { MenuState } from "../../Models/MenuState"
+  import type { Feature } from "geojson"
+  import ThemeViewState from "../../Models/ThemeViewState"
 
   export let image: ProvidedImage
-  export let state: SpecialVisualizationState
+  export let state: ThemeViewState
   export let tags: UIEventSource<Record<string, string>>
+  export let nearbyFeatures: Feature[] | Store<Feature[]> = []
+
   let showDeleteDialog = new UIEventSource(false)
   onDestroy(
     showDeleteDialog.addCallbackAndRunD((shown) => {
@@ -160,7 +163,7 @@
 
 <div class="relative w-fit shrink-0" style="scroll-snap-align: start">
   <div class="relative flex max-w-max items-center bg-gray-200">
-    <AttributedImage imgClass="carousel-max-height" {image} {state}>
+    <AttributedImage imgClass="carousel-max-height" {image} {state} {nearbyFeatures}>
       <svelte:fragment slot="dot-menu-actions">
         <button on:click={() => ImageProvider.offerImageAsDownload(image)}>
           <DownloadIcon />

src/UI/Image/ImageCarousel.svelte

@@ -1,15 +1,30 @@
 <script lang="ts">
   import { Store, UIEventSource } from "../../Logic/UIEventSource.js"
   import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
-  import type { SpecialVisualizationState } from "../SpecialVisualization"
   import DeletableImage from "./DeletableImage.svelte"
   import LoadingPlaceholder from "../Base/LoadingPlaceholder.svelte"
+  import type { Feature, Point } from "geojson"
+  import ThemeViewState from "../../Models/ThemeViewState"
+  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+  import { GeoOperations } from "../../Logic/GeoOperations"
 
   export let images: Store<ProvidedImage[]>
-  export let state: SpecialVisualizationState
+  export let state: ThemeViewState
   export let tags: UIEventSource<Record<string, string>>
-
+  export let feature: Feature
   export let estimated: Store<number>
+  export let layer: LayerConfig
+  let zoomToFeature: Feature<Point> = {
+    type: "Feature",
+    geometry: {
+      type: "Point",
+      coordinates: GeoOperations.centerpointCoordinates(feature)
+    },
+    properties: {
+      name: layer?.title?.GetRenderValue(feature.properties)?.Subs(feature.properties)?.txt ?? feature?.properties?.name,
+      focus: true
+    }
+  }
 </script>
 
 {#if $estimated > 0 && $images.length < 1}
@@ -18,7 +33,7 @@
   <div class="w-full overflow-x-auto" style="scroll-snap-type: x proximity">
     <div class="flex space-x-2">
       {#each $images as image (image.url)}
-        <DeletableImage {image} {state} {tags} />
+        <DeletableImage {image} {state} {tags} nearbyFeatures={[zoomToFeature]} />
       {/each}
     </div>
   </div>

src/UI/Image/ImagePreview.svelte

@@ -7,7 +7,7 @@
   import { UIEventSource } from "../../Logic/UIEventSource"
   import Zoomcontrol from "../Zoomcontrol"
   import { onDestroy } from "svelte"
-  import type { PanoramaView } from "./photoSphereViewerWrapper"
+  import type { PanoramaView } from "../../Logic/ImageProviders/ImageProvider"
   import { PhotoSphereViewerWrapper } from "./photoSphereViewerWrapper"
 
   import type { Feature, Point } from "geojson"