Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Feat: check if the image was blurred, attempt to reload if it is done; refactoring of ImageProvider code

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-09-28 02:04:14 +02:00
parent 590591dd31
commit 4650170db4
14 changed files with 224 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/UI/Image/AttributedImage.svelte
View file

@ -13,6 +13,9 @@
import { onDestroy } from "svelte"
import type { SpecialVisualizationState } from "../SpecialVisualization"
import type { Feature, Point } from "geojson"
import Loading from "../Base/Loading.svelte"
import Translations from "../i18n/Translations"
import Tr from "../Base/Tr.svelte"
export let image: Partial<ProvidedImage>
let fallbackImage: string = undefined
@ -30,7 +33,7 @@
let showBigPreview = new UIEventSource(false)
onDestroy(showBigPreview.addCallbackAndRun(shown => {
if (!shown) {
previewedImage.set(false)
previewedImage.set(undefined)
}
}))
onDestroy(previewedImage.addCallbackAndRun(previewedImage => {
@ -49,12 +52,12 @@
type: "Feature",
properties: {
id: image.id,
rotation: image.rotation
rotation: image.rotation,
},
geometry: {
type: "Point",
coordinates: [image.lon, image.lat]
}
coordinates: [image.lon, image.lat],
},
}
console.log(f)
state?.geocodedImages.set([f])
@ -73,36 +76,45 @@
on:click={() => {console.log("Closing");previewedImage.set(undefined)}}></CloseButton>
</div>
</Popup>
<div class="relative shrink-0">
<div class="relative w-fit"
on:mouseenter={() => highlight()}
on:mouseleave={() => highlight(false)}
>
<img
bind:this={imgEl}
on:load={() => (loaded = true)}
class={imgClass ?? ""}
class:cursor-zoom-in={canZoom}
on:click={() => {
{#if image.status !== undefined && image.status !== "ready"}
<div class="h-full flex flex-col justify-center">
<Loading>
<Tr t={Translations.t.image.processing}/>
</Loading>
</div>
{:else}
<div class="relative shrink-0">
<div class="relative w-fit"
on:mouseenter={() => highlight()}
on:mouseleave={() => highlight(false)}
>
<img
bind:this={imgEl}
on:load={() => (loaded = true)}
class={imgClass ?? ""}
class:cursor-zoom-in={canZoom}
on:click={() => {
previewedImage?.set(image)
}}
on:error={() => {
on:error={() => {
if (fallbackImage) {
imgEl.src = fallbackImage
}
}}
src={image.url}
/>
src={image.url}
/>
{#if canZoom && loaded}
<div
class="bg-black-transparent absolute right-0 top-0 rounded-bl-full"
on:click={() => previewedImage.set(image)}>
<MagnifyingGlassPlusIcon class="h-8 w-8 cursor-zoom-in pl-3 pb-3" color="white" />
</div>
{/if}
{#if canZoom && loaded}
<div
class="bg-black-transparent absolute right-0 top-0 rounded-bl-full"
on:click={() => previewedImage.set(image)}>
<MagnifyingGlassPlusIcon class="h-8 w-8 cursor-zoom-in pl-3 pb-3" color="white" />
</div>
{/if}
</div>
<div class="absolute bottom-0 left-0">
<ImageAttribution {image} {attributionFormat} />
</div>
</div>
<div class="absolute bottom-0 left-0">
<ImageAttribution {image} {attributionFormat} />
</div>
</div>
{/if}

6
src/UI/Image/ImageCarousel.ts
View file

@ -31,7 +31,7 @@ export class ImageCarousel extends Toggle {
image: url,
state,
previewedImage: state?.previewedImage,
})
}).SetClass("h-full")
if (url.key !== undefined) {
image = new Combine([
@ -42,8 +42,8 @@ export class ImageCarousel extends Toggle {
]).SetClass("relative")
}
image
.SetClass("w-full block cursor-zoom-in")
.SetStyle("min-width: 50px; background: grey;")
.SetClass("w-full h-full block cursor-zoom-in low-interaction")
.SetStyle("min-width: 50px;")
uiElements.push(image)
} catch (e) {
console.error("Could not generate image element for", url.url, "due to", e)