From 6a405fa8e8d76a0f47f9d5bfe144ec7880700ccb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 24 Apr 2021 08:35:45 +0200 Subject: [PATCH] Don't use percanteages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I was an idiot to use them in the first place Signed-off-by: Šimon Brandner --- src/components/views/elements/ImageView.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx index ecc4303764..68567257f7 100644 --- a/src/components/views/elements/ImageView.tsx +++ b/src/components/views/elements/ImageView.tsx @@ -120,10 +120,10 @@ export default class ImageView extends React.Component { // TODO: What if we don't have width and height props? const imageWrapper = document.getElementsByClassName(IMAGE_WRAPPER_CLASS)[0]; - const zoomX = (imageWrapper.clientWidth / this.props.width) * 100; - const zoomY = (imageWrapper.clientHeight / this.props.height) * 100; + const zoomX = imageWrapper.clientWidth / this.props.width; + const zoomY = imageWrapper.clientHeight / this.props.height; const minZoom = Math.min(zoomX, zoomY) * MAX_SCALE; - const maxZoom = minZoom >= 100 ? minZoom : 100; + const maxZoom = minZoom >= 1 ? minZoom : 1; if (this.state.zoom <= this.state.minZoom) this.setState({zoom: minZoom}); this.setState({ @@ -323,7 +323,7 @@ export default class ImageView extends React.Component { cursor = "zoom-out"; } const rotationDegrees = this.state.rotation + "deg"; - const zoomPercentage = this.state.zoom/100; + const zoom = this.state.zoom; const translatePixelsX = this.state.translationX + "px"; const translatePixelsY = this.state.translationY + "px"; // The order of the values is important! @@ -335,7 +335,7 @@ export default class ImageView extends React.Component { transition: this.state.moving ? null : "transform 200ms ease 0s", transform: `translateX(${translatePixelsX}) translateY(${translatePixelsY}) - scale(${zoomPercentage}) + scale(${zoom}) rotate(${rotationDegrees})`, };