form: enabling support for multiple geometry selection mode (Closes #30)

Author: M3nin0

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

@@ -49,8 +49,8 @@ const Template = (args) => (
 /**
  * Component stories
  */
-export const Basic = Template.bind({});
-Basic.args = {
+export const MultipleLayers = Template.bind({});
+MultipleLayers.args = {
   fieldPath: 'geometry',
   label: 'Geometry',
   labelIcon: 'location arrow',
@@ -66,4 +66,89 @@ Basic.args = {
       });
     }, 100);
   },
+  interactiveMapConfig: {
+    mapConfig: {
+      mapContainer: {
+        center: [30, -50],
+        zoom: 1,
+        zoomControl: true,
+      },
+      geometryEditorConfig: {
+        toolbarConfig: {
+          positions: {
+            draw: 'topleft',
+            edit: 'topright',
+          },
+          drawText: false,
+          drawCircleMarker: false,
+          drawCircle: false,
+          cutPolygon: false,
+          controlOrder: [
+            'drawMarker',
+            'drawPolyline',
+            'drawRectangle',
+            'drawPolygon',
+            'editMode',
+            'dragMode',
+            'cutPolygon',
+            'rotateMode',
+            'removalMode',
+          ],
+        },
+        uniqueLayer: false,
+      },
+    },
+  },
+};
+
+export const UniqueGeometry = Template.bind({});
+UniqueGeometry.args = {
+  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);
+  },
+  interactiveMapConfig: {
+    mapConfig: {
+      mapContainer: {
+        center: [30, -50],
+        zoom: 1,
+        zoomControl: true,
+      },
+      geometryEditorConfig: {
+        toolbarConfig: {
+          positions: {
+            draw: 'topleft',
+            edit: 'topright',
+          },
+          drawText: false,
+          drawCircleMarker: false,
+          drawCircle: false,
+          cutPolygon: false,
+          controlOrder: [
+            'drawMarker',
+            'drawPolyline',
+            'drawRectangle',
+            'drawPolygon',
+            'editMode',
+            'dragMode',
+            'cutPolygon',
+            'rotateMode',
+            'removalMode',
+          ],
+        },
+        uniqueLayer: true,
+      },
+    },
+  },
 };

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,42 @@ import { GeometryEditorControl, LayerLoader } from '../../../../layers';
  */
 export const GeometryEditor = ({ geometryStore, geometryEditorConfig }) => {
   // States
+  const [renderFlag, setRenderFlag] = useState(null);
   const [controlRendered, setControlRendered] = useState(false);
 
+  // Configurations
+  const { uniqueLayer } = geometryEditorConfig;
+
+  // Auxiliary functions
+  const renderFlagGenerator = (id) => {
+    uniqueLayer ? setRenderFlag(id) : null;
+  };
+
   // Handlers
-  const mapEventHandler = new MapEventHandler(geometryStore);
+  const mapEventHandler = new MapEventHandler(
+    geometryStore,
+    renderFlagGenerator,
+    geometryEditorConfig
+  );
 
   // 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={!geometryEditorConfig.uniqueLayer}
+          />
         </>
       ) : null}
     </>
@@ -47,7 +71,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 = {
@@ -73,5 +100,6 @@ GeometryEditor.defaultProps = {
         'removalMode',
       ],
     },
+    uniqueLayer: false,
   },
 };

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

@@ -9,6 +9,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import _get from 'lodash/get';
+
 import { MapContainer } from 'react-leaflet';
 
 import { GeometryStore } from '../GeometryStore';
@@ -40,10 +42,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 !_get(props, 'mapConfig.geometryEditorConfig.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} />
         </>
       );
     });