From 2e9b9368dbcdd2d9bfa855795198c9fe173d2768 Mon Sep 17 00:00:00 2001
From: Amir Ehsandar <ehsandaramir@gmail.com>
Date: Sun, 16 Mar 2025 05:58:59 +0330
Subject: [PATCH] fix: prevent double effect on image modal wheel event (#4522)

- escape key closes the modal
- zooming is a bit smoother
---
 web/src/components/PreviewImageDialog.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/web/src/components/PreviewImageDialog.tsx b/web/src/components/PreviewImageDialog.tsx
index f6f3f578..da1546ea 100644
--- a/web/src/components/PreviewImageDialog.tsx
+++ b/web/src/components/PreviewImageDialog.tsx
@@ -5,7 +5,7 @@ import { generateDialog } from "./Dialog";
 
 const MIN_SCALE = 0.5;
 const MAX_SCALE = 5;
-const SCALE_UNIT = 0.25;
+const SCALE_UNIT = 0.2;
 
 interface Props extends DialogProps {
   imgUrls: string[];
@@ -95,14 +95,22 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
   };
 
   const handleImageContainerKeyDown = (event: KeyboardEvent) => {
-    if (event.key == "ArrowLeft") {
-      showPrevImg();
-    } else if (event.key == "ArrowRight") {
-      showNextImg();
+    switch (event.key) {
+      case "ArrowLeft":
+        showPrevImg();
+        break;
+      case "ArrowRight":
+        showNextImg();
+        break;
+      case "Escape":
+        destroyAndResetViewport();
+        break;
+      default:
     }
   };
 
   const handleImgContainerScroll = (event: React.WheelEvent) => {
+    event.stopPropagation();
     const offsetX = event.nativeEvent.offsetX;
     const offsetY = event.nativeEvent.offsetY;
     const sign = event.deltaY < 0 ? 1 : -1;