@opengeoweb/webmap-react 9.7.0 → 9.9.0

package/index.esm.js

@@ -8,9 +8,8 @@ import proj4 from 'proj4';
 import * as turf from '@turf/turf';
 import { polygonToLineString, booleanClockwise, rewind } from '@turf/turf';
 import { Delete, Edit, DrawRegion, DrawPolygon, Location, DrawFIRLand, ArrowUp, Home, Add, Minus } from '@opengeoweb/theme';
-import produce from 'immer';
+import { produce } from 'immer';
 import { debounce } from 'throttle-debounce';
-import { differenceInMinutes } from 'date-fns';
 import { useResizeDetector } from 'react-resize-detector';
 
 /* *
@@ -3052,12 +3051,15 @@ class MapDraw extends React.PureComponent {
       geojson,
       isInEditMode,
       isInDeleteMode,
-      drawMode
+      drawMode,
+      mapId,
+      selectedFeatureIndex
     } = this.props;
     const prevGeojson = prevProps && prevProps.geojson;
     const prevIsInEditMode = prevProps && prevProps.isInEditMode;
     const prevIsInDeleteMode = prevProps && prevProps.isInDeleteMode;
     const prevDrawMode = prevProps && prevProps.drawMode;
+    const prevSelectedFeatureIndex = prevProps && prevProps.selectedFeatureIndex;
     /* Handle geojson update */
     if (geojson !== prevGeojson) {
       this.handleGeoJSONUpdate(geojson);
@@ -3071,6 +3073,7 @@ class MapDraw extends React.PureComponent {
           return;
         }
       }
+      webmapUtils.getWMJSMapById(mapId).draw('MapDraw::componentDidUpdateIsInEditMode');
     }
     /* Handle toggle delete */
     if (isInDeleteMode !== prevIsInDeleteMode) {
@@ -3085,6 +3088,9 @@ class MapDraw extends React.PureComponent {
         this.myEditMode = EDITMODE.EMPTY;
       }
     }
