Limit zoom level

This commit is contained in:
Dan Abramov
2023-09-29 17:43:53 +01:00
parent c360c5c922
commit 13aaf8d339
@@ -25,6 +25,7 @@ import useImageDimensions from '../../hooks/useImageDimensions'
import {ImageSource} from '../../@types' import {ImageSource} from '../../@types'
const SCREEN = Dimensions.get('window') const SCREEN = Dimensions.get('window')
const MAX_SCALE = 2
type Props = { type Props = {
imageSrc: ImageSource imageSrc: ImageSource
@@ -226,9 +227,15 @@ const ImageItem = ({
}; };
}) })
.onChange((e) => { .onChange((e) => {
if (!imageDimensions) {
return;
}
const [,,committedScale] = readTransform(committedTransform.value) const [,,committedScale] = readTransform(committedTransform.value)
const nextScale = Math.max(e.scale, 1 / committedScale); const maxCommittedScale = (imageDimensions.width / SCREEN.width) * MAX_SCALE
pinchScale.value = nextScale const minPinchScale = 1 / committedScale;
const maxPinchScale = maxCommittedScale / committedScale;
const nextPinchScale = Math.min(Math.max(minPinchScale, e.scale), maxPinchScale);
pinchScale.value = nextPinchScale
const [dx, dy] = getPanLimitAdjustment(panTranslation.value) const [dx, dy] = getPanLimitAdjustment(panTranslation.value)
if (dx !== 0 || dy !== 0) { if (dx !== 0 || dy !== 0) {
pinchTranslation.value = { pinchTranslation.value = {