From dc86d814d93b9bb564ab35728c6d9fb65d064ca3 Mon Sep 17 00:00:00 2001 From: Mashiro Date: Tue, 3 Nov 2020 13:06:45 +0800 Subject: [Glitch] add mouse scroll lock in image expand view Port f645dad661ba033efdcdd6ca7597e7b8bc7f4f51 to glitch-soc Signed-off-by: Thibaut Girka --- .../features/ui/components/zoomable_image.js | 40 ++++++++++++---------- 1 file changed, 21 insertions(+), 19 deletions(-) (limited to 'app') 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; }); } -- cgit