Refactor Map Reader|Editor to handle events from geo areas list

app/javascript/components/MapEditor/index.js

@@ -1,69 +1,102 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import mapboxgl from 'mapbox-gl';
 import ReactMapboxGl, { GeoJSONLayer, ZoomControl } from 'react-mapbox-gl';
 import DrawControl from 'react-mapbox-gl-draw';
-import SwitchMapStyle from './SwitchMapStyle';
-import SearchInput from './SearchInput';
-import { getJSON, ajax } from '@utils';
 import { gpx, kml } from '@tmcw/togeojson/dist/togeojson.es.js';
-import ortho from '../MapStyles/ortho.json';
-import orthoCadastre from '../MapStyles/orthoCadastre.json';
-import vector from '../MapStyles/vector.json';
-import vectorCadastre from '../MapStyles/vectorCadastre.json';
-import { polygonCadastresFill, polygonCadastresLine } from './utils';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
 
+import { getJSON, ajax, fire } from '@utils';
+
+import SwitchMapStyle from './SwitchMapStyle';
+import { getMapStyle } from '../MapStyles';
+
+import SearchInput from './SearchInput';
+import { polygonCadastresFill, polygonCadastresLine } from './utils';
+import {
+  noop,
+  filterFeatureCollection,
+  fitBounds,
+  generateId,
+  useEvent,
+  findFeature
+} from '../shared/map';
+
 const Map = ReactMapboxGl({});
 
