Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-18 06:35:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

Iterate mouse actions and cursor behaviour

Browse Source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Š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; initY = 0;
lastX = 0; lastX = 0;
lastY = 0; lastY = 0;
previousX = 0;
previousY = 0;
componentDidMount() { componentDidMount() {
// We have to use addEventListener() because the listener // We have to use addEventListener() because the listener
@ -190,6 +192,8 @@ export default class ImageView extends React.Component {
ev.preventDefault(); ev.preventDefault();
this.setState({moving: true}); this.setState({moving: true});
this.previousX = this.state.translationX;
this.previousY = this.state.translationY;
this.initX = ev.pageX - this.lastX; this.initX = ev.pageX - this.lastX;
this.initY = ev.pageY - this.lastY; this.initY = ev.pageY - this.lastY;
} }
@ -209,6 +213,18 @@ export default class ImageView extends React.Component {
} }
onEndMoving = () => { 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}); this.setState({moving: false});
} }
@ -240,6 +256,14 @@ export default class ImageView extends React.Component {
render() { render() {
const showEventMeta = !!this.props.mxEvent; 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 rotationDegrees = this.state.rotation + "deg";
const zoomPercentage = this.state.zoom/100; const zoomPercentage = this.state.zoom/100;
const translatePixelsX = this.state.translationX + "px"; 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 // we would apply the translation to an already rotated
// image causing it translate in the wrong direction. // image causing it translate in the wrong direction.
const style = { const style = {
cursor: this.state.moving ? "grabbing" : "grab", cursor: cursor,
transform: `translateX(${translatePixelsX}) transform: `translateX(${translatePixelsX})
translateY(${translatePixelsY}) translateY(${translatePixelsY})
scale(${zoomPercentage}) scale(${zoomPercentage})