Fix: imagepreview: improve typing; fix comparison tool

This commit is contained in:
Pieter Vander Vennet 2024-12-17 19:03:05 +01:00
parent a16bfac530
commit 6cb16877e8
4 changed files with 10 additions and 7 deletions

View file

@ -137,7 +137,7 @@
<AttributedImage
{state}
imgClass="h-32 shrink-0"
image={{ url: image }}
image={{ url: image, id: image }}
previewedImage={state.previewedImage}
/>
</div>

View file

@ -28,7 +28,7 @@
export let imgClass: string = undefined
export let state: SpecialVisualizationState = undefined
export let attributionFormat: "minimal" | "medium" | "large" = "medium"
export let previewedImage: UIEventSource<ProvidedImage> = undefined
export let previewedImage: UIEventSource<Partial<ProvidedImage>> = undefined
export let canZoom = previewedImage !== undefined
let loaded = false
let showBigPreview = new UIEventSource(false)
@ -37,13 +37,13 @@
if (!shown) {
previewedImage?.set(undefined)
}
})
}),
)
if (previewedImage) {
onDestroy(
previewedImage.addCallbackAndRun((previewedImage) => {
showBigPreview.set(previewedImage !== undefined && previewedImage?.id === image.id)
})
showBigPreview.set(previewedImage !== undefined && (previewedImage?.id ?? previewedImage?.url) === (image.id ?? image.url))
}),
)
}
@ -89,6 +89,8 @@
/>
</div>
</Popup>
{#if image.status !== undefined && image.status !== "ready" && image.status !== "hidden"}
<div class="flex h-full flex-col justify-center">
<Loading>
@ -113,6 +115,7 @@
class={imgClass ?? ""}
class:cursor-zoom-in={canZoom}
on:click={() => {
console.log("Setting",image.url)
previewedImage?.set(image)
}}
on:error={() => {

View file

@ -15,7 +15,7 @@
import Translations from "../i18n/Translations"
import DotMenu from "../Base/DotMenu.svelte"
export let image: ProvidedImage
export let image: Partial<ProvidedImage> & ({ id: string, url: string })
export let clss: string = undefined
let isLoaded = new UIEventSource(false)

View file

@ -8,7 +8,7 @@
import Zoomcontrol from "../Zoomcontrol"
import { onDestroy } from "svelte"
export let image: ProvidedImage
export let image: Partial<ProvidedImage>
let panzoomInstance = undefined
let panzoomEl: HTMLElement
export let isLoaded: UIEventSource<boolean> = undefined