[Tableau de bord] Ajout d'un bouton pour effacer la zone lors de l'édition

frontend/src/domain/entities/layers/index.ts

@@ -49,7 +49,7 @@ export function addGeometryToMultiGeometryGeoJSON(
 
 export function keepOnlyInitialGeometriesOfMultiGeometry(
   multiGeometry: GeoJSONType.Geometry,
-  initialFeatureNumber: number
+  initialFeatureNumber?: number
 ): GeoJSONType.Geometry | undefined {
   const nextGeometry = new GeoJSON({
     featureProjection: OPENLAYERS_PROJECTION

frontend/src/domain/shared_slices/Draw.ts

@@ -40,14 +40,14 @@ const drawReducerSlice = createSlice({
       state.initialGeometry = undefined
     },
 
-    setGeometry(state, action: PayloadAction<GeoJSON.Geometry>) {
+    setGeometry(state, action: PayloadAction<GeoJSON.Geometry | undefined>) {
       state.geometry = action.payload
       state.isGeometryValid = isGeometryValid(action.payload)
     },
     /**
      * Save the initial geometry value from form if user want to reinitialize the geometry
      */
-    setInitialGeometry(state, action: PayloadAction<GeoJSON.Geometry>) {
+    setInitialGeometry(state, action: PayloadAction<GeoJSON.Geometry | undefined>) {
       state.initialGeometry = action.payload
     },
 

frontend/src/domain/use_cases/draw/eraseDrawedGeometries.ts

@@ -1,14 +1,18 @@
 import { keepOnlyInitialGeometriesOfMultiGeometry } from '../../entities/layers'
 import { setGeometry } from '../../shared_slices/Draw'
 
-export const eraseDrawedGeometries = initialFeatureNumber => (dispatch, getState) => {
-  const { geometry } = getState().draw
-  if (!geometry) {
-    return
-  }
+import type { HomeAppThunk } from '@store/index'
+
+export const eraseDrawedGeometries =
+  (initialFeatureNumber?: number): HomeAppThunk =>
+  (dispatch, getState) => {
+    const { geometry } = getState().draw
+    if (!geometry) {
+      return
+    }
 
-  const nextGeometry = keepOnlyInitialGeometriesOfMultiGeometry(geometry, initialFeatureNumber)
-  if (nextGeometry) {
-    dispatch(setGeometry(nextGeometry))
+    const nextGeometry = keepOnlyInitialGeometriesOfMultiGeometry(geometry, initialFeatureNumber)
+    if (nextGeometry) {
+      dispatch(setGeometry(nextGeometry))
+    }
   }
-}

frontend/src/features/Dashboard/components/DashboardForm/Toolbar/EditArea/index.tsx

@@ -1,3 +1,4 @@
+import { dashboardActions } from '@features/Dashboard/slice'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useListenForDrawedGeometry } from '@hooks/useListenForDrawing'
 import { Accent, Icon, IconButton, OPENLAYERS_PROJECTION, THEME, WSG84_PROJECTION } from '@mtes-mct/monitor-ui'
@@ -13,10 +14,11 @@ import type { GeoJSON } from 'domain/types/GeoJSON'
 import type { Coordinate } from 'ol/coordinate'
 
 type EditAreaProps = {
+  dashboardKey: string
   geometry: GeoJSON.Geometry | undefined
   onValidate: (geometry: GeoJSON.Geometry) => void
 }
-export function EditArea({ geometry, onValidate }: EditAreaProps) {
+export function EditArea({ dashboardKey, geometry, onValidate }: EditAreaProps) {
   const [geometryToSave, setGeometryToSave] = useState<GeoJSON.Geometry | undefined>(undefined)
   const { geometry: geometryInProgress, interactionType } = useListenForDrawedGeometry(
     InteractionListener.DASHBOARD_ZONE
@@ -30,18 +32,20 @@ export function EditArea({ geometry, onValidate }: EditAreaProps) {
   }
 
   const handleEditArea = useCallback(() => {
-    dispatch(drawCircle(undefined, InteractionListener.DASHBOARD_ZONE))
-  }, [dispatch])
+    dispatch(drawCircle(geometry, InteractionListener.DASHBOARD_ZONE))
+  }, [dispatch, geometry])
 
   useEffect(() => {
     if (interactionType) {
       setGeometryToSave(geometryInProgress)
+      dispatch(dashboardActions.setDisplayGeometry({ key: dashboardKey, visible: false }))
     }
-  }, [dispatch, geometryInProgress, interactionType])
+  }, [dashboardKey, dispatch, geometryInProgress, interactionType])
 
   useEffect(() => {
     if (geometryToSave && (geometryToSave as GeoJSON.MultiPolygon).coordinates.length > 0 && !interactionType) {
       onValidate(geometryToSave)
+      dispatch(dashboardActions.setDisplayGeometry({ key: dashboardKey, visible: true }))
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [interactionType, geometryToSave])

frontend/src/features/Dashboard/components/DashboardForm/Toolbar/index.tsx

@@ -21,6 +21,7 @@ export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
     return (
       <Wrapper ref={ref}>
         <EditArea
+          dashboardKey={key}
           geometry={geometry}
           onValidate={geometryToSave => {
             dispatch(editDashboardArea(geometryToSave, key))

frontend/src/features/Dashboard/components/Layers/ActiveDashboardLayer.tsx

@@ -30,6 +30,9 @@ export function ActiveDashboardLayer({ map }: BaseMapChildrenProps) {
   const displayDashboardLayer = useAppSelector(state => state.global.displayDashboardLayer)
 
   const activeDashboardId = useAppSelector(state => state.dashboard.activeDashboardId)
+  const displayGeometry = useAppSelector(state =>
+    activeDashboardId ? state.dashboard.dashboards?.[activeDashboardId]?.displayGeometry : false
+  )
 
   const dashboard = useAppSelector(state => getDashboardById(state.dashboard, activeDashboardId))
   const { data: reportings } = useGetReportingsByIdsQuery(dashboard?.dashboard.reportingIds ?? [], {
@@ -168,7 +171,7 @@ export function ActiveDashboardLayer({ map }: BaseMapChildrenProps) {
         }
       }
 
-      if (dashboard?.dashboard.geom) {
+      if (dashboard?.dashboard.geom && displayGeometry) {
         const dashboardAreaFeature = getFeature(dashboard.dashboard.geom)
         if (!dashboardAreaFeature) {
           return
@@ -192,7 +195,8 @@ export function ActiveDashboardLayer({ map }: BaseMapChildrenProps) {
     vigilanceAreas?.entities,
     reportings,
     dashboard?.dashboard.geom,
-    drawBorder
+    drawBorder,
+    displayGeometry
   ])
 
   useEffect(() => {

frontend/src/features/Dashboard/slice.ts

@@ -23,6 +23,7 @@ export const initialDashboard: DashboardType = {
     vigilanceAreaIds: []
   },
   defaultName: '',
+  displayGeometry: true,
   extractedArea: undefined,
   isEditingTabName: false,
   openPanel: undefined,
@@ -40,6 +41,7 @@ export type DashboardType = {
   ampIdsToDisplay: number[]
   dashboard: Dashboard.Dashboard
   defaultName: string | undefined
+  displayGeometry: boolean
   extractedArea?: Dashboard.ExtractedArea
   isEditingTabName: boolean
   openPanel: OpenPanel | undefined
@@ -284,6 +286,15 @@ export const dashboardSlice = createSlice({
         state.dashboards[id].openPanel = action.payload
       }
     },
+    setDisplayGeometry(state, action: PayloadAction<{ key: string; visible: boolean }>) {
+      const id = action.payload.key
+
+      if (!id || !state.dashboards[id]) {
+        return
+      }
+
+      state.dashboards[id].displayGeometry = action.payload.visible
+    },
     setGeometry(state, action: PayloadAction<GeoJSON.Geometry | undefined>) {
       state.geometry = action.payload
       state.isGeometryValid = action.payload ? isGeometryValid(action.payload) : true

frontend/src/features/commonComponents/Modals/MapInteraction.tsx

@@ -6,6 +6,7 @@ type MapInteractionProps = {
   customTools?: React.ReactNode
   isValidatedButtonDisabled?: boolean
   onCancel?: () => void
+  onDelete?: () => void
   onReset: () => void
   onValidate: () => void
   resetButtonText?: string
@@ -17,6 +18,7 @@ export function MapInteraction({
   customTools = undefined,
   isValidatedButtonDisabled = false,
   onCancel,
+  onDelete,
   onReset,
   onValidate,
   resetButtonText = undefined,
@@ -36,6 +38,11 @@ export function MapInteraction({
           <ButtonRow $withCustomTools={!!customTools}>
             {customTools}
             <ButtonGroup>
+              {!!onDelete && (
+                <DeleteButton accent={Accent.SECONDARY} Icon={Icon.Delete} onClick={onDelete}>
+                  Tout effacer
+                </DeleteButton>
+              )}
               <Button accent={Accent.SECONDARY} onClick={onReset}>
                 {resetButtonText ?? 'Réinitialiser'}
               </Button>
@@ -78,10 +85,8 @@ const Title = styled.h1`
 `
 
 const ButtonGroup = styled.div`
-  display: inline-block;
-  & > :not(:last-child) {
-    margin-right: 16px;
-  }
+  display: flex;
+  gap: 16px;
 `
 
 const ValidateButton = styled(Button)`
@@ -101,3 +106,7 @@ const Body = styled.div`
   padding: 24px;
   background-color: ${p => p.theme.color.white};
 `
+
+const DeleteButton = styled(Button)`
+  color: ${p => p.theme.color.maximumRed};
+`

frontend/src/features/map/draw/DrawModal.tsx

@@ -1,4 +1,4 @@
-import { type Coordinates, CoordinatesInput, IconButton, Icon, usePrevious } from '@mtes-mct/monitor-ui'
+import { type Coordinates, CoordinatesInput, Icon, IconButton, usePrevious } from '@mtes-mct/monitor-ui'
 import { getFeature } from '@utils/getFeature'
 import Feature from 'ol/Feature'
 import Point from 'ol/geom/Point'
@@ -53,6 +53,7 @@ export function DrawModal() {
   const initialGeometry = useAppSelector(state => state.draw.initialGeometry)
   const interactionType = useAppSelector(state => state.draw.interactionType)
   const isGeometryValid = useAppSelector(state => state.draw.isGeometryValid)
+
   const listener = useAppSelector(state => state.draw.listener)
 
   const global = useAppSelector(state => state.global)
@@ -143,6 +144,11 @@ export function DrawModal() {
     dispatch(setGeometry(initialGeometry))
   }
 
+  const handleDelete = () => {
+    dispatch(eraseDrawedGeometries(initialFeatureNumberRef.current))
+    dispatch(setGeometry(undefined))
+  }
+
   const handleValidate = () => {
     dispatch(updateMapInteractionListeners(MapInteractionListenerEnum.NONE))
   }
@@ -209,6 +215,7 @@ export function DrawModal() {
       }
       isValidatedButtonDisabled={!isGeometryValid}
       onCancel={handleCancel}
+      onDelete={listener === InteractionListener.DASHBOARD_ZONE ? handleDelete : undefined}
       onReset={handleReset}
       onValidate={handleValidate}
       title={`${listener && titlePlaceholder[listener]}`}

frontend/src/features/map/layers/DrawLayer.ts

@@ -46,13 +46,14 @@ function UnmemoizedDrawLayer({ map }: BaseMapChildrenProps) {
   )
 
   useEffect(() => {
+    vectorSourceRef.current.clear(true)
+    drawVectorSourceRef.current.clear(true)
     if (isEmpty(feature) || !interactionType) {
       return undefined
     }
 
     resetModifyInteractions(map)
-    vectorSourceRef.current.clear(true)
-    drawVectorSourceRef.current.clear(true)
+
     vectorSourceRef.current.addFeature(feature)
     const modify = new Modify({
       source: vectorSourceRef.current

frontend/src/hooks/useDrawVectorLayer.ts

@@ -15,13 +15,7 @@ type VectorLayerWithName = VectorLayer & { name?: string }
 
 export function useDrawVectorLayer(geometry: any, layerName: string) {
   // Memoize the feature creation
-  const feature = useMemo(() => {
-    if (!geometry) {
-      return undefined
-    }
-
-    return getFeature(geometry)
-  }, [geometry])
+  const feature = useMemo(() => getFeature(geometry), [geometry])
 
   // Create the vector sources and layer references
   const vectorSourceRef = useRef(

frontend/src/utils/geometryValidation.ts

@@ -96,15 +96,18 @@ function isPolygonValid(polygon: Coordinate[][]) {
   return true
 }
 
-function arePolygonsValid(polygons: Coordinate[][][]) {
+function arePolygonsValid(polygons: Coordinate[][][] | undefined) {
   return reduce(polygons, (result, polygon) => result && isPolygonValid(polygon), true)
 }
 
-export function isGeometryValid(geometry: GeoJSON.Geometry) {
-  if (geometry && geometry.type === OLGeometryType.MULTIPOLYGON) {
+export function isGeometryValid(geometry: GeoJSON.Geometry | undefined) {
+  if (!geometry) {
+    return false
+  }
+  if (geometry.type === OLGeometryType.MULTIPOLYGON) {
     return !!geometry.coordinates.length && arePolygonsValid(geometry.coordinates as Coordinate[][][])
   }
-  if (geometry && geometry.type === OLGeometryType.POLYGON) {
+  if (geometry.type === OLGeometryType.POLYGON) {
     return isPolygonValid(geometry.coordinates as Coordinate[][])
   }