Modification de la forme d'un RNB ID

components/VisuPanel.tsx

@@ -55,6 +55,7 @@ export default function VisuPanel() {
         body: JSON.stringify({
           status: contribution.status,
           addresses_cle_interop: contribution.addresses?.map((a) => a.id),
+          shape: contribution.shape,
           comment,
         }),
         method: 'PATCH',

components/map/VisuMap.tsx

@@ -7,13 +7,15 @@ import { useMapLayers } from '@/components/map/useMapLayers';
 import { useMapControls } from '@/components/map/useMapControls';
 import { useMapEvents } from '@/components/map/useMapEvents';
 import { useMapStateSync } from '@/components/map/useMapStateSync';
+import { useMapDraw } from '@/components/map/useMapDraw';
 
 export default function VisuMap() {
   const { map, mapContainer } = useMap();
   useMapLayers(map);
   useMapControls(map);
   useMapEvents(map);
   useMapStateSync(map);
+  useMapDraw(map);
 
   return mapContainer;
 }

components/map/useMapDraw.ts

@@ -0,0 +1,121 @@
+import maplibregl from 'maplibre-gl';
+import { useDispatch, useSelector } from 'react-redux';
+import { Actions, AppDispatch, RootState } from '@/stores/store';
+import { useEffect, useRef } from 'react';
+import {
+  TerraDraw,
+  TerraDrawMapLibreGLAdapter,
+  TerraDrawPolygonMode,
+  TerraDrawSelectMode,
+} from 'terra-draw';
+import { MultiPolygon, Polygon } from 'geojson';
+
+const CURRENT_DRAW_ID_PREFIX = 'current_';
+
+export const useMapDraw = (map?: maplibregl.Map) => {
+  const drawRef = useRef<TerraDraw>();
+  const dispatch: AppDispatch = useDispatch();
+
+  const { shape, rnb_id } = useSelector(
+    (state: RootState) => state.contribution,
+  );
+
+  useEffect(() => {
+    if (map) {
+      drawRef.current = new TerraDraw({
+        adapter: new TerraDrawMapLibreGLAdapter({ map }),
+        modes: [
+          new TerraDrawPolygonMode(),
+          new TerraDrawSelectMode({
+            allowManualDeselection: false,
+            flags: {
+              select: {
+                feature: {
+                  draggable: true,
+                  coordinates: {
+                    midpoints: true,
+                    draggable: true,
+                    deletable: true,
+                  },
+                },
+              },
+            },
+          }),
+        ],
+        idStrategy: {
+          isValidId: (id) => typeof id === 'string',
+          getId: () => (Math.random() + 1).toString(36).substring(2),
+        },
+      });
+
+      drawRef.current.on('change', (ids, type) => {
+        if (!ids.some((id) => id.toString().startsWith(CURRENT_DRAW_ID_PREFIX)))
+          return;
+
+        const snapshot = drawRef.current!.getSnapshot();
+        const polygonFeatures = snapshot.filter((feature) =>
+          feature.id?.toString().startsWith(CURRENT_DRAW_ID_PREFIX),
+        );
+
+        if (polygonFeatures.length === 1) {
+          dispatch(Actions.contribution.setShape(polygonFeatures[0].geometry));
+        } else if (polygonFeatures.length > 1) {
+          dispatch(
+            Actions.contribution.setShape({
+              type: 'MultiPolygon',
+              coordinates: polygonFeatures.map(
+                (p) => p.geometry.coordinates as Polygon['coordinates'],
+              ),
+            } satisfies MultiPolygon),
+          );
+        }
+      });
+
+      drawRef.current.start();
+    }
+
+    return () => {
+      drawRef.current?.clear();
+      drawRef.current?.stop();
+    };
+  }, [map]);
+
+  useEffect(() => {
+    if (!drawRef.current) return;
+
+    drawRef.current.clear();
+
+    if (shape) {
+      const polygonCoordinates: Polygon['coordinates'][] = [];
+      switch (shape.type) {
+        case 'MultiPolygon':
+          polygonCoordinates.push(...shape.coordinates);
+          break;
+        case 'Polygon':
+          polygonCoordinates.push(shape.coordinates);
+          break;
+        case 'Point':
+          break;
+      }
+      console.log(shape, polygonCoordinates);
+
+      if (polygonCoordinates.length > 0) {
+        drawRef.current.addFeatures(
+          polygonCoordinates.map((coordinates, index) => ({
+            id: CURRENT_DRAW_ID_PREFIX + index,
+            type: 'Feature',
+            geometry: {
+              type: 'Polygon',
+              coordinates,
+            },
+            properties: {
+              mode: 'select',
+            },
+          })),
+        );
+
+        drawRef.current.selectFeature(CURRENT_DRAW_ID_PREFIX + '0');
+      }
+    }
+  }, [rnb_id]);
+};

components/map/useMapLayers.ts

@@ -60,15 +60,22 @@ export const useMapLayers = (map?: maplibregl.Map) => {
     // Icons for ADS
     // build icon
 
-    const adsBuild = await map.loadImage(adsOperationsIcons.build.src);
-    map.addImage('adsBuild', adsBuild.data, { sdf: true });
+    if (!map.hasImage('adsBuild')) {
+      const adsBuild = await map.loadImage(adsOperationsIcons.build.src);
+      map.addImage('adsBuild', adsBuild.data, { sdf: true });
+    }
+
     // modify icon
-    const adsModify = await map.loadImage(adsOperationsIcons.modify.src);
-    map.addImage('adsModify', adsModify.data, { sdf: true });
+    if (!map.hasImage('adsModify')) {
+      const adsModify = await map.loadImage(adsOperationsIcons.modify.src);
+      map.addImage('adsModify', adsModify.data, { sdf: true });
+    }
 
     // demolish icon
-    const adsDemo = await map.loadImage(adsOperationsIcons.demolish.src);
-    map.addImage('adsDemo', adsDemo.data, { sdf: true });
+    if (!map.hasImage('adsDemo')) {
+      const adsDemo = await map.loadImage(adsOperationsIcons.demolish.src);
+      map.addImage('adsDemo', adsDemo.data, { sdf: true });
+    }
 
     map.addSource('ads', {
       type: 'vector',
@@ -252,13 +259,6 @@ export const useMapLayers = (map?: maplibregl.Map) => {
         ],
       },
     });
-
-    const buildingSourceControl = map._controls.find(
-      (c) => c instanceof BuildingSourceSwitcherControl,
-    );
-    if (buildingSourceControl) {
-      buildingSourceControl.updateStyles();
-    }
   }, []);
 
   // Initialisation des couches vectorielles

next.config.js

@@ -11,7 +11,7 @@ const nextConfig = {
     ];
   },
 
-  reactStrictMode: true,
+  reactStrictMode: false,
   productionBrowserSourceMaps: true,
   webpack: (config) => {
     config.module.rules.push({