forked from MapComplete/MapComplete
74 lines
2 KiB
Svelte
74 lines
2 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* The image preview allows to drag and zoom in to the image
|
|
*/
|
|
import panzoom from "panzoom"
|
|
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
|
|
import { UIEventSource } from "../../Logic/UIEventSource"
|
|
import Zoomcontrol from "../Zoomcontrol"
|
|
import { getContext, onDestroy } from "svelte"
|
|
import type { PanoramaView } from "./photoSphereViewerWrapper"
|
|
import { PhotoSphereViewerWrapper } from "./photoSphereViewerWrapper"
|
|
|
|
import type { Feature, Point } from "geojson"
|
|
import { Store } from "../../Logic/UIEventSource"
|
|
|
|
|
|
export let nearbyFeatures: Feature[] | Store<Feature[]> = []
|
|
export let image: Partial<ProvidedImage>
|
|
let panzoomInstance = undefined
|
|
let panzoomEl: HTMLElement
|
|
let viewerEl: HTMLElement
|
|
|
|
export let isLoaded: UIEventSource<boolean> = undefined
|
|
|
|
onDestroy(Zoomcontrol.createLock())
|
|
|
|
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)
|
|
|
|
}
|
|
|
|
$: {
|
|
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="./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={() => {
|
|
isLoaded?.setData(true)
|
|
}}
|
|
src={image.url_hd ?? image.url}
|
|
/>
|
|
{/if}
|