+    if (selectedFeatureIndex !== prevSelectedFeatureIndex) {
+      webmapUtils.getWMJSMapById(mapId).draw('MapDraw::componentDidUpdateSelectedFeatureIndex');
+    }
     /* Handle new drawmode */
     if (drawMode !== prevDrawMode) {
       /* Handle drawmode */
@@ -3135,14 +3141,14 @@ class MapDraw extends React.PureComponent {
     const XYCoords = [];
     const from = getProj4(proj.lonlat);
     const to = getProj4(proj.crs);
-    for (let j = 0; j < featureCoords.length; j += 1) {
-      if (featureCoords[j].length < 2) {
+    for (const featureCoord of featureCoords) {
+      if (featureCoord.length < 2) {
         // eslint-disable-next-line no-continue
         continue;
       }
       let coordinates = {
-        x: featureCoords[j][0],
-        y: featureCoords[j][1]
+        x: featureCoord[0],
+        y: featureCoord[1]
       };
       coordinates = proj.proj4.transform(from, to, coordinates);
       const x = width * (coordinates.x - bbox.left) / (bbox.right - bbox.left);
@@ -3874,11 +3880,9 @@ class MapDraw extends React.PureComponent {
     const incY = this.mouseGeoCoord.y - this.snappedGeoCoords.y;
     this.snappedGeoCoords.x = this.mouseGeoCoord.x;
     this.snappedGeoCoords.y = this.mouseGeoCoord.y;
-    for (let j = 0; j < featureCoords.length; j += 1) {
-      /* eslint-disable-next-line no-param-reassign */
-      featureCoords[j][0] += incX;
-      /* eslint-disable-next-line no-param-reassign */
-      featureCoords[j][1] += incY;
+    for (const featureCoord of featureCoords) {
+      featureCoord[0] += incX;
+      featureCoord[1] += incY;
     }
     if (this.myEditMode !== EDITMODE.ADD_FEATURE) {
       this.somethingWasDragged = DRAGMODE.FEATURE;
@@ -4000,18 +4004,18 @@ class MapDraw extends React.PureComponent {
     if (!this.geojson || !this.geojson.features || !this.geojson.features.length) {
       return;
     }
-    for (let featureIndex = 0; featureIndex < this.geojson.features.length; featureIndex += 1) {
+    for (const geoJsonFeature of this.geojson.features) {
       if (!this.geojson.features) {
         this.geojson.features = [];
       }
-      const feature = this.geojson.features[featureIndex];
+      const feature = geoJsonFeature;
       this.validateFeature(feature);
       const featureType = feature.geometry.type;
       if (featureType === 'Polygon') {
         /* Loop through all polygons of the same feature */
         const polygonGeometry = feature.geometry;
-        for (let polygonIndex = 0; polygonIndex < polygonGeometry.coordinates.length; polygonIndex += 1) {
-          let featureCoords = polygonGeometry.coordinates[polygonIndex];
+        for (const polyCoordinates of polygonGeometry.coordinates) {
+          let featureCoords = polyCoordinates;
           /* Remove duplicates */
           if (!this.checkIfFeatureIsBox(feature)) {
             for (let coordIndex = featureCoords.length - 2; coordIndex >= 0; coordIndex -= 1) {
@@ -4129,8 +4133,7 @@ class MapDraw extends React.PureComponent {
       }
       if (featureType === 'MultiPolygon') {
         const multiPolygonGeometry = feature.geometry;
-        for (let multiPolygonIndex = 0; multiPolygonIndex < multiPolygonGeometry.coordinates.length; multiPolygonIndex += 1) {
-          const multiPoly = multiPolygonGeometry.coordinates[multiPolygonIndex];
+        for (const multiPoly of multiPolygonGeometry.coordinates) {
           for (let polygonIndex = 0; polygonIndex < multiPoly.length; polygonIndex += 1) {
             const featureCoords = multiPoly[polygonIndex];
             const XYCoords = this.getPixelCoordFromGeoCoord(featureCoords);
@@ -4255,12 +4258,12 @@ class MapDraw extends React.PureComponent {
       }
     }
     /* Draw labels */
-    for (let j = 0; j < this.textPositions.length; j += 1) {
+    for (const textPosition of this.textPositions) {
       const {
         x,
         y,
         text
-      } = this.textPositions[j];
+      } = textPosition;
       ctx.fillStyle = 'black';
       ctx.font = '12px Arial';
       ctx.fillText(text, x, y);
@@ -4639,14 +4642,14 @@ class MapDraw extends React.PureComponent {
     } = this.props;
     const webmapjs = webmapUtils.getWMJSMapById(mapId);
     const XYCoords = [];
-    for (let j = 0; j < featureCoords.length; j += 1) {
-      if (featureCoords[j].length < 2) {
+    for (const featureCoord of featureCoords) {
+      if (featureCoord.length < 2) {
         // eslint-disable-next-line no-continue
         continue;
       }
       const coord = webmapjs.getPixelCoordFromLatLong({
-        x: featureCoords[j][0],
-        y: featureCoords[j][1]
+        x: featureCoord[0],
+        y: featureCoord[1]
       });
       XYCoords.push(coord);
     }
@@ -4898,6 +4901,22 @@ const EditModeButton = ({
   }, "press ESC to exit draw mode")))));
 };
 
+/* *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2023 - Finnish Meteorological Institute (FMI)
+ * */
 const simplePolygonGeoJSON = {
   type: 'FeatureCollection',
   features: [{
@@ -5199,9 +5218,7 @@ const intersectionFeatureNL = {
     type: 'Polygon',
     coordinates: [[[5.0, 55.0], [4.331914, 55.332644], [3.368817, 55.764314], [2.761908, 54.379261], [3.15576, 52.913554], [2.000002, 51.500002], [3.370001, 51.369722], [3.370527, 51.36867], [3.362223, 51.320002], [3.36389, 51.313608], [3.373613, 51.309999], [3.952501, 51.214441], [4.397501, 51.452776], [5.078611, 51.391665], [5.848333, 51.139444], [5.651667, 50.824717], [6.011797, 50.757273], [5.934168, 51.036386], [6.222223, 51.361666], [5.94639, 51.811663], [6.405001, 51.830828], [7.053095, 52.237764], [7.031389, 52.268885], [7.063612, 52.346109], [7.065557, 52.385828], [7.133055, 52.888887], [7.14218, 52.898244], [7.191667, 53.3], [6.5, 53.666667], [6.500002, 55.000002], [5.0, 55.0]]]
   },
-  properties: Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
-    selectionType: 'fir'
-  })
+  properties: defaultGeoJSONStyleProperties
 };
 const intersectionFeatureBE = {
   type: 'Feature',
@@ -5209,9 +5226,7 @@ const intersectionFeatureBE = {
     type: 'Polygon',
     coordinates: [[[4.83163899984, 51.4375169997], [4.83971700004, 51.4211280003], [4.78471399965, 51.4327609998], [4.7811030004, 51.4302970004], [4.77944200025, 51.4175190002], [4.80665799987, 51.4100140003], [4.88973599992, 51.4160859998], [4.90944699968, 51.4091530002], [4.97808600027, 51.4238780003], [5.01693300026, 51.4755610004], [5.03137199972, 51.4852999999], [5.04139699977, 51.4866750004], [5.05027800013, 51.4747000003], [5.06139400013, 51.4719500003], [5.10058599984, 51.4399779999], [5.07663599975, 51.3988970003], [5.07864199963, 51.3916780001], [5.12780000027, 51.3497389997], [5.14000300004, 51.3208609998], [5.14945799989, 51.3171939998], [5.178908, 51.3166780003], [5.22806699979, 51.3122110002], [5.22523100031, 51.2688940001], [5.25029999985, 51.2633360001], [5.32971099986, 51.2621920004], [5.34724199982, 51.2694670004], [5.38752200024, 51.2677470002], [5.46779400039, 51.2827610001], [5.517222, 51.2958330004], [5.54250799964, 51.2769170004], [5.55780600005, 51.2639109996], [5.55666699968, 51.2558330003], [5.5572329997, 51.2313669998], [5.5591809996, 51.2244330002], [5.64942199993, 51.2016859998], [5.65555300027, 51.1964140004], [5.71055599976, 51.1822219997], [5.73553599969, 51.1916609998], [5.77696099985, 51.180258], [5.77942500016, 51.1694279997], [5.82806899958, 51.1669640003], [5.85500000045, 51.1510939996], [5.85601899978, 51.1473080004], [5.8472219997, 51.1352779996], [5.81695299958, 51.1225030004], [5.84056100009, 51.1058309996], [5.80641099997, 51.0958610003], [5.80280299996, 51.093339], [5.80222800042, 51.0616560003], [5.7752999997, 51.0597080004], [5.77140299985, 51.0475029997], [5.76332499965, 51.0394250004], [5.76303899995, 51.0352999999], [5.7747280003, 51.028594], [5.77696099985, 51.0258470001], [5.76418599978, 50.9899779999], [5.74802800019, 50.9819579997], [5.72276099962, 50.9652829996], [5.72390600026, 50.9577779998], [5.72831700043, 50.9561169996], [5.74418900032, 50.9577779998], [5.72974999996, 50.9141749999], [5.7150249999, 50.9105669999], [5.68406700039, 50.8831669999], [5.66555600021, 50.8769439998], [5.65331699968, 50.8783079997], [5.64776099977, 50.8677670001], [5.63750299976, 50.8502920001], [5.63945299976, 50.8430719999], [5.6472220001, 50.8324999998], [5.70001400015, 50.8069169999], [5.70052799957, 50.8033079999], [5.69806400015, 50.7999859996], [5.69694399977, 50.7897220002], [5.6933110004, 50.762514], [5.69308099969, 50.7591919997], [5.73719699984, 50.7594190003], [5.76195000009, 50.7763810001], [5.7747280003, 50.7816500002], [5.77862200001, 50.7794169998], [5.77999699956, 50.7758639996], [5.79747499977, 50.7694469996], [5.80417800041, 50.7647499997], [5.83888900033, 50.7616669996], [5.84720599986, 50.7669250002], [5.85471099971, 50.7591919997], [5.88307199997, 50.7664109999], [5.89250000037, 50.7544440002], [5.93251899955, 50.756956], [5.99888899983, 50.7538889998], [6.01163300026, 50.7566690003], [6.01611400006, 50.765264], [6.06666700028, 50.7166670001], [6.11666700018, 50.7333329997], [6.16666700008, 50.6666670002], [6.2500000002, 50.6499999996], [6.28333300042, 50.6166670003], [6.2500000002, 50.5999999997], [6.2500000002, 50.583333], [6.2000000003, 50.5499999998], [6.1986110001, 50.5194439999], [6.2500000002, 50.4833330002], [6.35, 50.4666669997], [6.37388899998, 50.4349999999], [6.38333300022, 50.4333330003], [6.40833300017, 50.3333329996], [6.3000000001, 50.316667], [6.29916700036, 50.303056], [6.23166700013, 50.2388889997], [6.1500000004, 50.1499999997], [6.13301100026, 50.1268060003], [6.11655799965, 50.0714689998], [6.12647199998, 50.0711830001], [6.11322499973, 50.0586359998], [6.13316099998, 50.0435579996], [6.14093299956, 49.9935890002], [6.16349999973, 49.9814360001], [6.15971699974, 49.9746389996], [6.17998600005, 49.9583389997], [6.18282499967, 49.9675310001], [6.18998899999, 49.9667970004], [6.21388899958, 49.955556], [6.22060299983, 49.9355170004], [6.22500000025, 49.9083329996], [6.23418300015, 49.897519], [6.30860799956, 49.8644609999], [6.32110000006, 49.8483030003], [6.32195800006, 49.8399940002], [6.34109700043, 49.8475000001], [6.36917200009, 49.8419420001], [6.4435970004, 49.8094560003], [6.50307200017, 49.8072219998], [6.51304200039, 49.8041860001], [6.5222080004, 49.8111170004], [6.52140600029, 49.7974810002], [6.50668100023, 49.7863670003], [6.51751099963, 49.7580609999], [6.49997799959, 49.7419610003], [6.5166500004, 49.7194439997], [6.49779999987, 49.7203029998], [6.50141100002, 49.7060940001], [6.46111099957, 49.6916670003], [6.42085300017, 49.6658169999], [6.42056400033, 49.6602579998], [6.43805600028, 49.6541670004], [6.42499999985, 49.638889], [6.42499999985, 49.6333330001], [6.37944399984, 49.5969440002], [6.3719220001, 49.5872059999], [6.3750139997, 49.5822220002], [6.36137800039, 49.5752889998], [6.37335300044, 49.549161], [6.36779699963, 49.5422280004], [6.36166700023, 49.4543310003], [6.2805329999, 49.4930689997], [6.21666699998, 49.5000000001], [6.15304999986, 49.5025220004], [6.15969699972, 49.4933560004], [6.12251400002, 49.4839029997], [6.11804199974, 49.469692], [6.09054199961, 49.4530749999], [6.06916899965, 49.4633329999], [6.04321399973, 49.4534189996], [5.9999999998, 49.4500000002], [5.95833300017, 49.4833330004], [5.8511029997, 49.5052720004], [5.80858100021, 49.5446939999], [5.75833299967, 49.5361109998], [5.48333300022, 49.5000000001], [5.4000000001, 49.6083330002], [5.31666699998, 49.6166669996], [5.3000000003, 49.6666670004], [5.17499999965, 49.6916670003], [5.06666699958, 49.7583329999], [5.0, 49.7833329998], [4.8500000003, 49.7833329998], [4.85833299967, 49.9166669999], [4.8000000004, 49.9500000001], [4.83888899963, 50.0472220004], [4.87222199985, 50.088889], [4.86749999973, 50.1152780002], [4.87022799962, 50.1267969999], [4.89647500042, 50.1402000001], [4.88140799988, 50.1486169998], [4.87752199964, 50.1560970003], [4.85856400043, 50.1539169996], [4.83766699993, 50.1585920002], [4.82454400001, 50.1676309998], [4.81676900029, 50.1657609999], [4.80753599989, 50.1536059996], [4.76428099987, 50.1377080003], [4.7499999996, 50.1180559997], [4.74027800003, 50.1083330001], [4.73317799996, 50.1093419998], [4.71540300045, 50.0977579998], [4.68333300002, 50.0], [4.48333300042, 49.9333330004], [4.18333300012, 49.9500000001], [4.12499999995, 50.0166669997], [4.14888899993, 50.0347220004], [4.1999999998, 50.0999999998], [4.11666699968, 50.1499999997], [4.16666699958, 50.2500000004], [4.17222200035, 50.2833329997], [4.01666699988, 50.3500000002], [3.9000000004, 50.316667], [3.79166700033, 50.3333329996], [3.7099999997, 50.3083329997], [3.6599999998, 50.3719440004], [3.61666699978, 50.4833330002], [3.40499999995, 50.4633329997], [3.27666700028, 50.5300000002], [3.22499999995, 50.6783330004], [3.11666699988, 50.7833329996], [2.8999999997, 50.7000000004], [2.81666699958, 50.7250000003], [2.71666699978, 50.8000000002], [2.63333299962, 50.8166669999], [2.5500000004, 51.0833329999], [1.9999999997, 51.1166670002], [1.9999999997, 51.4999999997], [3.0000000004, 51.4086179998], [3.10027800043, 51.3994440003], [3.36388899988, 51.3736109997], [3.38724200032, 51.3413280003], [3.38377200038, 51.3313580001], [3.36248900007, 51.3184579996], [3.37401700018, 51.3050059998], [3.36470599978, 51.3019560004], [3.36492800013, 51.2987639998], [3.3813890002, 51.2836109997], [3.42589999969, 51.2589609998], [3.43277200003, 51.2486970004], [3.45504400008, 51.2451440002], [3.49817799991, 51.2463390004], [3.53010600009, 51.2507780001], [3.52079199955, 51.2930780001], [3.52611400036, 51.2955750002], [3.54363099967, 51.2896110003], [3.56447200028, 51.2968220001], [3.58376100037, 51.2897499996], [3.58575599974, 51.3012609998], [3.59285000043, 51.3063919999], [3.6037139996, 51.3037579998], [3.64140600029, 51.2876689998], [3.65204699997, 51.2872530004], [3.65847799976, 51.2835080004], [3.69151399977, 51.2815669999], [3.71390800005, 51.2744940002], [3.73109999967, 51.2727249996], [3.75780600005, 51.2722750004], [3.76866900007, 51.2646470003], [3.77842500031, 51.2670030001], [3.79084200006, 51.2625669997], [3.79061899967, 51.2514719997], [3.79039700022, 51.2199890003], [3.80370000035, 51.2145779999], [3.84560600022, 51.2120829999], [3.86400799987, 51.2141639997], [3.87886100043, 51.2273390002], [3.88846099978, 51.2265610003], [3.88839700042, 51.217214], [3.88462800018, 51.2088920003], [3.91278600007, 51.209725], [3.92298299997, 51.220958], [3.9300779998, 51.2226220003], [3.93916899995, 51.2165219996], [3.94870299984, 51.215828], [3.97109700013, 51.2215139996], [4.10833300027, 51.2708330004], [4.25143300013, 51.3750060002], [4.33391100039, 51.3766670004], [4.34307800045, 51.3647500003], [4.3469750003, 51.3625169999], [4.41859199972, 51.3591360004], [4.43165799972, 51.3644639997], [4.42805599998, 51.3744440004], [4.3966499996, 51.4169469999], [4.40942499966, 51.4375169997], [4.40805000011, 51.440839], [4.39389999959, 51.4502919998], [4.46528900019, 51.4716639997], [4.4986109999, 51.4788890001], [4.51250000007, 51.4805559997], [4.54556100034, 51.4850140002], [4.54498900004, 51.4627830002], [4.53805599958, 51.4524690003], [4.53530599957, 51.4397500002], [4.62361099965, 51.4272219998], [4.67166899992, 51.4274890004], [4.67304400038, 51.4308109998], [4.66863300021, 51.440839], [4.68415800029, 51.4494329997], [4.69859699975, 51.4644440004], [4.76918600033, 51.502775], [4.80833299977, 51.4999999997], [4.8408059999, 51.4830670003], [4.84470299974, 51.4614079998], [4.83696700003, 51.4569389996], [4.83163899984, 51.4375169997]]]
   },
-  properties: Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
-    selectionType: 'fir-be'
-  })
+  properties: defaultGeoJSONStyleProperties
 };
 
 const drawPolyStoryStyles = {
@@ -5568,11 +5583,38 @@ const getGeoJson = (geojson, shouldAllowMultipleShapes) => {
     draftFeature.geometry.coordinates = [draftFeature.geometry.coordinates[1]];
   }) : geojson;
 };
+const hasFeatures = geometry => {
+  if (geometry.type === 'Point') {
+    return geometry.coordinates.length > 0;
+  }
+  if (geometry.type === 'LineString' || geometry.type === 'Polygon') {
+    return geometry.coordinates[0].length > 0;
+  }
+  return false;
+};
+const getLastEmptyFeatureIndex = geoJSONFeatureCollection => {
+  const totalFeatures = geoJSONFeatureCollection.features.length;
+  if (totalFeatures > 0) {
+    const lastFeatureIndex = totalFeatures - 1;
+    const lastFeature = geoJSONFeatureCollection.features[lastFeatureIndex];
+    if (!hasFeatures(lastFeature.geometry)) {
+      return lastFeatureIndex;
+    }
+  }
+  return undefined;
+};
 const getFeatureCollection = (geoJSONFeature, shouldAllowMultipleShapes, geoJSONFeatureCollection = emptyGeoJSON) => {
   if (geoJSONFeature.type === 'FeatureCollection') {
     return geoJSONFeature;
   }
   if (shouldAllowMultipleShapes) {
+    const lastFeatureIndex = getLastEmptyFeatureIndex(geoJSONFeatureCollection);
+    if (lastFeatureIndex !== undefined) {
+      // replace last feature if it's an empty shape
+      return Object.assign(Object.assign({}, geoJSONFeatureCollection), {
+        features: geoJSONFeatureCollection.features.map((feature, index) => index === lastFeatureIndex ? geoJSONFeature : feature)
+      });
+    }
     return Object.assign(Object.assign({}, geoJSONFeatureCollection), {
       features: geoJSONFeatureCollection.features.concat(geoJSONFeature)
     });
@@ -5581,15 +5623,14 @@ const getFeatureCollection = (geoJSONFeature, shouldAllowMultipleShapes, geoJSON
     features: [geoJSONFeature]
   });
 };
-// compares 2 geoJSONs and returns true if both have properties.selectionType with the same value
-const isGeoJSONFeatureCreatedByTool = (existingJSON, newGeoJSON) => {
-  var _a, _b, _c;
+// check if geoJSON has same selectionType in properties as passed selectionType
+const isGeoJSONFeatureCreatedByTool = (existingJSON, selectionType, featureLayerIndex = 0) => {
+  var _a;
   if (!existingJSON.features.length) {
     return false;
   }
-  const lastUsedTool = (_a = existingJSON.features[0].properties) === null || _a === void 0 ? void 0 : _a.selectionType;
-  const newTool = newGeoJSON.type === 'Feature' ? (_b = newGeoJSON.properties) === null || _b === void 0 ? void 0 : _b.selectionType : (_c = newGeoJSON.features[0].properties) === null || _c === void 0 ? void 0 : _c.selectionType;
-  return lastUsedTool !== undefined && newTool !== undefined ? lastUsedTool === newTool : false;
+  const lastUsedTool = (_a = existingJSON.features[featureLayerIndex].properties) === null || _a === void 0 ? void 0 : _a.selectionType;
+  return lastUsedTool !== undefined && selectionType !== undefined ? lastUsedTool === selectionType : false;
 };
 const rewindGeometry = geoJSON => {
   return produce(geoJSON, geoJSONDraft => {
@@ -5605,45 +5646,53 @@ const rewindGeometry = geoJSON => {
     }
   });
 };
+const addGeoJSONPropertiesToFeature = (geoJSONFeature, newProperties) => Object.assign(Object.assign({}, geoJSONFeature), {
+  properties: Object.assign(Object.assign({}, geoJSONFeature.properties), newProperties)
+});
+const addGeoJSONProperties = (geoJSON, newProperties) => {
+  if (geoJSON.type === 'Feature') {
+    return addGeoJSONPropertiesToFeature(geoJSON, newProperties);
+  }
+  return Object.assign(Object.assign({}, geoJSON), {
+    features: geoJSON.features.map(feature => addGeoJSONPropertiesToFeature(feature, newProperties))
+  });
+};
+const addSelectionTypeToGeoJSON = (geoJSON, selectionType) => {
+  return addGeoJSONProperties(geoJSON, {
+    selectionType
+  });
+};
 
 const defaultIntersectionStyleProperties = Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
   'fill-opacity': 0.5
 });
 const emptyLineString = Object.assign(Object.assign({}, lineString.features[0]), {
-  properties: Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
-    selectionType: 'linestring'
-  })
+  properties: defaultGeoJSONStyleProperties
 });
 const emptyPoint = Object.assign(Object.assign({}, featurePoint), {
-  properties: Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
-    selectionType: 'point'
-  })
+  properties: defaultGeoJSONStyleProperties
 });
 const emptyPolygon = Object.assign(Object.assign({}, featurePolygon), {
-  properties: Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
-    selectionType: 'poly'
-  })
+  properties: defaultGeoJSONStyleProperties
 });
 const emptyBox = Object.assign(Object.assign({}, featurePolygon), {
-  properties: Object.assign(Object.assign({}, defaultGeoJSONStyleProperties), {
-    selectionType: 'box'
-  })
+  properties: defaultGeoJSONStyleProperties
 });
 // TODO: improve this: without a feature, the custom shape does not work on first click
 const emptyIntersectionShape = Object.assign(Object.assign({}, emptyGeoJSON), {
   features: [featurePolygon]
 });
-const getIcon = drawModeId => {
-  switch (drawModeId) {
-    case 'drawtools-point':
+const getIcon = selectionType => {
+  switch (selectionType) {
+    case 'point':
       return /*#__PURE__*/React__default.createElement(Location, null);
-    case 'drawtools-polygon':
+    case 'poly':
       return /*#__PURE__*/React__default.createElement(DrawPolygon, null);
-    case 'drawtools-box':
+    case 'box':
       return /*#__PURE__*/React__default.createElement(DrawRegion, null);
-    case 'drawtools-linestring':
+    case 'linestring':
       return /*#__PURE__*/React__default.createElement(Edit, null);
-    case 'drawtools-delete':
+    case 'delete':
       return /*#__PURE__*/React__default.createElement(Delete, null);
     default:
       return null;
@@ -5654,35 +5703,40 @@ const defaultPoint = {
   value: DRAWMODE.POINT,
   title: 'Point',
   shape: emptyPoint,
-  isSelectable: true
+  isSelectable: true,
+  selectionType: 'point'
 };
 const defaultPolygon = {
   drawModeId: 'drawtools-polygon',
   value: DRAWMODE.POLYGON,
   title: 'Polygon',
   shape: emptyPolygon,
-  isSelectable: true
+  isSelectable: true,
+  selectionType: 'poly'
 };
 const defaultBox = {
   drawModeId: 'drawtools-box',
   value: DRAWMODE.BOX,
   title: 'Box',
   shape: emptyBox,
-  isSelectable: true
+  isSelectable: true,
+  selectionType: 'box'
 };
 const defaultLineString = {
   drawModeId: 'drawtools-linestring',
   value: DRAWMODE.LINESTRING,
   title: 'LineString',
   shape: emptyLineString,
-  isSelectable: true
+  isSelectable: true,
+  selectionType: 'linestring'
 };
 const defaultDelete = {
   drawModeId: 'drawtools-delete',
   value: 'DELETE',
   title: 'Delete',
   shape: emptyGeoJSON,
-  isSelectable: false
+  isSelectable: false,
+  selectionType: 'delete'
 };
 const defaultModes = [defaultPoint, defaultPolygon, defaultBox, defaultLineString, defaultDelete];
 const currentlySupportedDrawModes = [defaultPolygon, defaultDelete];
@@ -5710,11 +5764,8 @@ const useMapDrawTool = ({
   const changeProperties = styleProperties => {
     // update all modes with new properties
     const newModes = drawModes.map(mode => {
-      const shape = mode.shape.type === 'Feature' ? Object.assign(Object.assign({}, mode.shape), {
-        properties: Object.assign(Object.assign({}, mode.shape.properties), styleProperties)
-      }) : addFeatureProperties(mode.shape, styleProperties);
       return Object.assign(Object.assign({}, mode), {
-        shape
+        shape: addGeoJSONProperties(mode.shape, styleProperties)
       });
     });
     setDrawModes(newModes);
@@ -5737,10 +5788,10 @@ const useMapDrawTool = ({
     }
     setActiveTool(newMode.isSelectable ? newMode.drawModeId : '');
     // updates shape
-    const isNewSelectedTool = !isGeoJSONFeatureCreatedByTool(geoJSON, newMode.shape);
-    const shouldUpdateShape = !geoJSON.features.length || _shouldAllowMultipleShapes || isNewSelectedTool;
+    const isNewSelectedTool = !isGeoJSONFeatureCreatedByTool(geoJSON, newMode.selectionType, featureLayerIndex);
+    const shouldUpdateShape = !geoJSON.features.length || isNewSelectedTool;
     if (shouldUpdateShape) {
-      const updatedGeoJSON = changeGeoJSON(newMode.shape);
+      const updatedGeoJSON = changeGeoJSON(addSelectionTypeToGeoJSON(newMode.shape, newMode.selectionType));
       setFeatureLayerIndex(updatedGeoJSON.features.length - 1);
     }
     // handle modes and update feature layer index
@@ -5775,10 +5826,21 @@ const useMapDrawTool = ({
       setActiveTool(newActiveTool.drawModeId);
     }
   };
+  const removeLastEmptyShape = () => {
+    const lastFeatureIndex = getLastEmptyFeatureIndex(geoJSON);
+    if (lastFeatureIndex !== undefined) {
+      const newGeoJSON = Object.assign(Object.assign({}, geoJSON), {
+        features: geoJSON.features.filter((_feature, index) => index !== lastFeatureIndex)
+      });
+      setGeoJSON(newGeoJSON);
+      setFeatureLayerIndex(newGeoJSON.features.length > 0 ? newGeoJSON.features.length - 1 : 0);
+    }
+  };
   const deactivateTool = () => {
     setEditMode(false);
     setActiveTool('');
     setDrawMode('');
+    removeLastEmptyShape();
   };
   const reset = (shouldClearState = false) => {
     deactivateTool();
@@ -5835,15 +5897,15 @@ const useMapDrawTool = ({
 const opacityOptions = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0];
 const fillOptions = [defaultGeoJSONStyleProperties.fill, '#6e1e91', '#FF00FF', '#33ccFF', '#8F8'];
 const strokeWidthOptions = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
-const getToolIcon = id => {
-  const defaultIcon = getIcon(id);
+const getToolIcon = selectionType => {
+  const defaultIcon = getIcon(selectionType);
   if (defaultIcon) {
     return defaultIcon;
   }
-  if (id === 'tool-fir') {
+  if (selectionType === shapeButtonNL$2.selectionType) {
     return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
   }
-  if (id === 'tool-custom-line') {
+  if (selectionType === customLineButton.selectionType) {
     return /*#__PURE__*/React__default.createElement(ArrowUp, null);
   }
   return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
@@ -5854,7 +5916,8 @@ const shapeButtonNL$2 = {
   value: DRAWMODE.POLYGON,
   title: 'Custom FIR NL polygon',
   shape: intersectionFeatureNL,
-  isSelectable: false
+  isSelectable: false,
+  selectionType: 'custom-fir'
 };
 const customLineButton = {
   drawModeId: 'tool-custom-line',
@@ -5868,7 +5931,8 @@ const customLineButton = {
     },
     properties: defaultGeoJSONStyleProperties
   },
-  isSelectable: false
+  isSelectable: false,
+  selectionType: 'custom-line'
 };
 const basicExampleDrawOptions = {
   defaultDrawModes: [...defaultModes, shapeButtonNL$2, customLineButton],
@@ -5902,15 +5966,15 @@ const basicExampleMultipleShapeDrawOptions = {
   }))
 };
 
-const getIntersectionToolIcon = id => {
-  const defaultIcon = getIcon(id);
+const getIntersectionToolIcon = selectionType => {
+  const defaultIcon = getIcon(selectionType);
   if (defaultIcon) {
     return defaultIcon;
   }
-  if (id === 'fir-nl') {
+  if (selectionType === shapeButtonNL$1.selectionType) {
     return /*#__PURE__*/React__default.createElement(DrawFIRLand, null);
   }
-  if (id === 'fir-be') {
+  if (selectionType === shapeButtonBE$1.selectionType) {
     return /*#__PURE__*/React__default.createElement(DrawFIRLand, {
       sx: {
         transform: `scaleY(-1)`
@@ -5925,14 +5989,16 @@ const shapeButtonNL$1 = {
   value: DRAWMODE.POLYGON,
   title: 'Custom FIR NL polygon',
   shape: intersectionFeatureNL,
-  isSelectable: false
+  isSelectable: false,
+  selectionType: 'fir-NL'
 };
 const shapeButtonBE$1 = {
   drawModeId: 'fir-be',
   value: DRAWMODE.POLYGON,
   title: 'Custom FIR BE polygon',
   shape: intersectionFeatureBE,
-  isSelectable: false
+  isSelectable: false,
+  selectionType: 'fir-BE'
 };
 const geoJSONIntersectionBoundsStyle$1 = {
   stroke: '#000000',
@@ -6023,7 +6089,7 @@ const exampleIntersectionWithShapeOptions = {
   defaultGeoJSONIntersectionProperties: featurePropsIntersectionEnd
 };
 
-const firButtonDrawId = 'fir-button';
+const firSelectionType = 'fir';
 // styles and shapes
 const featurePropertiesStart = defaultGeoJSONStyleProperties;
 const featurePropertiesEnd = {
@@ -6043,33 +6109,31 @@ const geoJSONIntersectionBoundsStyle = {
 const intersectionShapeNL = {
   type: 'FeatureCollection',
   features: [Object.assign(Object.assign({}, intersectionFeatureNL), {
-    properties: Object.assign(Object.assign({}, geoJSONIntersectionBoundsStyle), {
-      selectionType: 'fir'
-    })
+    properties: Object.assign({}, geoJSONIntersectionBoundsStyle)
   })]
 };
 const intersectionShapeBE = {
   type: 'FeatureCollection',
   features: [Object.assign(Object.assign({}, intersectionFeatureBE), {
-    properties: Object.assign(Object.assign({}, geoJSONIntersectionBoundsStyle), {
-      selectionType: 'fir'
-    })
+    properties: Object.assign({}, geoJSONIntersectionBoundsStyle)
   })]
 };
 // custom buttons
 const shapeButtonNL = {
-  drawModeId: firButtonDrawId,
+  drawModeId: 'fir-tool-NL',
   value: DRAWMODE.POLYGON,
   title: 'Custom FIR NL polygon',
   shape: intersectionShapeNL,
-  isSelectable: false
+  isSelectable: false,
+  selectionType: firSelectionType
 };
 const shapeButtonBE = {
-  drawModeId: firButtonDrawId,
+  drawModeId: 'fir-tool-BE',
   value: DRAWMODE.POLYGON,
   title: 'Custom FIR BE polygon',
   shape: intersectionShapeBE,
-  isSelectable: false
+  isSelectable: false,
+  selectionType: firSelectionType
 };
 const exampleIntersectionsMultiDrawTool = [{
   title: 'NL',
@@ -6080,13 +6144,13 @@ const exampleIntersectionsMultiDrawTool = [{
 }];
 const getDoubleControlToolIcon = drawMode => {
   const {
-    drawModeId
+    selectionType
   } = drawMode;
-  const defaultIcon = getIcon(drawModeId);
+  const defaultIcon = getIcon(selectionType);
   if (defaultIcon) {
     return defaultIcon;
   }
-  if (drawModeId === firButtonDrawId) {
+  if (selectionType === firSelectionType) {
     return /*#__PURE__*/React__default.createElement(DrawFIRLand, {
       sx: Object.assign({}, drawMode.title === shapeButtonBE.title && {
         transform: `scaleY(-1)`
@@ -6119,7 +6183,7 @@ const getFirTitle = isNL => isNL ? shapeButtonNL.title : shapeButtonBE.title;
 const updateEditModeButtonsWithFir = (drawModes, newFirGeoJSON) => {
   const isNL = newFirGeoJSON === intersectionShapeNL;
   return drawModes.map(mode => {
-    if (mode.drawModeId === firButtonDrawId) {
+    if (mode.selectionType === firSelectionType) {
       return Object.assign(Object.assign({}, mode), {
         shape: getUpdatedFirShape(isNL),
         title: getFirTitle(isNL)
@@ -7609,7 +7673,7 @@ function getIsInsideAcceptanceTime(acceptanceTimeInMinutes, mapDimensions, layer
   if (acceptanceTimeInMinutes === undefined || !mapCurrentTime || !layerCurrentTime) {
     return true;
   }
-  const minutesBetween = differenceInMinutes(new Date(mapCurrentTime), new Date(layerCurrentTime));
+  const minutesBetween = dateUtils.differenceInMinutes(new Date(mapCurrentTime), new Date(layerCurrentTime));
   if (Math.abs(minutesBetween) > acceptanceTimeInMinutes) {
     return false;
   }
@@ -7681,8 +7745,8 @@ const setWMLayerPropsBasedOnChildProps = (child, wmLayer, mapViewProps) => {
   }
   /* Set the dimensions of the ADAGUC WMJSLayer */
   if (child.dimensions !== undefined) {
-    for (let d = 0; d < child.dimensions.length; d += 1) {
-      const dim = child.dimensions[d];
+    for (const childDimension of child.dimensions) {
+      const dim = childDimension;
       const wmjsDim = wmLayer.getDimension(dim.name);
       if (wmjsDim) {
         if (wmjsDim.currentValue !== dim.currentValue) {
@@ -7776,7 +7840,7 @@ const orderLayers = (wmjsMap, _reactMapViewLayers) => {
 const getDisplayText = currentAdagucTime => {
   const timeFormat = 'eee dd MMM yyyy HH:mm [UTC]';
   const adagucTime = dateUtils.utc(currentAdagucTime);
-  const adagucTimeFormatted = dateUtils.dateToString(adagucTime, timeFormat);
+  const adagucTimeFormatted = dateUtils.dateToString(adagucTime, timeFormat) || '';
   return adagucTimeFormatted;
 };
 const ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION = 'ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION';
@@ -7978,8 +8042,7 @@ class ReactMapView extends React.Component {
     /* Check map dimensions */
     if (!prevProps || prevProps.dimensions !== props.dimensions) {
       if (props.dimensions) {
-        for (let d = 0; d < props.dimensions.length; d += 1) {
-          const propDimension = props.dimensions[d];
+        for (const propDimension of props.dimensions) {
           const mapDim = wmjsMap.getDimension(propDimension.name);
           if (mapDim && mapDim.currentValue !== propDimension.currentValue || !mapDim) {
             wmjsMap.setDimension(propDimension.name, propDimension.currentValue, false, false);
@@ -9413,4 +9476,4 @@ var publicLayers = /*#__PURE__*/Object.freeze({
   msgNaturalEUMETSAT: msgNaturalEUMETSAT
 });
 
-export { CanvasComponent, DRAWMODE, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, IntersectionSelect, Legend, LegendDialog, LegendLayout, MapControlButton, MapControls, MapDrawContainer, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, ZoomControls, addFeatureProperties, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, checkHoverFeatures, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, distance, drawPolyStoryStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firButtonDrawId, formatTime, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getTimeDimension, getToolIcon, intersectGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, lineString, moveFeature, opacityOptions, publicLayers, publicServices, registerDrawFunction, rewindGeometry, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, updateEditModeButtonsWithFir, useGeoJSON, useMapDrawTool };
+export { CanvasComponent, DRAWMODE, EDITMODE, EditModeButton as EditModeButtonField, FeatureLayers, GeoJSONTextField, IntersectionSelect, Legend, LegendDialog, LegendLayout, MapControlButton, MapControls, MapDrawContainer, MapTime, MapView, MapViewLayer, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, ORIGIN_REACTMAPVIEW_ONMAPCHANGEDIMENSION, ORIGIN_REACTMAPVIEW_ONUPDATELAYERINFO, ReactMapView, ReactMapViewLayer, SelectField, StoryLayoutGrid, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, checkHoverFeatures, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, distance, drawPolyStoryStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firSelectionType, formatTime, getDoubleControlToolIcon, getDrawFunctionFromStore, getFeatureCollection, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getLastEmptyFeatureIndex, getTimeDimension, getToolIcon, intersectGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, lineString, moveFeature, opacityOptions, publicLayers, publicServices, registerDrawFunction, rewindGeometry, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, updateEditModeButtonsWithFir, useGeoJSON, useMapDrawTool };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "9.7.0",
+  "version": "9.9.0",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {
@@ -16,10 +16,9 @@
     "lodash": "^4.17.21",
     "proj4": "^2.9.2",
     "@turf/turf": "^6.5.0",
-    "immer": "^9.0.21",
+    "immer": "^10.0.3",
     "react-resize-detector": "^9.1.0",
-    "throttle-debounce": "^5.0.0",
-    "date-fns": "^3.3.0"
+    "throttle-debounce": "^5.0.0"
   },
   "peerDependencies": {
     "react": "18"

package/src/lib/components/MapDraw/MapDraw.d.ts

@@ -1,18 +1,18 @@
 import * as React from 'react';
 import { GeoJsonProperties, GeometryObject, Position } from 'geojson';
 import { GeoJsonFeatureType, GeoJsonFeature, GeoFeatureStyle, Coordinate } from './geojsonShapes';
-type DrawStyle = {
+interface DrawStyle {
     x: number;
     y: number;
     nr: number;
-};
-type InputEvent = {
+}
+interface InputEvent {
     leftButton: boolean;
     mouseDown: boolean;
     mouseX: number;
     mouseY: number;
     rightButton: boolean;
-};
+}
 export interface FeatureEvent {
     coordinateIndexInFeature: number;
     featureIndex: number;

package/src/lib/components/MapDraw/MapDrawContainer.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GeometryObject } from 'geojson';
 import { DrawModeExitCallback, FeatureEvent } from './MapDraw';
-export type FeatureLayer = {
+export interface FeatureLayer {
     id: string;
     type: string;
     features: [];
@@ -14,7 +14,7 @@ export type FeatureLayer = {
     updateGeojson?: (feature: GeometryObject, reason: string) => void;
     exitDrawModeCallback?: (reason: DrawModeExitCallback) => void;
     selectedFeatureIndex?: string;
-};
+}
 interface MapDrawContainerProps {
     featureLayers: FeatureLayer[];
     mapId: string;

package/src/lib/components/MapDraw/geojsonShapes.d.ts

@@ -7,14 +7,14 @@ export declare const featureBox: GeoJSON.Feature<GeoJSON.Polygon>;
 export declare const lineString: GeoJSON.FeatureCollection;
 export type GeoJsonFeatureType = GeoJSON.Polygon | GeoJSON.MultiPoint | GeoJSON.Point | GeoJSON.LineString | GeoJSON.MultiPolygon;
 export type GeoJsonFeature = GeoJSON.Feature<GeoJsonFeatureType>;
-export type GeoFeatureStyle = {
+export interface GeoFeatureStyle {
     stroke?: string;
     fill?: string;
     'stroke-width'?: number;
     'stroke-opacity'?: number;
     'fill-opacity'?: number;
-};
-export type Coordinate = {
+}
+export interface Coordinate {
     x: number;
     y: number;
-};
+}

package/src/lib/components/MapDraw/mapDrawUtils.d.ts

@@ -18,10 +18,10 @@ export interface MapDrawDrawFunctionArgs {
     mouseY: number;
     isHovered: boolean;
 }
-type DrawFunction = {
+interface DrawFunction {
     id: string;
     drawMethod: (args: MapDrawDrawFunctionArgs) => void;
-};
+}
 export declare const getDrawFunctionFromStore: (id: string) => DrawFunction['drawMethod'] | undefined;
 export declare const registerDrawFunction: (drawFunction?: DrawFunction['drawMethod']) => string;
 export declare const NEW_LINESTRING_CREATED = "new point in LineString created";

package/src/lib/components/MapDraw/storyComponents/IntersectionSelect.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-type IntersectionElement = {
+interface IntersectionElement {
     geojson: GeoJSON.FeatureCollection;
     title: string;
-};
+}
 interface IntersectionSelectProps {
     intersections: IntersectionElement[];
     onChangeIntersection: (geojson: GeoJSON.FeatureCollection, title: string) => void;

package/src/lib/components/MapDrawTool/storyExamplesMapDrawTool.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import { SelectionType } from './types';
 import { MapDrawToolOptions } from './useMapDrawTool';
 export declare const opacityOptions: number[];
 export declare const fillOptions: any[];
 export declare const strokeWidthOptions: number[];
-export declare const getToolIcon: (id: string) => React.ReactElement;
+export declare const getToolIcon: (selectionType: SelectionType) => React.ReactElement;
 export declare const basicExampleDrawOptions: MapDrawToolOptions;
 export declare const basicExampleMultipleShapeDrawOptions: MapDrawToolOptions;

package/src/lib/components/MapDrawTool/storyExamplesMapDrawToolIntersection.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { SelectionType } from './types';
 import { MapDrawToolOptions } from './useMapDrawTool';
-export declare const getIntersectionToolIcon: (id: string) => React.ReactElement;
+export declare const getIntersectionToolIcon: (selectionType: SelectionType) => React.ReactElement;
 export declare const exampleIntersections: {
     title: string;
     geojson: import("geojson").FeatureCollection<import("geojson").Geometry, import("geojson").GeoJsonProperties>;

package/src/lib/components/MapDrawTool/storyExamplesMapDrawToolMultipleDrawTools.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DrawMode } from './types';
 import { MapDrawToolOptions } from './useMapDrawTool';
-export declare const firButtonDrawId = "fir-button";
+export declare const firSelectionType = "fir";
 export declare const exampleIntersectionsMultiDrawTool: {
     title: string;
     geojson: import("geojson").FeatureCollection<import("geojson").Geometry, import("geojson").GeoJsonProperties>;

package/src/lib/components/MapDrawTool/types.d.ts

@@ -1,9 +1,13 @@
 import { DRAWMODE } from '../MapDraw/MapDraw';
 export type DrawModeValue = DRAWMODE | 'DELETE' | '';
-export type DrawMode = {
+type DefaultSelectionTypes = 'poly' | 'point' | 'box' | 'linestring';
+export type SelectionType = DefaultSelectionTypes | string;
+export interface DrawMode {
     drawModeId: string;
     value: DrawModeValue;
     shape: GeoJSON.Feature | GeoJSON.FeatureCollection;
     title: string;
     isSelectable: boolean;
-};
+    selectionType: SelectionType;
+}
+export {};

package/src/lib/components/MapDrawTool/useMapDrawTool.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { DrawMode, DrawModeValue } from './types';
+import { DrawMode, DrawModeValue, SelectionType } from './types';
 import { MapViewLayerProps } from '../MapView';
-import { DRAWMODE } from '../MapDraw/MapDraw';
 export declare const defaultIntersectionStyleProperties: GeoJSON.GeoJsonProperties;
 export declare const emptyLineString: GeoJSON.Feature;
 export declare const emptyPoint: GeoJSON.Feature;
@@ -42,67 +41,13 @@ export interface MapDrawToolOptions {
     geoJSONIntersectionLayerId?: string;
     geoJSONIntersectionBoundsLayerId?: string;
 }
-export declare const getIcon: (drawModeId: string) => React.ReactElement | null;
-export declare const defaultPoint: {
-    drawModeId: string;
-    value: DRAWMODE;
-    title: string;
-    shape: import("geojson").Feature<import("geojson").Geometry, import("geojson").GeoJsonProperties>;
-    isSelectable: boolean;
-};
-export declare const defaultPolygon: {
-    drawModeId: string;
-    value: DRAWMODE;
-    title: string;
-    shape: import("geojson").Feature<import("geojson").Geometry, import("geojson").GeoJsonProperties>;
-    isSelectable: boolean;
-};
-export declare const defaultBox: {
-    drawModeId: string;
-    value: DRAWMODE;
-    title: string;
-    shape: import("geojson").Feature<import("geojson").Geometry, import("geojson").GeoJsonProperties>;
-    isSelectable: boolean;
-};
-export declare const defaultLineString: {
-    drawModeId: string;
-    value: DRAWMODE;
-    title: string;
-    shape: import("geojson").Feature<import("geojson").Geometry, import("geojson").GeoJsonProperties>;
-    isSelectable: boolean;
-};
-export declare const defaultDelete: {
-    drawModeId: string;
-    value: "DELETE";
-    title: string;
-    shape: import("geojson").FeatureCollection<import("geojson").Geometry, import("geojson").GeoJsonProperties>;
-    isSelectable: boolean;
-};
-export declare const defaultModes: ({
-    drawModeId: string;
-    value: DRAWMODE;
-    title: string;
-    shape: import("geojson").Feature<import("geojson").Geometry, import("geojson").GeoJsonProperties>;
-    isSelectable: boolean;
-} | {
-    drawModeId: string;
-    value: "DELETE";
-    title: string;
-    shape: import("geojson").FeatureCollection<import("geojson").Geometry, import("geojson").GeoJsonProperties>;
-    isSelectable: boolean;
-})[];
-export declare const currentlySupportedDrawModes: ({
-    drawModeId: string;
-    value: DRAWMODE;
-    title: string;
-    shape: import("geojson").Feature<import("geojson").Geometry, import("geojson").GeoJsonProperties>;
-    isSelectable: boolean;
-} | {
-    drawModeId: string;
-    value: "DELETE";
-    title: string;
-    shape: import("geojson").FeatureCollection<import("geojson").Geometry, import("geojson").GeoJsonProperties>;
-    isSelectable: boolean;
-})[];
+export declare const getIcon: (selectionType: SelectionType) => React.ReactElement | null;
+export declare const defaultPoint: DrawMode;
+export declare const defaultPolygon: DrawMode;
+export declare const defaultBox: DrawMode;
+export declare const defaultLineString: DrawMode;
+export declare const defaultDelete: DrawMode;
+export declare const defaultModes: DrawMode[];
+export declare const currentlySupportedDrawModes: DrawMode[];
 export declare const useMapDrawTool: ({ defaultDrawModes, shouldAllowMultipleShapes, defaultGeoJSON, defaultGeoJSONIntersection, defaultGeoJSONIntersectionBounds, defaultGeoJSONIntersectionProperties, geoJSONLayerId, geoJSONIntersectionLayerId, geoJSONIntersectionBoundsLayerId, }: MapDrawToolOptions) => MapDrawToolProps;
 export {};

package/src/lib/components/MapDrawTool/utils.d.ts

@@ -1,6 +1,6 @@
 import { Feature } from '@turf/turf';
-import { FeatureCollection } from 'geojson';
-import { DrawMode } from './types';
+import { FeatureCollection, GeoJsonProperties } from 'geojson';
+import { DrawMode, SelectionType } from './types';
 /**
  * Adds properties to the first geojson feature based on the given property object.
  * It only extends or changes the properties which are defined in styleConfig,
@@ -39,6 +39,9 @@ export declare const intersectGeoJSONS: (a: GeoJSON.FeatureCollection, b: GeoJSO
  */
 export declare const createInterSections: (geojson: GeoJSON.FeatureCollection, otherGeoJSON: GeoJSON.FeatureCollection, geoJSONproperties?: GeoJSON.GeoJsonProperties) => GeoJSON.FeatureCollection;
 export declare const getGeoJson: (geojson: GeoJSON.FeatureCollection, shouldAllowMultipleShapes: boolean) => GeoJSON.FeatureCollection;
+export declare const getLastEmptyFeatureIndex: (geoJSONFeatureCollection: GeoJSON.FeatureCollection) => number | undefined;
 export declare const getFeatureCollection: (geoJSONFeature: GeoJSON.Feature | GeoJSON.FeatureCollection, shouldAllowMultipleShapes: boolean, geoJSONFeatureCollection?: GeoJSON.FeatureCollection) => GeoJSON.FeatureCollection;
-export declare const isGeoJSONFeatureCreatedByTool: (existingJSON: GeoJSON.FeatureCollection, newGeoJSON: GeoJSON.Feature | GeoJSON.FeatureCollection) => boolean;
+export declare const isGeoJSONFeatureCreatedByTool: (existingJSON: GeoJSON.FeatureCollection, selectionType: SelectionType, featureLayerIndex?: number) => boolean;
 export declare const rewindGeometry: (geoJSON: FeatureCollection) => FeatureCollection;
+export declare const addGeoJSONProperties: (geoJSON: GeoJSON.Feature | GeoJSON.FeatureCollection, newProperties: GeoJsonProperties) => GeoJSON.Feature | GeoJSON.FeatureCollection;
+export declare const addSelectionTypeToGeoJSON: (geoJSON: GeoJSON.Feature | GeoJSON.FeatureCollection, selectionType: SelectionType) => GeoJSON.Feature | GeoJSON.FeatureCollection;