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"
|
|
|
|
|
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
|
2023-12-26 12:26:26 +01:00
|
|
|
import { UIEventSource } from "../../Logic/UIEventSource"
|
2024-01-11 04:00:56 +01:00
|
|
|
import Zoomcontrol from "../Zoomcontrol"
|
2025-03-30 03:10:29 +02:00
|
|
|
import { getContext, onDestroy } from "svelte"
|
|
|
|
|
import type { PanoramaView } from "./photoSphereViewerWrapper"
|
|
|
|
|
import { PhotoSphereViewerWrapper } from "./photoSphereViewerWrapper"
|
2023-12-05 18:35:18 +01:00
|
|
|
|
2025-03-30 03:10:29 +02:00
|
|
|
import type { Feature, Point } from "geojson"
|
|
|
|
|
import { Store } from "../../Logic/UIEventSource"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export let nearbyFeatures: Feature[] | Store<Feature[]> = []
|
2024-12-17 19:03:05 +01:00
|
|
|
export let image: Partial<ProvidedImage>
|
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-03-30 03:10:29 +02:00
|
|
|
async function initPhotosphere() {
|
|
|
|
|
let f: Feature<Point, PanoramaView> = await image.provider.getPanoramaInfo(image)
|
|
|
|
|
|
|
|
|
|
const viewer = new PhotoSphereViewerWrapper(viewerEl, f)
|
|
|
|
|
if (Array.isArray(nearbyFeatures)) {
|
|
|
|
|
viewer.setNearbyFeatures(nearbyFeatures)
|
|
|
|
|
} else {
|
|
|
|
|
nearbyFeatures.addCallbackAndRunD(feats => {
|
|
|
|
|
viewer.setNearbyFeatures(feats)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
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-03-30 03:10:29 +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>
|
|
|
|
|
<link rel="stylesheet" href="./node_modules/pannellum/build/pannellum.css">
|
|
|
|
|
</head>
|
|
|
|
|
{#if image.isSpherical}
|
|
|
|
|
<div bind:this={viewerEl} class="w-full h-full" />
|
|
|
|
|
{:else}
|
|
|
|
|
<img
|
|
|
|
|
bind:this={panzoomEl}
|
|
|
|
|
class="panzoom-image h-fit max-w-fit"
|
|
|
|
|
on:load={() => {
|
2023-12-30 15:24:30 +01:00
|
|
|
isLoaded?.setData(true)
|
|
|
|
|
}}
|
2025-03-30 03:10:29 +02:00
|
|
|
src={image.url_hd ?? image.url}
|
|
|
|
|
/>
|
|
|
|
|
{/if}
|
