forked from MapComplete/MapComplete
81 lines
2.3 KiB
Svelte
81 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* The image preview allows to drag and zoom in to the image
|
|
*/
|
|
import panzoom from "panzoom"
|
|
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, Geometry, Point } from "geojson"
|
|
import { Store } from "../../Logic/UIEventSource"
|
|
|
|
export let nearbyFeatures:
|
|
| Feature<Geometry, HotspotProperties>[]
|
|
| Store<Feature<Geometry, HotspotProperties>[]> = []
|
|
export let image: Partial<ProvidedImage>
|
|
let panzoomInstance = undefined
|
|
let panzoomEl: HTMLElement
|
|
let viewerEl: HTMLElement
|
|
|
|
export let isLoaded: UIEventSource<boolean> = undefined
|
|
|
|
onDestroy(Zoomcontrol.createLock())
|
|
|
|
let destroyed = false
|
|
onDestroy(() => {
|
|
destroyed = true
|
|
})
|
|
async function initPhotosphere() {
|
|
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 {
|
|
nearbyFeatures.addCallbackAndRunD((feats) => {
|
|
viewer.setNearbyFeatures(feats)
|
|
return destroyed
|
|
})
|
|
}
|
|
isLoaded.set(true)
|
|
}
|
|
|
|
$: {
|
|
if (image.isSpherical) {
|
|
initPhotosphere()
|
|
} else if (panzoomEl) {
|
|
panzoomInstance = panzoom(panzoomEl, {
|
|
bounds: true,
|
|
boundsPadding: 0.49,
|
|
minZoom: 0.1,
|
|
maxZoom: 25,
|
|
initialZoom: 1.0,
|
|
})
|
|
} else {
|
|
panzoomInstance?.dispose()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<head>
|
|
<link rel="stylesheet" href="./css/pannellum.css" />
|
|
</head>
|
|
{#if image.isSpherical}
|
|
<div bind:this={viewerEl} class="h-full w-full" />
|
|
{:else}
|
|
<img
|
|
bind:this={panzoomEl}
|
|
class="panzoom-image h-fit max-w-fit"
|
|
on:load={() => {
|
|
isLoaded?.setData(true)
|
|
}}
|
|
src={image.url_hd ?? image.url}
|
|
/>
|
|
{/if}
|