Improved drag and drop by Dima-1 · Pull Request #1799 · osmandapp/web

Dima-1 · 2026-06-16T07:36:02Z

Copilot

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 useCloudGpxImport hook 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.

+                const reader = new FileReader();
+                reader.addEventListener('load', (e) => {
+                    const data = e.target.result;
+                    if (data) {
+                        mutateUploadedFiles(
+                            (o) =>
+                                (o[file.name] = {
+                                    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([...ctx.trackLoading.filter((n) => n !== file.name)]);
+                    }
+                });


alisa911

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.

alisa911 · 2026-06-16T08:08:38Z

+
+            const currentCtx = ctxRef.current;
+            const { hoverFolder, overMap } = resolveGpxDropTarget(e.clientX, e.clientY, currentCtx);
+            currentCtx.setGpxFileDrag({ active: true, hoverFolder, overMap });


setGpxFileDrag is called with a fresh object on every dragover, spamming context updates and re-rendering on each mouse move

alisa911 · 2026-06-16T08:09:02Z

+            const currentCtx = ctxRef.current;
+            const { hoverFolder, overMap } = resolveGpxDropTarget(e.clientX, e.clientY, currentCtx);
+            currentCtx.setGpxFileDrag({ active: true, hoverFolder, overMap });
+        };


the overlay is activated regardless of auth, so free/anonymous users see "Drop GPX to import" but the drop silently no-ops

alisa911 · 2026-06-16T08:09:35Z

+            }
+
+            const selected = files.length === 1;
+            ctx.setTrackLoading(files.map((track) => removeFileExtension(track.name) + GPX_FILE_EXT));


loading entries are set as name + GPX_FILE_EXT but removed by raw file.name on error, so failed .kmz/.kml imports leave a stuck loading placeholder

alisa911 · 2026-06-16T08:09:53Z

+import { createTrackFreeName, removeFileExtension, saveTrackToCloud } from '../../manager/track/SaveTrackManager';
+import { useMutator } from '../Utils';
+
+const CLOUD_TRACK_EXTENSIONS = ['.gpx', '.kmz', '.kml'];


.kml is accepted but always saved with type: 'GPX' and read as text

alisa911 · 2026-06-16T08:10:39Z

 export const DEFAULT_GROUP_NAME = '';
+export const IMPORT_FOLDER_NAME = 'Import';


IMPORT_FOLDER_NAME = 'Import' is a hardcoded, untranslated cloud-folder name; verify it matches existing folder-naming conventions

alisa911 · 2026-06-16T08:57:16Z

+export default function GpxMenuDropOverlay() {
+    const ctx = useContext(AppContext);
+    const { t } = useTranslation();
+    const ctxRef = useRef(ctx);


const ctxRef = useRef(ctx) violates the project rule "refs are a last resort" (CLAUDE.md), and stashing the entire context in a ref is exactly what we don't do.

alisa911 · 2026-06-16T08:59:18Z

+    const ctx = useContext(AppContext);
+    const { t } = useTranslation();
+    const ctxRef = useRef(ctx);
+    const [overlayStyle, setOverlayStyle] = useState(null);


The hovered folder is already highlighted via the groupDropTarget/folderDropTarget CSS classes; a separately measured portal overlay on top of the same folder duplicates that visual feedback. Pick one mechanism.

alisa911 · 2026-06-16T08:59:36Z

+            return;
+        }
+
+        const update = () => {


Locating and measuring the target folder via getElementById to position a fixed overlay couples this to DOM ids and is brittle; prefer rendering the highlight inside the folder component itself.

alisa911 · 2026-06-16T09:02:18Z

    return (
        <>
            <Box
                id={`se-tracks-folder`}
+                className={isDropTarget ? styles.folderDropTarget : undefined}
+                data-cloud-track-folder={isDropTarget ? group.fullName : undefined}


data-cloud-track-folder exists only to bridge the global window drag listener (which has just cursor coords) back to a folder identity via elementFromPoint(...).closest(...). This is DOM-scraping for state React already owns. Attach onDragEnter/onDragOver/onDrop to the folder components (they already close over group.fullName) and set the hover target in context, removing the data-* stamping entirely. If kept short-term, at least extract the attribute name into a shared constant and document the ""-means-root sentinel.

Dima-1 added 4 commits June 11, 2026 15:29

Import files to the cloud

10148c4

Fix overlay appearance

69cb7e4

Add GpxMenuDropOverlay; Refactoring

abf8488

Show the imported file item

182d33f

alisa911 requested a review from Copilot June 16, 2026 07:39

Copilot started reviewing on behalf of alisa911 June 16, 2026 07:39 View session

Copilot AI reviewed Jun 16, 2026

View reviewed changes

alisa911 reviewed Jun 16, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improved drag and drop#1799

Improved drag and drop#1799
Dima-1 wants to merge 4 commits into
mainfrom
ui-drag-and-drop

Dima-1 commented Jun 16, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

alisa911 left a comment

Uh oh!

alisa911 Jun 16, 2026

Uh oh!

alisa911 Jun 16, 2026

Uh oh!

alisa911 Jun 16, 2026

Uh oh!

alisa911 Jun 16, 2026

Uh oh!

alisa911 Jun 16, 2026

Uh oh!

alisa911 Jun 16, 2026

Uh oh!

Uh oh!

alisa911 Jun 16, 2026

Uh oh!

alisa911 Jun 16, 2026

Uh oh!

alisa911 Jun 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		export const DEFAULT_GROUP_NAME = '';
		export const IMPORT_FOLDER_NAME = 'Import';

Conversation

Dima-1 commented Jun 16, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

alisa911 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants