From eef0ef100bf92bee1659b1e7da8ff40e20b2d572 Mon Sep 17 00:00:00 2001
From: Nicolas Wurtz <gitlab@nethenic.net>
Date: Thu, 17 Nov 2022 20:14:50 +0100
Subject: [PATCH] front: bugfix on snapped cursor #2365

---
 front/package.json                            |  3 +-
 .../osrd/views/OSRDConfig/Map.tsx             | 47 ++++---------------
 front/yarn.lock                               |  8 ++++
 3 files changed, 19 insertions(+), 39 deletions(-)

diff --git a/front/package.json b/front/package.json
index 30a706f471e..90fdaa10b1b 100644
--- a/front/package.json
+++ b/front/package.json
@@ -19,6 +19,7 @@
     "@turf/bezier-spline": "^6.5.0",
     "@turf/boolean-intersects": "^6.3.0",
     "@turf/boolean-point-in-polygon": "^6.3.0",
+    "@turf/combine": "^6.5.0",
     "@turf/distance": "^6.3.0",
     "@turf/helpers": "^6.3.0",
     "@turf/length": "^6.5.0",
@@ -30,8 +31,8 @@
     "@turf/nearest-point-on-line": "^6.3.0",
     "@turf/transform-translate": "^6.5.0",
     "axios": "^0.27.2",
-    "classnames": "^2.3.2",
     "chroma-js": "^2.4.2",
+    "classnames": "^2.3.2",
     "d3": "^5.16.0",
     "d3-brush": "^3.0.0",
     "d3-drag": "^3.0.0",
diff --git a/front/src/applications/osrd/views/OSRDConfig/Map.tsx b/front/src/applications/osrd/views/OSRDConfig/Map.tsx
index 389570502ca..89bbaa97f58 100644
--- a/front/src/applications/osrd/views/OSRDConfig/Map.tsx
+++ b/front/src/applications/osrd/views/OSRDConfig/Map.tsx
@@ -7,10 +7,11 @@ import ReactMapGL, {
   MapRef,
   MapEvent,
 } from 'react-map-gl';
-import { lineString as turfLineString, point as turfPoint } from '@turf/helpers';
+import { point as turfPoint, featureCollection } from '@turf/helpers';
 import { useDispatch, useSelector } from 'react-redux';
 import turfNearestPointOnLine, { NearestPointOnLine } from '@turf/nearest-point-on-line';
-import { Feature, Position, LineString } from 'geojson';
+import combine from '@turf/combine';
+import { Position, LineString } from 'geojson';
 import { useParams } from 'react-router-dom';
 
 import { RootState } from 'reducers';
@@ -55,7 +56,6 @@ function Map() {
   const { viewport, mapSearchMarker, mapStyle, mapTrackSources, showOSM, layersSettings } =
     useSelector((state: RootState) => state.map);
   const [idHover, setIdHover] = useState<string | undefined>(undefined);
-  const [trackSectionHover, setTrackSectionHover] = useState<Feature<any>>();
   const [lngLatHover, setLngLatHover] = useState<Position>();
   const [trackSectionGeoJSON, setTrackSectionGeoJSON] = useState<LineString>();
   const [snappedPoint, setSnappedPoint] = useState<NearestPointOnLine>();
@@ -83,12 +83,7 @@ function Map() {
   };
 
   const onFeatureClick = (e: MapEvent) => {
-    if (
-      e.features &&
-      e.features.length > 0 &&
-      e.features[0].properties.id !== undefined
-      // && e.features[0].properties.type_voie === 'VP') {
-    ) {
+    if (e.features && e.features.length > 0 && e.features[0].properties.id !== undefined) {
       dispatch(
         updateFeatureInfoClickOSRD({
           displayPopup: true,
@@ -107,32 +102,9 @@ function Map() {
   };
 
   const getGeoJSONFeature = (e: MapEvent) => {
-    if (
-      trackSectionHover === undefined ||
-      e?.features?.[0].properties.id !== trackSectionHover?.properties?.id
-    ) {
-      setTrackSectionHover(e?.features?.[0]);
-    }
-
-    // Get GEOJSON of features hovered for snapping
-    const width = 5;
-    const height = 5;
-    if (mapRef.current) {
-      const features = mapRef.current.queryRenderedFeatures(
-        [
-          [e.point[0] - width / 2, e.point[1] - height / 2],
-          [e.point[0] + width / 2, e.point[1] + height / 2],
-        ],
-        {
-          layers:
-            mapTrackSources === 'geographic'
-              ? ['chartis/tracks-geo/main']
-              : ['chartis/tracks-sch/main'],
-        }
-      );
-      if (features[0] !== undefined) {
-        setTrackSectionGeoJSON(features[0].geometry);
-      }
+    if (e.features && e.features[0] !== undefined) {
+      const mergedFeatures = combine(featureCollection(e.features));
+      setTrackSectionGeoJSON(mergedFeatures.features[0].geometry);
     }
   };
 
@@ -169,15 +141,14 @@ function Map() {
 
   useEffect(() => {
     if (trackSectionGeoJSON !== undefined && lngLatHover !== undefined) {
-      const line = turfLineString(trackSectionGeoJSON.coordinates);
       const point = turfPoint(lngLatHover);
       try {
-        setSnappedPoint(turfNearestPointOnLine(line, point));
+        setSnappedPoint(turfNearestPointOnLine(trackSectionGeoJSON, point));
       } catch (error) {
         console.warn(`Ìmpossible to snapPoint - error ${error}`);
       }
     }
-  }, [trackSectionGeoJSON, trackSectionHover, lngLatHover]);
+  }, [trackSectionGeoJSON, lngLatHover]);
 
   useEffect(() => {
     if (urlLat) {
diff --git a/front/yarn.lock b/front/yarn.lock
index 60b5627269b..3e7f337f3c9 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -2199,6 +2199,14 @@
   dependencies:
     "@turf/helpers" "^6.5.0"
 
+"@turf/combine@^6.5.0":
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/@turf/combine/-/combine-6.5.0.tgz#e0f3468ac9c09c24fa7184ebbd8a79d2e595ef81"
+  integrity sha512-Q8EIC4OtAcHiJB3C4R+FpB4LANiT90t17uOd851qkM2/o6m39bfN5Mv0PWqMZIHWrrosZqRqoY9dJnzz/rJxYQ==
+  dependencies:
+    "@turf/helpers" "^6.5.0"
+    "@turf/meta" "^6.5.0"
+
 "@turf/destination@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@turf/destination/-/destination-6.5.0.tgz#30a84702f9677d076130e0440d3223ae503fdae1"