about summary refs log tree commit diff
path: root/app/javascript/flavours
diff options
context:
space:
mode:
authorMashiro <adadam@qq.com>2020-11-03 13:06:45 +0800
committerThibaut Girka <thib@sitedethib.com>2020-11-04 12:24:40 +0100
commitdc86d814d93b9bb564ab35728c6d9fb65d064ca3 (patch)
treea8e0759e3f13bf13dabbb8a261cd1bdb2f3e1e1a /app/javascript/flavours
parent40af1cf65bdbe9e6ef5f480b6e03cb1be7db5774 (diff)
[Glitch] add mouse scroll lock in image expand view
Port f645dad661ba033efdcdd6ca7597e7b8bc7f4f51 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours')
-rw-r--r--app/javascript/flavours/glitch/features/ui/components/zoomable_image.js40
1 files changed, 21 insertions, 19 deletions
diff --git a/app/javascript/flavours/glitch/features/ui/components/zoomable_image.js b/app/javascript/flavours/glitch/features/ui/components/zoomable_image.js
index 004913480..2efc70890 100644
--- a/app/javascript/flavours/glitch/features/ui/components/zoomable_image.js
+++ b/app/javascript/flavours/glitch/features/ui/components/zoomable_image.js
@@ -194,11 +194,14 @@ class ZoomableImage extends React.PureComponent {
 
     if (this.state.zoomMatrix.type === 'full-width') {
       // full width, scroll vertical
-      this.container.scrollTop = this.container.scrollTop + event.pixelY;
+      this.container.scrollTop = Math.max(this.container.scrollTop + event.pixelY, this.state.lockScroll.y);
     } else {
       // full height, scroll horizontal
-      this.container.scrollLeft = this.container.scrollLeft + event.pixelY;
+      this.container.scrollLeft = Math.max(this.container.scrollLeft + event.pixelY, this.state.lockScroll.x);
     }
+
+    // lock horizontal scroll
+    this.container.scrollLeft = Math.max(this.container.scrollLeft + event.pixelX, this.state.lockScroll.x);
   }
 
   mouseDownHandler = e => {
@@ -221,13 +224,8 @@ class ZoomableImage extends React.PureComponent {
     const dx = e.clientX - this.state.dragPosition.x;
     const dy = e.clientY - this.state.dragPosition.y;
 
-    if ((this.state.dragPosition.left - dx) >= this.state.lockScroll.x) {
-      this.container.scrollLeft = this.state.dragPosition.left - dx;
-    }
-
-    if ((this.state.dragPosition.top - dy) >= this.state.lockScroll.y) {
-      this.container.scrollTop = this.state.dragPosition.top - dy;
-    }
+    this.container.scrollLeft = Math.max(this.state.dragPosition.left - dx, this.state.lockScroll.x);
+    this.container.scrollTop = Math.max(this.state.dragPosition.top - dy, this.state.lockScroll.y);
 
     this.setState({ dragged: true });
   }
@@ -336,22 +334,26 @@ class ZoomableImage extends React.PureComponent {
     const { scale, zoomMatrix } = this.state;
 
     if ( scale >= zoomMatrix.rate ) {
-      this.setState({ scale: MIN_SCALE }, () => {
-        this.container.scrollLeft = 0;
-        this.container.scrollTop = 0;
-        this.setState({ lockScroll: {
+      this.setState({
+        scale: MIN_SCALE,
+        lockScroll: {
           x: 0,
           y: 0,
-        } });
+        },
+      }, () => {
+        this.container.scrollLeft = 0;
+        this.container.scrollTop = 0;
       });
     } else {
-      this.setState({ scale: zoomMatrix.rate }, () => {
-        this.container.scrollLeft = zoomMatrix.scrollLeft;
-        this.container.scrollTop = zoomMatrix.scrollTop;
-        this.setState({ lockScroll: {
+      this.setState({
+        scale: zoomMatrix.rate,
+        lockScroll: {
           x: zoomMatrix.scrollLeft,
           y: zoomMatrix.scrollTop,
-        } });
+        },
+      }, () => {
+        this.container.scrollLeft = zoomMatrix.scrollLeft;
+        this.container.scrollTop = zoomMatrix.scrollTop;
       });
     }