Merge pull request #29 from M3nin0/issue/geometry-store-revision

form: reviewing the Geometry Store concept and remove the EditableGeoJSONLayer

Author: M3nin0

src/lib/base/event/DrawEventAssigner.js

@@ -103,6 +103,16 @@ const assignMapDrawEvents = (mapContext, eventCallbackProvider) => {
     MapDrawEvents.onCut,
     DrawEventMethods.cut
   );
+
+  /**
+   * Assigning `Leaflet.Map.layeradd` event
+   * (for when the layers are reloaded from the formik in the map).
+   */
+  mapContext.on('layeradd', ({ layer }) => {
+    if (layer._map) {
+      assignLayerDrawEvents(layer, eventCallbackProvider);
+    }
+  });
 };
 
 export const DrawEventAssigner = {

src/lib/base/event/index.js

@@ -7,4 +7,6 @@
  */
 
 export * as DrawEventTypes from './DrawEventTypes';
+
+export { useDrawEvents } from './useDrawEvents';
 export { DrawEventAssigner } from './DrawEventAssigner';

src/lib/base/event/useDrawEvents.js

@@ -0,0 +1,54 @@
+/*
+ * This file is part of GEO-Metadata-Previewer.
+ * Copyright (C) 2022 GEO Secretariat.
+ *
+ * GEO-Metadata-Previewer is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import { useMap } from 'react-leaflet';
+import { DrawEventAssigner } from './DrawEventAssigner';
+
+/**
+ * Hook to enable the draw events in the map.
+ *
+ * @param {Object} eventsConfig Configuration object for the `DrawEventAssigner`.
+ * @param {Function} onDefined Function callback called when all events are signed in the Leaflet map.
+ * @returns {JSX.Element}
+ */
+export const useDrawEvents = (eventsConfig, onDefined) => {
+  // hooks
+  const mapContext = useMap();
+
+  useEffect(() => {
+    // Defining the map level events (e.g., `pm:create` and `pm:cut`).
+
+    // Assigning create event.
+    DrawEventAssigner.assignMapDrawEvents(mapContext, eventsConfig);
+
+    // Side effecting
+    if (onDefined) {
+      onDefined();
+    }
+  }, []); // avoiding re-rendering
+
+  return null;
+};
+
+useDrawEvents.propTypes = {
+  editorConfig: PropTypes.shape({
+    onCreate: PropTypes.func,
+    onCut: PropTypes.func,
+    onEdit: PropTypes.func,
+    onRemove: PropTypes.func,
+  }).isRequired,
+  onDefined: PropTypes.func,
+};
+
+useDrawEvents.defaultProps = {
+  editorConfig: {},
+  onDefined: null,
+};

src/lib/base/geometry/mutators.js

@@ -12,6 +12,54 @@ import _get from 'lodash/get';
 import _isEmpty from 'lodash/isEmpty';
 import _isNil from 'lodash/isNil';
 
+/**
+ * Generate the GeoJSON Geometry Object without using `multi` or `collection` types
+ *
+ * @param {Object} geometryObject GeoJSON Geometry object.
+ */
+const generateGeometryExploded = (geometryObject) => {
+  // defining the types
+  const typeRecursive = ['GeometryCollection'];
+
+  const typeUnique = ['Point', 'Polygon', 'LineString'];
+  const typeMultiple = ['MultiPolygon', 'MultiPoint', 'MultiLineString'];
+
+  // auxiliary function
+  const explodeGeometry = (geometry) => {
+    const geometryType = _get(geometry, 'type');
+
+    if (typeUnique.includes(geometryType)) {
+      return [geometry];
+    }
+
+    if (typeMultiple.includes(geometryType)) {
+      const geometryTypeUnique = geometryType.replace('Multi', '');
+      const geometryCoordinates = _get(geometry, 'coordinates');
+
+      return geometryCoordinates.map((geometryCoordinate) => ({
+        type: geometryTypeUnique,
+        coordinates: geometryCoordinate,
+      }));
+    }
+
+    if (typeRecursive.includes(geometryType)) {
+      return _get(geometryObject, 'geometries', []).map((geometry) =>
+        explodeGeometry(geometry)
+      );
+    }
+  };
+
+  return explodeGeometry(geometryObject).map((geometry) => {
+    let geometryData = geometry;
+
+    if (Array.isArray(geometry)) {
+      geometryData = geometryData[0];
+    }
+
+    return generateGeoJSONFeature(geometryData);
+  });
+};
+
 /**
  * Generate a GeoJSON Geometry Object with the type based on
  * the content of the given geometries.
@@ -55,12 +103,12 @@ const generateGeoJSONGeometryObject = (geometries) => {
 
 const generateGeometryObjectsFromFeatures = (featureData) => {
   // checking if is a feature or feature collection
-  let extractedData = null;
+  let extractedData = featureData;
   const featureType = _get(featureData, 'type');
 
   if (featureType === 'Feature') {
     extractedData = [featureData];
-  } else {
+  } else if (featureType === 'FeatureCollection') {
     extractedData = featureData.features;
   }
 
@@ -100,5 +148,6 @@ export const GeometryMutator = {
   generateGeoJSONGeometryObject,
   generateGeoJSONFeature,
   generateGeometryObjectsFromFeatures,
+  generateGeometryExploded,
   isFeatureOrFeatureCollection,
 };

src/lib/components/form/fields/GeographicIdentifiersField.js

@@ -54,7 +54,7 @@ export const GeographicIdentifiersField = ({
 
   const prepareSuggest = (searchQuery) => {
     const limitTo = fieldState.limitTo;
-    const prefix = limitTo === 'all' ? '' : `${limitTo}:`;
+    const prefix = limitTo === 'all' ? '' : `${limitTo}::`;
 
     return `${prefix}${searchQuery}`;
   };

src/lib/components/form/fields/GeometryField/GeometryField.js

@@ -62,16 +62,18 @@ export const GeometryField = ({
   interactiveMapConfig,
 }) => {
   // States
-  const [geometryStore, setGeometryStore] = useState(new GeometryStore());
   const [interactiveMapInitialized, setInteractiveMapInitialized] =
     useState(false);
   const [activatedBreadcrumb, setActivatedBreadcrumb] = useState('menu');
 
+  // Local store
+  const geometryStore = new GeometryStore();
+
   // Handlers
   const changeBreadcrumb = (breadcrumbName) =>
     setActivatedBreadcrumb(breadcrumbName);
 
-  const enableEmptyInteractiveMap = (formikProps) => () => {
+  const enableEmptyInteractiveMap = () => {
     changeBreadcrumb('visualization');
     setInteractiveMapInitialized(true);
   };
@@ -82,15 +84,14 @@ export const GeometryField = ({
   };
 
   const onDataLoadCallback = (formikProps) => {
-    geometryStore.loadFormikProps(formikProps);
-
     return (data) => {
-      geometryStore.setGeometries(data);
+      geometryStore.loadGeoJSON(data);
 
       // Side effecting
-      onDataLoad(data);
+      changeBreadcrumb('visualization');
       setInteractiveMapInitialized(true);
-      setActivatedBreadcrumb('visualization');
+
+      onDataLoad(data);
     };
   };
 
@@ -109,9 +110,16 @@ export const GeometryField = ({
   return (
     <Field name={fieldPath}>
       {(formikProps) => {
+        // Linking the geometry store with the formik storage
+        geometryStore.loadFormikProps(formikProps);
+
         // Checking if an initial values is defined.
         const initialValues = getIn(formikProps.form.values, fieldPath, {});
 
+        if (!_isEmpty(initialValues)) {
+          enableEmptyInteractiveMap();
+        }
+
         return (
           <>
             {menu ? (
@@ -180,11 +188,10 @@ export const GeometryField = ({
               <Segment placeholder>
                 {!menu ||
                 (interactiveMapInitialized &&
-                  activatedBreadcrumb === 'visualization') ||
-                !_isEmpty(initialValues) ? (
+                  activatedBreadcrumb === 'visualization') ? (
                   <>
                     <InteractiveMap
-                      formikProps={formikProps}
+                      geometryStore={geometryStore}
                       {...interactiveMapConfig}
                     />
                   </>
@@ -200,7 +207,7 @@ export const GeometryField = ({
                         </Header>
                         <Button
                           content={i18next.t('Use')}
-                          onClick={enableEmptyInteractiveMap(formikProps)}
+                          onClick={enableEmptyInteractiveMap}
                         />
                       </Grid.Column>