Add image zoom modal with enhanced viewing controls #23
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add fullscreen image modal with zoom and navigation features to improve user experience when viewing generated images across all features (Model Generation, Virtual Try-On, Background Replacement). Features: - New ImageModal component with zoom controls (0.5x-5x) - Mouse wheel zoom and drag to pan - Keyboard shortcuts (arrows, +/-, 0, Esc) - Navigation between multiple images - Zoom button added to image controls (alongside copy/download) - Copy and download functions in modal - Smooth transitions and intuitive UI Changes: - Add ImageModal.tsx with zoom, pan, and navigation - Update Base64Image.tsx to support expand button - Update ImageDisplay.tsx to integrate modal The zoom button is now visible in the top-right corner of images, making the expand feature discoverable without requiring hover. This enhancement applies to all screens using ImageDisplay component.
Fix two critical issues in ImageModal component: 1. Auto-dismiss snackbar messages - Add useEffect to clear snackbar message after 3 seconds - Prevents message from staying visible indefinitely 2. Fix keyboard shortcut dependencies - Move useCallback definitions before useEffect - Add all required dependencies to useEffect dependency array - Ensures keyboard shortcuts reference latest callbacks - Fixes potential stale closure issues in React Strict Mode Dependencies added: onClose, onIndexChange, handleZoomIn, handleZoomOut, handleResetZoom
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
まとめ / Summary
生成画像を拡大表示できるモーダルを追加しました。
全ての画像表示画面（Model Generation、Virtual Try-On、Background Replacement）で利用可能です。
新機能 / New Features
+/-/0）Escで閉じる、その他上記参照テスト