qwc2 2025.10.24 → 2025.10.25

package/plugins/map/RedliningSupport.js

@@ -31,6 +31,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React from 'react';
 import { connect } from 'react-redux';
 import FileSaver from 'file-saver';
+import isEmpty from 'lodash.isempty';
 import Mousetrap from 'mousetrap';
 import ol from 'openlayers';
 import PropTypes from 'prop-types';
@@ -140,16 +141,16 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this, "updateCurrentFeature", function (feature) {
       var deletedKeys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      if (_this.currentFeature && _this.props.redlining.selectedFeature) {
+      if (_this.selectedFeatures.length === 1 && _this.props.redlining.selectedFeature) {
         if (feature.circleParams) {
           var circleParams = feature.circleParams;
-          _this.currentFeature.setGeometry(new ol.geom.Circle(circleParams.center, circleParams.radius));
+          _this.selectedFeatures[0].setGeometry(new ol.geom.Circle(circleParams.center, circleParams.radius));
         } else {
-          _this.currentFeature.getGeometry().setCoordinates(feature.geometry.coordinates);
+          _this.selectedFeatures[0].getGeometry().setCoordinates(feature.geometry.coordinates);
         }
-        _this.currentFeature.setProperties(feature.properties, true);
+        _this.selectedFeatures[0].setProperties(feature.properties, true);
         deletedKeys.forEach(function (key) {
-          _this.currentFeature.unset(key);
+          _this.selectedFeatures[0].unset(key);
         });
         _this.props.changeRedliningState({
           selectedFeature: feature,
@@ -174,16 +175,47 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
       var isText = feature.get("shape") === "Text";
       return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, isText ? "textOutlineColor" : "borderColor", styleOptions.strokeColor), "strokeDash", styleOptions.strokeDash), "size", (styleOptions.strokeWidth - 1) * 2), isText ? "textFillColor" : "fillColor", styleOptions.fillColor), "text", label), "headmarker", styleOptions.headmarker), "tailmarker", styleOptions.tailmarker);
     });
