feat(desktop): add pan, pinch, and zoom to the image file pane

Merged
KI
3mo ago
+210-21

Summary

  • The v2 image file pane (FilePane registry ImageView) now supports pinch-to-zoom, scroll/drag panning, and double-click reset, instead of a fixed fit-to-pane image.

Why / Context

Images opened in a workspace pane were locked to a fitted view with no way to inspect details (screenshots, diagrams, dense UI captures). This adds standard image-viewer navigation gestures.

How It Works

  • A {scale, x, y} transform is applied to the image wrapper; zoom is anchored at the cursor (zoomAtPoint), clamped to 25%–1600%.
  • Pinch: Chromium delivers trackpad pinch as a wheel event with ctrlKey set, so ctrl/cmd+wheel zooms. The listener is attached natively as non-passive because React's onWheel can't preventDefault (needed to stop scroll chaining/page zoom).
  • Pan: plain two-finger scroll pans via wheel deltas; click-drag pans via pointer capture (survives leaving the pane mid-drag).
  • Reset: double-click, or a zoom-percentage badge that appears bottom-right whenever the view is zoomed/panned.
  • The transform resets when the pane switches to a different file, and the container div now always mounts (the previous objectUrl early return would have left the once-mounted wheel listener unattached).

Only the v2 pane registry view is changed; the sunsetting v1 FileViewerPane is untouched.

Manual QA Checklist

  • Open an image file in a workspace pane; it renders fitted as before
  • Trackpad pinch zooms around the cursor; ctrl/cmd + mouse wheel does the same
  • Two-finger scroll pans; click-drag pans with grab cursor
  • Zoom badge appears when zoomed; clicking it or double-clicking resets to fit
  • Switching the pane to another image resets the view
  • Drag released outside the pane doesn't leave panning stuck

Testing

  • bun run lint
  • bun run typecheck (desktop)
  • Not manually QA'd in the running app — gesture behavior (pinch/pan/reset) needs a trackpad pass per the checklist above.

Summary by cubic

Adds pan, pinch-to-zoom, keyboard zoom/pan, and quick reset to the desktop image file pane so you can inspect screenshots and diagrams in place. Also extracts a reusable usePanZoom hook for future viewers.

  • New Features

    • Pinch or Ctrl/Cmd + wheel zooms at the cursor (25%–1600%).
    • Two-finger scroll and click-drag to pan, with grab cursor.
    • Double-click or use the zoom badge to reset to fit.
    • View resets when switching files.
    • Applies to the v2 FilePane ImageView only.

  • Bug Fixes

    • Keyboard pan/zoom now works with focus (+/− to zoom, arrows to pan, 0 to reset) and adds aria hints.
    • Ensures single-pointer drag ownership and prevents reset-badge clicks from starting a drag.
    • Container always mounts so the non-passive wheel listener attaches reliably.
    • Uses pointer capture to avoid stuck panning when the pointer leaves the pane.
    • Prevents scroll chaining and browser zoom via preventDefault on wheel.

Summary by CodeRabbit

  • New Features
    • Added interactive image zooming with bounded controls.
    • Added pointer-based panning and support for wheel and trackpad pinch gestures.
    • Added keyboard controls for zooming, panning, and resetting the view.
    • Added controls to reset the image transform and zoom percentage.
    • Added double-click support to reset the image view.
    • Added visual drag-state feedback while moving images.
    • Image positioning now resets automatically when viewing a different document or file.