feat: add overlay stroke to dashboard and fix map sidewindow interact…

…ions
MTES-MCT · Oct 30, 2024 · 5b56090 · 5b56090
1 parent 7ae9679
commit 5b56090
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 116 deletions.
diff --git a/frontend/src/features/Dashboard/useCases/editDashboard.ts b/frontend/src/features/Dashboard/useCases/editDashboard.ts
@@ -41,6 +41,7 @@ export const editDashboard =
       const formattedDashboard = { ...initialDashboard, dashboard, extractedArea }
       dispatch(dashboardActions.editDashboard(formattedDashboard))
       dispatch(dashboardActions.setActiveDashboardId(id))
+      dispatch(dashboardActions.setSelectedDashboardOnMap(undefined))
       dispatch(sideWindowActions.focusAndGoTo(generatePath(sideWindowPaths.DASHBOARD, { id: dashboard.id })))
     } catch (error) {
       dispatch(

diff --git a/frontend/src/features/Reportings/components/ReportingLayer/Reporting/style.ts b/frontend/src/features/Reportings/components/ReportingLayer/Reporting/style.ts
@@ -1,9 +1,9 @@
+import { overlayStroke } from '@features/map/overlays/style'
 import { OPENLAYERS_PROJECTION, THEME, WSG84_PROJECTION } from '@mtes-mct/monitor-ui'
-import { isEmpty } from 'lodash'
 import { getCenter } from 'ol/extent'
 import { GeoJSON } from 'ol/format'
 import { LineString, Point } from 'ol/geom'
-import { Fill, Icon, Stroke, Style, Circle } from 'ol/style'
+import { Circle, Fill, Icon, Stroke, Style } from 'ol/style'
 
 import { OLGeometryType } from '../../../../../domain/entities/map/constants'
 import { ReportingStatusEnum, ReportingTypeEnum, getReportingStatus } from '../../../../../domain/entities/reporting'
@@ -80,27 +80,7 @@ const selectedReportingStyleFactory = (color, fillColor) => [
       src: 'Close.svg'
     })
   }),