-    _defineProperty(_this, "updateFeatureStyle", function (styleProps) {
-      var isText = _this.currentFeature.get("shape") === "Text";
+    _defineProperty(_this, "updateFeatureStyle", function (feature) {
+      _this.blockOnChange = true;
+      var styleProps = _this.props.redlining.style;
+      var isText = feature.get("shape") === "Text";
       var styleName = isText ? "text" : "default";
       var opts = _this.styleOptions(styleProps, isText);
-      _this.blockOnChange = true;
-      _this.currentFeature.set('label', styleProps.text);
-      _this.currentFeature.set('styleName', styleName);
-      _this.currentFeature.set('styleOptions', opts);
+      if (!feature.get('measurements')) {
+        feature.set('label', styleProps.text);
+      }
+      feature.set('styleName', styleName);
+      feature.set('styleOptions', opts);
       _this.blockOnChange = false;
     });
+    _defineProperty(_this, "toggleFeatureMeasurements", function (feature) {
+      if (_this.props.redlining.measurements) {
+        var settings = {
+          displayCrs: _this.props.displayCrs,
+          lenUnit: _this.props.redlining.lenUnit,
+          areaUnit: _this.props.redlining.areaUnit
+        };
+        MeasureUtils.updateFeatureMeasurements(feature, feature.get('shape'), _this.props.mapCrs, settings);
+      } else {
+        feature.set('measurements', undefined);
+        feature.set('segment_labels', undefined);
+        feature.set('label', '');
+      }
+    });
+    _defineProperty(_this, "updateMeasurements", function (ev) {
+      if (_this.blockOnChange) {
+        return;
+      }
+      var feature = ev.target;
+      if (feature.get('measurements')) {
+        var settings = {
+          displayCrs: _this.props.displayCrs,
+          lenUnit: _this.props.redlining.lenUnit,
+          areaUnit: _this.props.redlining.areaUnit
+        };
+        MeasureUtils.updateFeatureMeasurements(feature, feature.get('shape'), _this.props.mapCrs, settings);
+      }
+    });
     _defineProperty(_this, "styleFunction", function (feature) {
       var styleOptions = feature.get("styleOptions");
       var styleName = feature.get("styleName");
@@ -199,86 +231,11 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
       }
       return styles;
     });
-    _defineProperty(_this, "setCurrentFeature", function (feature) {
-      var _featureObj$shape;
-      _this.currentFeature = feature;
-      _this.currentFeature.setStyle(_this.styleFunction);
-      var circleParams = _this.currentFeature.get('circleParams');
-      if (circleParams) {
-        _this.currentFeature.setGeometry(new ol.geom.Circle(circleParams.center, circleParams.radius));
-      }
-      var measurements = _this.currentFeature.get('measurements');
-      var featureObj = _this.currentFeatureObject();
-      var newRedliningState = {
-        style: _this.styleProps(_this.currentFeature),
-        measurements: !!_this.currentFeature.get('measurements'),
-        selectedFeature: featureObj,
-        geomType: (_featureObj$shape = featureObj === null || featureObj === void 0 ? void 0 : featureObj.shape) !== null && _featureObj$shape !== void 0 ? _featureObj$shape : _this.props.redlining.geomType
-      };
-      if (measurements) {
-        newRedliningState.lenUnit = measurements.lenUnit;
-        newRedliningState.areaUnit = measurements.areaUnit;
-      }
-      _this.props.changeRedliningState(newRedliningState);
-      _this.currentFeature.on('change', _this.updateMeasurements);
-    });
-    _defineProperty(_this, "addDrawInteraction", function () {
-      var geomTypeConfig = GeomTypeConfig[_this.props.redlining.geomType];
-      if (!geomTypeConfig) {
-        return;
-      }
-      var isFreeHand = _this.props.redlining.freehand;
-      var drawInteraction = geomTypeConfig.drawInteraction({
-        stopClick: true,
-        condition: function condition(event) {
-          return event.originalEvent.buttons === 1;
-        },
-        style: function style() {
-          return _this.picking ? [] : FeatureStyles.sketchInteraction();
-        },
-        freehand: isFreeHand
-      });
-      drawInteraction.on('drawstart', function (evt) {
-        if (_this.picking && _this.props.redlining.drawMultiple === false) {
-          return;
-        }
-        _this.leaveTemporaryEditMode();
-        _this.currentFeature = evt.feature;
-        _this.currentFeature.setId(uuidv4());
-        _this.currentFeature.set('shape', _this.props.redlining.geomType);
-        _this.currentFeature.setStyle(_this.styleFunction);
-        _this.updateFeatureStyle(_this.props.redlining.style);
-        _this.currentFeature.on('change', _this.updateMeasurements);
-      }, _this);
-      drawInteraction.on('drawend', function () {
-        var featureId = _this.currentFeature.getId();
-        _this.commitCurrentFeature(_this.props.redlining, true);
-        _this.enterTemporaryEditMode(featureId, _this.props.redlining.layer, geomTypeConfig.editTool);
-      }, _this);
-      _this.props.map.addInteraction(drawInteraction);
-      _this.interactions.push(drawInteraction);
-      _this.setState({
-        showRecordLocation: geomTypeConfig.showRecordLocation
-      });
-    });
-    _defineProperty(_this, "updateMeasurements", function () {
-      if (_this.blockOnChange || !_this.currentFeature) {
-        return;
-      }
-      var feature = _this.currentFeature;
-      var hadMeasurements = !!feature.get('measurements');
-      if (_this.props.redlining.measurements) {
-        var settings = {
-          displayCrs: _this.props.displayCrs,
-          lenUnit: _this.props.redlining.lenUnit,
-          areaUnit: _this.props.redlining.areaUnit
-        };
-        MeasureUtils.updateFeatureMeasurements(feature, feature.get('shape'), _this.props.mapCrs, settings);
-      } else if (hadMeasurements) {
-        feature.set('measurements', undefined);
-        feature.set('segment_labels', undefined);
-        feature.set('label', '');
-      }
+    _defineProperty(_this, "searchRedliningLayer", function (layerId) {
+      var _this$props$map$getLa;
+      return (_this$props$map$getLa = _this.props.map.getLayers().getArray().find(function (l) {
+        return l.get('id') === layerId;
+      })) !== null && _this$props$map$getLa !== void 0 ? _this$props$map$getLa : null;
     });
     _defineProperty(_this, "waitForFeatureAndLayer", function (layerId, featureId, callback) {
       var redliningLayer = _this.searchRedliningLayer(layerId);
@@ -311,22 +268,59 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
         callback(redliningLayer, null);
       }
     });
+    _defineProperty(_this, "addDrawInteraction", function () {
+      var geomTypeConfig = GeomTypeConfig[_this.props.redlining.geomType];
+      if (!geomTypeConfig) {
+        return;
+      }
+      var isFreeHand = _this.props.redlining.freehand;
+      var drawInteraction = geomTypeConfig.drawInteraction({
+        stopClick: true,
+        condition: function condition(event) {
+          return event.originalEvent.buttons === 1;
+        },
+        style: function style() {
+          return _this.picking ? [] : FeatureStyles.sketchInteraction();
+        },
+        freehand: isFreeHand
+      });
+      drawInteraction.on('drawstart', function (ev) {
+        if (_this.picking && _this.props.redlining.drawMultiple === false) {
+          return;
+        }
+        _this.leaveTemporaryEditMode();
+        ev.feature.setId(uuidv4());
+        ev.feature.set('shape', _this.props.redlining.geomType);
+        _this.updateFeatureStyle(ev.feature);
+        _this.toggleFeatureMeasurements(ev.feature);
+        _this.selectFeatures([ev.feature]);
+      }, _this);
+      drawInteraction.on('drawend', function (ev) {
+        _this.commitFeatures([ev.feature], _this.props.redlining, true);
+        _this.enterTemporaryEditMode(ev.feature.getId(), _this.props.redlining.layer, geomTypeConfig.editTool);
+      }, _this);
+      _this.props.map.addInteraction(drawInteraction);
+      _this.interactions.push(drawInteraction);
+      _this.setState({
+        showRecordLocation: geomTypeConfig.showRecordLocation
+      });
+    });
     _defineProperty(_this, "enterTemporaryEditMode", function (featureId, layerId, editTool) {
       _this.waitForFeatureAndLayer(layerId, featureId, function (redliningLayer, feature) {
         if (!feature) {
           return;
         }
-        _this.setCurrentFeature(feature);
+        _this.selectFeatures([feature]);
         if (editTool === 'Transform') {
-          _this.setupTransformInteraction([_this.currentFeature]);
+          _this.setupTransformInteraction(redliningLayer, _this.selectedFeatures);
         } else {
-          _this.setupModifyInteraction([_this.currentFeature]);
+          _this.setupModifyInteraction(_this.selectedFeatures);
         }
         _this.picking = true;
       });
     });
     _defineProperty(_this, "leaveTemporaryEditMode", function () {
-      _this.commitCurrentFeature(_this.props.redlining);
+      _this.commitFeatures(_this.selectedFeatures, _this.props.redlining);
       if (_this.picking) {
         // Remove modify interactions
         _this.props.map.removeInteraction(_this.interactions.pop());
@@ -344,10 +338,10 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
       });
       var currentEditInteraction = null;
       selectInteraction.on('select', function (evt) {
-        if (evt.selected.length === 1 && evt.selected[0] === _this.currentFeature) {
+        if (evt.selected.length === 1 && _this.selectedFeatures.includes(evt.selected[0])) {
           return;
         }
-        _this.commitCurrentFeature(_this.props.redlining);
+        _this.commitFeatures(_this.selectedFeatures, _this.props.redlining);
         if (currentEditInteraction) {
           _this.props.map.removeInteraction(currentEditInteraction);
           _this.interactions = _this.interactions.filter(function (i) {
@@ -356,14 +350,14 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
           currentEditInteraction = null;
         }
         if (evt.selected.length === 1) {
-          _this.setCurrentFeature(evt.selected[0]);
-          var geomTypeConfig = GeomTypeConfig[_this.currentFeature.get('shape')];
+          _this.selectFeatures(evt.selected);
+          var geomTypeConfig = GeomTypeConfig[evt.selected[0].get('shape')];
           if (geomTypeConfig && geomTypeConfig.editTool === 'Transform') {
-            currentEditInteraction = _this.setupTransformInteraction([_this.currentFeature]);
+            currentEditInteraction = _this.setupTransformInteraction(redliningLayer, [evt.selected[0]]);
             currentEditInteraction.on('select', function (ev) {
               // Clear selection when selecting a different feature, and let the parent select interaction deal with the new feature
-              if (_this.currentFeature && ev.feature !== _this.currentFeature) {
-                _this.commitCurrentFeature(_this.props.redlining);
+              if (!isEmpty(_this.selectedFeatures) && !_this.selectedFeatures.includes(ev.feature)) {
+                _this.commitFeatures(_this.selectedFeatures, _this.props.redlining);
                 currentEditInteraction.setSelection(new ol.Collection());
               }
             });
@@ -384,26 +378,22 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
       if (!redliningLayer) {
         return;
       }
-      var transformInteraction = _this.setupTransformInteraction();
+      var transformInteraction = _this.setupTransformInteraction(redliningLayer, [], true);
       transformInteraction.on('select', function (evt) {
-        if (evt.feature === _this.currentFeature) {
-          return;
-        }
-        _this.commitCurrentFeature(_this.props.redlining);
-        if (evt.feature) {
-          _this.setCurrentFeature(evt.feature);
-        }
+        var added = evt.features.getArray().filter(function (x) {
+          return !_this.selectedFeatures.includes(x);
+        });
+        var removed = _this.selectedFeatures.filter(function (x) {
+          return !evt.features.getArray().includes(x);
+        });
+        _this.selectFeatures(added);
+        _this.commitFeatures(removed, _this.props.redlining);
       });
       _this.picking = true;
     });
-    _defineProperty(_this, "addPickDrawInteraction", function () {
-      _this.waitForFeatureAndLayer(_this.props.redlining.layer, null, function () {
-        return _this.addPickInteraction();
-      });
-    });
     _defineProperty(_this, "maybeEnterTemporaryDrawMode", function (ev) {
       var redliningLayer = _this.searchRedliningLayer(_this.props.redlining.layer);
-      if (_this.currentFeature || !_this.props.redlining.drawMultiple && redliningLayer.getSource().getFeatures().length > 0) {
+      if (_this.selectedFeatures.length || !_this.props.redlining.drawMultiple && redliningLayer.getSource().getFeatures().length > 0) {
         return;
       }
       var featureHit = false;
@@ -433,16 +423,15 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
         freehand: isFreeHand
       });
       drawInteraction.on('drawstart', function (evt) {
-        _this.currentFeature = evt.feature;
-        _this.currentFeature.setId(uuidv4());
-        _this.currentFeature.set('shape', _this.props.redlining.geomType);
-        _this.currentFeature.setStyle(_this.styleFunction);
-        _this.updateFeatureStyle(_this.props.redlining.style);
-        _this.currentFeature.on('change', _this.updateMeasurements);
+        evt.feature.setId(uuidv4());
+        evt.feature.set('shape', _this.props.redlining.geomType);
+        _this.updateFeatureStyle(evt.feature);
+        _this.toggleFeatureMeasurements(ev.feature);
+        _this.selectFeatures([evt.feature]);
       }, _this);
       drawInteraction.on('drawend', function () {
         // Draw end
-        _this.commitCurrentFeature(_this.props.redlining, true);
+        _this.commitFeatures(_this.selectFeatures, _this.props.redlining, true);
         _this.reset(_this.props.redlining);
         // Ughh... Apparently we need to wait 250ms for the 'singleclick' event processing to finish to avoid pick interactions picking up the current event
         setTimeout(function () {
@@ -478,18 +467,38 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
       _this.interactions.push(modifyInteraction);
       return modifyInteraction;
     });
-    _defineProperty(_this, "setupTransformInteraction", function () {
-      var selectedFeatures = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    _defineProperty(_this, "setupTransformInteraction", function (redliningLayer) {
+      var selectedFeatures = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      var multi = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       var transformInteraction = new ol.interaction.Transform({
         stretch: false,
+        addCondition: multi ? function (ev) {
+          return ev.originalEvent.ctrlKey;
+        } : null,
         keepAspectRatio: function keepAspectRatio(ev) {
-          return _this.currentFeature ? GeomTypeConfig[_this.currentFeature.get('shape')].regular || ol.events.condition.shiftKeyOnly(ev) : false;
-        }
+          return _this.selectedFeatures.find(function (f) {
+            return GeomTypeConfig[f.get('shape')].regular;
+          }) || ol.events.condition.shiftKeyOnly(ev);
+        },
+        layers: [redliningLayer],
+        translateFeature: true
       });
-      transformInteraction.on('rotating', function (e) {
-        if (_this.currentFeature.get('shape') === 'Text') {
-          _this.currentFeature.set('rotation', -e.angle);
+      // Hacky workaround translateFeature interfering with ctrl-click to deselect selected features
+      var origHandleDownEvent = transformInteraction.handleDownEvent;
+      transformInteraction.handleDownEvent = function (evt) {
+        if (evt.originalEvent.ctrlKey) {
+          transformInteraction.set('translateFeature', false);
         }
+        var ret = origHandleDownEvent.call(transformInteraction, evt);
+        transformInteraction.set('translateFeature', true);
+        return ret;
+      };
+      transformInteraction.on('rotating', function (ev) {
+        ev.features.forEach(function (feature) {
+          if (feature.get('shape') === 'Text') {
+            feature.set('rotation', -ev.angle);
+          }
+        });
       });
       transformInteraction.on('rotateend', _this.updateSelectedFeature);
       transformInteraction.on('translateend', _this.updateSelectedFeature);
@@ -500,11 +509,19 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
       return transformInteraction;
     });
     _defineProperty(_this, "updateSelectedFeature", function () {
-      var _featureObj$shape2;
-      var featureObj = _this.currentFeatureObject();
+      var _featureObj$shape, _featureObj;
+      var featureObj = null;
+      if (_this.selectedFeatures.length === 1) {
+        featureObj = _this.serializeFeature(_this.selectedFeatures[0]);
+      } else if (_this.selectedFeatures.length > 1) {
+        featureObj = {
+          type: "FeatureCollection",
+          features: []
+        };
+      }
       _this.props.changeRedliningState({
         selectedFeature: featureObj,
-        geomType: (_featureObj$shape2 = featureObj === null || featureObj === void 0 ? void 0 : featureObj.shape) !== null && _featureObj$shape2 !== void 0 ? _featureObj$shape2 : _this.props.redlining.geomType
+        geomType: (_featureObj$shape = (_featureObj = featureObj) === null || _featureObj === void 0 ? void 0 : _featureObj.shape) !== null && _featureObj$shape !== void 0 ? _featureObj$shape : _this.props.redlining.geomType
       });
     });
     _defineProperty(_this, "triggerDelete", function () {
@@ -512,61 +529,96 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
         action: "Delete"
       });
     });
-    _defineProperty(_this, "deleteCurrentFeature", function () {
-      if (_this.currentFeature) {
-        _this.props.removeLayerFeatures(_this.props.redlining.layer, [_this.currentFeature.getId()], true);
-        _this.currentFeature = null;
+    _defineProperty(_this, "deleteCurrentFeatures", function () {
+      if (_this.selectedFeatures.length) {
+        _this.props.removeLayerFeatures(_this.props.redlining.layer, _this.selectedFeatures.map(function (f) {
+          return f.getId();
+        }), true);
+        _this.selectedFeatures = [];
       }
     });
-    _defineProperty(_this, "commitCurrentFeature", function (redliningProps) {
-      var _feature$geometry;
-      var newFeature = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      var feature = _this.currentFeatureObject();
-      if (!feature) {
-        return null;
+    _defineProperty(_this, "updateRedliningState", function (firstSelection) {
+      if (_this.selectedFeatures.length > 0) {
+        var features = _this.selectedFeatures;
+        var featureObj = features.length === 1 ? _this.serializeFeature(features[0]) : {
+          type: "FeatureCollection",
+          features: []
+        };
+        var newRedliningState = {
+          selectedFeature: featureObj
+        };
+        if (firstSelection || _this.selectedFeatures.length === 1) {
+          var _featureObj$shape2;
+          newRedliningState.style = _this.styleProps(features[0]);
+          newRedliningState.measurements = !!features[0].get('measurements');
+          newRedliningState.geomType = (_featureObj$shape2 = featureObj === null || featureObj === void 0 ? void 0 : featureObj.shape) !== null && _featureObj$shape2 !== void 0 ? _featureObj$shape2 : _this.props.redlining.geomType;
+          var measurements = features[0].get('measurements');
+          if (measurements) {
+            newRedliningState.lenUnit = measurements.lenUnit;
+            newRedliningState.areaUnit = measurements.areaUnit;
+          }
+        }
+        _this.props.changeRedliningState(newRedliningState);
+      } else {
+        _this.props.changeRedliningState({
+          selectedFeature: null
+        });
       }
-      // Don't commit empty/invalid features
-      if (feature.shape === "Text" && !feature.properties.label || feature.shape === "Circle" && feature.circleParams.radius === 0 || ((_feature$geometry = feature.geometry) === null || _feature$geometry === void 0 ? void 0 : _feature$geometry.type) === "Polygon" && _this.currentFeature.getGeometry().getArea() === 0) {
-        if (!newFeature) {
-          _this.props.removeLayerFeatures(redliningProps.layer, [feature.id]);
+    });
+    _defineProperty(_this, "selectFeatures", function (features) {
+      var firstSelection = isEmpty(_this.selectedFeatures);
+      features.forEach(function (feature) {
+        feature.setStyle(_this.styleFunction);
+        feature.on('change', _this.updateMeasurements);
+        _this.selectedFeatures.push(feature);
+      });
+      _this.updateRedliningState(firstSelection);
+    });
+    _defineProperty(_this, "commitFeatures", function (features, redliningProps) {
+      var newFeature = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var featureObjects = features.map(function (feature) {
+        var _featureObj$geometry;
+        var styleName = feature.get("shape") === "Text" ? "text" : "default";
+        var style = FeatureStyles[styleName](feature, feature.get('styleOptions'));
+        feature.setStyle(style);
+        feature.un('change', _this.updateMeasurements);
+        _this.selectedFeatures = _this.selectedFeatures.filter(function (f) {
+          return f !== feature;
+        });
+        var featureObj = _this.serializeFeature(feature);
+        // Don't commit empty/invalid features
+        if (featureObj.shape === "Text" && !featureObj.properties.label || featureObj.shape === "Circle" && featureObj.circleParams.radius === 0 || ((_featureObj$geometry = featureObj.geometry) === null || _featureObj$geometry === void 0 ? void 0 : _featureObj$geometry.type) === "Polygon" && feature.getGeometry().getArea() === 0) {
+          if (!newFeature) {
+            _this.props.removeLayerFeatures(redliningProps.layer, [featureObj.id]);
+          }
+          return null;
+        }
+        if (featureObj.shape === "Circle") {
+          var _featureObj$circlePar = featureObj.circleParams,
+            center = _featureObj$circlePar.center,
+            radius = _featureObj$circlePar.radius;
+          var deg2rad = Math.PI / 180;
+          featureObj.geometry.type = "Polygon";
+          featureObj.geometry.coordinates = [Array.apply(null, Array(91)).map(function (item, index) {
+            return [center[0] + radius * Math.cos(4 * index * deg2rad), center[1] + radius * Math.sin(4 * index * deg2rad)];
+          })];
         }
-        _this.resetSelectedFeature();
+        if (featureObj.geometry.type === "LineString" || featureObj.geometry.type === "Polygon") {
+          featureObj.geometry.coordinates = VectorLayerUtils.removeDuplicateNodes(featureObj.geometry.coordinates);
+        }
+        return featureObj;
+      }).filter(Boolean);
+      if (isEmpty(featureObjects)) {
         return null;
       }
-      if (feature.shape === "Circle") {
-        var _feature$circleParams = feature.circleParams,
-          center = _feature$circleParams.center,
-          radius = _feature$circleParams.radius;
-        var deg2rad = Math.PI / 180;
-        feature.geometry.type = "Polygon";
-        feature.geometry.coordinates = [Array.apply(null, Array(91)).map(function (item, index) {
-          return [center[0] + radius * Math.cos(4 * index * deg2rad), center[1] + radius * Math.sin(4 * index * deg2rad)];
-        })];
-      }
-      if (feature.geometry.type === "LineString" || feature.geometry.type === "Polygon") {
-        feature.geometry.coordinates = VectorLayerUtils.removeDuplicateNodes(feature.geometry.coordinates);
-      }
       var layer = {
         id: redliningProps.layer,
         title: redliningProps.layerTitle,
         role: LayerRole.USERLAYER
       };
-      _this.props.addLayerFeatures(layer, [feature]);
-      _this.resetSelectedFeature();
-      return feature;
-    });
-    _defineProperty(_this, "resetSelectedFeature", function () {
-      if (_this.currentFeature) {
-        // Reset selection style
-        var styleName = _this.currentFeature.get("shape") === "Text" ? "text" : "default";
-        var style = FeatureStyles[styleName](_this.currentFeature, _this.currentFeature.get('styleOptions'));
-        _this.currentFeature.setStyle(style);
-        _this.currentFeature.un('change', _this.updateMeasurements);
-        _this.currentFeature = null;
-        _this.props.changeRedliningState({
-          selectedFeature: null
-        });
-      }
+      _this.props.addLayerFeatures(layer, featureObjects);
+      _this.updateRedliningState();
+      return featureObjects;
     });
     _defineProperty(_this, "reset", function (redliningProps) {
       _this.setState({
@@ -576,50 +628,47 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
         _this.props.map.removeInteraction(_this.interactions.shift());
       }
       if (_this.picking) {
-        _this.commitCurrentFeature(redliningProps, false);
+        _this.commitFeatures(_this.selectedFeatures, redliningProps, false);
       } else {
-        _this.resetSelectedFeature();
+        _this.selectedFeatures.forEach(function (feature) {
+          var styleName = feature.get("shape") === "Text" ? "text" : "default";
+          var style = FeatureStyles[styleName](feature, feature.get('styleOptions'));
+          feature.setStyle(style);
+          feature.un('change', _this.updateMeasurements);
+        });
+        _this.selectedFeatures = [];
       }
       _this.props.map.un('click', _this.maybeEnterTemporaryDrawMode);
       _this.picking = false;
     });
-    _defineProperty(_this, "searchRedliningLayer", function (layerId) {
-      var _this$props$map$getLa;
-      return (_this$props$map$getLa = _this.props.map.getLayers().getArray().find(function (l) {
-        return l.get('id') === layerId;
-      })) !== null && _this$props$map$getLa !== void 0 ? _this$props$map$getLa : null;
-    });
-    _defineProperty(_this, "currentFeatureObject", function () {
-      if (!_this.currentFeature) {
-        return null;
-      }
+    _defineProperty(_this, "serializeFeature", function (feature) {
       var format = new ol.format.GeoJSON();
-      var feature = format.writeFeatureObject(_this.currentFeature);
-      if (_this.currentFeature.get("shape") === "Circle") {
-        feature.circleParams = {
-          center: _this.currentFeature.getGeometry().getCenter(),
-          radius: _this.currentFeature.getGeometry().getRadius()
+      var featureObject = format.writeFeatureObject(feature);
+      if (feature.get("shape") === "Circle") {
+        featureObject.circleParams = {
+          center: feature.getGeometry().getCenter(),
+          radius: feature.getGeometry().getRadius()
         };
       }
-      feature.styleName = _this.currentFeature.get('styleName');
-      feature.styleOptions = _this.currentFeature.get('styleOptions');
-      feature.shape = _this.currentFeature.get('shape');
-      feature.measurements = _this.currentFeature.get('measurements');
-      feature.crs = _this.props.mapCrs;
+      featureObject.styleName = feature.get('styleName');
+      featureObject.styleOptions = feature.get('styleOptions');
+      featureObject.shape = feature.get('shape');
+      featureObject.measurements = feature.get('measurements');
+      featureObject.crs = _this.props.mapCrs;
       // Don't pollute GeoJSON object properties with internal props
-      delete feature.properties.styleName;
-      delete feature.properties.styleOptions;
-      delete feature.properties.shape;
-      delete feature.properties.measurements;
-      delete feature.properties.circleParams;
+      delete featureObject.properties.styleName;
+      delete featureObject.properties.styleOptions;
+      delete featureObject.properties.shape;
+      delete featureObject.properties.measurements;
+      delete featureObject.properties.circleParams;
       // Don't store empty label prop
-      if (feature.properties.label === "") {
-        delete feature.properties.label;
+      if (featureObject.properties.label === "") {
+        delete featureObject.properties.label;
       }
-      return feature;
+      return featureObject;
     });
     _defineProperty(_this, "export", function () {
-      var currentFeature = _this.commitCurrentFeature(_this.props.redlining);
+      var committedFeatures = _this.commitFeatures(_this.selectedFeatures, _this.props.redlining);
       var layer = _this.props.layers.find(function (l) {
         return l.id === _this.props.redlining.layer;
       });
@@ -630,7 +679,10 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
         var geojson = JSON.stringify({
           type: "FeatureCollection",
           features: layer.features.map(function (feature) {
-            var newFeature = _objectSpread({}, feature.id === currentFeature.id ? currentFeature : feature);
+            var _committedFeatures$fi;
+            var newFeature = _objectSpread({}, (_committedFeatures$fi = committedFeatures.find(function (f) {
+              return f.id === feature.id;
+            })) !== null && _committedFeatures$fi !== void 0 ? _committedFeatures$fi : feature);
             newFeature.geometry = VectorLayerUtils.reprojectGeometry(feature.geometry, feature.crs || _this.props.mapCrs, 'EPSG:4326');
             delete newFeature.crs;
             return newFeature;
@@ -663,7 +715,7 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
     });
     _this.interactions = [];
     _this.picking = false;
-    _this.currentFeature = null;
+    _this.selectedFeatures = [];
     _this.blockOnChange = false;
     _this.selectedTextStyle = function (feature, opts) {
       return new ol.style.Style({
@@ -704,6 +756,7 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
   return _createClass(RedliningSupport, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
       // Bind keyboard shortcuts to delete features
       if (this.props.redlining.action && !prevProps.redlining.action) {
         Mousetrap.bind('del', this.triggerDelete);
@@ -714,7 +767,7 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
       }
       // Handle delete action immediately and reset the redlining state to the previous action
       if (this.props.redlining.action === 'Delete') {
-        this.deleteCurrentFeature();
+        this.deleteCurrentFeatures();
         this.props.changeRedliningState(_objectSpread(_objectSpread({}, prevProps.redlining), {}, {
           selectedFeature: null
         }));
@@ -725,6 +778,7 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
         this.props.changeRedliningState(_objectSpread(_objectSpread({}, prevProps.redlining), {}, {
           selectedFeature: null
         }));
+        return;
       }
       var recreateInteraction = this.props.redlining.action !== prevProps.redlining.action || this.props.redlining.layer !== prevProps.redlining.layer || ['Draw', 'PickDraw'].includes(this.props.redlining.action) && this.props.redlining.geomType !== prevProps.redlining.geomType || this.props.redlining.freehand !== prevProps.redlining.freehand || this.props.redlining.drawMultiple !== prevProps.redlining.drawMultiple;
       if (recreateInteraction) {
@@ -737,31 +791,37 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
         } else if (this.props.redlining.action === 'Pick' || this.props.redlining.action === 'Buffer') {
           this.addPickInteraction();
         } else if (this.props.redlining.action === 'PickDraw') {
-          this.addPickDrawInteraction();
+          this.waitForFeatureAndLayer(this.props.redlining.layer, null, function () {
+            return _this2.addPickInteraction();
+          });
         }
       }
-      if (this.currentFeature) {
+      if (this.selectedFeatures) {
         // Update feature style
         if (this.props.redlining.style !== prevProps.redlining.style) {
-          this.updateFeatureStyle(this.props.redlining.style);
+          this.selectedFeatures.forEach(this.updateFeatureStyle);
         }
         // Update current feature measurements
-        if (this.props.map.displayCrs !== prevProps.map.displayCrs || this.props.redlining.measurements !== prevProps.redlining.measurements || this.props.redlining.lenUnit !== prevProps.redlining.lenUnit || this.props.redlining.areaUnit !== prevProps.redlining.areaUnit) {
-          this.currentFeature.changed();
+        if (this.props.redlining.measurements !== prevProps.redlining.measurements) {
+          this.selectedFeatures.forEach(this.toggleFeatureMeasurements);
+        } else if (this.props.map.displayCrs !== prevProps.map.displayCrs || this.props.redlining.lenUnit !== prevProps.redlining.lenUnit || this.props.redlining.areaUnit !== prevProps.redlining.areaUnit) {
+          this.selectedFeatures.forEach(function (feature) {
+            return feature.changed();
+          });
         }
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
       var widgets = [];
       if (this.props.redlining.extraAction === "NumericInput") {
         widgets.push(/*#__PURE__*/React.createElement(NumericInputWindow, {
           feature: this.props.redlining.selectedFeature,
           key: "NumericInputWindow",
           onClose: function onClose() {
-            return _this2.props.changeRedliningState({
+            return _this3.props.changeRedliningState({
               extraAction: null
             });
           },
@@ -773,7 +833,7 @@ var RedliningSupport = /*#__PURE__*/function (_React$Component) {
           key: "FeatureAttributesWindow",
           layerid: this.props.redlining.layer,
           onClose: function onClose() {
-            return _this2.props.changeRedliningState({
+            return _this3.props.changeRedliningState({
               extraAction: null
             });
           },