From a62ec0289c4c8e68cc4e2588ee936c57974ba35f Mon Sep 17 00:00:00 2001
From: Tsung Jui Hsieh <kindlikeme@gmail.com>
Date: Wed, 27 Nov 2024 15:44:52 +0800
Subject: [PATCH] feat: Add option to reverse zoom scroll direction in settings

---
 .../AnnotationsCarousel/__tests__/sampleData.js          | 1 +
 web/libs/editor/src/components/ImageView/ImageView.jsx   | 7 ++++---
 web/libs/editor/src/core/settings/editorsettings.js      | 9 +++++++++
 web/libs/editor/src/stores/SettingsStore.js              | 9 +++++++++
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/web/libs/editor/src/components/AnnotationsCarousel/__tests__/sampleData.js b/web/libs/editor/src/components/AnnotationsCarousel/__tests__/sampleData.js
index 6ee2833384f3..f4d0539aa8c0 100644
--- a/web/libs/editor/src/components/AnnotationsCarousel/__tests__/sampleData.js
+++ b/web/libs/editor/src/components/AnnotationsCarousel/__tests__/sampleData.js
@@ -5999,6 +5999,7 @@ const store = {
     imageFullSize: false,
     enableAutoSave: false,
     showLabels: true,
+    reverseZoomScrollDirection: true,
     showLineNumbers: false,
     showAnnotationsPanel: true,
     showPredictionsPanel: true,
diff --git a/web/libs/editor/src/components/ImageView/ImageView.jsx b/web/libs/editor/src/components/ImageView/ImageView.jsx
index 289bd3244d05..77e868a4b56e 100644
--- a/web/libs/editor/src/components/ImageView/ImageView.jsx
+++ b/web/libs/editor/src/components/ImageView/ImageView.jsx
@@ -772,10 +772,11 @@ export default observer(
         e.evt.preventDefault();
       }
       if (e.evt) {
-        const { item } = this.props;
+        const { item, store } = this.props;
         const stage = item.stageRef;
-
-        item.handleZoom(e.evt.deltaY, stage.getPointerPosition());
+        const isReverseScroll = store.settings.reverseZoomScrollDirection;
+        const delta = e.evt.deltaY * (isReverseScroll ? -1 : 1);
+        item.handleZoom(delta, stage.getPointerPosition());
       }
     };
 
diff --git a/web/libs/editor/src/core/settings/editorsettings.js b/web/libs/editor/src/core/settings/editorsettings.js
index ee0a8d2d63c4..72f8f65ecd77 100644
--- a/web/libs/editor/src/core/settings/editorsettings.js
+++ b/web/libs/editor/src/core/settings/editorsettings.js
@@ -54,6 +54,15 @@ export default {
     onChangeEvent: "toggleSelectAfterCreate",
     defaultValue: false,
   },
+  enableReverseZoomScrollDirection: {
+    newUI: {
+      title: "Reverse zoom scroll direction",
+      description: "When enabled, ctrl + scroll up zooms in and scroll down zooms out"
+    },
+    description: "Use standard zoom direction (scroll up to zoom in)",
+    onChangeEvent: "toggleReverseZoomScrollDirection",
+    defaultValue: true,
+  },
   showLineNumbers: {
     newUI: {
       tags: "Text Tag",
diff --git a/web/libs/editor/src/stores/SettingsStore.js b/web/libs/editor/src/stores/SettingsStore.js
index 30023862e30a..56e21bc222e0 100644
--- a/web/libs/editor/src/stores/SettingsStore.js
+++ b/web/libs/editor/src/stores/SettingsStore.js
@@ -32,6 +32,11 @@ const SettingsModel = types
      */
     continuousLabeling: false,
 
+    /**
+     * Scroll zoom direction
+     */
+    reverseZoomScrollDirection: types.optional(types.boolean, true),
+
     // select regions after creating them
     selectAfterCreate: false,
 
@@ -137,6 +142,10 @@ const SettingsModel = types
       // });
     },
 
+    toggleReverseZoomScrollDirection() {
+      self.reverseZoomScrollDirection = !self.reverseZoomScrollDirection;
+    },
+
     toggleShowLineNumbers() {
       self.showLineNumbers = !self.showLineNumbers;
     },