zoom to extent when layers are shown and mylayergroup is collapsed

MTES-MCT · Mar 8, 2024 · 6a02045 · 6a02045
1 parent f4f23b4
commit 6a02045
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 48 deletions.
diff --git a/frontend/src/domain/shared_slices/Regulatory.ts b/frontend/src/domain/shared_slices/Regulatory.ts
@@ -1,4 +1,4 @@
-import { createSelector, createSlice } from '@reduxjs/toolkit'
+import { createSelector, createSlice, type PayloadAction } from '@reduxjs/toolkit'
 import _ from 'lodash'
 import { persistReducer } from 'redux-persist'
 import storage from 'redux-persist/lib/storage'
@@ -12,16 +12,10 @@ const persistConfig = {
 }
 
 type RegulatorySliceState = {
-  loadingRegulatoryZoneMetadata: boolean
-  regulationSearchedZoneExtent: []
-  regulatoryZoneMetadata: any
   selectedRegulatoryLayerIds: number[]
   showedRegulatoryLayerIds: number[]
 }
 const initialState: RegulatorySliceState = {
-  loadingRegulatoryZoneMetadata: false,
-  regulationSearchedZoneExtent: [],
-  regulatoryZoneMetadata: null,
   selectedRegulatoryLayerIds: [],
   showedRegulatoryLayerIds: []
 }
