Centralize map cursor management

NASA-IMPACT · Oct 10, 2023 · 2f470a6 · 2f470a6
1 parent 88e0ef2
commit 2f470a6
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 8 deletions.
diff --git a/app/scripts/components/common/map/hooks/use-layer-interaction.ts b/app/scripts/components/common/map/hooks/use-layer-interaction.ts
@@ -1,7 +1,7 @@
 
 import { Feature } from 'geojson';
 import { useEffect } from 'react';
-import useMaps from './use-maps';
+import useMaps, { useMapsContext } from './use-maps';
 
 interface LayerInteractionHookOptions {
   layerId: string;
@@ -12,6 +12,7 @@ export default function useLayerInteraction({
   onClick
 }: LayerInteractionHookOptions) {
   const { current: mapInstance } = useMaps();
+  const { setCursor } = useMapsContext();
   useEffect(() => {
     if (!mapInstance) return;
     const onPointsClick = (e) => {
@@ -20,11 +21,11 @@ export default function useLayerInteraction({
     };
 
     const onPointsEnter = () => {
-      mapInstance.getCanvas().style.cursor = 'pointer';
+      setCursor('pointer');
     };
 
     const onPointsLeave = () => {
-      mapInstance.getCanvas().style.cursor = '';
+      setCursor('auto');
     };
 
     mapInstance.on('click', layerId, onPointsClick);
@@ -36,5 +37,5 @@ export default function useLayerInteraction({
       mapInstance.off('mouseenter', layerId, onPointsEnter);
       mapInstance.off('mouseleave', layerId, onPointsLeave);
     };
-  }, [layerId, mapInstance, onClick]);
+  }, [layerId, mapInstance, onClick, setCursor]);
 }
diff --git a/app/scripts/components/common/map/map-component.tsx b/app/scripts/components/common/map/map-component.tsx
@@ -16,7 +16,7 @@ export default function MapComponent({
   isCompared?: boolean;
   projection?: ProjectionOptions;
 }) {
-  const { initialViewState, setInitialViewState, mainId, comparedId } =
+  const { initialViewState, setInitialViewState, mainId, comparedId, cursor } =
     useMapsContext();
 
   const id = isCompared ? comparedId : mainId;
@@ -52,6 +52,7 @@ export default function MapComponent({
       mapStyle={style as any}
       onMove={onMove}
       projection={mapboxProjection}
+      cursor={cursor}
     >
       {controls}
     </ReactMapGlMap>

diff --git a/app/scripts/components/common/map/maps.tsx b/app/scripts/components/common/map/maps.tsx
@@ -23,6 +23,7 @@ import { Styles } from './styles';
 import useMapCompare from './hooks/use-map-compare';
 import MapComponent from './map-component';
 import useMaps, { useMapsContext } from './hooks/use-maps';
+import { Cursor } from './types';
 
 const chevronRightURI = () =>
   iconDataURI(CollecticonChevronRightSmall, {
@@ -156,14 +157,18 @@ export default function MapsContextWrapper(props: MapsContextWrapperProps) {
     zoom: 1
   });
 
+  const [cursor, setCursor] = useState<Cursor>('auto');
+
   return (
     <MapsContext.Provider
       value={{
         initialViewState,
         setInitialViewState,
         mainId,
         comparedId,
-        containerId
+        containerId,
+        cursor,
+        setCursor
       }}
     >
       <Maps {...props}>{props.children}</Maps>
@@ -177,12 +182,16 @@ interface MapsContextType {
   mainId: string;
   comparedId: string;
   containerId: string;
+  cursor: Cursor;
+  setCursor: (cursor: Cursor) => void;
 }
 
 export const MapsContext = createContext<MapsContextType>({
   initialViewState: {},
   setInitialViewState: () => undefined,
   mainId: '',
   comparedId: '',
-  containerId: ''
+  containerId: '',
+  cursor: 'auto',
+  setCursor: () => undefined
 });
diff --git a/app/scripts/components/common/map/types.d.ts b/app/scripts/components/common/map/types.d.ts
@@ -42,3 +42,5 @@ export type AoIFeature = Feature<Polygon> & {
   selected: boolean;
   id: string;
 };
+
+export type Cursor = 'auto' | 'default' | 'pointer' | 'grab' | ' move';
diff --git a/app/scripts/components/exploration/components/map/index.tsx b/app/scripts/components/exploration/components/map/index.tsx
@@ -92,7 +92,6 @@ export function ExplorationMap(props: { comparing: boolean }) {
           polygon: true,
           trash: true
         } as any}
-        defaultMode='draw_polygon'
         onCreate={onUpdate}
         onUpdate={onUpdate}
         onDelete={onDelete}