forked from MapComplete/MapComplete
40 lines
1.4 KiB
Svelte
40 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { Store, UIEventSource } from "../../Logic/UIEventSource.js"
|
|
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
|
|
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: 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}
|
|
<LoadingPlaceholder />
|
|
{:else}
|
|
<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} nearbyFeatures={[zoomToFeature]} />
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|