From 33a1006488d1d12e63c2bc8cdd164076396d764c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 2 Apr 2021 10:01:41 +0200
Subject: [PATCH] Iterate mouse actions and cursor behaviour
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.js | 26 +++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index e97c39790e..bec7a35b79 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -74,6 +74,8 @@ export default class ImageView extends React.Component {
     initY = 0;
     lastX = 0;
     lastY = 0;
+    previousX = 0;
+    previousY = 0;
 
     componentDidMount() {
         // We have to use addEventListener() because the listener
@@ -190,6 +192,8 @@ export default class ImageView extends React.Component {
         ev.preventDefault();
 
         this.setState({moving: true});
+        this.previousX = this.state.translationX;
+        this.previousY = this.state.translationY;
         this.initX = ev.pageX - this.lastX;
         this.initY = ev.pageY - this.lastY;
     }
@@ -209,6 +213,18 @@ export default class ImageView extends React.Component {
     }
 
     onEndMoving = () => {
+        // Zoom in or out if we haven't moved much
+        if (
+            this.state.moving === true &&
+            Math.abs(this.state.translationX - this.previousX) < 10 &&
+            Math.abs(this.state.translationY - this.previousY) < 10
+        ) {
+            if (this.state.zoom === MIN_ZOOM) {
+                this.setState({zoom: MAX_ZOOM});
+            } else {
+                this.setState({zoom: MIN_ZOOM});
+            }
+        }
         this.setState({moving: false});
     }
 
@@ -240,6 +256,14 @@ export default class ImageView extends React.Component {
     render() {
         const showEventMeta = !!this.props.mxEvent;
 
+        let cursor;
+        if (this.state.moving) {
+            cursor= "grabbing";
+        } else if (this.state.zoom === MIN_ZOOM) {
+            cursor = "zoom-in";
+        } else {
+            cursor = "zoom-out";
+        }
         const rotationDegrees = this.state.rotation + "deg";
         const zoomPercentage = this.state.zoom/100;
         const translatePixelsX = this.state.translationX + "px";
@@ -249,7 +273,7 @@ export default class ImageView extends React.Component {
         // we would apply the translation to an already rotated
         // image causing it translate in the wrong direction.
         const style = {
-            cursor: this.state.moving ? "grabbing" : "grab",
+            cursor: cursor,
             transform: `translateX(${translatePixelsX})
                         translateY(${translatePixelsY})
                         scale(${zoomPercentage})