Merge pull request #9907 from mfo/main-in-repetition

ETQ admin je peux ajouter un champ carte dans un bloc répétable

app/components/types_de_champ_editor/champ_component.rb

@@ -90,7 +90,6 @@ class TypesDeChampEditor::ChampComponent < ApplicationComponent
   end
 
   EXCLUDE_FROM_BLOCK = [
-    TypeDeChamp.type_champs.fetch(:carte),
     TypeDeChamp.type_champs.fetch(:repetition)
   ]
 

app/javascript/components/MapEditor/components/AddressInput.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { fire } from '@utils';
+import type { FeatureCollection } from 'geojson';
 
 import ComboAdresseSearch from '../../ComboAdresseSearch';
 import { ComboSearchProps } from '~/components/ComboSearch';
@@ -8,7 +9,7 @@ export function AddressInput(
   comboProps: Pick<
     ComboSearchProps,
     'screenReaderInstructions' | 'announceTemplateId'
-  >
+  > & { featureCollection: FeatureCollection }
 ) {
   return (
     <div
@@ -21,7 +22,10 @@ export function AddressInput(
         placeholder="Rechercher une adresse : saisissez au moins 2 caractères"
         allowInputValues={false}
         onChange={(_, feature) => {
-          fire(document, 'map:zoom', { feature });
+          fire(document, 'map:zoom', {
+            featureCollection: comboProps.featureCollection,
+            feature
+          });
         }}
         {...comboProps}
       />

app/javascript/components/MapEditor/components/DrawLayer.tsx

@@ -6,6 +6,7 @@ import type { FeatureCollection } from 'geojson';
 import { useMapLibre } from '../../shared/maplibre/MapLibre';
 import {
   useFitBounds,
+  useFitBoundsNoFly,
   useEvent,
   useMapEvent,
   useFlyTo
@@ -117,6 +118,7 @@ function useExternalEvents(
   }
 ) {
   const fitBounds = useFitBounds();
+  const fitBoundsNoFly = useFitBoundsNoFly();
   const flyTo = useFlyTo();
 
   const onFeatureFocus = useCallback(
@@ -136,12 +138,11 @@ function useExternalEvents(
 
   const onZoomFocus = useCallback(
     ({ detail }) => {
-      const { feature } = detail;
-      if (feature) {
-        flyTo(17, feature.geometry.coordinates);
+      if (detail.feature && detail.featureCollection == featureCollection) {
+        flyTo(17, detail.feature.geometry.coordinates);
       }
     },
-    [flyTo]
+    [flyTo, featureCollection]
   );
 
   const onFeatureCreate = useCallback(
@@ -184,10 +185,10 @@ function useExternalEvents(
   );
 
   useEffect(() => {
-    fitBounds(featureCollection.bbox as LngLatBoundsLike);
+    fitBoundsNoFly(featureCollection.bbox as LngLatBoundsLike);
     // We only want to zoom on bbox on component mount.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fitBounds]);
+  }, [fitBoundsNoFly]);
 
   useEvent('map:feature:focus', onFeatureFocus);
   useEvent('map:feature:create', onFeatureCreate);

app/javascript/components/MapEditor/components/PointInput.tsx

@@ -1,9 +1,13 @@
 import React, { useState, useId } from 'react';
 import { fire } from '@utils';
-import type { Feature } from 'geojson';
+import type { Feature, FeatureCollection } from 'geojson';
 import CoordinateInput from 'react-coordinate-input';
 
-export function PointInput() {
+export function PointInput({
+  featureCollection
+}: {
+  featureCollection: FeatureCollection;
+}) {
   const inputId = useId();
   const [value, setValue] = useState('');
   const [feature, setFeature] = useState<Feature | null>(null);
@@ -60,7 +64,7 @@ export function PointInput() {
                 properties: {}
               };
               setFeature(feature);
-              fire(document, 'map:zoom', { feature });
+              fire(document, 'map:zoom', { featureCollection, feature });
             } else {
               setFeature(null);
             }

app/javascript/components/MapEditor/index.tsx

@@ -50,6 +50,7 @@ export default function MapEditor({
 
       <ImportFileInput featureCollection={featureCollection} {...actions} />
       <AddressInput
+        featureCollection={featureCollection}
         screenReaderInstructions={autocompleteScreenReaderInstructions}
         announceTemplateId={autocompleteAnnounceTemplateId}
       />
@@ -82,7 +83,7 @@ export default function MapEditor({
           </>
         ) : null}
       </MapLibre>
-      <PointInput />
+      <PointInput featureCollection={featureCollection} />
     </>
   );
 }

app/javascript/components/shared/maplibre/hooks.ts

@@ -26,6 +26,16 @@ export function useFitBounds() {
   );
 }
 
+export function useFitBoundsNoFly() {
+  const map = useMapLibre();
+  return useCallback(
+    (bbox: LngLatBoundsLike) => {
+      map.fitBounds(bbox, { padding: 100, linear: true, duration: 0 });
+    },
+    [map]
+  );
+}
+
 export function useFlyTo() {
   const map = useMapLibre();
   return useCallback(