feat: Pouvoir masquer/afficher tous les points d'intérêt

MTES-MCT · May 17, 2024 · 3150779 · 3150779
1 parent c7b9c1b
commit 3150779
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 184 deletions.
diff --git a/frontend/src/domain/shared_slices/Global.ts b/frontend/src/domain/shared_slices/Global.ts
@@ -55,6 +55,7 @@ type GlobalStateType = {
   displayMissionsLayer: boolean
   displayMissionSelectedLayer: boolean
   displayMissionToAttachLayer: boolean
+  displayInterestPointLayer: boolean
   displayReportingToAttachLayer: boolean
 
   // state entry for other children components whom visibility is already handled by parent components
@@ -105,6 +106,7 @@ const initialState: GlobalStateType = {
   displayMissionEditingLayer: true,
   displayMissionSelectedLayer: true,
   displayMissionToAttachLayer: true,
+  displayInterestPointLayer: true,
   displayReportingToAttachLayer: true,
 
   // state entry for other children components whom visibility is already handled by parent components

diff --git a/frontend/src/features/coordinates/SetCoordinates.tsx b/frontend/src/features/coordinates/SetCoordinates.tsx
@@ -1,3 +1,4 @@
+import { Label } from '@mtes-mct/monitor-ui'
 import { useCallback } from 'react'
 import styled from 'styled-components'
 
@@ -39,7 +40,12 @@ export function SetCoordinates({ coordinates, updateCoordinates }: SetCoordinate
     }
   }, [coordinates, updateCoordinates, coordinatesFormat])
 
-  return <Body>{getCoordinatesInput()}</Body>
+  return (
+    <div>
+      <Label>Coordonnées</Label>
+      <Body>{getCoordinatesInput()}</Body>
+    </div>
+  )
 }
 
 const Body = styled.div`
@@ -52,7 +58,6 @@ const Body = styled.div`
     border: none;
     color: ${p => p.theme.color.gunMetal};
     height: 27px;
