front: editor - fix null_geometry and improve mouse hover due to maplibre migration

Author: sim51

front/src/applications/editor/Map.tsx

@@ -4,7 +4,6 @@ import maplibregl from 'maplibre-gl';
 import ReactMapGL, { AttributionControl, ScaleControl } from 'react-map-gl';
 import { withTranslation } from 'react-i18next';
 import { TFunction } from 'i18next';
-
 import VirtualLayers from 'applications/osrd/views/OSRDSimulation/VirtualLayers';
 import colors from 'common/Map/Consts/colors';
 import 'common/Map/Map.scss';
@@ -17,6 +16,7 @@ import Platforms from '../../common/Map/Layers/Platforms';
 import osmBlankStyle from '../../common/Map/Layers/osmBlankStyle';
 import OrthoPhoto from '../../common/Map/Layers/OrthoPhoto';
 import { Viewport } from '../../reducers/map';
+import { getMapMouseEventNearestFeature } from '../../utils/mapboxHelper';
 import EditorContext from './context';
 import {
   CommonToolState,
@@ -99,26 +99,39 @@ const MapUnplugged: FC<PropsWithChildren<MapProps>> = ({
           onMove={(e) => setViewport(e.viewState)}
           onMoveStart={() => setMapState((prev) => ({ ...prev, isDragging: true }))}
           onMoveEnd={() => setMapState((prev) => ({ ...prev, isDragging: false }))}
-          onMouseEnter={(e) => {
-            setMapState((prev) => ({ ...prev, isHovering: true }));
-            const feature = (e.features || [])[0];
-            if (activeTool.onHover) {
-              activeTool.onHover(e, extendedContext);
-            } else if (feature && feature.properties) {
-              const entity = feature?.properties?.id
-                ? editorState.entitiesIndex[feature.properties.id]
-                : undefined;
-              setToolState({
-                ...toolState,
-                hovered: entity || null,
-              });
+          onMouseMove={(e) => {
+            const nearestResult = getMapMouseEventNearestFeature(e);
+            const partialToolState: Partial<CommonToolState> = {
+              hovered: null,
+              mousePosition: [e.lngLat.lng, e.lngLat.lat],
+            };
+            const partialMapState: Partial<MapState> = { isHovering: false };
+
+            // if we hover something
+            if (nearestResult) {
+              const { feature } = nearestResult;
+              const eventWithFeature = {
+                ...e,
+                preventDefault: e.preventDefault,
+                features: [feature],
+              };
+              partialMapState.isHovering = true;
+              if (activeTool.onHover) {
+                activeTool.onHover(eventWithFeature, extendedContext);
+              } else if (feature && feature.properties) {
+                const entity = feature?.properties?.id
+                  ? editorState.entitiesIndex[feature.properties.id]
+                  : undefined;
+                partialToolState.hovered = entity || null;
+              }
             } else {
-              setToolState({ ...toolState, hovered: null });
+              if (activeTool.onMove) {
+                activeTool.onMove(e, extendedContext);
+              }
             }
-          }}
-          onMouseLeave={() => {
-            setMapState((prev) => ({ ...prev, isHovering: false }));
-            setToolState({ ...toolState, mousePosition: null, hovered: null });
+
+            setToolState({ ...toolState, ...partialToolState });
+            setMapState((prev) => ({ ...prev, ...partialMapState }));
           }}
           onLoad={(e) => {
             // need to call resize, otherwise sometime the canvas doesn't take 100%
@@ -140,17 +153,19 @@ const MapUnplugged: FC<PropsWithChildren<MapProps>> = ({
           }
           cursor={cursor}
           onClick={(e) => {
+            const nearestResult = getMapMouseEventNearestFeature(e);
+            const eventWithFeature = nearestResult
+              ? {
+                  ...e,
+                  preventDefault: e.preventDefault,
+                  features: [nearestResult.feature],
+                }
+              : e;
             if (toolState.hovered && activeTool.onClickFeature) {
-              activeTool.onClickFeature(toolState.hovered, e, extendedContext);
+              activeTool.onClickFeature(toolState.hovered, eventWithFeature, extendedContext);
             }
             if (activeTool.onClickMap) {
-              activeTool.onClickMap(e, extendedContext);
-            }
-          }}
-          onMouseMove={(e) => {
-            setToolState({ ...toolState, mousePosition: [e.lngLat.lng, e.lngLat.lat] });
-            if (activeTool.onMove) {
-              activeTool.onMove(e, extendedContext);
+              activeTool.onClickMap(eventWithFeature, extendedContext);
             }
           }}
         >

front/src/applications/editor/tools/pointEdition/components.tsx

@@ -217,7 +217,7 @@ export const PointEditionMessages: FC = () => {
     PointEditionState<EditorEntity>
   >;
 
-  if (!state.entity.geometry) {
+  if (!state.entity.geometry || isEqual(state.entity.geometry, NULL_GEOMETRY)) {
     return state.nearestPoint
       ? t(`Editor.tools.point-edition.help.stop-dragging-on-line`)
       : t(`Editor.tools.point-edition.help.stop-dragging-no-line`);

front/src/applications/editor/tools/pointEdition/tool-factory.ts

@@ -189,7 +189,8 @@ The entity ${entity.properties.id} position computed by Turf.js does not match t
       return ['editor/geo/track-main', POINT_LAYER_ID];
     },
     getCursor({ state }, { isDragging }) {
-      if (isDragging || !state.entity.geometry) return 'move';
+      if (isDragging || !state.entity.geometry || isEqual(state.entity.geometry, NULL_GEOMETRY))
+        return 'move';
       if (state.isHoveringTarget) return 'pointer';
       return 'default';
     },

front/src/types/mapbox-gl.ts

@@ -12,6 +12,7 @@ import {
 } from 'mapbox-gl';
 
 export type {
+  MapboxGeoJSONFeature,
   MapLayerMouseEvent,
   AnyPaint,
   CirclePaint,

front/src/utils/mapboxHelper.ts

@@ -22,7 +22,7 @@ import nearestPointOnLine from '@turf/nearest-point-on-line';
 import nearestPoint, { NearestPoint } from '@turf/nearest-point';
 import fnDistance from '@turf/distance';
 import fnExplode from '@turf/explode';
-import { Zone, MapLayerMouseEvent } from '../types';
+import { Zone, MapLayerMouseEvent, MapboxGeoJSONFeature } from '../types';
 import { getAngle } from '../applications/editor/data/utils';
 
 /**
@@ -290,30 +290,35 @@ export function getNearestPoint(lines: Feature<LineString>[], coord: Coord): Nea
  */
 export function getMapMouseEventNearestFeature(
   e: MapLayerMouseEvent,
-  opts?: { layersId?: string[]; tolerance: number }
-): { feature: Feature; nearest: number[]; distance: number } | null {
+  opts?: { layersId?: string[]; tolerance: number; excludeOsm: boolean }
+): { feature: MapboxGeoJSONFeature; nearest: number[]; distance: number } | null {
   const layers = opts?.layersId;
-  const tolerance = opts?.tolerance || 30;
+  const tolerance = opts?.tolerance || 15;
+  const excludeOsm = opts?.excludeOsm || true;
   const { target: map, point } = e;
   const coord = e.lngLat.toArray();
 
-  const features = map.queryRenderedFeatures(
-    [
-      [point.x - tolerance / 2, point.y - tolerance / 2],
-      [point.x + tolerance / 2, point.y + tolerance / 2],
-    ],
-    { layers }
-  );
+  const features = map
+    .queryRenderedFeatures(
+      [
+        [point.x - tolerance / 2, point.y - tolerance / 2],
+        [point.x + tolerance / 2, point.y + tolerance / 2],
+      ],
+      { layers }
+    )
+    .filter((f) => (excludeOsm ? !f.layer.id.startsWith('osm') : true));
 
   const result = head(
     sortBy(
-      features.map((feature: Feature) => {
+      features.map((feature) => {
         let distance = Infinity;
         let nearestFeaturePoint: Feature<Point> | null = null;
         switch (feature.geometry.type) {
           case 'Point': {
             nearestFeaturePoint = feature as Feature<Point>;
-            distance = fnDistance(coord, nearestFeaturePoint.geometry.coordinates);
+            // we boost point, otherwise when a point is on line,
+            // it's too easy to find a point of line closest
+            distance = 0.7 * fnDistance(coord, nearestFeaturePoint.geometry.coordinates);
             break;
           }
           case 'LineString': {