@@ -34,9 +28,9 @@ const regulatorySlice = createSlice({
      * Add regulatory zones to "My Zones" regulatory selection
      * @memberOf RegulatoryReducer
      * @param {Object} state
-     * @param {layerId[]} action.payload - The regulatory zones
+     * @param {layerId[]} action.payload - The regulatory zone ids
      */
-    addRegulatoryZonesToMyLayers(state, action) {
+    addRegulatoryZonesToMyLayers(state, action: PayloadAction<number[]>) {
       return {
         ...state,
         selectedRegulatoryLayerIds: _.union(state.selectedRegulatoryLayerIds, action.payload),
@@ -50,10 +44,10 @@ const regulatorySlice = createSlice({
      * @param {Object} state
      * @param {number} action.payload - The regulatory zone id
      */
-    hideRegulatoryLayer(state, action) {
+    hideRegulatoryLayer(state, action: PayloadAction<number>) {
       state.showedRegulatoryLayerIds = _.without(state.showedRegulatoryLayerIds, action.payload)
     },
-    hideRegulatoryLayers(state, action) {
+    hideRegulatoryLayers(state, action: PayloadAction<number[]>) {
       state.showedRegulatoryLayerIds = _.without(state.showedRegulatoryLayerIds, ...action.payload)
     },
 
@@ -64,31 +58,15 @@ const regulatorySlice = createSlice({
      * @param {Object} state
      * @param {layerId[]} action - The regulatory zones to remove
      */
-    removeRegulatoryZonesFromMyLayers(state, action) {
+    removeRegulatoryZonesFromMyLayers(state, action: PayloadAction<number[]>) {
       return {
         ...state,
         selectedRegulatoryLayerIds: _.difference(state.selectedRegulatoryLayerIds, action.payload),
         showedRegulatoryLayerIds: _.difference(state.showedRegulatoryLayerIds, action.payload)
       }
     },
 
-    /**
-     * Set the regulation searched zone extent - used to fit the extent into the OpenLayers view
-     * @function setRegulationSearchedZoneExtent
-     * @memberOf RegulatoryReducer
-     * @param {Object} state
-     * @param {{payload: number[]}} action - the extent
-     */
-    setRegulationSearchedZoneExtent(state, action) {
-      state.regulationSearchedZoneExtent = action.payload
-    },
-    /**
-     * show RegulatoryLayer
-     * @memberOf RegulatoryReducer
-     * @param {Object} state
-     * @param {RegulatoryZone[]} action.payload - The regulatory zone
-     */
-    showRegulatoryLayer(state, action) {
+    showRegulatoryLayer(state, action: PayloadAction<number | number[]>) {
       state.showedRegulatoryLayerIds = _.uniq(_.concat(state.showedRegulatoryLayerIds, action.payload))
     }
   }
@@ -99,7 +77,6 @@ export const {
   hideRegulatoryLayer,
   hideRegulatoryLayers,
   removeRegulatoryZonesFromMyLayers,
-  setRegulationSearchedZoneExtent,
   showRegulatoryLayer
 } = regulatorySlice.actions
 

diff --git a/frontend/src/features/layersSelector/myAmps/MyAMPLayerGroup.tsx b/frontend/src/features/layersSelector/myAmps/MyAMPLayerGroup.tsx
@@ -13,8 +13,6 @@ import { LayerSelector } from '../utils/LayerSelector.style'
 
 import type { AMP } from '../../../domain/entities/AMPs'
 
-const makeSelector = () => getNumberOfAMPByGroupName
-
 export function MyAMPLayerGroup({
   groupName,
   layers,
@@ -25,36 +23,46 @@ export function MyAMPLayerGroup({
   showedAmpLayerIds: number[]
 }) {
   const dispatch = useAppDispatch()
-  const totalNumberOfZones = useAppSelector(state => makeSelector()(state, groupName))
+  const totalNumberOfZones = useAppSelector(state => getNumberOfAMPByGroupName(state, groupName))
 
   const groupLayerIds = layers.map(l => l.id)
   const [zonesAreOpen, setZonesAreOpen] = useState(false)
   const ampZonesAreShowed = _.intersection(groupLayerIds, showedAmpLayerIds).length > 0
 
+  const fitToGroupExtent = () => {
+    const extent = getExtentOfLayersGroup(layers)
+    dispatch(setFitToExtent(extent))
+  }
+
+  const handleClickOnGroupName = () => {
+    if (zonesAreOpen) {
+      fitToGroupExtent()
+    }
+  }
+
+  const handleRemoveZone = e => {
+    e.stopPropagation()
+    dispatch(removeAmpZonesFromMyLayers(groupLayerIds))
+  }
+
   const toggleLayerDisplay = e => {
     e.stopPropagation()
     if (ampZonesAreShowed) {
       dispatch(hideAmpLayers(groupLayerIds))
     } else {
-      const extent = getExtentOfLayersGroup(layers)
-      dispatch(setFitToExtent(extent))
+      fitToGroupExtent()
       dispatch(showAmpLayer(groupLayerIds))
     }
   }
 
-  const handleRemoveZone = e => {
-    e.stopPropagation()
-    dispatch(removeAmpZonesFromMyLayers(groupLayerIds))
-  }
-
   const toggleZonesAreOpen = () => {
     setZonesAreOpen(!zonesAreOpen)
   }
 
   return (
     <>
       <LayerSelector.GroupWrapper $isOpen={zonesAreOpen} $isPadded onClick={toggleZonesAreOpen}>
-        <LayerSelector.GroupName data-cy="amp-layer-topic" title={groupName}>
+        <LayerSelector.GroupName data-cy="amp-layer-topic" onClick={handleClickOnGroupName} title={groupName}>
           {groupName}
         </LayerSelector.GroupName>
         <LayerSelector.IconGroup>

diff --git a/frontend/src/features/layersSelector/myRegulatoryLayers/MyRegulatoryLayerGroup.tsx b/frontend/src/features/layersSelector/myRegulatoryLayers/MyRegulatoryLayerGroup.tsx
@@ -27,6 +27,22 @@ export function RegulatoryLayerGroup({ groupName, layers }: { groupName: string;
   const metadataIsShowed = _.includes(groupLayerIds, regulatoryMetadataLayerId)
   const totalNumberOfZones = useAppSelector(state => getNumberOfRegulatoryLayerZonesByGroupName(state, groupName))
 
+  const fitToGroupExtent = () => {
+    const extent = getExtentOfLayersGroup(layers)
+    dispatch(setFitToExtent(extent))
+  }
+
+  const handleClickOnGroupName = () => {
+    if (!zonesAreOpen && regulatoryZonesAreShowed) {
+      fitToGroupExtent()
+    }
+  }
+
+  const handleRemoveZone = e => {
+    e.stopPropagation()
+    dispatch(removeRegulatoryZonesFromMyLayers(groupLayerIds))
+  }
+
   const toggleLayerDisplay = e => {
     e.stopPropagation()
     if (regulatoryZonesAreShowed) {
@@ -38,11 +54,6 @@ export function RegulatoryLayerGroup({ groupName, layers }: { groupName: string;
     }
   }
 
-  const handleRemoveZone = e => {
-    e.stopPropagation()
-    dispatch(removeRegulatoryZonesFromMyLayers(groupLayerIds))
-  }
-
   const toggleZonesAreOpen = () => {
     if (!metadataIsShowed) {
       setZonesAreOpen(!zonesAreOpen)
@@ -52,7 +63,7 @@ export function RegulatoryLayerGroup({ groupName, layers }: { groupName: string;
   return (
     <>
       <LayerSelector.GroupWrapper $isOpen={zonesAreOpen} $isPadded onClick={toggleZonesAreOpen}>
-        <LayerSelector.GroupName data-cy="my-regulatory-group" title={groupName}>
+        <LayerSelector.GroupName data-cy="my-regulatory-group" onClick={handleClickOnGroupName} title={groupName}>
           {groupName}
         </LayerSelector.GroupName>
         <LayerSelector.IconGroup>

diff --git a/frontend/src/features/layersSelector/utils/MyLayerZone.tsx b/frontend/src/features/layersSelector/utils/MyLayerZone.tsx
@@ -53,6 +53,12 @@ export function MyLayerZone({
     dispatch(setFitToExtent(extent))
   }
 
+  const handleClickOnLayerName = () => {
+    if (layerZoneIsShowed) {
+      zoomToLayerExtent()
+    }
+  }
+
   const toggleLayerDisplay = () => {
     if (layerZoneIsShowed) {
       hideLayer()
@@ -65,7 +71,9 @@ export function MyLayerZone({
   return (
     <LayerSelector.Layer $selected={metadataIsShown}>
       <LayerLegend layerType={layerType} name={name} type={type} />
-      <LayerSelector.Name title={displayedName}>{displayedName}</LayerSelector.Name>
+      <LayerSelector.Name onClick={handleClickOnLayerName} title={displayedName}>
+        {displayedName}
+      </LayerSelector.Name>
       <LayerSelector.IconGroup>
         {hasMetadata && (
           <IconButton