ilja_space/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

UI: add download links

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-06-05 12:21:17 +02:00
parent a55ae9d3e8
commit d9c1fe3f74
2 changed files with 36 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/UI/Image/ImageOperations.svelte
View file

@ -8,7 +8,7 @@
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
import ImageAttribution from "./ImageAttribution.svelte"
import ImagePreview from "./ImagePreview.svelte"
import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid"
import { DownloadIcon, ExternalLinkIcon } from "@rgossiaux/svelte-heroicons/solid"
import { twMerge } from "tailwind-merge"
import { UIEventSource } from "../../Logic/UIEventSource"
import Loading from "../Base/Loading.svelte"
@ -23,7 +23,7 @@
export let nearbyFeatures:
| Feature<Geometry, HotspotProperties>[]
| Store<Feature<Geometry, HotspotProperties>[]> = []
let visitUrl = image.provider?.visitUrl(image)
let isLoaded = new UIEventSource(false)
</script>
@ -39,22 +39,28 @@
{#if $$slots["dot-menu-actions"]}
<DotMenu dotsPosition="top-0 left-0" dotsSize="w-8 h-8" hideBackground>
<slot name="dot-menu-actions">
<button
class="no-image-background pointer-events-auto flex items-center"
on:click={() => ImageProvider.offerImageAsDownload(image)}
>
<DownloadIcon class="h-6 w-6 px-2 opacity-100" />
<Tr t={Translations.t.general.download.downloadImage} />
</button>
</slot>
<slot name="dot-menu-actions" />
<button
class="no-image-background pointer-events-auto flex items-center"
on:click={() => ImageProvider.offerImageAsDownload(image)}
>
<DownloadIcon class="h-6 w-6 px-2 opacity-100" />
<Tr t={Translations.t.general.download.downloadImage} />
</button>
{#if visitUrl !== undefined}
<a href={visitUrl} target="_blank" rel="noopener">
<ExternalLinkIcon class="w-6" />
<Tr t={Translations.t.image.openOnWebsite.Subs(image.provider)} />
</a>
{/if}
</DotMenu>
{/if}
<div
class="pointer-events-none absolute bottom-0 left-0 flex w-full flex-wrap items-end justify-between"
>
<div class="pointer-events-auto m-1 w-fit transition-colors duration-200">
<ImageAttribution {image} attributionFormat="large" />
<ImageAttribution image={$image} attributionFormat="large" />
</div>
<slot />

26
src/UI/Image/ImagePreview.svelte
View file

@ -3,24 +3,22 @@
* 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 type { HotspotProperties, PanoramaView, ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
import ImageProvider from "../../Logic/ImageProviders/ImageProvider"
import { Store, 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"
import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
export let nearbyFeatures:
| Feature<Geometry, HotspotProperties>[]
| Store<Feature<Geometry, HotspotProperties>[]> = []
export let image: Partial<ProvidedImage>
export let image: Partial<ProvidedImage> & { url: string, id: string }
let panzoomInstance = undefined
let panzoomEl: HTMLElement
let viewerEl: HTMLElement
export let isLoaded: UIEventSource<boolean> = undefined
onDestroy(Zoomcontrol.createLock())
@ -32,10 +30,21 @@
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)
console.error("Image info is apparently undefined for", image)
return
}
const viewer = new PhotoSphereViewerWrapper(viewerEl, imageInfo)
viewer.imageInfo.addCallbackAndRunD(panoramaInfo => {
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)
UI:
//actuallyDisplayed.set(image.properties.imageMeta)
})
if (Array.isArray(nearbyFeatures)) {
viewer.setNearbyFeatures(nearbyFeatures)
} else {
@ -77,5 +86,6 @@
isLoaded?.setData(true)
}}
src={image.url_hd ?? image.url}
alt=""
/>
{/if}