2023-12-05 18:35:18 +01:00
|
|
|
<script lang="ts">
|
2023-12-19 22:08:00 +01:00
|
|
|
/**
|
|
|
|
|
* The image preview allows to drag and zoom in to the image
|
|
|
|
|
*/
|
|
|
|
|
import panzoom from "panzoom"
|
2025-06-16 14:46:12 +02:00
|
|
|
import type {
|
|
|
|
|
HotspotProperties,
|
|
|
|
|
PanoramaView,
|
|
|
|
|
ProvidedImage,
|
|
|
|
|
} from "../../Logic/ImageProviders/ImageProvider"
|
2025-06-05 12:21:17 +02:00
|
|
|
import ImageProvider from "../../Logic/ImageProviders/ImageProvider"
|
|
|
|
|
import { Store, UIEventSource } from "../../Logic/UIEventSource"
|
2024-01-11 04:00:56 +01:00
|
|
|
import Zoomcontrol from "../Zoomcontrol"
|
2025-03-30 19:38:36 +02:00
|
|
|
import { onDestroy } from "svelte"
|
2025-03-30 03:10:29 +02:00
|
|
|
import { PhotoSphereViewerWrapper } from "./photoSphereViewerWrapper"
|
2025-04-10 04:53:01 +02:00
|
|
|
import type { Feature, Geometry, Point } from "geojson"
|
2025-06-05 12:21:17 +02:00
|
|
|
import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
|
2025-03-30 03:10:29 +02:00
|
|
|
|
2025-04-15 18:18:44 +02:00
|
|
|
export let nearbyFeatures:
|
|
|
|
|
| Feature<Geometry, HotspotProperties>[]
|
|
|
|
|
| Store<Feature<Geometry, HotspotProperties>[]> = []
|
2025-06-16 14:46:12 +02:00
|
|
|
export let image: Partial<ProvidedImage> & { url: string; id: string }
|
2023-12-19 22:08:00 +01:00
|
|
|
let panzoomInstance = undefined
|
|
|
|
|
let panzoomEl: HTMLElement
|
2025-03-30 03:10:29 +02:00
|
|
|
let viewerEl: HTMLElement
|
2023-12-26 12:26:26 +01:00
|
|
|
export let isLoaded: UIEventSource<boolean> = undefined
|
2024-01-22 03:42:00 +01:00
|
|
|
|
2024-01-11 04:00:56 +01:00
|
|
|
onDestroy(Zoomcontrol.createLock())
|
2024-01-22 03:42:00 +01:00
|
|
|
|
2025-04-26 13:48:15 +02:00
|
|
|
let destroyed = false
|
|
|
|
|
onDestroy(() => {
|
|
|
|
|
destroyed = true
|
|
|
|
|
})
|
2025-03-30 03:10:29 +02:00
|
|
|
async function initPhotosphere() {
|
2025-04-10 04:53:01 +02:00
|
|
|
const imageInfo: Feature<Point, PanoramaView> = await image.provider.getPanoramaInfo(image)
|
|
|
|
|
if (imageInfo === undefined) {
|
2025-06-05 12:21:17 +02:00
|
|
|
console.error("Image info is apparently undefined for", image)
|
2025-04-10 04:53:01 +02:00
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
const viewer = new PhotoSphereViewerWrapper(viewerEl, imageInfo)
|
2025-06-16 14:46:12 +02:00
|
|
|
viewer.imageInfo.addCallbackAndRunD((panoramaInfo) => {
|
2025-06-05 12:21:17 +02:00
|
|
|
let provider: ImageProvider
|
|
|
|
|
if (typeof panoramaInfo.properties.provider === "string") {
|
|
|
|
|
provider = AllImageProviders.byName(panoramaInfo.properties.provider)
|
|
|
|
|
} else {
|
|
|
|
|
provider = panoramaInfo.properties.provider
|
|
|
|
|
}
|
|
|
|
|
console.log(">>> Got:", panoramaInfo, "by", provider.name)
|
|
|
|
|
//actuallyDisplayed.set(image.properties.imageMeta)
|
|
|
|
|
})
|
2025-03-30 03:10:29 +02:00
|
|
|
if (Array.isArray(nearbyFeatures)) {
|
|
|
|
|
viewer.setNearbyFeatures(nearbyFeatures)
|
|
|
|
|
} else {
|
2025-04-15 18:18:44 +02:00
|
|
|
nearbyFeatures.addCallbackAndRunD((feats) => {
|
2025-03-30 03:10:29 +02:00
|
|
|
viewer.setNearbyFeatures(feats)
|
2025-04-26 13:48:15 +02:00
|
|
|
return destroyed
|
2025-03-30 03:10:29 +02:00
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
isLoaded.set(true)
|
|
|
|
|
}
|
|
|
|
|
|
2023-12-19 22:08:00 +01:00
|
|
|
$: {
|
2025-03-30 03:10:29 +02:00
|
|
|
if (image.isSpherical) {
|
|
|
|
|
initPhotosphere()
|
|
|
|
|
} else if (panzoomEl) {
|
2023-12-19 22:08:00 +01:00
|
|
|
panzoomInstance = panzoom(panzoomEl, {
|
|
|
|
|
bounds: true,
|
|
|
|
|
boundsPadding: 0.49,
|
2024-01-16 04:21:46 +01:00
|
|
|
minZoom: 0.1,
|
2023-12-19 22:08:00 +01:00
|
|
|
maxZoom: 25,
|
2025-04-15 18:18:44 +02:00
|
|
|
initialZoom: 1.0,
|
2023-12-19 22:08:00 +01:00
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
panzoomInstance?.dispose()
|
2023-12-05 18:35:18 +01:00
|
|
|
}
|
2023-12-19 22:08:00 +01:00
|
|
|
}
|
2023-12-05 18:35:18 +01:00
|
|
|
</script>
|
|
|
|
|
|
2025-03-30 03:10:29 +02:00
|
|
|
<head>
|
2025-04-15 18:18:44 +02:00
|
|
|
<link rel="stylesheet" href="./css/pannellum.css" />
|
2025-03-30 03:10:29 +02:00
|
|
|
</head>
|
|
|
|
|
{#if image.isSpherical}
|
2025-04-15 18:18:44 +02:00
|
|
|
<div bind:this={viewerEl} class="h-full w-full" />
|
2025-03-30 03:10:29 +02:00
|
|
|
{:else}
|
|
|
|
|
<img
|
|
|
|
|
bind:this={panzoomEl}
|
|
|
|
|
class="panzoom-image h-fit max-w-fit"
|
|
|
|
|
on:load={() => {
|
2025-04-15 18:18:44 +02:00
|
|
|
isLoaded?.setData(true)
|
|
|
|
|
}}
|
2025-03-30 03:10:29 +02:00
|
|
|
src={image.url_hd ?? image.url}
|
2025-06-05 12:21:17 +02:00
|
|
|
alt=""
|
2025-03-30 03:10:29 +02:00
|
|
|
/>
|
|
|
|
|
{/if}
|
