From dcd625c7e3ec9e2f619f22965504ae72680c77b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sat, 24 Apr 2021 10:36:53 +0200
Subject: [PATCH] Rework zooming
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/components/views/elements/ImageView.tsx | 65 +++++++++------------
 1 file changed, 26 insertions(+), 39 deletions(-)

diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index af379a08e1..e5878d5c0e 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -136,20 +136,8 @@ export default class ImageView extends React.Component<IProps, IState> {
         });
     }
 
-    private onKeyDown = (ev: KeyboardEvent) => {
-        if (ev.key === Key.ESCAPE) {
-            ev.stopPropagation();
-            ev.preventDefault();
-            this.props.onFinished();
-        }
-    };
-
-    private onWheel = (ev: WheelEvent) => {
-        ev.stopPropagation();
-        ev.preventDefault();
-
-        const {deltaY} = normalizeWheelEvent(ev);
-        const newZoom = this.state.zoom - (deltaY * ZOOM_COEFFICIENT);
+    private zoom(delta: number) {
+        const newZoom = this.state.zoom + delta;
 
         if (newZoom <= this.state.minZoom) {
             this.setState({
@@ -167,6 +155,30 @@ export default class ImageView extends React.Component<IProps, IState> {
         this.setState({
             zoom: newZoom,
         });
+    }
+
+    private onWheel = (ev: WheelEvent) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+
+        const {deltaY} = normalizeWheelEvent(ev);
+        this.zoom(-(deltaY * ZOOM_COEFFICIENT));
+    };
+
+    private onZoomInClick = () => {
+        this.zoom(ZOOM_STEP);
+    };
+
+    private onZoomOutClick = () => {
+        this.zoom(-ZOOM_STEP);
+    };
+
+    private onKeyDown = (ev: KeyboardEvent) => {
+        if (ev.key === Key.ESCAPE) {
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.props.onFinished();
+        }
     };
 
     private onRotateCounterClockwiseClick = () => {
@@ -181,31 +193,6 @@ export default class ImageView extends React.Component<IProps, IState> {
         this.setState({ rotation: rotationDegrees });
     };
 
-    private onZoomInClick = () => {
-        if (this.state.zoom >= this.state.maxZoom) {
-            this.setState({zoom: this.state.maxZoom});
-            return;
-        }
-
-        this.setState({
-            zoom: this.state.zoom + ZOOM_STEP,
-        });
-    };
-
-    private onZoomOutClick = () => {
-        if (this.state.zoom <= this.state.minZoom) {
-            this.setState({
-                zoom: this.state.minZoom,
-                translationX: 0,
-                translationY: 0,
-            });
-            return;
-        }
-        this.setState({
-            zoom: this.state.zoom - ZOOM_STEP,
-        });
-    };
-
     private onDownloadClick = () => {
         const a = document.createElement("a");
         a.href = this.props.src;