-    margin-top: 7px;
     padding-left: 8px;
   }
 `
diff --git a/frontend/src/features/map/BaseMap.tsx b/frontend/src/features/map/BaseMap.tsx
@@ -42,6 +42,8 @@ import { useClickOutsideWhenOpened } from '../../hooks/useClickOutsideWhenOpened
 
 import type { VectorLayerWithName } from '../../domain/types/layer'
 import type { MapBrowserEvent } from 'ol'
+import type VectorLayer from 'ol/layer/Vector'
+import type VectorSource from 'ol/source/Vector'
 
 export type BaseMapChildrenProps = {
   currentFeatureListOver: SerializedFeature<Record<string, any>>[] | undefined
@@ -51,6 +53,8 @@ export type BaseMapChildrenProps = {
   pixel: number[] | undefined
 }
 
+type VectorLayerType = VectorLayerWithName & VectorLayer<VectorSource>
+
 export function BaseMap({ children }: { children: Array<ReactElement<BaseMapChildrenProps> | null> }) {
   const dispatch = useAppDispatch()
   const [currentMap, setCurrentMap] = useState<OpenLayerMap | undefined>(undefined)
@@ -88,7 +92,7 @@ export function BaseMap({ children }: { children: Array<ReactElement<BaseMapChil
       const features = current_map.getFeaturesAtPixel(event.pixel, {
         hitTolerance: HIT_PIXEL_TO_TOLERANCE,
         layerFilter: layer => {
-          const typedLayer = layer as VectorLayerWithName
+          const typedLayer = layer as VectorLayerType
 
           const layerName = typedLayer.name ?? typedLayer.get('name')
 
@@ -124,7 +128,7 @@ export function BaseMap({ children }: { children: Array<ReactElement<BaseMapChil
           const features = current_map.getFeaturesAtPixel(event.pixel, {
             hitTolerance: HIT_PIXEL_TO_TOLERANCE,
             layerFilter: layer => {
-              const typedLayer = layer as VectorLayerWithName
+              const typedLayer = layer as VectorLayerType
 
               const layerName = typedLayer.name ?? typedLayer.get('name')
 

diff --git a/frontend/src/features/map/layers/InterestPointLayer.tsx b/frontend/src/features/map/layers/InterestPointLayer.tsx
@@ -6,7 +6,7 @@ import Draw, { DrawEvent } from 'ol/interaction/Draw'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 import { getLength } from 'ol/sphere'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState, type MutableRefObject } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 
 import { POIStyle, getInterestPointStyle } from './styles/interestPoint.style'
@@ -42,34 +42,27 @@ export const MIN_ZOOM = 7
 
 export function InterestPointLayer({ map }: BaseMapChildrenProps) {
   const dispatch = useAppDispatch()
+  const displayInterestPointLayer = useAppSelector(state => state.global.displayInterestPointLayer)
 
   const { interestPointBeingDrawed, interestPoints, isDrawing, isEditing, triggerInterestPointFeatureDeletion } =
     useAppSelector(state => state.interestPoint)
 
   const [drawObject, setDrawObject] = useState<Draw>()
-  const vectorSourceRef = useRef() as React.MutableRefObject<VectorSource<Feature<LineString>>>
-  const GetVectorSource = () => {
-    if (vectorSourceRef.current === undefined) {
-      vectorSourceRef.current = new VectorSource({ wrapX: false })
-    }
-
-    return vectorSourceRef.current
-  }
 
   const [interestPointToCoordinates, setInterestPointToCoordinates] = useState(new Map())
   const previousInterestPointBeingDrawed = usePrevious<NewInterestPoint | null>(interestPointBeingDrawed)
   const deleteInterestPoint = useCallback(
     (uuid: string) => {
-      const feature = GetVectorSource().getFeatureById(uuid)
+      const feature = interestPointVectorSourceRef.current.getFeatureById(uuid)
       if (feature) {
-        GetVectorSource().removeFeature(feature)
-        GetVectorSource().changed()
+        interestPointVectorSourceRef.current.removeFeature(feature)
+        interestPointVectorSourceRef.current.changed()
       }
 
-      const featureLine = GetVectorSource().getFeatureById(InterestPointLine.getFeatureId(uuid))
+      const featureLine = interestPointVectorSourceRef.current.getFeatureById(InterestPointLine.getFeatureId(uuid))
       if (featureLine) {
-        GetVectorSource().removeFeature(featureLine)
-        GetVectorSource().changed()
+        interestPointVectorSourceRef.current.removeFeature(featureLine)
+        interestPointVectorSourceRef.current.changed()
       }
 
       dispatch(removeInterestPoint(uuid))
@@ -81,8 +74,8 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
       const featureId = InterestPointLine.getFeatureId(uuid)
 
       if (interestPointToCoordinates.has(featureId)) {
-        const existingLabelLineFeature = GetVectorSource().getFeatureById(featureId)
-        const interestPointFeature = GetVectorSource().getFeatureById(uuid)
+        const existingLabelLineFeature = interestPointVectorSourceRef.current.getFeatureById(featureId)
+        const interestPointFeature = interestPointVectorSourceRef.current.getFeatureById(uuid)
 
         if (existingLabelLineFeature) {
           const geometry = interestPointFeature?.getGeometry()
@@ -93,7 +86,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
       } else {
         const interestPointLineFeature = InterestPointLine.getFeature(coordinates, nextCoordinates, featureId)
 
-        GetVectorSource().addFeature(interestPointLineFeature)
+        interestPointVectorSourceRef.current.addFeature(interestPointLineFeature)
       }
 
       const nextVesselToCoordinates = interestPointToCoordinates
@@ -112,19 +105,26 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
     [dispatch]
   )
 
-  useEffect(() => {
-    const interestPointVectorLayer = new VectorLayer({
+  const interestPointVectorSourceRef = useRef(new VectorSource({ wrapX: false })) as MutableRefObject<
+    VectorSource<Feature<LineString>>
+  >
+  const interestPointVectorLayer = useRef(
+    new VectorLayer({
       renderBuffer: 7,
-      source: GetVectorSource(),
+      source: interestPointVectorSourceRef.current,
       style: (feature, resolution) => getInterestPointStyle(feature?.getId()?.toString()?.includes('line'), resolution),
       updateWhileAnimating: true,
       updateWhileInteracting: true,
       zIndex: Layers.INTEREST_POINT.zIndex
     })
-    map?.getLayers().push(interestPointVectorLayer)
+  ) as MutableRefObject<VectorLayer<VectorSource>>
+
+  useEffect(() => {
+    map?.getLayers().push(interestPointVectorLayer.current)
 
     return () => {
-      map?.removeLayer(interestPointVectorLayer)
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      map?.removeLayer(interestPointVectorLayer.current)
     }
   }, [map])
 
@@ -148,7 +148,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
 
           return feats
         }, [] as Array<Feature<LineString>>)
-        GetVectorSource().addFeatures(features)
+        interestPointVectorSourceRef.current.addFeatures(features)
       }
     }
 
@@ -169,7 +169,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
 
     function drawNewFeatureOnMap() {
       const draw = new Draw({
-        source: GetVectorSource(),
+        source: interestPointVectorSourceRef.current,
         stopClick: true,
         style: POIStyle,
         type: 'Point'
@@ -246,7 +246,9 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
   useEffect(() => {
     function modifyFeatureWhenCoordinatesOrTypeModified() {
       if (interestPointBeingDrawed?.coordinates?.length && interestPointBeingDrawed?.uuid) {
-        const drawingFeatureToUpdate = GetVectorSource().getFeatureById(interestPointBeingDrawed.uuid)
+        const drawingFeatureToUpdate = interestPointVectorSourceRef.current.getFeatureById(
+          interestPointBeingDrawed.uuid
+        )
 
         if (drawingFeatureToUpdate && coordinatesOrTypeAreModified(drawingFeatureToUpdate, interestPointBeingDrawed)) {
           const { feature, ...interestPointWithoutFeature } = interestPointBeingDrawed
@@ -293,7 +295,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
           const featureId = InterestPointLine.getFeatureId(interestPointBeingDrawed.uuid)
           if (interestPointToCoordinates.has(featureId)) {
             interestPointToCoordinates.delete(featureId)
-            const feature = GetVectorSource().getFeatureById(featureId)
+            const feature = interestPointVectorSourceRef.current.getFeatureById(featureId)
             if (feature && !!interestPointBeingDrawed.coordinates) {
               feature.setGeometry(
                 new LineString([interestPointBeingDrawed.coordinates, interestPointBeingDrawed.coordinates])
@@ -307,6 +309,10 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
     initLineWhenInterestPointCoordinatesModified()
   }, [interestPointBeingDrawed, interestPointToCoordinates, previousInterestPointBeingDrawed])
 
+  useEffect(() => {
+    interestPointVectorLayer.current.setVisible(displayInterestPointLayer)
+  }, [displayInterestPointLayer])
+
   return (
     <div>
       {interestPoints && Array.isArray(interestPoints)
@@ -315,7 +321,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
               key={interestPoint.uuid}
               coordinates={interestPoint.coordinates}
               deleteInterestPoint={deleteInterestPoint}
-              featureIsShowed
+              isVisible={displayInterestPointLayer}
               map={map}
               modifyInterestPoint={modifyInterestPoint}
               moveLine={moveInterestPointLine}
@@ -329,7 +335,7 @@ export function InterestPointLayer({ map }: BaseMapChildrenProps) {
         <InterestPointOverlay
           coordinates={interestPointBeingDrawed.coordinates}
           deleteInterestPoint={() => dispatch(endInterestPointDraw()) && dispatch(deleteInterestPointBeingDrawed())}
-          featureIsShowed={!!drawObject}
+          isVisible={displayInterestPointLayer}
           map={map}
           modifyInterestPoint={() => {}}
           moveLine={moveInterestPointLine}

diff --git a/frontend/src/features/map/layers/Missions/SelectedMissionLayer.ts b/frontend/src/features/map/layers/Missions/SelectedMissionLayer.ts
@@ -60,6 +60,7 @@ export function SelectedMissionLayer({ map }: BaseMapChildrenProps) {
       zIndex: Layers.ACTIONS.zIndex
     })
   ) as MutableRefObject<VectorLayerWithName>
+
   ;(selectedMissionActionsVectorLayerRef.current as VectorLayerWithName).name = Layers.ACTIONS.code
 
   useEffect(() => {

diff --git a/frontend/src/features/map/overlays/InterestPointOverlay.tsx b/frontend/src/features/map/overlays/InterestPointOverlay.tsx
@@ -3,7 +3,7 @@ import { noop } from 'lodash/fp'
 import LineString from 'ol/geom/LineString'
 import Overlay from 'ol/Overlay'
 import { getLength } from 'ol/sphere'
-import { createRef, useCallback, useEffect, useRef, useState } from 'react'
+import { createRef, useCallback, useEffect, useRef } from 'react'
 import styled from 'styled-components'
 
 import { OPENLAYERS_PROJECTION } from '../../../domain/entities/map/constants'
@@ -32,7 +32,7 @@ function coordinatesAreModified(nextCoordinates: Coordinate, previousCoordinates
 type InterestPointOverlayProps = {
   coordinates: Coordinate
   deleteInterestPoint: (uuid: string) => void
-  featureIsShowed: boolean
+  isVisible: boolean
   map: any
   modifyInterestPoint: (uuid: string) => void
   moveLine: (uuid: string, previousCoordinates: number[], nextCoordinates: number[], offset: number[]) => void
@@ -43,7 +43,7 @@ type InterestPointOverlayProps = {
 export function InterestPointOverlay({
   coordinates,
   deleteInterestPoint,
-  featureIsShowed,
+  isVisible,
   map,
   modifyInterestPoint,
   moveLine,
@@ -58,7 +58,6 @@ export function InterestPointOverlay({
   const currentCoordinates = useRef([])
   const interestPointCoordinates = useRef(coordinates)
   const isThrottled = useRef(false)
-  const [showed, setShowed] = useState(false)
   const overlayRef = useRef<Overlay | null>(null)
   const setOverlayRef = () => {
     if (overlayRef.current === null) {
@@ -103,7 +102,7 @@ export function InterestPointOverlay({
     [interestPointCoordinates.current]
   )
 
-  useMoveOverlayWhenDragging(overlayRef.current, map, currentOffset, moveInterestPointWithThrottle, showed)
+  useMoveOverlayWhenDragging(overlayRef.current, map, currentOffset, moveInterestPointWithThrottle, isVisible)
   const previousCoordinates = usePrevious(coordinates)
 
   useEffect(() => {
@@ -127,9 +126,6 @@ export function InterestPointOverlay({
         overlayRef.current?.setElement(ref.current ?? undefined)
 
         map.addOverlay(overlayRef.current)
-        if (featureIsShowed) {
-          setShowed(true)
-        }
 
         return () => {
           map.removeOverlay(overlayRef.current)
@@ -147,7 +143,7 @@ export function InterestPointOverlay({
   return (
     <WrapperToBeKeptForDOMManagement>
       <div ref={ref}>
-        {showed ? (
+        {isVisible ? (
           <InterestPointOverlayElement>
             <Header>
               <Name data-cy="interest-point-name" title={name ?? 'Aucun Libellé'}>
@@ -159,13 +155,15 @@ export function InterestPointOverlay({
                 Icon={Icon.Edit}
                 onClick={() => modifyInterestPoint(uuid)}
                 size={Size.SMALL}
+                title="Editer"
               />
               <IconButton
                 accent={Accent.TERTIARY}
                 data-cy="interest-point-delete"
                 Icon={Icon.Delete}
                 onClick={() => deleteInterestPoint(uuid)}
                 size={Size.SMALL}
+                title="Supprimer"
               />
             </Header>
             <Body data-cy="interest-point-observations">{observations ?? 'Aucune observation'}</Body>