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:
Paul Nothaft
2026-05-21 10:00:21 +02:00
parent b2bbf7efb5
commit 53139b8cb8
@@ -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];