Skip to content

feat(renderer): ImageViewerPane with zoom, pan, and metadata#60

Merged
khang859 merged 1 commit intomainfrom
crew/fleet-crew-e2b7
Mar 19, 2026
Merged

feat(renderer): ImageViewerPane with zoom, pan, and metadata#60
khang859 merged 1 commit intomainfrom
crew/fleet-crew-e2b7

Conversation

@khang859
Copy link
Copy Markdown
Owner

Summary

  • Adds ImageViewerPane component replacing the Mission 1 placeholder for paneType: 'image' panes
  • Adds FILE_READ_BINARY IPC channel (constants + main handler + preload) to load image files as base64 blob URLs — works in both dev and production mode
  • Supports PNG, JPG, JPEG, GIF, WebP, SVG, BMP, ICO

Features

  • Default: Fit-to-window (image scaled to fill pane, re-fits on resize)
  • Zoom: Scroll wheel, +/- keys, floating toolbar buttons
  • Double-click: Toggle between fit-to-window and 100% actual size
  • Pan: Click-drag when zoomed in; grab/grabbing cursor feedback
  • Zoom indicator: Bottom-right overlay showing current percentage
  • Reset: 0 key resets to fit-to-window
  • Floating toolbar: Top-right, appears on hover — Zoom In, Zoom Out, Fit, 1:1 buttons
  • Checkerboard background: Standard transparency indicator pattern
  • Status bar: Filename, image dimensions (W × H), file size (human-readable)

Test plan

  • Open a PNG — image shows fit-to-window, status bar shows filename/dimensions/size
  • Scroll wheel zooms in/out smoothly, zoom % indicator updates
  • Double-click toggles fit ↔ 100%
  • Click-drag pans when zoomed in
  • 0 resets to fit, +/- zoom in/out
  • Floating toolbar appears on hover
  • PNG with transparency shows checkerboard behind it
  • Works with JPG, GIF, SVG, WebP
  • npm run build passes ✅

🤖 Generated with Claude Code

- Add FILE_READ_BINARY IPC channel to load images as base64 via main process
- Create ImageViewerPane component with checkerboard background, fit-to-window
  default, scroll wheel zoom, double-click toggle fit/100%, click-drag pan,
  floating toolbar (hover), status bar with filename/dimensions/file size,
  and keyboard shortcuts (0=fit, +/-=zoom)
- Replace image placeholder in PaneGrid with ImageViewerPane
- Fix pre-existing unused variable warning in StarCommandTab

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@khang859 khang859 force-pushed the crew/fleet-crew-e2b7 branch from 5b272d6 to c14c97b Compare March 19, 2026 12:25
@khang859 khang859 merged commit 5ece982 into main Mar 19, 2026
1 check passed
@khang859 khang859 deleted the crew/fleet-crew-e2b7 branch March 19, 2026 12:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant