[Lightbox] Set 2 as minimal allowed zoom level (#6132)
* [Lightbox] Set 2 as minimal allowed zoom level on iOS * Fix both Android and iOS
This commit is contained in:
@@ -26,7 +26,7 @@ import {
|
|||||||
TransformMatrix,
|
TransformMatrix,
|
||||||
} from '../../transforms'
|
} from '../../transforms'
|
||||||
|
|
||||||
const MIN_DOUBLE_TAP_SCALE = 2
|
const MIN_SCREEN_ZOOM = 2
|
||||||
const MAX_ORIGINAL_IMAGE_ZOOM = 2
|
const MAX_ORIGINAL_IMAGE_ZOOM = 2
|
||||||
|
|
||||||
const initialTransform = createTransform()
|
const initialTransform = createTransform()
|
||||||
@@ -166,8 +166,10 @@ const ImageItem = ({
|
|||||||
// Don't let the picture zoom in so close that it gets blurry.
|
// Don't let the picture zoom in so close that it gets blurry.
|
||||||
// Also, like in stock Android apps, don't let the user zoom out further than 1:1.
|
// Also, like in stock Android apps, don't let the user zoom out further than 1:1.
|
||||||
const [, , committedScale] = readTransform(committedTransform.value)
|
const [, , committedScale] = readTransform(committedTransform.value)
|
||||||
const maxCommittedScale =
|
const maxCommittedScale = Math.max(
|
||||||
(imageDimensions.width / screenSize.width) * MAX_ORIGINAL_IMAGE_ZOOM
|
MIN_SCREEN_ZOOM,
|
||||||
|
(imageDimensions.width / screenSize.width) * MAX_ORIGINAL_IMAGE_ZOOM,
|
||||||
|
)
|
||||||
const minPinchScale = 1 / committedScale
|
const minPinchScale = 1 / committedScale
|
||||||
const maxPinchScale = maxCommittedScale / committedScale
|
const maxPinchScale = maxCommittedScale / committedScale
|
||||||
const nextPinchScale = Math.min(
|
const nextPinchScale = Math.min(
|
||||||
@@ -277,11 +279,13 @@ const ImageItem = ({
|
|||||||
const candidateScale = Math.max(
|
const candidateScale = Math.max(
|
||||||
imageAspect / screenAspect,
|
imageAspect / screenAspect,
|
||||||
screenAspect / imageAspect,
|
screenAspect / imageAspect,
|
||||||
MIN_DOUBLE_TAP_SCALE,
|
MIN_SCREEN_ZOOM,
|
||||||
)
|
)
|
||||||
// But don't zoom in so close that the picture gets blurry.
|
// But don't zoom in so close that the picture gets blurry.
|
||||||
const maxScale =
|
const maxScale = Math.max(
|
||||||
(imageDimensions.width / screenSize.width) * MAX_ORIGINAL_IMAGE_ZOOM
|
MIN_SCREEN_ZOOM,
|
||||||
|
(imageDimensions.width / screenSize.width) * MAX_ORIGINAL_IMAGE_ZOOM,
|
||||||
|
)
|
||||||
const scale = Math.min(candidateScale, maxScale)
|
const scale = Math.min(candidateScale, maxScale)
|
||||||
|
|
||||||
// Calculate where we would be if the user pinched into the double tapped point.
|
// Calculate where we would be if the user pinched into the double tapped point.
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ import {ImageSource} from '../../@types'
|
|||||||
const SWIPE_CLOSE_OFFSET = 75
|
const SWIPE_CLOSE_OFFSET = 75
|
||||||
const SWIPE_CLOSE_VELOCITY = 1
|
const SWIPE_CLOSE_VELOCITY = 1
|
||||||
const MAX_ORIGINAL_IMAGE_ZOOM = 2
|
const MAX_ORIGINAL_IMAGE_ZOOM = 2
|
||||||
const MIN_DOUBLE_TAP_SCALE = 2
|
const MIN_SCREEN_ZOOM = 2
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
imageSrc: ImageSource
|
imageSrc: ImageSource
|
||||||
@@ -56,10 +56,13 @@ const ImageItem = ({
|
|||||||
src: imageSrc.uri,
|
src: imageSrc.uri,
|
||||||
knownDimensions: imageSrc.dimensions,
|
knownDimensions: imageSrc.dimensions,
|
||||||
})
|
})
|
||||||
const maxZoomScale = imageDimensions
|
const maxZoomScale = Math.max(
|
||||||
? (imageDimensions.width / screenSizeDelayedForJSThreadOnly.width) *
|
MIN_SCREEN_ZOOM,
|
||||||
MAX_ORIGINAL_IMAGE_ZOOM
|
imageDimensions
|
||||||
: 1
|
? (imageDimensions.width / screenSizeDelayedForJSThreadOnly.width) *
|
||||||
|
MAX_ORIGINAL_IMAGE_ZOOM
|
||||||
|
: 1,
|
||||||
|
)
|
||||||
|
|
||||||
const animatedStyle = useAnimatedStyle(() => {
|
const animatedStyle = useAnimatedStyle(() => {
|
||||||
return {
|
return {
|
||||||
@@ -218,7 +221,7 @@ const getZoomRectAfterDoubleTap = (
|
|||||||
const zoom = Math.max(
|
const zoom = Math.max(
|
||||||
imageAspect / screenAspect,
|
imageAspect / screenAspect,
|
||||||
screenAspect / imageAspect,
|
screenAspect / imageAspect,
|
||||||
MIN_DOUBLE_TAP_SCALE,
|
MIN_SCREEN_ZOOM,
|
||||||
)
|
)
|
||||||
// Unlike in the Android version, we don't constrain the *max* zoom level here.
|
// Unlike in the Android version, we don't constrain the *max* zoom level here.
|
||||||
// Instead, this is done in the ScrollView props so that it constraints pinch too.
|
// Instead, this is done in the ScrollView props so that it constraints pinch too.
|
||||||
|
|||||||
Reference in New Issue
Block a user