Take image rotation into account when zooming
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
parent
c0964b69b7
commit
28be581af1
1 changed files with 20 additions and 11 deletions
|
@ -97,29 +97,36 @@ 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.calculateZoom);
|
window.addEventListener("resize", this.calculateZoomAndRotate);
|
||||||
// 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.calculateZoom);
|
this.image.current.addEventListener("load", this.calculateZoomAndRotate);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
this.focusLock.current.removeEventListener('wheel', this.onWheel);
|
this.focusLock.current.removeEventListener('wheel', this.onWheel);
|
||||||
window.removeEventListener("resize", this.calculateZoom);
|
window.removeEventListener("resize", this.calculateZoomAndRotate);
|
||||||
this.image.current.removeEventListener("load", this.calculateZoom);
|
this.image.current.removeEventListener("load", this.calculateZoomAndRotate);
|
||||||
}
|
}
|
||||||
|
|
||||||
private calculateZoom = () => {
|
private calculateZoomAndRotate = () => {
|
||||||
const image = this.image.current;
|
const image = this.image.current;
|
||||||
const imageWrapper = this.imageWrapper.current;
|
const imageWrapper = this.imageWrapper.current;
|
||||||
|
|
||||||
const zoomX = imageWrapper.clientWidth / image.naturalWidth;
|
const landscape = this.rotation % 180 === 0;
|
||||||
const zoomY = imageWrapper.clientHeight / image.naturalHeight;
|
|
||||||
|
// If the image is rotated take it into account
|
||||||
|
const width = landscape ? image.naturalWidth : image.naturalHeight;
|
||||||
|
const height = landscape ? image.naturalHeight : image.naturalWidth;
|
||||||
|
|
||||||
|
const zoomX = imageWrapper.clientWidth / width;
|
||||||
|
const zoomY = imageWrapper.clientHeight / height;
|
||||||
|
|
||||||
// If the image is smaller in both dimensions set its the zoom to 1 to
|
// If the image is smaller in both dimensions set its the zoom to 1 to
|
||||||
// display it in its original size
|
// display it in its original size
|
||||||
|
@ -128,6 +135,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,
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -140,6 +148,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,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -190,14 +199,14 @@ export default class ImageView extends React.Component<IProps, IState> {
|
||||||
|
|
||||||
private onRotateCounterClockwiseClick = () => {
|
private onRotateCounterClockwiseClick = () => {
|
||||||
const cur = this.state.rotation;
|
const cur = this.state.rotation;
|
||||||
const rotationDegrees = cur - 90;
|
this.rotation = cur - 90;
|
||||||
this.setState({ rotation: rotationDegrees });
|
this.calculateZoomAndRotate();
|
||||||
};
|
};
|
||||||
|
|
||||||
private onRotateClockwiseClick = () => {
|
private onRotateClockwiseClick = () => {
|
||||||
const cur = this.state.rotation;
|
const cur = this.state.rotation;
|
||||||
const rotationDegrees = cur + 90;
|
this.rotation = cur + 90;
|
||||||
this.setState({ rotation: rotationDegrees });
|
this.calculateZoomAndRotate();
|
||||||
};
|
};
|
||||||
|
|
||||||
private onDownloadClick = () => {
|
private onDownloadClick = () => {
|
||||||
|
|
Loading…
Reference in a new issue