From 6cb16877e8e27a70c1e1c327d965be1e0ab45788 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Tue, 17 Dec 2024 19:03:05 +0100
Subject: [PATCH] Fix: imagepreview: improve typing; fix comparison tool

---
 src/UI/Comparison/ComparisonTable.svelte |  2 +-
 src/UI/Image/AttributedImage.svelte      | 11 +++++++----
 src/UI/Image/ImageOperations.svelte      |  2 +-
 src/UI/Image/ImagePreview.svelte         |  2 +-
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/UI/Comparison/ComparisonTable.svelte b/src/UI/Comparison/ComparisonTable.svelte
index d528f849c..ff6c7bfae 100644
--- a/src/UI/Comparison/ComparisonTable.svelte
+++ b/src/UI/Comparison/ComparisonTable.svelte
@@ -137,7 +137,7 @@
             <AttributedImage
               {state}
               imgClass="h-32 shrink-0"
-              image={{ url: image }}
+              image={{ url: image, id: image }}
               previewedImage={state.previewedImage}
             />
           </div>
diff --git a/src/UI/Image/AttributedImage.svelte b/src/UI/Image/AttributedImage.svelte
index e2c677386..851e4231d 100644
--- a/src/UI/Image/AttributedImage.svelte
+++ b/src/UI/Image/AttributedImage.svelte
@@ -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={() => {
diff --git a/src/UI/Image/ImageOperations.svelte b/src/UI/Image/ImageOperations.svelte
index 9a4df51fa..a27b53eda 100644
--- a/src/UI/Image/ImageOperations.svelte
+++ b/src/UI/Image/ImageOperations.svelte
@@ -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)
diff --git a/src/UI/Image/ImagePreview.svelte b/src/UI/Image/ImagePreview.svelte
index bf966cfcf..0dabcebce 100644
--- a/src/UI/Image/ImagePreview.svelte
+++ b/src/UI/Image/ImagePreview.svelte
@@ -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