diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js index 96a191e460a1..bfa7f99e85f7 100644 --- a/src/components/ImageView/index.js +++ b/src/components/ImageView/index.js @@ -44,11 +44,21 @@ class ImageView extends PureComponent { return; } Image.getSize(this.props.url, (width, height) => { - this.setImageRegion(width, height); + this.imageWidth = width; + this.imageHeight = height; + this.setImageRegion(this.imageWidth, this.imageHeight); }); document.addEventListener('mousemove', this.trackMovement.bind(this)); } + componentDidUpdate(prevProps) { + if (prevProps.widthWidth === this.props.windowWidth && prevProps.windowHeight === this.props.windowHeight) { + return; + } + + this.setImageRegion(this.imageWidth, this.imageHeight); + } + componentWillUnmount() { if (this.canUseTouchScreen) { return; @@ -59,8 +69,8 @@ class ImageView extends PureComponent { /** * When open image, set image left/right/top/bottom point and width, height - * @param {Boolean} width image width - * @param {Boolean} height image height + * @param {Number} width image width + * @param {Number} height image height */ setImageRegion(width, height) { let imgLeft = (this.props.windowWidth - width) / 2; @@ -86,10 +96,9 @@ class ImageView extends PureComponent { imgRight = imgLeft + (fitRate * width); } - const newZoomScale = Math.min(this.state.containerWidth / width, this.state.containerHeight / height); this.setState(prevState => ({ imgWidth: width, - zoomScale: prevState.zoomScale === 0 ? newZoomScale : prevState.zoomScale, + zoomScale: Math.min(prevState.containerWidth / width, prevState.containerHeight / height), imgHeight: height, imageLeft: imgLeft, imageTop: imgTop, @@ -100,8 +109,8 @@ class ImageView extends PureComponent { /** * Convert touch point to zoomed point - * @param {Boolean} x x point when click zoom - * @param {Boolean} y y point when click zoom + * @param {Number} x x point when click zoom + * @param {Number} y y point when click zoom * @returns {Object} converted touch point */ getScrollOffset(x, y) {