-function filterFeatureCollection(featureCollection, source) {
-  return {
-    type: 'FeatureCollection',
-    features: featureCollection.features.filter(
-      (feature) => feature.properties.source === source
-    )
-  };
-}
-
-function noop() {}
-
 function MapEditor({ featureCollection, url, preview, hasCadastres }) {
   const drawControl = useRef(null);
+  const [currentMap, setCurrentMap] = useState(null);
+
   const [style, setStyle] = useState('ortho');
   const [coords, setCoords] = useState([1.7, 46.9]);
   const [zoom, setZoom] = useState([5]);
-  const [currentMap, setCurrentMap] = useState({});
   const [bbox, setBbox] = useState(featureCollection.bbox);
   const [importInputs, setImportInputs] = useState([]);
-  let mapStyle = style === 'ortho' ? ortho : vector;
+  const [cadastresFeatureCollection, setCadastresFeatureCollection] = useState(
+    filterFeatureCollection(featureCollection, 'cadastre')
+  );
+  const mapStyle = getMapStyle(style, hasCadastres);
 
-  if (hasCadastres) {
+  const onFeatureFocus = useCallback(
-    mapStyle = style === 'ortho' ? orthoCadastre : vectorCadastre;
+    ({ detail }) => {
-  }
+      const { id } = detail;
-
+      const featureCollection = drawControl.current.draw.getAll();
-  const cadastresFeatureCollection = filterFeatureCollection(
+      const feature = findFeature(featureCollection, id);
-    featureCollection,
+      if (feature) {
-    'cadastre'
+        fitBounds(currentMap, feature);
+      }
+    },
+    [currentMap, drawControl.current]
   );
 
-  function updateFeaturesList(features) {
+  const onFeatureUpdate = useCallback(
-    const cadastres = features.find(
+    async ({ detail }) => {
-      ({ geometry }) => geometry.type === 'Polygon'
+      const { id, properties } = detail;
+      const featureCollection = drawControl.current.draw.getAll();
+      const feature = findFeature(featureCollection, id);
+
+      if (feature) {
+        getJSON(`${url}/${id}`, { feature: { properties } }, 'patch');
+      }
+    },
+    [url, drawControl.current]
+  );
+
+  const updateFeaturesList = useCallback(
+    async (features) => {
+      const cadastres = features.find(
+        ({ geometry }) => geometry.type === 'Polygon'
+      );
+      await ajax({
+        url,
+        type: 'get',
+        data: cadastres ? 'cadastres=update' : ''
+      });
+      fire(document, 'ds:page:update');
+    },
+    [url]
+  );
+
+  const onCadastresUpdate = useCallback(({ detail }) => {
+    setCadastresFeatureCollection(
+      filterFeatureCollection(detail.featureCollection, 'cadastre')
     );
-    ajax({ url, type: 'get', data: cadastres ? 'cadastres=update' : '' });
+  }, []);
-  }
+
+  useEvent('map:feature:focus', onFeatureFocus);
+  useEvent('map:feature:update', onFeatureUpdate);
+  useEvent('cadastres:update', onCadastresUpdate);
 
   function setFeatureId(lid, feature) {
     const draw = drawControl.current.draw;
     draw.setFeatureProperty(lid, 'id', feature.properties.id);
   }
 
-  const generateId = () => Math.random().toString(20).substr(2, 6);
+  function updateImportInputs(inputs, inputId) {
-
-  const updateImportInputs = (inputs, inputId) => {
     const updatedInputs = inputs.filter((input) => input.id !== inputId);
     setImportInputs(updatedInputs);
-  };
+  }
 
   async function onDrawCreate({ features }) {
     for (const feature of features) {
@@ -92,23 +125,13 @@ function MapEditor({ featureCollection, url, preview, hasCadastres }) {
     updateFeaturesList(features);
   }
 
-  const onMapLoad = (map) => {
+  function onMapLoad(map) {
     setCurrentMap(map);
 
     drawControl.current.draw.set(
       filterFeatureCollection(featureCollection, 'selection_utilisateur')
     );
-  };
+  }
-
-  const onCadastresUpdate = (evt) => {
-    if (currentMap) {
-      currentMap
-        .getSource('cadastres-layer')
-        .setData(
-          filterFeatureCollection(evt.detail.featureCollection, 'cadastre')
-        );
-    }
-  };
 
   const onFileImport = (e, inputId) => {
     const isGpxFile = e.target.files[0].name.includes('.gpx');
@@ -190,11 +213,6 @@ function MapEditor({ featureCollection, url, preview, hasCadastres }) {
     updateImportInputs(inputs, inputId);
   };
 
-  useEffect(() => {
-    addEventListener('cadastres:update', onCadastresUpdate);
-    return () => removeEventListener('cadastres:update', onCadastresUpdate);
-  });
-
   if (!mapboxgl.supported()) {
     return (
       <p>

app/javascript/components/MapReader/index.js

@@ -1,25 +1,100 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import ReactMapboxGl, { ZoomControl, GeoJSONLayer } from 'react-mapbox-gl';
-import mapboxgl from 'mapbox-gl';
+import mapboxgl, { Popup } from 'mapbox-gl';
-import SwitchMapStyle from './SwitchMapStyle';
-import ortho from '../MapStyles/ortho.json';
-import orthoCadastre from '../MapStyles/orthoCadastre.json';
-import vector from '../MapStyles/vector.json';
-import vectorCadastre from '../MapStyles/vectorCadastre.json';
 import PropTypes from 'prop-types';
 
+import SwitchMapStyle from './SwitchMapStyle';
+import { getMapStyle } from '../MapStyles';
+
+import {
+  filterFeatureCollection,
+  filterFeatureCollectionByGeometryType,
+  useEvent,
+  findFeature,
+  fitBounds,
+  getCenter
+} from '../shared/map';
+
 const Map = ReactMapboxGl({});
 
 const MapReader = ({ featureCollection }) => {
+  const [currentMap, setCurrentMap] = useState(null);
   const [style, setStyle] = useState('ortho');
-  const hasCadastres = featureCollection.features.find(
+  const cadastresFeatureCollection = useMemo(
-    (feature) => feature.properties.source === 'cadastre'
+    () => filterFeatureCollection(featureCollection, 'cadastre'),
+    [featureCollection]
+  );
+  const selectionsUtilisateurFeatureCollection = useMemo(
+    () => filterFeatureCollection(featureCollection, 'selection_utilisateur'),
+    [featureCollection]
+  );
+  const selectionsLineFeatureCollection = useMemo(
+    () =>
+      filterFeatureCollectionByGeometryType(
+        selectionsUtilisateurFeatureCollection,
+        'LineString'
+      ),
+    [selectionsUtilisateurFeatureCollection]
+  );
+  const selectionsPolygonFeatureCollection = useMemo(
+    () =>
+      filterFeatureCollectionByGeometryType(
+        selectionsUtilisateurFeatureCollection,
+        'Polygon'
+      ),
+    [selectionsUtilisateurFeatureCollection]
+  );
+  const selectionsPointFeatureCollection = useMemo(
+    () =>
+      filterFeatureCollectionByGeometryType(
+        selectionsUtilisateurFeatureCollection,
+        'Point'
+      ),
+    [selectionsUtilisateurFeatureCollection]
+  );
+  const mapStyle = useMemo(
+    () => getMapStyle(style, cadastresFeatureCollection.length),
+    [style, cadastresFeatureCollection]
+  );
+  const popup = useMemo(
+    () =>
+      new Popup({
+        closeButton: false,
+        closeOnClick: false
+      })
   );
-  let mapStyle = style === 'ortho' ? ortho : vector;
 
-  if (hasCadastres) {
+  const onMouseEnter = useCallback(
-    mapStyle = style === 'ortho' ? orthoCadastre : vectorCadastre;
+    (event) => {
-  }
+      const feature = event.features[0];
+      if (feature.properties && feature.properties.description) {
+        const coordinates = getCenter(feature.geometry, event.lngLat);
+        const description = feature.properties.description;
+        currentMap.getCanvas().style.cursor = 'pointer';
+        popup.setLngLat(coordinates).setHTML(description).addTo(currentMap);
+      } else {
+        popup.remove();
+      }
+    },
+    [currentMap, popup]
+  );
+
+  const onMouseLeave = useCallback(() => {
+    currentMap.getCanvas().style.cursor = '';
+    popup.remove();
+  }, [currentMap, popup]);
+
+  const onFeatureFocus = useCallback(
+    ({ detail }) => {
+      const feature = findFeature(featureCollection, detail.id);
+      if (feature) {
+        fitBounds(currentMap, feature);
+      }
+    },
+    [currentMap, featureCollection]
+  );
+
+  useEvent('map:feature:focus', onFeatureFocus);
 
   const [a1, a2, b1, b2] = featureCollection.bbox;
   const boundData = [
@@ -27,26 +102,6 @@ const MapReader = ({ featureCollection }) => {
     [b1, b2]
   ];
 
-  const cadastresFeatureCollection = {
-    type: 'FeatureCollection',
-    features: []
-  };
-
-  const selectionsLineFeatureCollection = {
-    type: 'FeatureCollection',
-    features: []
-  };
-
-  const selectionsPolygonFeatureCollection = {
-    type: 'FeatureCollection',
-    features: []
-  };
-
-  const selectionsPointFeatureCollection = {
-    type: 'FeatureCollection',
-    features: []
-  };
-
   const polygonSelectionFill = {
     'fill-color': '#EC3323',
     'fill-opacity': 0.5
@@ -77,25 +132,8 @@ const MapReader = ({ featureCollection }) => {
     'line-dasharray': [1, 1]
   };
 
-  for (let feature of featureCollection.features) {
+  function onMapLoad(map) {
-    switch (feature.properties.source) {
+    setCurrentMap(map);
-      case 'selection_utilisateur':
-        switch (feature.geometry.type) {
-          case 'LineString':
-            selectionsLineFeatureCollection.features.push(feature);
-            break;
-          case 'Polygon':
-            selectionsPolygonFeatureCollection.features.push(feature);
-            break;
-          case 'Point':
-            selectionsPointFeatureCollection.features.push(feature);
-            break;
-        }
-        break;
-      case 'cadastre':
-        cadastresFeatureCollection.features.push(feature);
-        break;
-    }
   }
 
   if (!mapboxgl.supported()) {
@@ -110,6 +148,7 @@ const MapReader = ({ featureCollection }) => {
 
   return (
     <Map
+      onStyleLoad={(map) => onMapLoad(map)}
       fitBounds={boundData}
       fitBoundsOptions={{ padding: 100 }}
       style={mapStyle}
@@ -122,14 +161,20 @@ const MapReader = ({ featureCollection }) => {
         data={selectionsPolygonFeatureCollection}
         fillPaint={polygonSelectionFill}
         linePaint={polygonSelectionLine}
+        fillOnMouseEnter={onMouseEnter}
+        fillOnMouseLeave={onMouseLeave}
       />
       <GeoJSONLayer
         data={selectionsLineFeatureCollection}
         linePaint={lineStringSelectionLine}
+        lineOnMouseEnter={onMouseEnter}
+        lineOnMouseLeave={onMouseLeave}
       />
       <GeoJSONLayer
         data={selectionsPointFeatureCollection}
         circlePaint={pointSelectionFill}
+        circleOnMouseEnter={onMouseEnter}
+        circleOnMouseLeave={onMouseLeave}
       />
       <GeoJSONLayer
         data={cadastresFeatureCollection}

app/javascript/components/MapStyles/index.js

@@ -0,0 +1,11 @@
+import ortho from './ortho.json';
+import orthoCadastre from './orthoCadastre.json';
+import vector from './vector.json';
+import vectorCadastre from './vectorCadastre.json';
+
+export function getMapStyle(style, hasCadastres) {
+  if (hasCadastres) {
+    return style === 'ortho' ? orthoCadastre : vectorCadastre;
+  }
+  return style === 'ortho' ? ortho : vector;
+}

app/javascript/components/shared/map.js

@@ -0,0 +1,78 @@
+import { LngLatBounds } from 'mapbox-gl';
+import { useEffect } from 'react';
+
+export function getBounds(geometry) {
+  const bbox = new LngLatBounds();
+
+  if (geometry.type === 'Point') {
+    return [geometry.coordinates, geometry.coordinates];
+  } else if (geometry.type === 'LineString') {
+    for (const coordinate of geometry.coordinates) {
+      bbox.extend(coordinate);
+    }
+  } else {
+    for (const coordinate of geometry.coordinates[0]) {
+      bbox.extend(coordinate);
+    }
+  }
+  return bbox;
+}
+
+export function fitBounds(map, feature) {
+  if (map) {
+    map.fitBounds(getBounds(feature.geometry), { padding: 100 });
+  }
+}
+
+export function findFeature(featureCollection, id) {
+  return featureCollection.features.find(
+    (feature) => feature.properties.id === id
+  );
+}
+
+export function filterFeatureCollection(featureCollection, source) {
+  return {
+    type: 'FeatureCollection',
+    features: featureCollection.features.filter(
+      (feature) => feature.properties.source === source
+    )
+  };
+}
+
+export function filterFeatureCollectionByGeometryType(featureCollection, type) {
+  return {
+    type: 'FeatureCollection',
+    features: featureCollection.features.filter(
+      (feature) => feature.geometry.type === type
+    )
+  };
+}
+
+export function noop() {}
+
+export function generateId() {
+  return Math.random().toString(20).substr(2, 6);
+}
+
+export function useEvent(eventName, callback) {
+  return useEffect(() => {
+    addEventListener(eventName, callback);
+    return () => removeEventListener(eventName, callback);
+  }, [eventName, callback]);
+}
+
+export function getCenter(geometry, lngLat) {
+  const bbox = new LngLatBounds();
+
+  switch (geometry.type) {
+    case 'Point':
+      return [...geometry.coordinates];
+    case 'LineString':
+      return [lngLat.lng, lngLat.lat];
+    default:
+      for (const coordinate of geometry.coordinates[0]) {
+        bbox.extend(coordinate);
+      }
+      return bbox.getCenter();
+  }
+}