Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix issue 6326: Chat - Magnifying glass displayed anywhere #6437

Merged
merged 2 commits into from
Nov 24, 2021
Merged

fix issue 6326: Chat - Magnifying glass displayed anywhere #6437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd96f3e
fix issue 6326: Chat - Magnifying glass displayed anywhere
railway17 Nov 23, 2021
6d37102
keep this feature while image is expanded
railway17 Nov 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 25 additions & 12 deletions src/components/ImageView/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ class ImageView extends PureComponent {
this.scrollableRef = null;
this.canUseTouchScreen = canUseTouchScreen();
this.state = {
containerHeight: 0,
isZoomed: false,
isDragging: false,
isMouseDown: false,
Expand All @@ -41,8 +42,7 @@ class ImageView extends PureComponent {
return;
}
Image.getSize(this.props.url, (width, height) => {
const scale = Math.max(this.props.windowWidth / width, this.props.windowHeight / height);
this.setImageRegion(width, height, scale);
this.setImageRegion(width, height);
});
document.addEventListener('mousemove', this.trackMovement.bind(this));
}
Expand All @@ -59,9 +59,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 {Boolean} scale zoomscale when click zoom
*/
setImageRegion(width, height, scale) {
setImageRegion(width, height) {
let imgLeft = (this.props.windowWidth - width) / 2;
let imgRight = ((this.props.windowWidth - width) / 2) + width;
let imgTop = (this.props.windowHeight - height) / 2;
Expand All @@ -86,7 +85,7 @@ class ImageView extends PureComponent {
}

this.setState({
imgWidth: width, imgHeight: height, zoomScale: scale, imageLeft: imgLeft, imageTop: imgTop, imageRight: imgRight, imageBottom: imgBottom,
imgWidth: width, imgHeight: height, imageLeft: imgLeft, imageTop: imgTop, imageRight: imgRight, imageBottom: imgBottom,
});
}

Expand Down Expand Up @@ -162,19 +161,30 @@ class ImageView extends PureComponent {
return (
<View
ref={el => this.scrollableRef = el}
onLayout={(e) => {
const {width, height} = e.nativeEvent.layout;
const imageWidth = this.state.imgWidth;
const imageHeight = this.state.imgHeight;
const scale = imageHeight && imageWidth ? Math.min(width / imageWidth, height / imageHeight) : 0;
this.setState({
containerHeight: height,
zoomScale: scale,
});
}}
style={[
styles.imageViewContainer,
styles.overflowScroll,
styles.noScrollbars,
styles.pRelative,
]}
>
<Pressable
style={[
styles.w100,
styles.h100,
styles.flex1,
getZoomCursorStyle(this.state.isZoomed, this.state.isDragging),
]}
style={{
...getZoomSizingStyle(this.state.isZoomed, this.state.imgWidth, this.state.imgHeight, this.state.zoomScale, this.state.containerHeight),
...getZoomCursorStyle(this.state.isZoomed, this.state.isDragging),
...this.state.isZoomed ? styles.pRelative : styles.pAbsolute,
...styles.flex1,
}}
onPressIn={(e) => {
const {pageX, pageY} = e.nativeEvent;
this.setState({
Expand Down Expand Up @@ -212,7 +222,10 @@ class ImageView extends PureComponent {
>
<Image
source={{uri: this.props.url}}
style={getZoomSizingStyle(this.state.isZoomed, this.state.imgWidth, this.state.imgHeight, this.state.zoomScale)}
style={[
styles.h100,
styles.w100,
]}
resizeMode={this.state.isZoomed ? 'contain' : 'center'}
/>
</Pressable>
Expand Down
18 changes: 15 additions & 3 deletions src/styles/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2296,18 +2296,30 @@ function getZoomCursorStyle(isZoomed, isDragging) {
* @param {Number} imgWidth
* @param {Number} imgHeight
* @param {Number} zoomScale
* @param {Number} containerHeight
* @return {Object}
*/
function getZoomSizingStyle(isZoomed, imgWidth, imgHeight, zoomScale) {
function getZoomSizingStyle(isZoomed, imgWidth, imgHeight, zoomScale, containerHeight) {
if (imgWidth === 0 || imgHeight === 0) {
return {
height: isZoomed ? '250%' : '100%',
width: isZoomed ? '250%' : '100%',
};
}
if (isZoomed) {
return {
height: `${(imgHeight * zoomScale)}px`,
width: `${(imgWidth * zoomScale)}px`,
};
}

const top = `${(containerHeight - imgHeight) / 2}px`;
const left = `calc(50% - ${imgWidth / 2}px)`;
return {
height: isZoomed ? `${(imgHeight * zoomScale)}px` : '100%',
width: isZoomed ? `${(imgWidth * zoomScale)}px` : '100%',
height: `${imgHeight}px`,
width: `${imgWidth}px`,
top,
left,
};
}

Expand Down