Deck migration/draw layer

apps/fishing-map/features/map/Map.tsx

@@ -4,7 +4,7 @@ import { DeckGL, DeckGLRef } from '@deck.gl/react'
 import { LayersList } from '@deck.gl/core'
 import dynamic from 'next/dynamic'
 // import { atom, useAtom } from 'jotai'
-import { RulersLayer, DrawLayer } from '@globalfishingwatch/deck-layers'
+import { RulersLayer } from '@globalfishingwatch/deck-layers'
 import {
   useIsDeckLayersLoading,
   useSetDeckLayerComposer,
@@ -22,7 +22,7 @@ import {
 } from 'features/map/map-interactions.hooks'
 import { useMapRulersDrag } from 'features/map/overlays/rulers/rulers-drag.hooks'
 import ErrorNotification from 'features/map/overlays/error-notification/ErrorNotification'
-import { useMapDeckLayers } from 'features/map/map-layers.hooks'
+import { useMapDeckLayers, useMapOverlayLayers } from 'features/map/map-layers.hooks'
 import MapPopups from 'features/map/popups/MapPopups'
 import { MapCoordinates } from 'types'
 import {
@@ -35,15 +35,13 @@ import styles from './Map.module.css'
 import MapAnnotations from './overlays/annotations/Annotations'
 import MapAnnotationsDialog from './overlays/annotations/AnnotationsDialog'
 import useRulers from './overlays/rulers/rulers.hooks'
-import { useDrawLayer } from './overlays/draw/draw.hooks'
 import { useMapDrawConnect } from './map-draw.hooks'
 import MapInfo from './controls/MapInfo'
 import { MAP_CANVAS_ID } from './map.config'
 
 // This avoids type checking to complain
 // https://github.com/visgl/deck.gl/issues/7304#issuecomment-1277850750
 const RulersLayerComponent = RulersLayer as any
-const DrawLayerComponent = DrawLayer as any
 const DrawDialog = dynamic(
   () => import(/* webpackChunkName: "DrawDialog" */ './overlays/draw/DrawDialog')
 )
@@ -84,6 +82,8 @@ const MapWrapper = () => {
   const { rulers, editingRuler, rulersVisible } = useRulers()
   const { isMapDrawing } = useMapDrawConnect()
   const layers = useMapDeckLayers()
+  const overlays = useMapOverlayLayers()
+
   const setDeckLayers = useSetDeckLayerComposer()
   useEffect(() => {
     return () => {
@@ -103,8 +103,6 @@ const MapWrapper = () => {
   const mapLoading = useIsDeckLayersLoading()
 
   const setDeckLayerLoadedState = useSetDeckLayerLoadedState()
-  const { onDrawEdit, onDrawClick, drawLayerMode, drawFeaturesIndexes, drawFeatures } =
-    useDrawLayer()
 
   const currentRuler = editingRuler ? [editingRuler] : []
 
@@ -114,7 +112,7 @@ const MapWrapper = () => {
         id={MAP_CANVAS_ID}
         ref={deckRef}
         views={MAP_VIEW}
-        layers={deckRef ? (layers as LayersList) : []}
+        layers={deckRef ? ([...layers, ...overlays] as LayersList) : []}
         onAfterRender={() => {
           setDeckLayerLoadedState(layers)
         }}
@@ -147,17 +145,8 @@ const MapWrapper = () => {
             visible={rulersVisible}
           />
         )}
-        {isMapDrawing && (
-          <DrawLayerComponent
-            data={drawFeatures}
-            onEdit={onDrawEdit}
-            onClick={onDrawClick}
-            selectedFeatureIndexes={drawFeaturesIndexes}
-            mode={drawLayerMode}
-          />
-        )}
+        {isMapDrawing && <DrawDialog />}
       </DeckGL>
-      {isMapDrawing && <DrawDialog />}
       <MapPopups />
       {/* TODO in deck.gl to get the mapLoading state */}
       <MapControls onMouseEnter={resetHoverState} mapLoading={mapLoading} />

apps/fishing-map/features/map/map-interaction.utils.ts

@@ -1,5 +1,24 @@
-import { DeckLayerPickingObject } from '@globalfishingwatch/deck-layers'
+import { DeckLayerPickingObject, DrawPickingObject } from '@globalfishingwatch/deck-layers'
 import { RulerPickingObject } from '@globalfishingwatch/deck-layers'
 
 export const isRulerLayerPoint = (feature: DeckLayerPickingObject) =>
   feature.category === 'rulers' && (feature as RulerPickingObject).geometry?.type === 'Point'
+
+export const isDrawFeature = (feature: DeckLayerPickingObject) =>
+  feature.category === 'draw' && (feature as DrawPickingObject).geometry?.type === 'Polygon'
+
+export const getDefaultCursor = ({
+  features,
+  isDragging,
+}: {
+  features: DeckLayerPickingObject[] | undefined
+  isDragging: boolean
+}) => {
+  if (features?.length) {
+    return 'pointer'
+  }
+  if (isDragging) {
+    return 'grabbing'
+  }
+  return 'grab'
+}

apps/fishing-map/features/map/map-interactions.hooks.ts

@@ -28,7 +28,7 @@ import { useAppDispatch } from 'features/app/app.hooks'
 import { setHintDismissed } from 'features/help/hints.slice'
 import { useLocationConnect } from 'routes/routes.hook'
 import { useMapRulersDrag } from './overlays/rulers/rulers-drag.hooks'
-import { isRulerLayerPoint } from './map-interaction.utils'
+import { getDefaultCursor } from './map-interaction.utils'
 import {
   SliceInteractionEvent,
   fetchFishingActivityInteractionThunk,
@@ -38,6 +38,7 @@ import {
   setClickedEvent,
 } from './map.slice'
 import { useSetViewState } from './map-viewport.hooks'
+import { useDrawLayer } from './overlays/draw/draw.hooks'
 
 export const useClickedEventConnect = () => {
   const dispatch = useAppDispatch()
@@ -232,6 +233,7 @@ export const useGetPickingInteraction = () => {
         return f.object || []
       })
       return {
+        ...info,
         type,
         longitude: info.coordinate[0],
         latitude: info.coordinate[1],
@@ -247,8 +249,6 @@ export const useGetPickingInteraction = () => {
 export const useMapMouseHover = () => {
   const getPickingInteraction = useGetPickingInteraction()
   const setMapHoverFeatures = useSetMapHoverInteraction()
-  const { isMapDrawing } = useMapDrawConnect()
-  const { isMapAnnotating } = useMapAnnotation()
   const { onRulerMapHover, rulersEditing } = useRulers()
   const dataviews = useSelector(selectCurrentDataviewInstancesResolved)
   const temporalgridDataviews = useSelector(selectActiveTemporalgridDataviews)
@@ -307,10 +307,12 @@ export const useMapMouseHover = () => {
 // Hook to wrap the custom tools click interactions with the map that has more priority
 // returning undefined when not handled so we can continue with the propagation
 export const useHandleMapToolsClick = () => {
+  // TODO
   const { isMapDrawing } = useMapDrawConnect()
   const { isMapAnnotating, addMapAnnotation } = useMapAnnotation()
   const { isErrorNotificationEditing, addErrorNotification } = useMapErrorNotification()
   const { onRulerMapClick, rulersEditing } = useRulers()
+  const { onDrawClick } = useDrawLayer()
   const isMarineManagerLocation = useSelector(selectIsMarineManagerLocation)
   const handleMapClickInteraction = useCallback(
     (interaction: InteractionEvent) => {
@@ -325,20 +327,33 @@ export const useHandleMapToolsClick = () => {
       if (rulersEditing) {
         return onRulerMapClick(position)
       }
+      if (isMapDrawing) {
+        return onDrawClick(features)
+      }
       return undefined
     },
     [
       addErrorNotification,
       addMapAnnotation,
       isErrorNotificationEditing,
       isMapAnnotating,
+      isMapDrawing,
+      onDrawClick,
       onRulerMapClick,
       rulersEditing,
     ]
   )
   return handleMapClickInteraction
 }
 
+export const useMapToolsActive = () => {
+  const { isMapDrawing } = useMapDrawConnect()
+  const { isMapAnnotating } = useMapAnnotation()
+  const { isErrorNotificationEditing } = useMapErrorNotification()
+  const { rulersEditing } = useRulers()
+  return isMapDrawing || isMapAnnotating || isErrorNotificationEditing || rulersEditing
+}
+
 export const useMapMouseClick = () => {
   const getPickingInteraction = useGetPickingInteraction()
   const handleMapToolsClick = useHandleMapToolsClick()
@@ -427,49 +442,57 @@ export const _deprecatedUseMapCursor = (hoveredTooltipEvent?: any) => {
 }
 
 export const useMapCursor = () => {
+  const { isMapDrawing } = useMapDrawConnect()
+  const { getDrawCursor } = useDrawLayer()
   const { isMapAnnotating } = useMapAnnotation()
   const { isErrorNotificationEditing } = useMapErrorNotification()
-  const { rulersEditing } = useRulers()
+  const { rulersEditing, getRulersCursor } = useRulers()
   const hoverFeatures = useMapHoverInteraction()?.features
   const getCursor = useCallback(
     ({ isDragging }: { isDragging: boolean }) => {
-      if (isMapAnnotating || isErrorNotificationEditing || rulersEditing) {
-        if (rulersEditing && hoverFeatures?.some(isRulerLayerPoint)) {
-          return 'move'
-        }
+      if (isMapDrawing) {
+        return getDrawCursor({ features: hoverFeatures, isDragging })
+      }
+      if (rulersEditing) {
+        return getRulersCursor({ features: hoverFeatures })
+      }
+      if (isMapAnnotating || isErrorNotificationEditing) {
         return 'crosshair'
-      } else if (isDragging) {
-        return 'grabbing'
       }
-      return 'grab'
+      return getDefaultCursor({ features: hoverFeatures, isDragging })
     },
-    [hoverFeatures, isErrorNotificationEditing, isMapAnnotating, rulersEditing]
+    [
+      isMapDrawing,
+      rulersEditing,
+      isMapAnnotating,
+      isErrorNotificationEditing,
+      getDrawCursor,
+      hoverFeatures,
+      getRulersCursor,
+    ]
   )
   return { getCursor }
 }
 
 export const useMapDrag = () => {
+  const getPickingInteraction = useGetPickingInteraction()
   const map = useDeckMap()
   const { rulersEditing } = useRulers()
   const { onRulerDrag, onRulerDragStart, onRulerDragEnd } = useMapRulersDrag()
-
   const onMapDragStart = useCallback(
     (info: PickingInfo, event: any) => {
+      const dragstartInteraction = getPickingInteraction(info, 'dragstart')
       if (!map || !info.coordinate) return
       if (rulersEditing) {
+        map?.setProps({ controller: { dragPan: false } })
         try {
-          const features = map?.pickMultipleObjects({
-            x: info.x,
-            y: info.y,
-            radius: 0,
-          })
-          onRulerDragStart(info, features)
+          onRulerDragStart(dragstartInteraction)
         } catch (e) {
           console.warn(e)
         }
       }
     },
-    [map, onRulerDragStart, rulersEditing]
+    [getPickingInteraction, map, onRulerDragStart, rulersEditing]
   )
 
   const onMapDrag = useCallback(
@@ -486,10 +509,11 @@ export const useMapDrag = () => {
     (info: PickingInfo, event: any) => {
       if (!info.coordinate) return
       if (rulersEditing) {
+        map?.setProps({ controller: { dragPan: true } })
         onRulerDragEnd()
       }
     },
-    [onRulerDragEnd, rulersEditing]
+    [map, onRulerDragEnd, rulersEditing]
   )
   return { onMapDrag, onMapDragStart, onMapDragEnd }
 }

apps/fishing-map/features/map/map-layers.hooks.ts

@@ -6,6 +6,7 @@ import {
 } from '@globalfishingwatch/deck-layer-composer'
 import { useGlobalConfigConnect } from 'features/map/map.hooks'
 import { selectDataviewInstancesResolvedVisible } from 'features/dataviews/selectors/dataviews.selectors'
+import { useDrawLayer } from './overlays/draw/draw.hooks'
 
 export const useMapDeckLayers = () => {
   const dataviews = useSelector(selectDataviewInstancesResolvedVisible)
@@ -18,6 +19,11 @@ export const useMapDeckLayers = () => {
   return layers
 }
 
+export const useMapOverlayLayers = () => {
+  const { instance: drawLayerInstance } = useDrawLayer()
+  return [drawLayerInstance]
+}
+
 export const useMapLayersLoaded = () => {
   const layerStatus = useDeckLayerLoadedState()
   return Object.values(layerStatus).every((l) => l.loaded)

apps/fishing-map/features/map/overlays/annotations/AnnotationsDialog.tsx

@@ -43,10 +43,6 @@ const MapAnnotationsDialog = (): React.ReactNode | null => {
   }
   const ref = useEventKeyListener(['Enter'], onConfirmClick)
 
-  if (isMapAnnotating) {
-    deck.setProps({ getCursor: () => 'crosshair' })
-  }
-
   if (!isDialogVisible) {
     return null
   }