cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

add mouse scroll lock in image expand view (#15088) 

* add mouse scroll lock in image expand view

* enhancement
This commit is contained in:
Mashiro 2020-11-03 13:06:45 +08:00 committed by GitHub
parent 6a2db10f76
commit f645dad661
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app/javascript/mastodon/features/ui/components/zoomable_image.js
View File

@ -194,11 +194,14 @@ class ZoomableImage extends React.PureComponent {
if (this.state.zoomMatrix.type === 'full-width') { if (this.state.zoomMatrix.type === 'full-width') {
// full width, scroll vertical // 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 { } else {
// full height, scroll horizontal // 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 => { mouseDownHandler = e => {
@ -221,13 +224,8 @@ class ZoomableImage extends React.PureComponent {
const dx = e.clientX - this.state.dragPosition.x; const dx = e.clientX - this.state.dragPosition.x;
const dy = e.clientY - this.state.dragPosition.y; const dy = e.clientY - this.state.dragPosition.y;
if ((this.state.dragPosition.left - dx) >= this.state.lockScroll.x) { this.container.scrollLeft = Math.max(this.state.dragPosition.left - dx, this.state.lockScroll.x);
this.container.scrollLeft = this.state.dragPosition.left - dx; this.container.scrollTop = Math.max(this.state.dragPosition.top - dy, this.state.lockScroll.y);
}
if ((this.state.dragPosition.top - dy) >= this.state.lockScroll.y) {
this.container.scrollTop = this.state.dragPosition.top - dy;
}
this.setState({ dragged: true }); this.setState({ dragged: true });
} }
@ -336,22 +334,26 @@ class ZoomableImage extends React.PureComponent {
const { scale, zoomMatrix } = this.state; const { scale, zoomMatrix } = this.state;
if ( scale >= zoomMatrix.rate ) { if ( scale >= zoomMatrix.rate ) {
this.setState({ scale: MIN_SCALE }, () => { this.setState({
this.container.scrollLeft = 0; scale: MIN_SCALE,
this.container.scrollTop = 0; lockScroll: {
this.setState({ lockScroll: {
x: 0, x: 0,
y: 0, y: 0,
} }); },
}, () => {
this.container.scrollLeft = 0;
this.container.scrollTop = 0;
}); });
} else { } else {
this.setState({ scale: zoomMatrix.rate }, () => { this.setState({
this.container.scrollLeft = zoomMatrix.scrollLeft; scale: zoomMatrix.rate,
this.container.scrollTop = zoomMatrix.scrollTop; lockScroll: {
this.setState({ lockScroll: {
x: zoomMatrix.scrollLeft, x: zoomMatrix.scrollLeft,
y: zoomMatrix.scrollTop, y: zoomMatrix.scrollTop,
} }); },
}, () => {
this.container.scrollLeft = zoomMatrix.scrollLeft;
this.container.scrollTop = zoomMatrix.scrollTop;
}); });
} }