Skip to main content

ImageViewer drag-to-pan when zoomed in (WEB-1062)

Version: 0.5.0 · Type: ✨ Feature

WEB-1062

Problem​

After zooming in, there was no way to navigate to a specific area of the image — the image stayed centered with no pan support.

Changed Files​

  • packages/design/src/components/ImageViewer/ImageViewer.tsx
  • packages/design/src/components/ImageViewer/__tests__/ImageViewer.test.tsx

Changes​

  1. Pan state — panRef (ref, not state) stores the current { x, y } offset. Direct DOM writes during drag bypass React re-render, eliminating drag latency. isDragging state drives cursor and userSelect style.
  2. Trigger condition — drag only activates when zoom > 1 (isPannable). Cursor switches to grab / grabbing.
  3. Event binding — mousedown on <img> starts the drag; mousemove / mouseup / mouseleave on the content layer prevent drag cancellation when the pointer moves off the image.
  4. Boundary clamping — max pan is derived from offsetWidth * zoom vs window.innerWidth so the image never fully leaves the viewport.
  5. Auto-reset — pan resets to { 0, 0 } on image switch, viewer close, or zoom-out to 1×.
  6. Transform — non-zero pan uses translate(x, y) scale(zoom); zero pan keeps scale(zoom) to preserve existing test assertions.
  7. 5 new unit tests — grab cursor, pan update, zoom=1 guard, navigation reset, boundary clamping.