PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Get rid of weird rotation prop

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-06-07 15:39:11 +02:00
parent 0918ebad0a
commit 2e47a1176f
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
1 changed files with 16 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/views/elements/ImageView.tsx
View file

@ -97,29 +97,34 @@ export default class ImageView extends React.Component<IProps, IState> {
private initY = 0; private initY = 0;
private previousX = 0; private previousX = 0;
private previousY = 0; private previousY = 0;
private rotation = 0;
componentDidMount() { componentDidMount() {
// We have to use addEventListener() because the listener // We have to use addEventListener() because the listener
// needs to be passive in order to work with Chromium // needs to be passive in order to work with Chromium
this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false }); this.focusLock.current.addEventListener('wheel', this.onWheel, { passive: false });
// We want to recalculate zoom whenever the window's size changes // We want to recalculate zoom whenever the window's size changes
window.addEventListener("resize", this.setZoomAndRotation); window.addEventListener("resize", this.recalculateZoom);
// After the image loads for the first time we want to calculate the zoom // After the image loads for the first time we want to calculate the zoom
this.image.current.addEventListener("load", this.setZoomAndRotation); this.image.current.addEventListener("load", this.recalculateZoom);
} }
componentWillUnmount() { componentWillUnmount() {
this.focusLock.current.removeEventListener('wheel', this.onWheel); this.focusLock.current.removeEventListener('wheel', this.onWheel);
window.removeEventListener("resize", this.setZoomAndRotation); window.removeEventListener("resize", this.recalculateZoom);
this.image.current.removeEventListener("load", this.setZoomAndRotation); this.image.current.removeEventListener("load", this.recalculateZoom);
} }
private setZoomAndRotation = () => { private recalculateZoom = () => {
this.setZoomAndRotation();
}
private setZoomAndRotation = (inputRotation?: number) => {
const image = this.image.current; const image = this.image.current;
const imageWrapper = this.imageWrapper.current; const imageWrapper = this.imageWrapper.current;
const landscape = this.rotation % 180 === 0; const rotation = inputRotation || this.state.rotation;
const landscape = rotation % 180 === 0;
// If the image is rotated take it into account // If the image is rotated take it into account
const width = landscape ? image.naturalWidth : image.naturalHeight; const width = landscape ? image.naturalWidth : image.naturalHeight;
@ -135,7 +140,7 @@ export default class ImageView extends React.Component<IProps, IState> {
zoom: 1, zoom: 1,
minZoom: 1, minZoom: 1,
maxZoom: 1, maxZoom: 1,
rotation: this.rotation, rotation: rotation,
}); });
return; return;
} }
@ -150,7 +155,7 @@ export default class ImageView extends React.Component<IProps, IState> {
this.setState({ this.setState({
minZoom: minZoom, minZoom: minZoom,
maxZoom: 1, maxZoom: 1,
rotation: this.rotation, rotation: rotation,
zoom: zoom, zoom: zoom,
}); });
} }
@ -202,14 +207,12 @@ export default class ImageView extends React.Component<IProps, IState> {
private onRotateCounterClockwiseClick = () => { private onRotateCounterClockwiseClick = () => {
const cur = this.state.rotation; const cur = this.state.rotation;
this.rotation = cur - 90; this.setZoomAndRotation(cur - 90);
this.setZoomAndRotation();
}; };
private onRotateClockwiseClick = () => { private onRotateClockwiseClick = () => {
const cur = this.state.rotation; const cur = this.state.rotation;
this.rotation = cur + 90; this.setZoomAndRotation(cur + 90);
this.setZoomAndRotation();
}; };
private onDownloadClick = () => { private onDownloadClick = () => {