From 80321ec89f9b65004000885cdc956dedbcab9193 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Metehan=20=C3=96zyurt?= Date: Thu, 28 Apr 2022 00:53:37 +0300 Subject: [PATCH 1/6] fixed: Image does not zoom where you click for desktop and web --- src/components/ImageView/index.js | 121 +++++++++++------------------- 1 file changed, 43 insertions(+), 78 deletions(-) diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js index 2017962b5e83..cad5d47c6bb5 100644 --- a/src/components/ImageView/index.js +++ b/src/components/ImageView/index.js @@ -40,10 +40,6 @@ class ImageView extends PureComponent { imgWidth: 0, imgHeight: 0, zoomScale: 0, - imageLeft: 0, - imageTop: 0, - imageRight: 0, - imageBottom: 0, }; } @@ -98,17 +94,22 @@ class ImageView extends PureComponent { * @param {SyntheticEvent} e */ onContainerPress(e) { - if (this.state.isZoomed && !this.state.isDragging) { + let sX; + let sY; + if (this.isZoomed && !this.state.isDragging) { const {offsetX, offsetY} = e.nativeEvent; - const delta = this.getScrollOffset(offsetX, offsetY); - const sX = delta.offsetX; - const sY = delta.offsetY; - this.scrollableRef.scrollTop = sY * this.state.zoomScale; - this.scrollableRef.scrollLeft = sX * this.state.zoomScale; + const delta = this.getScrollOffset(offsetX / this.state.zoomScale, offsetY / this.state.zoomScale); + sX = delta.offsetX; + sY = delta.offsetY; } - if (this.state.isZoomed && this.state.isDragging && this.state.isMouseDown) { + if (this.isZoomed && this.state.isDragging && this.state.isMouseDown) { this.setState({isDragging: false, isMouseDown: false}); + } else if (this.isZoomed) { + this.setState({isZoomed: this.isZoomed}, () => { + this.scrollableRef.scrollTop = sY; + this.scrollableRef.scrollLeft = sX; + }); } } @@ -117,10 +118,17 @@ class ImageView extends PureComponent { return; } - this.setState(prevState => ({ - isZoomed: !prevState.isZoomed, - isMouseDown: false, - })); + this.isZoomed = !this.state.isZoomed; + if (this.isZoomed === false) { + this.setState(prevState => ({ + isMouseDown: false, + isZoomed: !prevState.isZoomed, + })); + } else { + this.setState({ + isMouseDown: false, + }); + } } /** @@ -129,55 +137,20 @@ class ImageView extends PureComponent { * @param {Number} imageHeight */ setImageRegion(imageWidth, imageHeight) { - let width = imageWidth; - let height = imageHeight; - const containerHeight = this.state.containerHeight; - const containerWidth = this.state.containerWidth; - - // return if image not loaded yet - if (imageHeight <= 0 || containerHeight <= 0) { + if (imageHeight <= 0) { return; } - - // Fit the image to container size if image small than container. - const aspectRatio = Math.min(containerHeight / imageHeight, containerWidth / imageWidth); - if (aspectRatio > 1) { - width *= (aspectRatio); - height *= (aspectRatio); - } - let imgLeft = (this.props.windowWidth - width) / 2; - let imgRight = ((this.props.windowWidth - width) / 2) + width; - let imgTop = (this.props.windowHeight - height) / 2; - let imgBottom = ((this.props.windowHeight - height) / 2) + height; - const isScreenWiderThanImage = (this.props.windowWidth / width) > 1; - const isScreenTallerThanImage = (this.props.windowHeight / height) > 1; - const aspect = width / height; - if (aspect > 1 && !isScreenWiderThanImage) { - // In case Width fit Screen width and Height not fit the Screen height - const fitRate = this.props.windowWidth / width; - imgLeft = 0; - imgRight = this.props.windowWidth; - imgTop = (this.props.windowHeight - (fitRate * height)) / 2; - imgBottom = imgTop + (fitRate * height); - } else if (aspect <= 1 && !isScreenTallerThanImage) { - // In case Height fit Screen height and Width not fit the Screen width - const fitRate = this.props.windowHeight / height; - imgTop = 0; - imgBottom = this.props.windowHeight; - imgLeft = (this.props.windowWidth - (fitRate * width)) / 2; - imgRight = imgLeft + (fitRate * width); - } - + const containerHeight = this.state.containerHeight; + const containerWidth = this.state.containerWidth; + const width = imageWidth; + const height = imageHeight; const newZoomScale = Math.min(containerWidth / width, containerHeight / height); - this.setState({ + + this.setState(prevState => ({ imgWidth: width, - zoomScale: newZoomScale, imgHeight: height, - imageLeft: imgLeft, - imageTop: imgTop, - imageRight: imgRight, - imageBottom: imgBottom, - }); + zoomScale: containerHeight ? newZoomScale : prevState.zoomScale, + })); } /** @@ -187,29 +160,21 @@ class ImageView extends PureComponent { * @returns {Object} converted touch point */ getScrollOffset(x, y) { - let fitRatio = 1; - if (this.state.imageTop === 0) { - // Fit Height - fitRatio = this.props.windowHeight / this.state.imgHeight; - } else if (this.state.imageLeft === 0) { - // Fit Width - fitRatio = this.props.windowWidth / this.state.imgWidth; - } - let sx = (x - this.state.imageLeft) / fitRatio; - let sy = (y - this.state.imageTop) / fitRatio; + let sx; + let sy; - // White blank touch - if (x < this.state.imageLeft) { + // container size bigger than clicked position offset + if (x <= (this.state.containerWidth / 2)) { sx = 0; + } else if (x > this.state.containerWidth / 2) { + // minus half of container size because we want to be center clicked position + sx = x - (this.state.containerWidth / 2); } - if (x > this.state.imageRight) { - sx = this.state.imgWidth; - } - if (y < this.state.imageTop) { + if (y <= this.state.containerHeight / 2) { sy = 0; - } - if (y > this.state.imageBottom) { - sy = this.state.imgHeight; + } else if (y > this.state.containerHeight / 2) { + // minus half of container size because we want to be center clicked position + sy = y - (this.state.containerHeight / 2); } return {offsetX: sx, offsetY: sy}; } From 0a1fab46f749adf7b9577bfac87e3f81b465adef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Metehan=20=C3=96zyurt?= Date: Wed, 4 May 2022 09:55:13 +0300 Subject: [PATCH 2/6] Changed comments , added meaningful variable names --- src/components/ImageView/index.js | 32 +++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js index cad5d47c6bb5..caa9b7914e05 100644 --- a/src/components/ImageView/index.js +++ b/src/components/ImageView/index.js @@ -94,21 +94,21 @@ class ImageView extends PureComponent { * @param {SyntheticEvent} e */ onContainerPress(e) { - let sX; - let sY; + let scrollX; + let scrollY; if (this.isZoomed && !this.state.isDragging) { const {offsetX, offsetY} = e.nativeEvent; const delta = this.getScrollOffset(offsetX / this.state.zoomScale, offsetY / this.state.zoomScale); - sX = delta.offsetX; - sY = delta.offsetY; + scrollX = delta.offsetX; + scrollY = delta.offsetY; } if (this.isZoomed && this.state.isDragging && this.state.isMouseDown) { this.setState({isDragging: false, isMouseDown: false}); } else if (this.isZoomed) { this.setState({isZoomed: this.isZoomed}, () => { - this.scrollableRef.scrollTop = sY; - this.scrollableRef.scrollLeft = sX; + this.scrollableRef.scrollTop = scrollY; + this.scrollableRef.scrollLeft = scrollX; }); } } @@ -160,23 +160,23 @@ class ImageView extends PureComponent { * @returns {Object} converted touch point */ getScrollOffset(x, y) { - let sx; - let sy; + let offsetX; + let offsetY; - // container size bigger than clicked position offset + // Container size bigger than clicked position offset if (x <= (this.state.containerWidth / 2)) { - sx = 0; + offsetX = 0; } else if (x > this.state.containerWidth / 2) { - // minus half of container size because we want to be center clicked position - sx = x - (this.state.containerWidth / 2); + // Minus half of container size because we want to be center clicked position + offsetX = x - (this.state.containerWidth / 2); } if (y <= this.state.containerHeight / 2) { - sy = 0; + offsetY = 0; } else if (y > this.state.containerHeight / 2) { - // minus half of container size because we want to be center clicked position - sy = y - (this.state.containerHeight / 2); + // Minus half of container size because we want to be center clicked position + offsetY = y - (this.state.containerHeight / 2); } - return {offsetX: sx, offsetY: sy}; + return {offsetX, offsetY}; } trackMovement(e) { From ff8acbb1c62224b0b9352ee06d3be815da9668f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Metehan=20=C3=96zyurt?= Date: Wed, 4 May 2022 13:59:21 +0300 Subject: [PATCH 3/6] updated logic comments added --- src/components/ImageView/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js index caa9b7914e05..52c852635d7a 100644 --- a/src/components/ImageView/index.js +++ b/src/components/ImageView/index.js @@ -98,6 +98,9 @@ class ImageView extends PureComponent { let scrollY; if (this.isZoomed && !this.state.isDragging) { const {offsetX, offsetY} = e.nativeEvent; + + // We divide the clicked positions by the zoomScale. + // We need pixel coordinates. const delta = this.getScrollOffset(offsetX / this.state.zoomScale, offsetY / this.state.zoomScale); scrollX = delta.offsetX; scrollY = delta.offsetY; @@ -106,6 +109,7 @@ class ImageView extends PureComponent { if (this.isZoomed && this.state.isDragging && this.state.isMouseDown) { this.setState({isDragging: false, isMouseDown: false}); } else if (this.isZoomed) { + // We set isZoomed state then scroll image for calculating positions this.setState({isZoomed: this.isZoomed}, () => { this.scrollableRef.scrollTop = scrollY; this.scrollableRef.scrollLeft = scrollX; @@ -118,6 +122,8 @@ class ImageView extends PureComponent { return; } + // We hold to setting isZoomed state if true + // Because when set isZoomed state can't getting actual position user clicked this.isZoomed = !this.state.isZoomed; if (this.isZoomed === false) { this.setState(prevState => ({ @@ -132,7 +138,7 @@ class ImageView extends PureComponent { } /** - * When open image, set image left/right/top/bottom point and width, height + * When open image, set image width and height. If containerHeight is set before set zoomScale * @param {Number} imageWidth * @param {Number} imageHeight */ From 56c811931332eb924c4aeac8cf099c5ce72b3a03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Metehan=20=C3=96zyurt?= Date: Wed, 4 May 2022 16:47:18 +0300 Subject: [PATCH 4/6] correcting a typo --- src/components/ImageView/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js index 52c852635d7a..0c4628b52a72 100644 --- a/src/components/ImageView/index.js +++ b/src/components/ImageView/index.js @@ -122,7 +122,7 @@ class ImageView extends PureComponent { return; } - // We hold to setting isZoomed state if true + // We hold for set isZoomed state if true // Because when set isZoomed state can't getting actual position user clicked this.isZoomed = !this.state.isZoomed; if (this.isZoomed === false) { From 8b385352969ff8d8e0521922e5cd5e932deeaf4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Metehan=20=C3=96zyurt?= Date: Sat, 14 May 2022 09:59:46 +0300 Subject: [PATCH 5/6] unnecesary function removed, better comments added, code has been improved. --- src/components/ImageView/index.js | 39 ++++++++----------------------- 1 file changed, 10 insertions(+), 29 deletions(-) diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js index 0c4628b52a72..89670caec651 100644 --- a/src/components/ImageView/index.js +++ b/src/components/ImageView/index.js @@ -23,7 +23,6 @@ class ImageView extends PureComponent { this.onContainerLayoutChanged = this.onContainerLayoutChanged.bind(this); this.onContainerPressIn = this.onContainerPressIn.bind(this); this.onContainerPress = this.onContainerPress.bind(this); - this.onContainerPressOut = this.onContainerPressOut.bind(this); this.imageLoadingStart = this.imageLoadingStart.bind(this); this.imageLoadingEnd = this.imageLoadingEnd.bind(this); this.state = { @@ -96,43 +95,26 @@ class ImageView extends PureComponent { onContainerPress(e) { let scrollX; let scrollY; - if (this.isZoomed && !this.state.isDragging) { + if (!this.state.isZoomed && !this.state.isDragging) { const {offsetX, offsetY} = e.nativeEvent; - // We divide the clicked positions by the zoomScale. - // We need pixel coordinates. + // Dividing clicked positions by the zoom scale to get coordinates + // so that once we zoom we will scroll to the clicked location. const delta = this.getScrollOffset(offsetX / this.state.zoomScale, offsetY / this.state.zoomScale); scrollX = delta.offsetX; scrollY = delta.offsetY; } - if (this.isZoomed && this.state.isDragging && this.state.isMouseDown) { + if (this.state.isZoomed && this.state.isDragging && this.state.isMouseDown) { this.setState({isDragging: false, isMouseDown: false}); - } else if (this.isZoomed) { - // We set isZoomed state then scroll image for calculating positions - this.setState({isZoomed: this.isZoomed}, () => { - this.scrollableRef.scrollTop = scrollY; - this.scrollableRef.scrollLeft = scrollX; - }); - } - } - - onContainerPressOut() { - if (this.state.isDragging) { - return; - } - - // We hold for set isZoomed state if true - // Because when set isZoomed state can't getting actual position user clicked - this.isZoomed = !this.state.isZoomed; - if (this.isZoomed === false) { + } else { + // We first zoom and once its done then we scroll to the location the user clicked. this.setState(prevState => ({ - isMouseDown: false, isZoomed: !prevState.isZoomed, - })); - } else { - this.setState({ isMouseDown: false, + }), () => { + this.scrollableRef.scrollTop = scrollY; + this.scrollableRef.scrollLeft = scrollX; }); } } @@ -170,7 +152,7 @@ class ImageView extends PureComponent { let offsetY; // Container size bigger than clicked position offset - if (x <= (this.state.containerWidth / 2)) { + if (x <= this.state.containerWidth / 2) { offsetX = 0; } else if (x > this.state.containerWidth / 2) { // Minus half of container size because we want to be center clicked position @@ -255,7 +237,6 @@ class ImageView extends PureComponent { }} onPressIn={this.onContainerPressIn} onPress={this.onContainerPress} - onPressOut={this.onContainerPressOut} > Date: Sat, 14 May 2022 10:40:07 +0300 Subject: [PATCH 6/6] unnecesary condition removed. --- src/components/ImageView/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js index 89670caec651..45cfe8c6c35a 100644 --- a/src/components/ImageView/index.js +++ b/src/components/ImageView/index.js @@ -120,7 +120,7 @@ class ImageView extends PureComponent { } /** - * When open image, set image width and height. If containerHeight is set before set zoomScale + * When open image, set image width, height and zoomScale. * @param {Number} imageWidth * @param {Number} imageHeight */ @@ -134,11 +134,11 @@ class ImageView extends PureComponent { const height = imageHeight; const newZoomScale = Math.min(containerWidth / width, containerHeight / height); - this.setState(prevState => ({ + this.setState({ imgWidth: width, imgHeight: height, - zoomScale: containerHeight ? newZoomScale : prevState.zoomScale, - })); + zoomScale: newZoomScale, + }); } /**