Merge pull request #31 from M3nin0/issue/geometries-mode

form: enabling support for multiple geometry selection mode

Author: M3nin0

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

@@ -48,6 +48,7 @@ import { InteractiveMap } from './InteractiveMap';
  * @param {Function} onDataLoad Function called when the data is loaded. This function can be used to present
  *                               a message (e.g., toast) to the user.
  * @param {Object} interactiveMapConfig Configuration object for the `Interactive Map` component.
+ * @param {Boolean} uniqueLayer Enable/Disable users to draw multiple geometries in the map.
  * @returns {JSX.Element}
  */
 export const GeometryField = ({
@@ -60,14 +61,15 @@ export const GeometryField = ({
   onDataClean,
   onDataLoad,
   interactiveMapConfig,
+  uniqueLayer,
 }) => {
   // States
   const [interactiveMapInitialized, setInteractiveMapInitialized] =
     useState(false);
   const [activatedBreadcrumb, setActivatedBreadcrumb] = useState('menu');
 
   // Local store
-  const geometryStore = new GeometryStore();
+  const geometryStore = new GeometryStore(null, uniqueLayer);
 
   // Handlers
   const changeBreadcrumb = (breadcrumbName) =>

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

@@ -49,8 +49,29 @@ const Template = (args) => (
 /**
  * Component stories
  */
-export const Basic = Template.bind({});
-Basic.args = {
+export const UniqueLayer = Template.bind({});
+UniqueLayer.args = {
+  uniqueLayer: true,
+  fieldPath: 'geometry',
+  label: 'Geometry',
+  labelIcon: 'location arrow',
+  onDataClean: () => {
+    setTimeout((_) => {
+      toast({
+        title: 'Data cleaned',
+        description: 'Data has been cleaned',
+        type: 'info',
+        icon: 'info',
+        time: 5000,
+        animation: 'fade right',
+      });
+    }, 100);
+  },
+};
+
+export const MultipleLayers = Template.bind({});
+MultipleLayers.args = {
+  uniqueLayer: false,
   fieldPath: 'geometry',
   label: 'Geometry',
   labelIcon: 'location arrow',

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

@@ -22,11 +22,13 @@ export class GeometryStore {
   /**
    * @constructor
    * @param {Object} formikProps Formik Bag object.
+   * @param {Boolean} uniqueLayer Enable/Disable users to draw multiple geometries in the map.
    */
-  constructor(formikProps = null) {
+  constructor(formikProps = null, uniqueLayer = false) {
     // definitions
     this.formikProps = null;
     this.fieldPath = null;
+    this.uniqueLayer = uniqueLayer;
 
     this.indexKey = 0;
     this.geometryIndex = {};
@@ -172,6 +174,10 @@ export class GeometryStore {
   addLayer(layer) {
     const layerKey = this._generateKey();
 
+    if (this.uniqueLayer) {
+      this.geometryIndex = {};
+    }
+
     layer._store_identifier = layerKey;
     this.geometryIndex[layerKey] = layer;
 

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

@@ -11,8 +11,10 @@ import PropTypes from 'prop-types';
 
 import { MapEventHandler } from './MapEventHandler';
 
+import { LayerLoader } from './LayerLoader';
+
 import { useDrawEvents } from '../../../../../base';
-import { GeometryEditorControl, LayerLoader } from '../../../../layers';
+import { GeometryEditorControl } from '../../../../layers';
 
 /**
  * Geometry editor component.
@@ -25,20 +27,41 @@ import { GeometryEditorControl, LayerLoader } from '../../../../layers';
  */
 export const GeometryEditor = ({ geometryStore, geometryEditorConfig }) => {
   // States
+  const [renderFlag, setRenderFlag] = useState(null);
   const [controlRendered, setControlRendered] = useState(false);
 
+  // Configurations
+  const uniqueLayer = geometryStore.uniqueLayer;
+
+  // Auxiliary functions
+  const renderFlagGenerator = (id) => {
+    uniqueLayer ? setRenderFlag(id) : null;
+  };
+
   // Handlers
-  const mapEventHandler = new MapEventHandler(geometryStore);
+  const mapEventHandler = new MapEventHandler(
+    geometryStore,
+    renderFlagGenerator
+  );
 
   // Hooks
   useDrawEvents(mapEventHandler, () => setControlRendered(true));
 
+  // Checking if the current store is already populated.
+  if (!geometryStore.isEmpty() && renderFlag === null) {
+    setRenderFlag(geometryStore.indexKey);
+  }
+
   return (
     <>
       {controlRendered ? (
         <>
           <GeometryEditorControl {...geometryEditorConfig} />
-          <LayerLoader layers={geometryStore.getLayers()} />
+          <LayerLoader
+            renderFlag={renderFlag}
+            layers={geometryStore.getLayers()}
+            enableMultipleLayers={!uniqueLayer}
+          />
         </>
       ) : null}
     </>
@@ -47,7 +70,10 @@ export const GeometryEditor = ({ geometryStore, geometryEditorConfig }) => {
 
 GeometryEditor.propTypes = {
   geometryStore: PropTypes.object.isRequired,
-  geometryEditorConfig: PropTypes.object,
+  geometryEditorConfig: PropTypes.shape({
+    toolbarConfig: PropTypes.object.isRequired,
+    uniqueLayer: PropTypes.bool.isRequired,
+  }),
 };
 
 GeometryEditor.defaultProps = {

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

@@ -40,10 +40,16 @@ const InteractiveMapComponent = ({ geometryStore, mapConfig }) => {
  * rendering system makes all the content modification.
  *
  */
-export const InteractiveMap = React.memo(
-  InteractiveMapComponent,
-  (props) => true // avoiding re-render
-);
+export const InteractiveMap = React.memo(InteractiveMapComponent, (props) => {
+  // We need to define if the map must be rerender (in react) or not.
+  // In this case, we are defining if rerender is required based on
+  // the mode selected by the user:
+  //  - uniqueLayer (true): Unique will be presented in the map. In this case,
+  //                        we need rerender to sync the map and the formik store;
+  //  - uniqueLayer (false): All drawn layers will be presented, and we do not
+  //                         need to rerender.
+  return !props.geometryStore.uniqueLayer;
+});
 
 InteractiveMap.propTypes = {
   geometryStore: PropTypes.object.isRequired,

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

@@ -0,0 +1,80 @@
+/*
+ * 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, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import _last from 'lodash/last';
+
+import { useLeafletContext } from '@react-leaflet/core';
+
+/**
+ * Component to load multiple layers on a Leaflet Container (`Layer` or `Map` instance).
+ * @constructor
+ *
+ * @param {Array} layers Array of `Leaflet.Layer` to be added in the `Container`.
+ * @param {Number} renderFlag Flag to mark the current render step.
+ * @param {Boolean} enableMultipleLayers Flag to enable/disable the multiple layer usage.
+ *
+ * @returns {JSX.Element}
+ */
+export const LayerLoader = ({ layers, renderFlag, enableMultipleLayers }) => {
+  const context = useLeafletContext();
+  const renderFlagRef = useRef(null);
+
+  // ToDo: Review if the "multi effect" approach is a good solution.
+  if (enableMultipleLayers) {
+    useEffect(() => {
+      const container = context.map;
+
+      layers.forEach((layer) => layer.addTo(container));
+
+      return () => {
+        layers.forEach((layer) => container.removeLayer(layer));
+      };
+    }, []);
+  } else {
+    useEffect(() => {
+      const container = context.map;
+
+      if (renderFlagRef.current === renderFlag) {
+        return;
+      }
+
+      // Removing all drawn layers in the map
+      const drawedLayers = container.pm.getGeomanDrawLayers();
+
+      drawedLayers.forEach((layer) => {
+        container.removeLayer(layer);
+      });
+
+      // Selecting one layer to draw in the map
+      const layerToDraw = _last(layers);
+
+      if (layerToDraw) {
+        layerToDraw.addTo(container);
+
+        renderFlagRef.current = renderFlag;
+
+        return () => {
+          container.removeLayer(layerToDraw);
+        };
+      }
+    }, [renderFlag]);
+  }
+
+  return null;
+};
+
+LayerLoader.propTypes = {
+  layers: PropTypes.array.isRequired,
+  renderFlag: PropTypes.number,
+  enableMultipleLayers: PropTypes.bool.isRequired,
+};
+
+LayerLoader.defaultProps = {};

src/lib/components/layers/base/LayerLoader.test.js renamed to src/lib/components/form/fields/GeometryField/InteractiveMap/LayerLoader.test.js

@@ -13,10 +13,21 @@ import { renderWithMapContainer } from '@tests/setup';
 
 describe('LayerLoader tests', () => {
   describe('Render tests', () => {
-    it('should render without crashing', () => {
+    it('should render without crashing with enableMultipleLayer disabled', () => {
       renderWithMapContainer(
         <>
-          <LayerLoader layers={[]} />
+          <LayerLoader
+            layers={[]}
+            renderFlag={1}
+            enableMultipleLayers={false}
+          />
+        </>
+      );
+    });
+    it('should render without crashing enableMultipleLayer enabled', () => {
+      renderWithMapContainer(
+        <>
+          <LayerLoader layers={[]} renderFlag={1} enableMultipleLayers={true} />
         </>
       );
     });

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

@@ -13,11 +13,35 @@ export class MapEventHandler {
   /**
    * @constructor
    * @param {Object} geometryStore Geometry Store object.
+   * @param {Function} renderFlagGenerator Function to generate a flag identifier
+   *                                       for the current render step.
    */
-  constructor(geometryStore) {
+  constructor(geometryStore, renderFlagGenerator) {
     this.geometryStore = geometryStore;
+    this.uniqueLayer = geometryStore.uniqueLayer;
+
+    this.renderFlagGenerator = renderFlagGenerator;
+  }
+
+  /**
+   * Apply the rules to enable the support of unique layer in the map.
+   * @private
+   */
+  _checkForUniqueLayer() {
+    if (this.uniqueLayer) {
+      this.geometryStore.getLayers().forEach((layer) => {
+        this._removeLayerFromIndex(layer);
+      });
+    }
   }
 
+  /**
+   * Make a copy of the layer identifier (`_store_identifier`) from the `oldLayer`
+   * to the `newLayer`.
+   * @param {Object} oldLayer `Leaflet.Layer` from where the identifier will be copied.
+   * @param {Object} newLayer `Leaflet.Layer` where the identifier will be set.
+   * @private
+   */
   _copyLayerIdentifier(oldLayer, newLayer) {
     newLayer._store_identifier = oldLayer._store_identifier;
   }
@@ -30,6 +54,8 @@ export class MapEventHandler {
    */
   _addLayerToIndex(layer) {
     this.geometryStore.addLayer(layer);
+
+    this.renderFlagGenerator(this.geometryStore.indexKey);
   }
 
   /**
@@ -41,6 +67,8 @@ export class MapEventHandler {
    */
   _updateLayerOnIndex(layer) {
     this.geometryStore.updateLayer(layer);
+
+    this.renderFlagGenerator(this.geometryStore.indexKey);
   }
 
   /**
@@ -51,13 +79,16 @@ export class MapEventHandler {
    */
   _removeLayerFromIndex(layer) {
     this.geometryStore.removeLayer(layer);
+
+    this.renderFlagGenerator(this.geometryStore.indexKey);
   }
 
   /**
    * onCreate event handler.
    * @param {Object} e event object;
    */
   onCreate(e) {
+    this._checkForUniqueLayer();
     this._addLayerToIndex(e.layer);
   }
 
@@ -72,6 +103,7 @@ export class MapEventHandler {
     // updating the index
     this._copyLayerIdentifier(oldLayer, newLayer);
 
+    this._checkForUniqueLayer();
     this._updateLayerOnIndex(newLayer);
   }
 
@@ -88,6 +120,7 @@ export class MapEventHandler {
    * @param {Object} e event object;
    */
   onCut(e) {
+    this._checkForUniqueLayer();
     this._updateLayerOnIndex(e.layer);
   }
 }