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

UX: tweak image preview

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-12-06 13:19:45 +01:00
parent 095b0e0d82
commit 24581e42ca
2 changed files with 3 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -21,7 +21,7 @@ async function download() {
</script> </script>
<div class="w-full h-full relative"> <div class="w-full h-full relative">
<div class="absolute top-0 left-0"> <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
<ImagePreview image={image} /> <ImagePreview image={image} />
</div> </div>
<div class="absolute bottom-0 left-0 w-full pointer-events-none flex justify-between items-end"> <div class="absolute bottom-0 left-0 w-full pointer-events-none flex justify-between items-end">

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

@ -1,10 +1,9 @@
<script lang="ts"> <script lang="ts">
import { Store } from "../../Logic/UIEventSource"
/** /**
* The image preview allows to drag and zoom in to the image * The image preview allows to drag and zoom in to the image
*/ */
import * as panzoom from "panzoom" import panzoom from "panzoom"
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider" import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
export let image : ProvidedImage export let image : ProvidedImage
@ -25,5 +24,4 @@
</script> </script>
<img bind:this={panzoomEl} src={image.url} /> <img bind:this={panzoomEl} src={image.url}/>