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);
|
||||
}
|
||||
}
|
||||
} 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')) {
|
||||
const t = e.touches[0];
|
||||
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));
|
||||
setZoom(newZoom);
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -459,6 +487,10 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
|
||||
|
||||
const handleTouchEnd = (e: React.TouchEvent) => {
|
||||
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;
|
||||
if (phase === 'dragging' && start && e.changedTouches.length > 0) {
|
||||
const t = e.changedTouches[0];
|
||||
|
||||
Reference in New Issue
Block a user