Improved drag and drop

map/src/context/AppContext.js

@@ -127,6 +127,8 @@ export const AppContextProvider = (props) => {
     const [globalConfirmation, setGlobalConfirmation] = useState(null);
 
     const [openMenu, setOpenMenu] = useState(null);
+    const [openMainMenu, setOpenMainMenu] = useState(false);
+    const [gpxFileDrag, setGpxFileDrag] = useState({ active: false, hoverFolder: null, overMap: false });
     const [openContextMenu, setOpenContextMenu] = useState(false);
 
     const [cloudSettings, setCloudSettings] = useState({
@@ -632,6 +634,10 @@ export const AppContextProvider = (props) => {
                 setSelectedWptId,
                 openMenu,
                 setOpenMenu,
+                openMainMenu,
+                setOpenMainMenu,
+                gpxFileDrag,
+                setGpxFileDrag,
                 openContextMenu,
                 setOpenContextMenu,
                 prevPageUrl,

map/src/frame/GlobalFrame.js

@@ -33,6 +33,7 @@ import PhotosModal from '../menu/search/explore/PhotosModal';
 import InstallBanner from './components/InstallBanner';
 import { hideAllTracks } from '../manager/track/DeleteTrackManager';
 import GlobalGraph from '../graph/mapGraph/GlobalGraph';
+import TracksFileDragController from './TracksFileDragController';
 import LoginContext from '../context/LoginContext';
 import { poiUrlParams } from '../manager/PoiManager';
 import { createUrlParams } from '../util/Utils';
@@ -47,7 +48,6 @@ const GlobalFrame = () => {
 
     const [showInfoBlock, setShowInfoBlock] = useState(false);
     const [clearState, setClearState] = useState(false);
-    const [openMainMenu, setOpenMainMenu] = useState(false);
     const [openErrorDialog, setOpenErrorDialog] = useState(false);
     const [menuInfo, setMenuInfo] = useState(null);
 
@@ -58,7 +58,7 @@ const GlobalFrame = () => {
 
     const [showInstallBanner, setShowInstallBanner] = useState(false);
 
-    const MAIN_MENU_SIZE = openMainMenu ? `${MAIN_MENU_OPEN_SIZE}px` : `${MAIN_MENU_MIN_SIZE}px`;
+    const MAIN_MENU_SIZE = ctx.openMainMenu ? `${MAIN_MENU_OPEN_SIZE}px` : `${MAIN_MENU_MIN_SIZE}px`;
     const MENU_INFO_SIZE =
         menuInfo || ltx.openLoginMenu || ctx.infoBlockWidth === `${MENU_INFO_OPEN_SIZE}px`
             ? `${MENU_INFO_OPEN_SIZE}px`
@@ -415,6 +415,7 @@ const GlobalFrame = () => {
                 }}
             >
                 <GlobalConfirmationDialog />
+                <TracksFileDragController />
                 <OsmAndMap mainMenuWidth={MAIN_MENU_MIN_SIZE + 'px'} menuInfoWidth={MENU_INFO_SIZE} />
                 {ctx.globalGraph?.show && <GlobalGraph type={ctx.globalGraph.type} />}
                 <GlobalAlert width={width} />
@@ -441,8 +442,8 @@ const GlobalFrame = () => {
             <MainMenu
                 size={MAIN_MENU_SIZE}
                 infoSize={MENU_INFO_SIZE}
-                openMainMenu={openMainMenu}
-                setOpenMainMenu={setOpenMainMenu}
+                openMainMenu={ctx.openMainMenu}
+                setOpenMainMenu={ctx.setOpenMainMenu}
                 menuInfo={menuInfo}
                 setMenuInfo={setMenuInfo}
                 showInfoBlock={showInfoBlock}

map/src/frame/TracksFileDragController.jsx

@@ -0,0 +1,103 @@
+import { useContext, useEffect, useRef } 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 TracksMapDropOverlay from './TracksMapDropOverlay';
+import TracksMenuDropOverlay from './TracksMenuDropOverlay';
+import { resolveGpxDropTarget } from './TracksMapDropGeometry';
+
+const GPX_FILE_DRAG_IDLE = { active: false, hoverFolder: null, overMap: false };
+
+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 dragCounterRef = useRef(0);
+    const ctxRef = useRef(ctx);
+    ctxRef.current = ctx;
+
+    useEffect(() => {
+        const resetDrag = () => {
+            dragCounterRef.current = 0;
+            ctxRef.current.setGpxFileDrag(GPX_FILE_DRAG_IDLE);
+        };
+
+        const onDragEnter = (e) => {
+            if (!hasFiles(e) || !ltx.isProAccount()) {
+                return;
+            }
+            e.preventDefault();
+            dragCounterRef.current += 1;
+        };
+
+        const onDragOver = (e) => {
+            if (!hasFiles(e) || !ltx.isProAccount()) {
+                return;
+            }
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+
+            const currentCtx = ctxRef.current;
+            const { hoverFolder, overMap } = resolveGpxDropTarget(e.clientX, e.clientY, currentCtx);
+            currentCtx.setGpxFileDrag({ active: true, hoverFolder, overMap });
+        };
+
+        const onDragLeave = (e) => {
+            if (!hasFiles(e) || !ltx.isProAccount()) {
+                return;
+            }
+            dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
+            if (dragCounterRef.current === 0) {
+                resetDrag();
+            }
+        };
+
+        const onDrop = (e) => {
+            if (!hasFiles(e) || !ltx.isProAccount()) {
+                return;
+            }
+            e.preventDefault();
+
+            const currentCtx = ctxRef.current;
+            const files = Array.from(e.dataTransfer?.files || []);
+            const { hoverFolder, overMap } = resolveGpxDropTarget(e.clientX, e.clientY, currentCtx);
+            if (hoverFolder !== null) {
+                importGpxFiles(files, hoverFolder);
+            } else if (overMap) {
+                importGpxFiles(files, IMPORT_FOLDER_NAME);
+            }
+            resetDrag();
+        };
+
+        const onDragEnd = () => {
+            resetDrag();
+        };
+
+        window.addEventListener('dragenter', onDragEnter);
+        window.addEventListener('dragover', onDragOver);
+        window.addEventListener('dragleave', onDragLeave);
+        window.addEventListener('drop', onDrop);
+        window.addEventListener('dragend', onDragEnd);
+        return () => {
+            window.removeEventListener('dragenter', onDragEnter);
+            window.removeEventListener('dragover', onDragOver);
+            window.removeEventListener('dragleave', onDragLeave);
+            window.removeEventListener('drop', onDrop);
+            window.removeEventListener('dragend', onDragEnd);
+        };
+    }, [importGpxFiles, ltx.loginUser, ltx.accountInfo?.account]);
+
+    return createPortal(
+        <>
+            <TracksMapDropOverlay />
+            <TracksMenuDropOverlay />
+        </>,
+        document.body
+    );
+}

map/src/frame/TracksMapDropGeometry.js

@@ -0,0 +1,159 @@
+import { HEADER_SIZE, MAIN_MENU_MIN_SIZE, MAIN_MENU_OPEN_SIZE } from '../manager/GlobalManager';
+
+export const OVERLAY_MARGIN = 16;
+
+export function getVisibleMapInsets(ctx) {
+    const infoBlockWidthPx = Number.parseInt(String(ctx.infoBlockWidth), 10) || 0;
+    const bottomPx = ctx.globalGraph?.show ? ctx.globalGraph.size : 0;
+
+    const leftChromePx =
+        infoBlockWidthPx > 0
+            ? MAIN_MENU_MIN_SIZE + infoBlockWidthPx
+            : ctx.openMainMenu
+              ? MAIN_MENU_OPEN_SIZE
+              : MAIN_MENU_MIN_SIZE;
+
+    return {
+        top: HEADER_SIZE + OVERLAY_MARGIN,
+        left: leftChromePx + OVERLAY_MARGIN,
+        right: OVERLAY_MARGIN,
+        bottom: bottomPx + OVERLAY_MARGIN,
+    };
+}
+
+export function isPointInVisibleMap(ctx, clientX, clientY) {
+    const insets = getVisibleMapInsets(ctx);
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+
+    return (
+        clientX >= insets.left &&
+        clientX <= width - insets.right &&
+        clientY >= insets.top &&
+        clientY <= height - insets.bottom
+    );
+}
+
+export function getMenuDropContainers() {
+    return [
+        document.getElementById('se-tracks-folder'),
+        document.getElementById('se-track-menu'),
+    ].filter((el) => el?.hasAttribute('data-cloud-track-folder'));
+}
+
+export function getMenuOverlayContainer(hoverFolder) {
+    if (hoverFolder === null) {
+        return null;
+    }
+
+    const openFolder = document.getElementById('se-tracks-folder');
+    if (openFolder?.hasAttribute('data-cloud-track-folder')) {
+        const openFolderPath = openFolder.getAttribute('data-cloud-track-folder') ?? '';
+        if (hoverFolder === openFolderPath) {
+            return openFolder;
+        }
+    }
+
+    if (hoverFolder === '') {
+        return document.getElementById('se-track-menu');
+    }
+
+    return null;
+}
+
+export function getMenuDropOverlayTop(container) {
+    const folders = container.querySelectorAll('[id^="se-menu-cloud-"]');
+    if (folders.length > 0) {
+        return folders[folders.length - 1].getBoundingClientRect().bottom;
+    }
+
+    const appBar = container.querySelector('.MuiAppBar-root');
+    if (appBar) {
+        return appBar.getBoundingClientRect().bottom;
+    }
+
+    const listAnchors = container.querySelectorAll('#se-visible-tracks-menu, [id^="se-shared-folder-"]');
+    if (listAnchors.length > 0) {
+        let bottom = 0;
+        listAnchors.forEach((el) => {
+            bottom = Math.max(bottom, el.getBoundingClientRect().bottom);
+        });
+        return bottom;
+    }
+
+    return container.getBoundingClientRect().top;
+}
+
+export function getMenuDropOverlayRect(container, ctx) {
+    if (!container) {
+        return null;
+    }
+
+    const containerRect = container.getBoundingClientRect();
+    const bottomPx = (ctx.globalGraph?.show ? ctx.globalGraph.size : 0) + OVERLAY_MARGIN;
+    const topPx = getMenuDropOverlayTop(container) + OVERLAY_MARGIN;
+
+    if (topPx >= window.innerHeight - bottomPx) {
+        return null;
+    }
+
+    return {
+        top: topPx,
+        left: containerRect.left + OVERLAY_MARGIN,
+        right: window.innerWidth - containerRect.right + OVERLAY_MARGIN,
+        bottom: bottomPx,
+    };
+}
+
+function isPointInOverlayRect(clientX, clientY, rect) {
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+
+    return (
+        clientX >= rect.left &&
+        clientX <= width - rect.right &&
+        clientY >= rect.top &&
+        clientY <= height - rect.bottom
+    );
+}
+
+function getMenuDropFolderAtPoint(clientX, clientY, ctx) {
+    for (const container of getMenuDropContainers()) {
+        const rect = getMenuDropOverlayRect(container, ctx);
+        if (rect && isPointInOverlayRect(clientX, clientY, rect)) {
+            return container.getAttribute('data-cloud-track-folder') ?? '';
+        }
+    }
+
+    return null;
+}
+
+function getCloudTrackFolderFromElement(el) {
+    if (!el) {
+        return null;
+    }
+    const folderEl = el.closest('[data-cloud-track-folder]');
+    if (!folderEl) {
+        return null;
+    }
+
+    return folderEl.getAttribute('data-cloud-track-folder') ?? '';
+}
+
+export function resolveGpxDropTarget(clientX, clientY, ctx) {
+    const folderFromDom = getCloudTrackFolderFromElement(document.elementFromPoint(clientX, clientY));
+    if (folderFromDom !== null) {
+        return { hoverFolder: folderFromDom, overMap: false };
+    }
+
+    const folderFromRect = getMenuDropFolderAtPoint(clientX, clientY, ctx);
+    if (folderFromRect !== null) {
+        return { hoverFolder: folderFromRect, overMap: false };
+    }
+
+    if (isPointInVisibleMap(ctx, clientX, clientY)) {
+        return { hoverFolder: null, overMap: true };
+    }
+
+    return { hoverFolder: null, overMap: false };
+}

map/src/frame/TracksMapDropOverlay.jsx

@@ -0,0 +1,22 @@
+import { useContext, useMemo } from 'react';
+import AppContext from '../context/AppContext';
+import DropOverlay from './components/DropOverlay';
+import { getVisibleMapInsets } from './TracksMapDropGeometry';
+
+export default function TracksMapDropOverlay() {
+    const ctx = useContext(AppContext);
+    const active =
+        ctx.gpxFileDrag?.active && ctx.gpxFileDrag?.overMap && ctx.gpxFileDrag?.hoverFolder === null;
+    const insets = useMemo(() => getVisibleMapInsets(ctx), [
+        ctx.infoBlockWidth,
+        ctx.globalGraph?.show,
+        ctx.globalGraph?.size,
+        ctx.openMainMenu,
+    ]);
+
+    if (!active) {
+        return null;
+    }
+
+    return <DropOverlay insets={insets} />;
+}