Improved drag and drop#1799
Open
Dima-1 wants to merge 14 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Implements an improved drag-and-drop flow for importing track files into OsmAnd Cloud, including visual drop overlays and folder-targeted dropping from the Tracks UI.
Changes:
- Added a global GPX drag controller + geometry helpers to resolve drop targets (map vs tracks menu folders) and show contextual overlays.
- Refactored Cloud GPX/KMZ/KML import into a shared
useCloudGpxImporthook and reused it from both drag-and-drop and the existing uploader. - Enhanced UX by styling drop targets in the Tracks menu and enabling “zoom to track” after successful upload/open.
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| map/src/util/hooks/useCloudGpxImport.js | New shared hook for importing GPX/KMZ/KML into OsmAnd Cloud. |
| map/src/menu/tracks/TracksMenu.jsx | Marks the tracks list container as a drop target (data attribute + styling hook). |
| map/src/menu/tracks/TrackGroupFolder.jsx | Marks opened folders as drop targets for folder-specific imports. |
| map/src/menu/tracks/CloudTrackGroup.jsx | Adds drop-hover styling and folder targeting metadata for groups. |
| map/src/menu/trackfavmenu.module.css | Adds drop-target styles for folders/groups. |
| map/src/map/layers/LocalClientTrackLayer.js | Removes the old map-only drag/drop handling in favor of the global controller. |
| map/src/map/components/GpxMenuDropOverlay.jsx | New overlay for menu-drop guidance (positioned to menu region). |
| map/src/map/components/gpxMapDropOverlay.module.css | Updates overlay styling and renames .overlay → .dropOverlay. |
| map/src/map/components/GpxMapDropOverlay.jsx | Converts overlay to use AppContext drag state + computed insets. |
| map/src/map/components/GpxMapDropGeometry.js | New helper module for computing visible map/menu drop geometry + target resolution. |
| map/src/map/components/GpxFileDragController.jsx | New global window-level drag/drop controller, triggers cloud import into resolved folder. |
| map/src/manager/track/TracksManager.js | Adds IMPORT_FOLDER_NAME constant used for map-drop default folder. |
| map/src/manager/track/SaveTrackManager.js | Sets zoomToTrack when opening a just-uploaded track. |
| map/src/frame/util/CloudGpxUploader.jsx | Refactors uploader to use the shared cloud import hook. |
| map/src/frame/GlobalFrame.js | Mounts the global drag controller and moves main menu open-state to AppContext. |
| map/src/context/AppContext.js | Adds openMainMenu and gpxFileDrag to shared app context. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
alisa911
reviewed
Jun 16, 2026
alisa911
left a comment
alisa911
left a comment
Contributor
There was a problem hiding this comment.
Rename all the new files away from the gpx prefix, the feature handles not only GPX (also KMZ/KML), but only tracks (not favorites). Also move these files out of map/ into frame/, since they're not map-specific.
Comment on lines
+1
to
+21
| import { useContext, useEffect } from 'react'; | ||
| import { createPortal } from 'react-dom'; | ||
| import AppContext from '../context/AppContext'; | ||
| import LoginContext from '../context/LoginContext'; | ||
| import { IMPORT_FOLDER_NAME } from '../manager/track/TracksManager'; | ||
| import useCloudGpxImport from '../util/hooks/useCloudGpxImport'; | ||
| import TracksDropOverlay from './TracksDropOverlay'; | ||
|
|
||
| export const GPX_FILE_DRAG_IDLE = { active: false, hoverFolder: null, overMap: false }; | ||
|
|
||
| export function hasFiles(e) { | ||
| return e.dataTransfer?.types?.includes('Files'); | ||
| } | ||
|
|
||
| export default function TracksFileDragController() { | ||
| const ctx = useContext(AppContext); | ||
| const ltx = useContext(LoginContext); | ||
| const { importGpxFiles } = useCloudGpxImport(); | ||
| const isProAccount = ltx.isProAccount(); | ||
|
|
||
| useEffect(() => { |
Comment on lines
+64
to
+66
| const files = Array.from(e.dataTransfer?.files || []); | ||
| const { hoverFolder, overMap } = ctx.gpxFileDrag ?? GPX_FILE_DRAG_IDLE; | ||
| if (hoverFolder !== null) { |
| container.removeEventListener('drop', onDrop); | ||
| window.removeEventListener('dragend', onDragEnd); | ||
| }; | ||
| }, [ctx.gpxFileDrag, ctx.setGpxFileDrag, importGpxFiles, isProAccount]); |
Comment on lines
+31
to
+52
| const loadingName = removeFileExtension(file.name) + GPX_FILE_EXT; | ||
| const reader = new FileReader(); | ||
| reader.addEventListener('load', (e) => { | ||
| const data = e.target.result; | ||
| if (data) { | ||
| resolve({ | ||
| file, | ||
| selected, | ||
| data: data, | ||
| name: file.name, | ||
| originalName: file.name, | ||
| folder, | ||
| }); | ||
| } else { | ||
| ctx.setTrackErrorMsg({ | ||
| title: 'Import error', | ||
| msg: `Unable to import ${file.name}`, | ||
| }); | ||
| ctx.setTrackLoading((prev) => prev.filter((n) => n !== loadingName)); | ||
| resolve(null); | ||
| } | ||
| }); |
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
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.
#1283