From 2f470a65a5b552a50a22be361b471388fcc9e465 Mon Sep 17 00:00:00 2001
From: Erik Escoffier <me@erik.nz>
Date: Tue, 10 Oct 2023 15:19:58 +0200
Subject: [PATCH] Centralize map cursor management

---
 .../common/map/hooks/use-layer-interaction.ts       |  9 +++++----
 app/scripts/components/common/map/map-component.tsx |  3 ++-
 app/scripts/components/common/map/maps.tsx          | 13 +++++++++++--
 app/scripts/components/common/map/types.d.ts        |  2 ++
 .../components/exploration/components/map/index.tsx |  1 -
 5 files changed, 20 insertions(+), 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
index cddab9d80..5b33bcee7 100644
--- 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]);
 }
\ No newline at end of file
diff --git a/app/scripts/components/common/map/map-component.tsx b/app/scripts/components/common/map/map-component.tsx
index ac6dec08e..c39d0a5e9 100644
--- 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
index b3864132a..f0cb617ee 100644
--- 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,6 +157,8 @@ export default function MapsContextWrapper(props: MapsContextWrapperProps) {
     zoom: 1
   });
 
+  const [cursor, setCursor] = useState<Cursor>('auto');
+
   return (
     <MapsContext.Provider
       value={{
@@ -163,7 +166,9 @@ export default function MapsContextWrapper(props: MapsContextWrapperProps) {
         setInitialViewState,
         mainId,
         comparedId,
-        containerId
+        containerId,
+        cursor,
+        setCursor
       }}
     >
       <Maps {...props}>{props.children}</Maps>
@@ -177,6 +182,8 @@ interface MapsContextType {
   mainId: string;
   comparedId: string;
   containerId: string;
+  cursor: Cursor;
+  setCursor: (cursor: Cursor) => void;
 }
 
 export const MapsContext = createContext<MapsContextType>({
@@ -184,5 +191,7 @@ export const MapsContext = createContext<MapsContextType>({
   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
index b6a54f80b..f802400cb 100644
--- 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
index 325ee717a..bed9d0610 100644
--- 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}