-  new Style({
-    geometry: feature => {
-      const overlayPostion = feature.get('overlayCoordinates')
-      if (isEmpty(overlayPostion)) {
-        return undefined
-      }
-
-      const extent = feature?.getGeometry()?.getExtent()
-      const center = extent && getCenter(extent)
-      if (!center) {
-        return undefined
-      }
-
-      return new LineString([overlayPostion.coordinates, center])
-    },
-    stroke: new Stroke({
-      color: THEME.color.slateGray,
-      lineDash: [4, 4],
-      width: 2
-    })
-  })
+  overlayStroke
 ]
 
 export const hoveredReportingStyleFn = feature => {

diff --git a/frontend/src/features/Semaphore/components/Layer/style.ts b/frontend/src/features/Semaphore/components/Layer/style.ts
@@ -1,28 +1,11 @@
+import { overlayStroke } from '@features/map/overlays/style'
 import { OPENLAYERS_PROJECTION, THEME, WSG84_PROJECTION } from '@mtes-mct/monitor-ui'
 import { isEmpty } from 'lodash'
 import { getCenter } from 'ol/extent'
 import { GeoJSON } from 'ol/format'
 import { LineString, MultiLineString, Point } from 'ol/geom'
 import { Circle, Icon, Stroke, Style } from 'ol/style'
 
-const lineStyle = new Style({
-  geometry: feature => {
-    const overlayPostion = feature.get('overlayCoordinates')
-
-    if (isEmpty(overlayPostion)) {
-      return undefined
-    }
-    const featureGeometry = (feature?.getGeometry() as Point)?.getCoordinates()
-
-    return new LineString([overlayPostion.coordinates, featureGeometry])
-  },
-  stroke: new Stroke({
-    color: THEME.color.slateGray,
-    lineDash: [4, 4],
-    width: 2
-  })
-})
-
 export const reportingLinkStyle = new Style({
   geometry: feature => {
     const semaphoreGeometry = (feature?.getGeometry() as Point)?.getCoordinates()
@@ -92,10 +75,10 @@ export const getSemaphoreStyle = (feature, isSuperUser) => {
   }
 
   if (isSuperUser) {
-    return [lineStyle, semaphoreStyle, semaphoreCircleStyle]
+    return [overlayStroke, semaphoreStyle, semaphoreCircleStyle]
   }
 
-  return [lineStyle, semaphoreStyle]
+  return [overlayStroke, semaphoreStyle]
 }
 
 export const getSelectedSemaphoreStyle = (feature, isSuperUser) => [

diff --git a/frontend/src/features/Station/components/StationLayer/utils.ts b/frontend/src/features/Station/components/StationLayer/utils.ts
@@ -1,10 +1,9 @@
+import { overlayStroke } from '@features/map/overlays/style'
 import { THEME } from '@mtes-mct/monitor-ui'
-import { isEmpty } from 'lodash'
 import { uniq } from 'lodash/fp'
 import { Feature } from 'ol'
 import { GeoJSON } from 'ol/format'
-import { LineString, Point } from 'ol/geom'
-import { Fill, Icon, Stroke, Style, Text } from 'ol/style'
+import { Fill, Icon, Style, Text } from 'ol/style'
 import CircleStyle from 'ol/style/Circle'
 
 import { Layers } from '../../../../domain/entities/layers/constants'
@@ -46,24 +45,7 @@ export const getFeatureStyle = ((feature: Feature) => {
     })
   })
 
-  const lineStyle = new Style({
-    geometry: () => {
-      const overlayPostion = feature.get('overlayCoordinates')
-      if (isEmpty(overlayPostion)) {
-        return undefined
-      }
-      const featureGeometry = (feature?.getGeometry() as Point)?.getCoordinates()
-
-      return new LineString([overlayPostion.coordinates, featureGeometry])
-    },
-    stroke: new Stroke({
-      color: THEME.color.slateGray,
-      lineDash: [4, 4],
-      width: 2
-    })
-  })
-
-  return [iconStyle, badgeStyle, counterStyle, lineStyle]
+  return [iconStyle, badgeStyle, counterStyle, overlayStroke]
 }) as StyleFunction
 
 export function getStationPointFeature(station: Station.Station) {

diff --git a/frontend/src/features/layersSelector/overlays/LayerEvents.tsx b/frontend/src/features/layersSelector/overlays/LayerEvents.tsx
@@ -43,7 +43,7 @@ export function LayerEvents({ map, mapClickEvent }: BaseMapChildrenProps) {
   const vectorLayer = useRef(
     new VectorLayer({
       source: vectorSource.current,
-      style: (feature, resolution) => layerListIconStyle(feature, resolution)
+      style: resolution => layerListIconStyle(resolution)
     })
   )
   const feature = vectorSource.current?.getFeatureById(`${Layers.AERA_ICON}:${FEATURE_ID}`)

diff --git a/frontend/src/features/layersSelector/overlays/style.ts b/frontend/src/features/layersSelector/overlays/style.ts
@@ -1,31 +1,7 @@
-import { THEME } from '@mtes-mct/monitor-ui'
-import { isEmpty } from 'lodash'
-import { getCenter } from 'ol/extent'
-import { LineString } from 'ol/geom'
-import { Icon, Stroke, Style } from 'ol/style'
+import { overlayStroke } from '@features/map/overlays/style'
+import { Icon, Style } from 'ol/style'
 
-export const layerListIconStyle = (feature, resolution) => [
-  new Style({
-    geometry: () => {
-      const overlayPostion = feature.get('overlayCoordinates')
-
-      if (isEmpty(overlayPostion)) {
-        return undefined
-      }
-
-      const extent = feature?.getGeometry()?.getExtent()
-      const center = extent && getCenter(extent)
-      if (!center) {
-        return undefined
-      }
-
-      return new LineString([overlayPostion.coordinates, center])
-    },
-    stroke: new Stroke({
-      color: THEME.color.slateGray,
-      lineDash: [4, 4],
-      width: 2
-    })
-  }),
+export const layerListIconStyle = resolution => [
+  overlayStroke,
   new Style({ image: new Icon({ scale: 1 / resolution ** (1 / 8) + 0.4, src: 'Cursor_border.svg' }) })
 ]
diff --git a/frontend/src/features/map/layers/Dashboards/SelectedDashboardLayer.tsx b/frontend/src/features/map/layers/Dashboards/SelectedDashboardLayer.tsx
@@ -1,4 +1,5 @@
 import { Dashboard } from '@features/Dashboard/types'
+import { overlayStroke } from '@features/map/overlays/style'
 import { getReportingZoneFeature } from '@features/Reportings/components/ReportingLayer/Reporting/reportingsGeometryHelpers'
 import { editingReportingStyleFn } from '@features/Reportings/components/ReportingLayer/Reporting/style'
 import { getVigilanceAreaLayerStyle } from '@features/VigilanceArea/components/VigilanceAreaLayer/style'
@@ -80,7 +81,7 @@ export function SelectedDashboardLayer({ map }: BaseMapChildrenProps) {
       const feats: Feature[] = []
       const feat = new Feature({ geometry })
 
-      feat.setStyle([measurementStyle, measurementStyleWithCenter])
+      feat.setStyle([measurementStyle, measurementStyleWithCenter, overlayStroke])
       feat.setId(`${Layers.DASHBOARDS.code}:${selectedDashboardOnMap?.id}`)
       feats.push(feat)
       selectedDashboardOnMap.reportings.forEach(reporting => {

diff --git a/frontend/src/features/map/layers/Missions/missions.style.ts b/frontend/src/features/map/layers/Missions/missions.style.ts
@@ -1,5 +1,5 @@
+import { overlayStroke } from '@features/map/overlays/style'
 import { OPENLAYERS_PROJECTION, THEME, WSG84_PROJECTION } from '@mtes-mct/monitor-ui'
-import { isEmpty } from 'lodash'
 import { getCenter } from 'ol/extent'
 import { GeoJSON } from 'ol/format'
 import { LineString, MultiPoint, MultiPolygon } from 'ol/geom'
@@ -196,27 +196,7 @@ export const selectedMissionZoneStyle = [
       width: 4
     })
   }),
-  new Style({
-    geometry: feature => {
-      const overlayPostion = feature.get('overlayCoordinates')
-      if (isEmpty(overlayPostion)) {
-        return undefined
-      }
-
-      const extent = feature?.getGeometry()?.getExtent()
-      const center = extent && getCenter(extent)
-      if (!center) {
-        return undefined
-      }
-
-      return new LineString([overlayPostion.coordinates, center])
-    },
-    stroke: new Stroke({
-      color: THEME.color.slateGray,
-      lineDash: [4, 4],
-      width: 2
-    })
-  })
+  overlayStroke
 ]
 
 const missionToReportingsLinkStyle = feature => {

diff --git a/frontend/src/features/map/overlays/style.ts b/frontend/src/features/map/overlays/style.ts
@@ -0,0 +1,27 @@
+import { THEME } from '@mtes-mct/monitor-ui'
+import { isEmpty } from 'lodash'
+import { getCenter } from 'ol/extent'
+import { LineString } from 'ol/geom'
+import { Style, Stroke } from 'ol/style'
+
+export const overlayStroke = new Style({
+  geometry: feature => {
+    const overlayPosition = feature.get('overlayCoordinates')
+    if (isEmpty(overlayPosition)) {
+      return undefined
+    }
+
+    const extent = feature?.getGeometry()?.getExtent()
+    const center = extent && getCenter(extent)
+    if (!center) {
+      return undefined
+    }
+
+    return new LineString([overlayPosition.coordinates, center])
+  },
+  stroke: new Stroke({
+    color: THEME.color.slateGray,
+    lineDash: [4, 4],
+    width: 2
+  })
+})