feat: add drag and drop support for opening images#62
Merged
Conversation
…ing and UI drag-and-drop messaging
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughSummary by CodeRabbit
Walkthroughバックエンドで EXIF 処理を公開化（ProcessImageFile）、Wails ウィンドウでファイルドロップを有効化、フロントエンドにドラッグ＆ドロップ UI・購読・処理統合（handleExifResult）を追加してプレビュー領域でドラッグ登録を実装しました。 Changesドラッグアンドドロップによるファイル追加機能
Sequence DiagramsequenceDiagram
participant User as ユーザー
participant Wails as Wailsウィンドウ
participant Frontend as App.tsx
participant Backend as バックエンドAPI
User->>Wails: ファイルをドラッグアンドドロップ
Wails->>Frontend: files-dropped イベント配信
Frontend->>Frontend: 拡張子チェック / 単数チェック
alt JPG/PNG ファイルの場合
Frontend->>Backend: ProcessImageFile(filePath)
Backend->>Frontend: ExifResult 返却
Frontend->>Frontend: handleExifResult で状態更新（画像/EXIF等）およびプレビュー表示
else その他の拡張子
Frontend->>Frontend: トーストで非対応を表示
end
Frontend->>Frontend: 選択状態を復帰
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/App.tsx`:
- Around line 701-704: The overlay is closing incorrectly because onDragLeave
toggles setIsDragging(false) even when entering child elements; change to a
drag-depth counter approach: add a ref/variable (e.g., dragCounterRef) and
increment it in the onDragEnter handler used now, decrement it in onDragLeave,
only call setIsDragging(false) when the counter reaches 0, and reset the counter
to 0 on onDrop and onDrop handler's e.preventDefault(); update the existing
onDragEnter, onDragLeave, and onDrop handlers to use this counter while keeping
setIsDragging(true) on initial enter.
- Around line 468-500: The files-dropped handler (the Events.On callback
referenced by offFilesDropped) currently silently uses only files[0], so
multiple dropped images are ignored; update the handler to detect when
files.length > 1 and explicitly notify the user (call showToast with a clear
message like "Multiple files dropped — please drop one image at a time") and
return, or alternatively handle all images by iterating over files, validating
each with the existing lower.endsWith checks and calling AppAPI.ProcessImageFile
and handleExifResult for each (ensuring you respect isSelectingRef /
setIsSelecting to avoid concurrent UI state races and setIsDragging(false)
appropriately); modify the logic inside the Events.On callback (around the
files.length checks and where files[0] is used) to implement one of these
behaviors and keep error handling consistent.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 3c6fbbe9-affe-402b-9623-7dba710306cc
📒 Files selected for processing (5)
app.gofrontend/src/App.cssfrontend/src/App.tsxmain.gowatcher.go
…with a reference counter
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/App.tsx (1)
506-508:⚠️ Potential issue | 🟡 Minor | ⚡ Quick win非対応ファイル時のドラッグカウンタのリセットが欠けています。
Line 508 で
setIsDragging(false)を設定していますが、dragCounterRef.current = 0のリセットが抜けています。Lines 484, 494 との一貫性のため、ここでもカウンタをリセットしてください。🛠️ 修正案
} else { showToast("Invalid file: only JPG and PNG are supported."); setIsDragging(false); + dragCounterRef.current = 0; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/App.tsx` around lines 506 - 508, Invalid file branch fails to reset the drag counter; when rejecting unsupported files you call showToast(...) and setIsDragging(false) but forget to reset dragCounterRef.current to 0. Update the rejection branch (the block that calls showToast and setIsDragging) to also set dragCounterRef.current = 0 so it matches the other handlers (lines handling drag enter/leave) and prevents stale drag counts; reference the dragCounterRef, setIsDragging, and showToast symbols when making the change.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@frontend/src/App.tsx`:
- Around line 506-508: Invalid file branch fails to reset the drag counter; when
rejecting unsupported files you call showToast(...) and setIsDragging(false) but
forget to reset dragCounterRef.current to 0. Update the rejection branch (the
block that calls showToast and setIsDragging) to also set dragCounterRef.current
= 0 so it matches the other handlers (lines handling drag enter/leave) and
prevents stale drag counts; reference the dragCounterRef, setIsDragging, and
showToast symbols when making the change.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 946b004f-1ddd-41f9-8b33-c04b248d606c
📒 Files selected for processing (1)
frontend/src/App.tsx
- Resolve TDZ error by moving handleExifResult before its usage - Remove React-based drag state tracking to eliminate overlay flicker - Use Wails native CSS class for reliable drag hover - Fix overlay sizing bug in WebKit flex containers by using inset: 0 - Reject multiple files dropped simultaneously - Add explanatory comment to time.Sleep in watcher.go
Owner
Author
|
@coderabbitai review |
Contributor
✅ Action performedReview finished.
|
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/App.tsx (1)
370-410: 🧹 Nitpick | 🔵 Trivial | ⚡ Quick win
showToastをuseCallbackでメモ化して依存配列に追加してください。
handleExifResult内でshowToastを使用していますが、依存配列に含まれていません。showToastは ref と安定した state setter のみを使用しているため機能的には動作しますが、React のベストプラクティスに従っていません。
showToastをuseCallbackでラップし（依存配列は空配列）、handleExifResultの依存配列に追加することで、コードの保守性と意図の明確さが向上します。♻️ 修正案
showToast関数（Line 349 付近）をuseCallbackでラップ:- const showToast = (message: string) => { + const showToast = useCallback((message: string) => { if (toastTimerRef.current !== null) { window.clearTimeout(toastTimerRef.current); toastTimerRef.current = null; } // ... rest of function - }; + }, []);次に
handleExifResultの依存配列に追加:- }, []); + }, [showToast]);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/App.tsx` around lines 370 - 410, Wrap the existing showToast function in a useCallback with an empty dependency array (so it is memoized and stable), then add showToast to the dependency array of the useCallback that defines handleExifResult; update the showToast declaration (the function referenced by handleExifResult) to use useCallback([]) and ensure handleExifResult’s dependencies include showToast so React’s hooks rules are satisfied.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/App.css`:
- Around line 241-243: Add a brief inline comment above the CSS rule for the
selector ".preview-area.file-drop-target-active .drop-overlay" stating that the
".file-drop-target-active" class is automatically applied by the Wails runtime
to elements with the data-file-drop-target="true" attribute during drag
operations, so future readers understand this behavior and maintainers know it's
not defined elsewhere in our codebase.
In `@frontend/src/App.tsx`:
- Around line 700-705: Add a short inline comment near the preview-area element
explaining that the data-file-drop-target="true" attribute is required by the
Wails runtime to detect drag-and-drop targets and will automatically add the
.file-drop-target-active class to show the .drop-overlay; reference the
preview-area container, the data-file-drop-target attribute, the .drop-overlay
element and the .file-drop-target-active class so future maintainers understand
this Wails-specific integration point.
---
Outside diff comments:
In `@frontend/src/App.tsx`:
- Around line 370-410: Wrap the existing showToast function in a useCallback
with an empty dependency array (so it is memoized and stable), then add
showToast to the dependency array of the useCallback that defines
handleExifResult; update the showToast declaration (the function referenced by
handleExifResult) to use useCallback([]) and ensure handleExifResult’s
dependencies include showToast so React’s hooks rules are satisfied.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: fd9b39bf-c80b-4f50-90d5-19a40b49339b
📒 Files selected for processing (2)
frontend/src/App.cssfrontend/src/App.tsx
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
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.
DDによる追加
(Fixes #50 )