OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Iterate mouse actions and cursor behaviour 

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Šimon Brandner 2021-04-02 10:01:41 +02:00
parent eb83ae0a9f
commit 33a1006488
No known key found for this signature in database
GPG Key ID: 9760693FDD98A790
1 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/views/elements/ImageView.js
View File

@ -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})