form: enabling the uniqueLayer mode configuration in the GeometryField

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,9 @@ const Template = (args) => (
 /**
  * Component stories
  */
-export const MultipleLayers = Template.bind({});
-MultipleLayers.args = {
+export const UniqueLayer = Template.bind({});
+UniqueLayer.args = {
+  uniqueLayer: true,
   fieldPath: 'geometry',
   label: 'Geometry',
   labelIcon: 'location arrow',
@@ -66,43 +67,11 @@ MultipleLayers.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 = {
+export const MultipleLayers = Template.bind({});
+MultipleLayers.args = {
+  uniqueLayer: false,
   fieldPath: 'geometry',
   label: 'Geometry',
   labelIcon: 'location arrow',
@@ -118,37 +87,4 @@ UniqueGeometry.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: true,
-      },
-    },
-  },
 };

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

@@ -31,7 +31,7 @@ export const GeometryEditor = ({ geometryStore, geometryEditorConfig }) => {
   const [controlRendered, setControlRendered] = useState(false);
 
   // Configurations
-  const { uniqueLayer } = geometryEditorConfig;
+  const uniqueLayer = geometryStore.uniqueLayer;
 
   // Auxiliary functions
   const renderFlagGenerator = (id) => {
@@ -41,8 +41,7 @@ export const GeometryEditor = ({ geometryStore, geometryEditorConfig }) => {
   // Handlers
   const mapEventHandler = new MapEventHandler(
     geometryStore,
-    renderFlagGenerator,
-    geometryEditorConfig
+    renderFlagGenerator
   );
 
   // Hooks
@@ -61,7 +60,7 @@ export const GeometryEditor = ({ geometryStore, geometryEditorConfig }) => {
           <LayerLoader
             renderFlag={renderFlag}
             layers={geometryStore.getLayers()}
-            enableMultipleLayers={!geometryEditorConfig.uniqueLayer}
+            enableMultipleLayers={!uniqueLayer}
           />
         </>
       ) : null}
@@ -100,6 +99,5 @@ GeometryEditor.defaultProps = {
         'removalMode',
       ],
     },
-    uniqueLayer: false,
   },
 };

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

@@ -9,8 +9,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import _get from 'lodash/get';
-
 import { MapContainer } from 'react-leaflet';
 
 import { GeometryStore } from '../GeometryStore';
@@ -50,7 +48,7 @@ export const InteractiveMap = React.memo(InteractiveMapComponent, (props) => {
   //                        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');
+  return !props.geometryStore.uniqueLayer;
 });
 
 InteractiveMap.propTypes = {

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

@@ -14,12 +14,11 @@ export class MapEventHandler {
    * @constructor
    * @param {Object} geometryStore Geometry Store object.
    * @param {Function} renderFlagGenerator Function to generate a flag identifier
-   *                                       for the current render step
-   * @param {Object} config Configuration object for the `Map Event Handler`.
+   *                                       for the current render step.
    */
-  constructor(geometryStore, renderFlagGenerator, config = {}) {
+  constructor(geometryStore, renderFlagGenerator) {
     this.geometryStore = geometryStore;
-    this.config = config;
+    this.uniqueLayer = geometryStore.uniqueLayer;
 
     this.renderFlagGenerator = renderFlagGenerator;
   }
@@ -29,9 +28,7 @@ export class MapEventHandler {
    * @private
    */
   _checkForUniqueLayer() {
-    const uniqueLayerEnabled = this.config ? this.config.uniqueLayer : false;
-
-    if (uniqueLayerEnabled) {
+    if (this.uniqueLayer) {
       this.geometryStore.getLayers().forEach((layer) => {
         this._removeLayerFromIndex(layer);
       });