fix(lightbox): pan zoomed image with single-finger touch on mobile (#532)
@Rekoo-PS reported zoom on mobile only shows the centre crop — the
image zooms but you can't pan around to see other parts. Single-finger
touch was being routed through the carousel-swipe branch which is
gated on zoom <= 1 (so swipe doesn't fight with pan), so when zoomed
the touch hit no handler at all.
Desktop has the equivalent path via handleMouseDown / handleMouseMove
(line 364), which is why this only manifests on mobile.
Add a single-finger pan branch to the touch handlers that mirrors the
mouse path:
- handleTouchStart: when zoom > 1 and one finger, record dragStart
relative to the existing dragOffset (so subsequent moves continue
from where the last pan left off, not from origin).
- handleTouchMove: when isDragging + zoom > 1 + one finger, update
dragOffset from touch position.
- handleTouchEnd: clear the isDragging flag (offset persists so the
image stays where the user left it).
Also fix a latent bug surfaced while reading the pinch-zoom path:
when pinch-out drops zoom back to 1.0, dragOffset wasn't reset, so the
photo sat off-centre at natural zoom. Re-centre in handleTouchMove
when newZoom drops to <=1 with a non-zero offset.
Carousel swipe stays disabled when zoomed (existing behaviour). Mouse
path untouched. Pinch-to-zoom path untouched.
Refs: #532
This commit is contained in:
@@ -411,6 +411,16 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
|
|||||||
setDragX(0);
|
setDragX(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
} else if (e.touches.length === 1 && zoom > 1) {
|
||||||
|
// Single-finger pan when zoomed in (#532). Mirrors the desktop
|
||||||
|
// handleMouseDown path so mobile users can drag a zoomed image
|
||||||
|
// around instead of being stuck looking at the centre crop.
|
||||||
|
// Carousel swipe is disabled in this branch — when zoom > 1 the
|
||||||
|
// gesture has to mean "pan", not "next photo", or zoomed nav
|
||||||
|
// becomes unusable.
|
||||||
|
const t = e.touches[0];
|
||||||
|
setIsDragging(true);
|
||||||
|
setDragStart({ x: t.clientX - dragOffset.x, y: t.clientY - dragOffset.y });
|
||||||
} else if (e.touches.length === 1 && zoom <= 1 && (phase === 'idle' || phase === 'dragging')) {
|
} else if (e.touches.length === 1 && zoom <= 1 && (phase === 'idle' || phase === 'dragging')) {
|
||||||
const t = e.touches[0];
|
const t = e.touches[0];
|
||||||
swipeStartRef.current = { x: t.clientX, y: t.clientY, t: Date.now() };
|
swipeStartRef.current = { x: t.clientX, y: t.clientY, t: Date.now() };
|
||||||
@@ -432,6 +442,24 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
|
|||||||
const newZoom = Math.max(1, Math.min(3, zoom * scale));
|
const newZoom = Math.max(1, Math.min(3, zoom * scale));
|
||||||
setZoom(newZoom);
|
setZoom(newZoom);
|
||||||
setTouchDistance(newDistance);
|
setTouchDistance(newDistance);
|
||||||
|
// Pinch-out back down to 1.0 has to re-centre the image — without
|
||||||
|
// this the previous pan offset persists and the photo sits off-
|
||||||
|
// centre at the natural zoom level (#532 follow-on).
|
||||||
|
if (newZoom <= 1 && (dragOffset.x !== 0 || dragOffset.y !== 0)) {
|
||||||
|
setDragOffset({ x: 0, y: 0 });
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isDragging && zoom > 1 && e.touches.length === 1) {
|
||||||
|
// Single-finger pan when zoomed (#532). Touch counterpart to
|
||||||
|
// handleMouseMove. Same dragOffset state so the transform on the
|
||||||
|
// <img> stays consistent across input modalities.
|
||||||
|
const t = e.touches[0];
|
||||||
|
setDragOffset({
|
||||||
|
x: t.clientX - dragStart.x,
|
||||||
|
y: t.clientY - dragStart.y,
|
||||||
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -459,6 +487,10 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
|
|||||||
|
|
||||||
const handleTouchEnd = (e: React.TouchEvent) => {
|
const handleTouchEnd = (e: React.TouchEvent) => {
|
||||||
setTouchDistance(null);
|
setTouchDistance(null);
|
||||||
|
// Release single-finger pan state (#532). The pan offset itself
|
||||||
|
// persists so the image stays where the user left it — only the
|
||||||
|
// "actively dragging" flag clears.
|
||||||
|
if (isDragging) setIsDragging(false);
|
||||||
const start = swipeStartRef.current;
|
const start = swipeStartRef.current;
|
||||||
if (phase === 'dragging' && start && e.changedTouches.length > 0) {
|
if (phase === 'dragging' && start && e.changedTouches.length > 0) {
|
||||||
const t = e.changedTouches[0];
|
const t = e.changedTouches[0];
|
||||||
|
|||||||
Reference in New Issue
Block a user