If the image is small don't scale

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-04-26 13:47:06 +02:00 committed by J. Ryan Stinnett
parent 59bf542158
commit ebe3b36528

View file

@ -123,21 +123,26 @@ export default class ImageView extends React.Component<IProps, IState> {
const zoomX = imageWrapper.clientWidth / width; const zoomX = imageWrapper.clientWidth / width;
const zoomY = imageWrapper.clientHeight / height; const zoomY = imageWrapper.clientHeight / height;
// If the image is smaller in both dimensions set its the zoom to 1 to
// display it in its original size
if (zoomX >= 1 && zoomY >= 1) {
this.setState({
zoom: 1,
minZoom: 1,
maxZoom: 1,
});
return;
}
// We set minZoom to the min of the zoomX and zoomY to avoid overflow in // We set minZoom to the min of the zoomX and zoomY to avoid overflow in
// any direction. We also multiply by MAX_SCALE to get a gap around the // any direction. We also multiply by MAX_SCALE to get a gap around the
// image by default // image by default
const minZoom = Math.min(zoomX, zoomY) * MAX_SCALE; const minZoom = Math.min(zoomX, zoomY) * MAX_SCALE;
// If minZoom is bigger or equal to 1, it means we scaling the image up
// to fit the viewport and therefore we want to disable zooming, so we
// set the maxZoom to be the same as the minZoom. Otherwise, we are
// scaling the image down - we want the user to be allowed to zoom to
// 100%
const maxZoom = minZoom >= 1 ? minZoom : 1;
if (this.state.zoom <= this.state.minZoom) this.setState({zoom: minZoom}); if (this.state.zoom <= this.state.minZoom) this.setState({zoom: minZoom});
this.setState({ this.setState({
minZoom: minZoom, minZoom: minZoom,
maxZoom: maxZoom, maxZoom: 1,
}); });
} }