updates map cursor

Vizzuality · Dec 12, 2023 · 21ca41d · 21ca41d
1 parent 4284adf
commit 21ca41d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/frontend/src/components/map/provider.tsx b/frontend/src/components/map/provider.tsx
@@ -4,6 +4,8 @@ import { useControl } from 'react-map-gl';
 
 import { MapboxOverlay, MapboxOverlayProps } from '@deck.gl/mapbox/typed';
 
+import { CustomMapProps } from '@/components/map/types';
+
 interface DeckMapboxOverlayContext {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   addLayer: (layer: any) => void;
@@ -30,12 +32,16 @@ function useMapboxOverlay(
   return overlay;
 }
 
-export const DeckMapboxOverlayProvider = ({ children }: PropsWithChildren) => {
+export const DeckMapboxOverlayProvider = ({
+  children,
+  cursor = 'auto',
+}: PropsWithChildren<{ cursor?: CustomMapProps['cursor'] }>) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const layersRef = useRef<any[]>([]);
 
   const OVERLAY = useMapboxOverlay({
     interleaved: true,
+    getCursor: () => cursor,
   });
 
   const addLayer = useCallback(

diff --git a/frontend/src/containers/map/content/map/index.tsx b/frontend/src/containers/map/content/map/index.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps, useCallback, useMemo, useRef } from 'react';
+import { ComponentProps, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useMap } from 'react-map-gl';
 
@@ -40,6 +40,7 @@ const MainMap: React.FC = () => {
   const { locationCode } = useParams();
   const locationBbox = useAtomValue(bboxLocation);
   const hoveredPolygonId = useRef<Parameters<typeof map.setFeatureState>[0] | null>(null);
+  const [cursor, setCursor] = useState<'grab' | 'crosshair' | 'pointer'>('grab');
 
   const locationsQuery = useGetLocations(
     {
@@ -106,6 +107,10 @@ const MainMap: React.FC = () => {
   const handleMouseMove = useCallback(
     (e: Parameters<ComponentProps<typeof Map>['onMouseOver']>[0]) => {
       if (e.features.length > 0) {
+        if (!drawState.active) {
+          setCursor('pointer');
+        }
+
         if (hoveredPolygonId.current !== null) {
           map.setFeatureState(
             {
@@ -126,9 +131,13 @@ const MainMap: React.FC = () => {
         );
 
         hoveredPolygonId.current = e.features[0];
+      } else {
+        if (!drawState.active) {
+          setCursor('grab');
+        }
       }
     },
-    [map, hoveredPolygonId]
+    [map, hoveredPolygonId, drawState.active]
   );
 
   const handleMouseLeave = useCallback(() => {
@@ -186,6 +195,10 @@ const MainMap: React.FC = () => {
     };
   }, [locationBbox, isSidebarOpen]);
 
+  useEffect(() => {
+    setCursor(drawState.active ? 'crosshair' : 'grab');
+  }, [drawState.active]);
+
   return (
     <div className="absolute left-0 h-full w-full border-r border-b border-black">
       <Map
@@ -198,14 +211,15 @@ const MainMap: React.FC = () => {
         onMouseLeave={handleMouseLeave}
         renderWorldCopies={false}
         attributionControl={false}
+        cursor={cursor}
       >
         <>
           <Popup />
           <LabelsManager />
           <LayersToolbox />
           <ZoomControls />
           <DrawControls />
-          <LayerManager />
+          <LayerManager cursor={cursor} />
           <Analysis />
           <Attributions />
         </>

diff --git a/frontend/src/containers/map/content/map/layer-manager/index.tsx b/frontend/src/containers/map/content/map/layer-manager/index.tsx
@@ -1,18 +1,19 @@
 import { Layer } from 'react-map-gl';
 
 import { DeckMapboxOverlayProvider } from '@/components/map/provider';
+import { CustomMapProps } from '@/components/map/types';
 import LayerManagerItem from '@/containers/map/content/map/layer-manager/item';
 import {
   useSyncMapLayerSettings,
   useSyncMapLayers,
 } from '@/containers/map/content/map/sync-settings';
 
-const LayerManager = () => {
+const LayerManager = ({ cursor }: { cursor: CustomMapProps['cursor'] }) => {
   const [activeLayers] = useSyncMapLayers();
   const [layersSettings] = useSyncMapLayerSettings();
 
   return (
-    <DeckMapboxOverlayProvider>
+    <DeckMapboxOverlayProvider cursor={cursor}>
       <>
         {/*
           Generate all transparent backgrounds to be able to sort by layers without an error