[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:
dan
2024-11-06 20:38:22 +00:00
committed by GitHub
parent 27bbf8b67a
commit d666a2d7c3
2 changed files with 19 additions and 12 deletions
@@ -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.