Lightbox.tsx is currently ~1,479 lines long, with ~300 lines dedicated to managing zoom levels, pan offsets, drag start refs, pinch-to-zoom calculations, and boundary clamping (clampPanOffset).
Extracting this logic into a custom useZoomPan hook (e.g., src/hooks/useZoomPan.ts) will decouple stateful gesture/viewport calculations from layout and rendering, improving maintainability and enabling targeted testing.
Once extracted or exposed, unit tests should be added to verify edge clamping behavior (e.g., locking horizontal X axis in fitWidth, locking vertical Y axis in fitHeight, center boundary limits in zoom mode) to prevent regressions.
Lightbox.tsxis currently ~1,479 lines long, with ~300 lines dedicated to managing zoom levels, pan offsets, drag start refs, pinch-to-zoom calculations, and boundary clamping (clampPanOffset).Extracting this logic into a custom
useZoomPanhook (e.g.,src/hooks/useZoomPan.ts) will decouple stateful gesture/viewport calculations from layout and rendering, improving maintainability and enabling targeted testing.Once extracted or exposed, unit tests should be added to verify edge clamping behavior (e.g., locking horizontal X axis in fitWidth, locking vertical Y axis in fitHeight, center boundary limits in zoom mode) to prevent regressions.