qwc2 2025.10.9 → 2025.10.14

package/plugins/map/RedliningSupport.js

@@ -1,23 +1,732 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
  * Copyright 2017-2024 Sourcepole AG
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import{connect}from"react-redux";import Mousetrap from"mousetrap";import ol from"openlayers";import PropTypes from"prop-types";import{v4 as uuidv4}from"uuid";import{LayerRole,addLayerFeatures,removeLayerFeatures}from"../../actions/layers";import{changeRedliningState}from"../../actions/redlining";import NumericInputWindow from"../../components/NumericInputWindow";import{OlLayerAdded,OlLayerUpdated}from"../../components/map/OlLayer";import FeatureStyles from"../../utils/FeatureStyles";import MapUtils from"../../utils/MapUtils";import MeasureUtils from"../../utils/MeasureUtils";import VectorLayerUtils from"../../utils/VectorLayerUtils";var GeomTypeConfig={Text:{drawInteraction:function drawInteraction(opts){return new ol.interaction.Draw(_objectSpread(_objectSpread({},opts),{},{type:"Point"}))},editTool:"Pick",drawNodes:true},Point:{drawInteraction:function drawInteraction(opts){return new ol.interaction.Draw(_objectSpread(_objectSpread({},opts),{},{type:"Point"}))},editTool:"Pick",drawNodes:true},LineString:{drawInteraction:function drawInteraction(opts){return new ol.interaction.Draw(_objectSpread(_objectSpread({},opts),{},{type:"LineString"}))},editTool:"Pick",drawNodes:true},Polygon:{drawInteraction:function drawInteraction(opts){return new ol.interaction.Draw(_objectSpread(_objectSpread({},opts),{},{type:"Polygon"}))},editTool:"Pick",drawNodes:true},Circle:{drawInteraction:function drawInteraction(opts){return new ol.interaction.Draw(_objectSpread(_objectSpread({},opts),{},{type:"Circle"}))},editTool:"Pick",drawNodes:true,regular:true},Ellipse:{drawInteraction:function drawInteraction(opts){return new ol.interaction.DrawRegular(_objectSpread(_objectSpread({},opts),{},{sides:0}))},editTool:"Transform",drawNodes:false},Box:{drawInteraction:function drawInteraction(opts){return new ol.interaction.Draw(_objectSpread(_objectSpread({},opts),{},{type:"Circle",geometryFunction:ol.interaction.createBox()}))},editTool:"Transform",drawNodes:true},Square:{drawInteraction:function drawInteraction(opts){return new ol.interaction.DrawRegular(_objectSpread(_objectSpread({},opts),{},{sides:4,squareCondition:function squareCondition(){return true}}))},editTool:"Transform",regular:true}};/**
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import Mousetrap from 'mousetrap';
+import ol from 'openlayers';
+import PropTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
+import { LayerRole, addLayerFeatures, removeLayerFeatures } from '../../actions/layers';
+import { changeRedliningState } from '../../actions/redlining';
+import NumericInputWindow from '../../components/NumericInputWindow';
+import { OlLayerAdded, OlLayerUpdated } from '../../components/map/OlLayer';
+import FeatureStyles from '../../utils/FeatureStyles';
+import MapUtils from '../../utils/MapUtils';
+import MeasureUtils from '../../utils/MeasureUtils';
+import VectorLayerUtils from '../../utils/VectorLayerUtils';
+var GeomTypeConfig = {
+  Text: {
+    drawInteraction: function drawInteraction(opts) {
+      return new ol.interaction.Draw(_objectSpread(_objectSpread({}, opts), {}, {
+        type: "Point"
+      }));
+    },
+    editTool: 'Pick',
+    drawNodes: true
+  },
+  Point: {
+    drawInteraction: function drawInteraction(opts) {
+      return new ol.interaction.Draw(_objectSpread(_objectSpread({}, opts), {}, {
+        type: "Point"
+      }));
+    },
+    editTool: 'Pick',
+    drawNodes: true
+  },
+  LineString: {
+    drawInteraction: function drawInteraction(opts) {
+      return new ol.interaction.Draw(_objectSpread(_objectSpread({}, opts), {}, {
+        type: "LineString"
+      }));
+    },
+    editTool: 'Pick',
+    drawNodes: true
+  },
+  Polygon: {
+    drawInteraction: function drawInteraction(opts) {
+      return new ol.interaction.Draw(_objectSpread(_objectSpread({}, opts), {}, {
+        type: "Polygon"
+      }));
+    },
+    editTool: 'Pick',
+    drawNodes: true
+  },
+  Circle: {
+    drawInteraction: function drawInteraction(opts) {
+      return new ol.interaction.Draw(_objectSpread(_objectSpread({}, opts), {}, {
+        type: "Circle"
+      }));
+    },
+    editTool: 'Pick',
+    drawNodes: true,
+    regular: true
+  },
+  Ellipse: {
+    drawInteraction: function drawInteraction(opts) {
+      return new ol.interaction.DrawRegular(_objectSpread(_objectSpread({}, opts), {}, {
+        sides: 0
+      }));
+    },
+    editTool: 'Transform',
+    drawNodes: false
+  },
+  Box: {
+    drawInteraction: function drawInteraction(opts) {
+      return new ol.interaction.Draw(_objectSpread(_objectSpread({}, opts), {}, {
+        type: "Circle",
+        geometryFunction: ol.interaction.createBox()
+      }));
+    },
+    editTool: 'Transform',
+    drawNodes: true
+  },
+  Square: {
+    drawInteraction: function drawInteraction(opts) {
+      return new ol.interaction.DrawRegular(_objectSpread(_objectSpread({}, opts), {}, {
+        sides: 4,
+        squareCondition: function squareCondition() {
+          return true;
+        }
+      }));
+    },
+    editTool: 'Transform',
+    regular: true
+  }
+};
+
+/**
  * Redlining support for the map component.
- */var RedliningSupport=/*#__PURE__*/function(_React$Component){function RedliningSupport(props){var _this;_classCallCheck(this,RedliningSupport);_this=_callSuper(this,RedliningSupport,[props]);_defineProperty(_this,"updateCurrentFeature",function(feature){if(_this.currentFeature&&_this.props.redlining.selectedFeature){if(feature.circleParams){var circleParams=feature.circleParams;_this.currentFeature.setGeometry(new ol.geom.Circle(circleParams.center,circleParams.radius))}else{_this.currentFeature.getGeometry().setCoordinates(feature.geometry.coordinates)}_this.props.changeRedliningState({selectedFeature:feature,geomType:feature.shape})}});_defineProperty(_this,"styleOptions",function(styleProps,isText){return{strokeColor:isText?styleProps.textOutlineColor:styleProps.borderColor,strokeWidth:1+0.5*styleProps.size,strokeDash:styleProps.strokeDash,fillColor:isText?styleProps.textFillColor:styleProps.fillColor,circleRadius:5+styleProps.size,headmarker:styleProps.headmarker,tailmarker:styleProps.tailmarker}});_defineProperty(_this,"styleProps",function(feature){var styleOptions=feature.get("styleOptions");var label=feature.get("label")||"";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";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);_this.blockOnChange=false});_defineProperty(_this,"styleFunction",function(feature){var styleOptions=feature.get("styleOptions");var styleName=feature.get("styleName");var styles=[];if(styleName==="text"){styles.push(_this.selectedTextStyle(feature,styleOptions))}styles.push.apply(styles,_toConsumableArray(FeatureStyles[styleName](feature,styleOptions)));var shape=feature.get("shape");var geomTypeConfig=GeomTypeConfig[shape];if((geomTypeConfig||{}).drawNodes!==false){styles.push(_this.selectedStyle)}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)});_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,"waitForFeatureAndLayer",function(layerId,featureId,callback){var redliningLayer=_this.searchRedliningLayer(layerId);if(!redliningLayer){OlLayerAdded.connect(function(layer){if(layer.get("id")===layerId){var feature=featureId?layer.getSource().getFeatureById(featureId):null;callback(layer,feature);return true}return false})}else if(featureId){var feature=redliningLayer.getSource().getFeatureById(featureId);if(feature){callback(redliningLayer,feature)}else{OlLayerUpdated.connect(function(layer){if(layer.get("id")===layerId){var feat=layer.getSource().getFeatureById(featureId);if(feat){callback(layer,feat);return true}}return false})}}else{callback(redliningLayer,null)}});_defineProperty(_this,"enterTemporaryEditMode",function(featureId,layerId,editTool){_this.waitForFeatureAndLayer(layerId,featureId,function(redliningLayer,feature){if(!feature){return}_this.setCurrentFeature(feature);if(editTool==="Transform"){_this.setupTransformInteraction([_this.currentFeature])}else{_this.setupModifyInteraction([_this.currentFeature])}_this.picking=true})});_defineProperty(_this,"leaveTemporaryEditMode",function(){if(_this.currentFeature){_this.commitCurrentFeature(_this.props.redlining)}if(_this.picking){// Remove modify interactions
-_this.props.map.removeInteraction(_this.interactions.pop());_this.picking=false}});_defineProperty(_this,"addPickInteraction",function(){var redliningLayer=_this.searchRedliningLayer(_this.props.redlining.layer);if(!redliningLayer){return}var selectInteraction=new ol.interaction.Select({layers:[redliningLayer],hitTolerance:5});var currentEditInteraction=null;selectInteraction.on("select",function(evt){if(evt.selected.length===1&&evt.selected[0]===_this.currentFeature){return}if(_this.currentFeature){_this.commitCurrentFeature(_this.props.redlining)}if(currentEditInteraction){_this.props.map.removeInteraction(currentEditInteraction);_this.interactions=_this.interactions.filter(function(i){return i!==currentEditInteraction});currentEditInteraction=null}if(evt.selected.length===1){_this.setCurrentFeature(evt.selected[0]);var geomTypeConfig=GeomTypeConfig[_this.currentFeature.get("shape")];if(geomTypeConfig&&geomTypeConfig.editTool==="Transform"){currentEditInteraction=_this.setupTransformInteraction([_this.currentFeature]);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);currentEditInteraction.setSelection(new ol.Collection)}})}else{currentEditInteraction=_this.setupModifyInteraction(selectInteraction.getFeatures().getArray())}}},_this);if(_this.props.redlining.action==="PickDraw"){_this.props.map.on("click",_this.maybeEnterTemporaryDrawMode)}_this.props.map.addInteraction(selectInteraction);_this.interactions.push(selectInteraction);_this.picking=true});_defineProperty(_this,"addTransformInteraction",function(){var redliningLayer=_this.searchRedliningLayer(_this.props.redlining.layer);if(!redliningLayer){return}var transformInteraction=_this.setupTransformInteraction();transformInteraction.on("select",function(evt){if(evt.feature===_this.currentFeature){return}if(_this.currentFeature){_this.commitCurrentFeature(_this.props.redlining)}if(evt.feature){_this.setCurrentFeature(evt.feature)}});_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){return}var featureHit=false;_this.props.map.forEachFeatureAtPixel(ev.pixel,function(feature,layer){featureHit|=layer===redliningLayer},{hitTolerance:5});if(!redliningLayer||featureHit){return}_this.reset(_this.props.redlining);_this.props.map.un("click",_this.maybeEnterTemporaryDrawMode);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){_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(){// Draw end
-_this.commitCurrentFeature(_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(){return _this.addPickInteraction(true)},300)},_this);_this.props.map.addInteraction(drawInteraction);_this.interactions.push(drawInteraction);_this.picking=false;var clickCoord=MapUtils.getHook(MapUtils.GET_SNAPPED_COORDINATES_FROM_PIXEL_HOOK)(ev.pixel);drawInteraction.appendCoordinates([clickCoord]);if(_this.props.redlining.geomType==="Point"){drawInteraction.finishDrawing()}});_defineProperty(_this,"setupModifyInteraction",function(){var selectedFeatures=arguments.length>0&&arguments[0]!==undefined?arguments[0]:[];var modifyInteraction=new ol.interaction.Modify({features:new ol.Collection(selectedFeatures),condition:function condition(event){return event.originalEvent.buttons===1},deleteCondition:function deleteCondition(event){// delete vertices on SHIFT + click
-if(event.type==="pointerdown"&&ol.events.condition.shiftKeyOnly(event)){_this.props.map.setIgnoreNextClick(true)}return ol.events.condition.shiftKeyOnly(event)&&ol.events.condition.singleClick(event)}});modifyInteraction.on("modifyend",_this.updateSelectedFeature);_this.props.map.addInteraction(modifyInteraction);_this.interactions.push(modifyInteraction);return modifyInteraction});_defineProperty(_this,"setupTransformInteraction",function(){var selectedFeatures=arguments.length>0&&arguments[0]!==undefined?arguments[0]:[];var transformInteraction=new ol.interaction.Transform({stretch:false,keepAspectRatio:function keepAspectRatio(ev){return _this.currentFeature?GeomTypeConfig[_this.currentFeature.get("shape")].regular||ol.events.condition.shiftKeyOnly(ev):false}});transformInteraction.on("rotating",function(e){if(_this.currentFeature.get("shape")==="Text"){_this.currentFeature.set("rotation",-e.angle)}});transformInteraction.on("rotateend",_this.updateSelectedFeature);transformInteraction.on("translateend",_this.updateSelectedFeature);transformInteraction.on("scaleend",_this.updateSelectedFeature);_this.props.map.addInteraction(transformInteraction);_this.interactions.push(transformInteraction);transformInteraction.setSelection(new ol.Collection(selectedFeatures));return transformInteraction});_defineProperty(_this,"updateSelectedFeature",function(){var _featureObj$shape2;var featureObj=_this.currentFeatureObject();_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})});_defineProperty(_this,"triggerDelete",function(){_this.props.changeRedliningState({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,"commitCurrentFeature",function(redliningProps){var _feature$geometry;var newFeature=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;var feature=_this.currentFeatureObject();if(!feature){return}// 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])}_this.resetSelectedFeature();return}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()});_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})}});_defineProperty(_this,"reset",function(redliningProps){while(_this.interactions.length>0){_this.props.map.removeInteraction(_this.interactions.shift())}if(_this.picking){_this.commitCurrentFeature(redliningProps,false)}else{_this.resetSelectedFeature()}_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}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()}}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;// 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;// Don't store empty label prop
-if(feature.properties.label===""){delete feature.properties.label}return feature});_this.interactions=[];_this.picking=false;_this.currentFeature=null;_this.blockOnChange=false;_this.selectedTextStyle=function(feature,opts){return new ol.style.Style({text:new ol.style.Text({font:"10pt sans-serif",text:feature.getProperties().label||"",rotation:feature.getProperties().rotation||0,scale:opts.strokeWidth,fill:new ol.style.Fill({color:opts.textFillColor}),stroke:new ol.style.Stroke({color:[0,0,0,0.5],width:4})})})};var geometryFunction=function geometryFunction(feature){if(feature.getGeometry().getType()==="Point"){return new ol.geom.MultiPoint([feature.getGeometry().getCoordinates()])}else if(feature.getGeometry().getType()==="LineString"){return new ol.geom.MultiPoint(feature.getGeometry().getCoordinates())}else if(feature.getGeometry().getType()==="Polygon"){return new ol.geom.MultiPoint(feature.getGeometry().getCoordinates()[0])}else if(feature.getGeometry().getType()==="Circle"){var center=feature.getGeometry().getCenter();return new ol.geom.MultiPoint([center,[center[0]+feature.getGeometry().getRadius(),center[1]]])}return null};_this.selectedStyle=FeatureStyles.interactionVertex({geometryFunction:geometryFunction});return _this}_inherits(RedliningSupport,_React$Component);return _createClass(RedliningSupport,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){// Bind keyboard shortcuts to delete features
-if(this.props.redlining.action&&!prevProps.redlining.action){Mousetrap.bind("del",this.triggerDelete);Mousetrap.bind("backspace",this.triggerDelete)}else if(!this.props.redlining.action&&prevProps.redlining.action){Mousetrap.unbind("del",this.triggerDelete);Mousetrap.unbind("backspace",this.triggerDelete)}// Handle delete action immediately and reset the redlining state to the previous action
-if(this.props.redlining.action==="Delete"){this.deleteCurrentFeature();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){// Commit to previous layer in case layer changed
-this.reset(prevProps.redlining);if(this.props.redlining.action==="Draw"){this.addDrawInteraction()}else if(this.props.redlining.action==="Transform"){this.addTransformInteraction()}else if(this.props.redlining.action==="Pick"||this.props.redlining.action==="Buffer"){this.addPickInteraction()}else if(this.props.redlining.action==="PickDraw"){this.addPickDrawInteraction()}}if(this.currentFeature){// Update feature style
-if(this.props.redlining.style!==prevProps.redlining.style){this.updateFeatureStyle(this.props.redlining.style)}// 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()}}}},{key:"render",value:function render(){var _this2=this;if(this.props.redlining.numericInput){return/*#__PURE__*/React.createElement(NumericInputWindow,{feature:this.props.redlining.selectedFeature,onClose:function onClose(){return _this2.props.changeRedliningState({numericInput:false})},onFeatureChanged:this.updateCurrentFeature})}return null}}])}(React.Component);_defineProperty(RedliningSupport,"propTypes",{addLayerFeatures:PropTypes.func,changeRedliningState:PropTypes.func,displayCrs:PropTypes.string,map:PropTypes.object,mapCrs:PropTypes.string,redlining:PropTypes.object,removeLayerFeatures:PropTypes.func});_defineProperty(RedliningSupport,"defaultProps",{redlining:{}});export default connect(function(state){return{displayCrs:state.map.displayCrs,mapCrs:state.map.projection,redlining:state.redlining}},{changeRedliningState:changeRedliningState,addLayerFeatures:addLayerFeatures,removeLayerFeatures:removeLayerFeatures})(RedliningSupport);
+ */
+var RedliningSupport = /*#__PURE__*/function (_React$Component) {
+  function RedliningSupport(props) {
+    var _this;
+    _classCallCheck(this, RedliningSupport);
+    _this = _callSuper(this, RedliningSupport, [props]);
+    _defineProperty(_this, "updateCurrentFeature", function (feature) {
+      if (_this.currentFeature && _this.props.redlining.selectedFeature) {
+        if (feature.circleParams) {
+          var circleParams = feature.circleParams;
+          _this.currentFeature.setGeometry(new ol.geom.Circle(circleParams.center, circleParams.radius));
+        } else {
+          _this.currentFeature.getGeometry().setCoordinates(feature.geometry.coordinates);
+        }
+        _this.props.changeRedliningState({
+          selectedFeature: feature,
+          geomType: feature.shape
+        });
+      }
+    });
+    _defineProperty(_this, "styleOptions", function (styleProps, isText) {
+      return {
+        strokeColor: isText ? styleProps.textOutlineColor : styleProps.borderColor,
+        strokeWidth: 1 + 0.5 * styleProps.size,
+        strokeDash: styleProps.strokeDash,
+        fillColor: isText ? styleProps.textFillColor : styleProps.fillColor,
+        circleRadius: 5 + styleProps.size,
+        headmarker: styleProps.headmarker,
+        tailmarker: styleProps.tailmarker
+      };
+    });
+    _defineProperty(_this, "styleProps", function (feature) {
+      var styleOptions = feature.get('styleOptions');
+      var label = feature.get("label") || "";
+      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";
+      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);
+      _this.blockOnChange = false;
+    });
+    _defineProperty(_this, "styleFunction", function (feature) {
+      var styleOptions = feature.get("styleOptions");
+      var styleName = feature.get("styleName");
+      var styles = [];
+      if (styleName === "text") {
+        styles.push(_this.selectedTextStyle(feature, styleOptions));
+      }
+      styles.push.apply(styles, _toConsumableArray(FeatureStyles[styleName](feature, styleOptions)));
+      var shape = feature.get('shape');
+      var geomTypeConfig = GeomTypeConfig[shape];
+      if ((geomTypeConfig || {}).drawNodes !== false) {
+        styles.push(_this.selectedStyle);
+      }
+      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);
+    });
+    _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, "waitForFeatureAndLayer", function (layerId, featureId, callback) {
+      var redliningLayer = _this.searchRedliningLayer(layerId);
+      if (!redliningLayer) {
+        OlLayerAdded.connect(function (layer) {
+          if (layer.get("id") === layerId) {
+            var feature = featureId ? layer.getSource().getFeatureById(featureId) : null;
+            callback(layer, feature);
+            return true;
+          }
+          return false;
+        });
+      } else if (featureId) {
+        var feature = redliningLayer.getSource().getFeatureById(featureId);
+        if (feature) {
+          callback(redliningLayer, feature);
+        } else {
+          OlLayerUpdated.connect(function (layer) {
+            if (layer.get("id") === layerId) {
+              var feat = layer.getSource().getFeatureById(featureId);
+              if (feat) {
+                callback(layer, feat);
+                return true;
+              }
+            }
+            return false;
+          });
+        }
+      } else {
+        callback(redliningLayer, null);
+      }
+    });
+    _defineProperty(_this, "enterTemporaryEditMode", function (featureId, layerId, editTool) {
+      _this.waitForFeatureAndLayer(layerId, featureId, function (redliningLayer, feature) {
+        if (!feature) {
+          return;
+        }
+        _this.setCurrentFeature(feature);
+        if (editTool === 'Transform') {
+          _this.setupTransformInteraction([_this.currentFeature]);
+        } else {
+          _this.setupModifyInteraction([_this.currentFeature]);
+        }
+        _this.picking = true;
+      });
+    });
+    _defineProperty(_this, "leaveTemporaryEditMode", function () {
+      if (_this.currentFeature) {
+        _this.commitCurrentFeature(_this.props.redlining);
+      }
+      if (_this.picking) {
+        // Remove modify interactions
+        _this.props.map.removeInteraction(_this.interactions.pop());
+        _this.picking = false;
+      }
+    });
+    _defineProperty(_this, "addPickInteraction", function () {
+      var redliningLayer = _this.searchRedliningLayer(_this.props.redlining.layer);
+      if (!redliningLayer) {
+        return;
+      }
+      var selectInteraction = new ol.interaction.Select({
+        layers: [redliningLayer],
+        hitTolerance: 5
+      });
+      var currentEditInteraction = null;
+      selectInteraction.on('select', function (evt) {
+        if (evt.selected.length === 1 && evt.selected[0] === _this.currentFeature) {
+          return;
+        }
+        if (_this.currentFeature) {
+          _this.commitCurrentFeature(_this.props.redlining);
+        }
+        if (currentEditInteraction) {
+          _this.props.map.removeInteraction(currentEditInteraction);
+          _this.interactions = _this.interactions.filter(function (i) {
+            return i !== currentEditInteraction;
+          });
+          currentEditInteraction = null;
+        }
+        if (evt.selected.length === 1) {
+          _this.setCurrentFeature(evt.selected[0]);
+          var geomTypeConfig = GeomTypeConfig[_this.currentFeature.get('shape')];
+          if (geomTypeConfig && geomTypeConfig.editTool === 'Transform') {
+            currentEditInteraction = _this.setupTransformInteraction([_this.currentFeature]);
+            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);
+                currentEditInteraction.setSelection(new ol.Collection());
+              }
+            });
+          } else {
+            currentEditInteraction = _this.setupModifyInteraction(selectInteraction.getFeatures().getArray());
+          }
+        }
+      }, _this);
+      if (_this.props.redlining.action === 'PickDraw') {
+        _this.props.map.on('click', _this.maybeEnterTemporaryDrawMode);
+      }
+      _this.props.map.addInteraction(selectInteraction);
+      _this.interactions.push(selectInteraction);
+      _this.picking = true;
+    });
+    _defineProperty(_this, "addTransformInteraction", function () {
+      var redliningLayer = _this.searchRedliningLayer(_this.props.redlining.layer);
+      if (!redliningLayer) {
+        return;
+      }
+      var transformInteraction = _this.setupTransformInteraction();
+      transformInteraction.on('select', function (evt) {
+        if (evt.feature === _this.currentFeature) {
+          return;
+        }
+        if (_this.currentFeature) {
+          _this.commitCurrentFeature(_this.props.redlining);
+        }
+        if (evt.feature) {
+          _this.setCurrentFeature(evt.feature);
+        }
+      });
+      _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) {
+        return;
+      }
+      var featureHit = false;
+      _this.props.map.forEachFeatureAtPixel(ev.pixel, function (feature, layer) {
+        featureHit |= layer === redliningLayer;
+      }, {
+        hitTolerance: 5
+      });
+      if (!redliningLayer || featureHit) {
+        return;
+      }
+      _this.reset(_this.props.redlining);
+      _this.props.map.un('click', _this.maybeEnterTemporaryDrawMode);
+      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) {
+        _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 () {
+        // Draw end
+        _this.commitCurrentFeature(_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 () {
+          return _this.addPickInteraction(true);
+        }, 300);
+      }, _this);
+      _this.props.map.addInteraction(drawInteraction);
+      _this.interactions.push(drawInteraction);
+      _this.picking = false;
+      var clickCoord = MapUtils.getHook(MapUtils.GET_SNAPPED_COORDINATES_FROM_PIXEL_HOOK)(ev.pixel);
+      drawInteraction.appendCoordinates([clickCoord]);
+      if (_this.props.redlining.geomType === 'Point') {
+        drawInteraction.finishDrawing();
+      }
+    });
+    _defineProperty(_this, "setupModifyInteraction", function () {
+      var selectedFeatures = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      var modifyInteraction = new ol.interaction.Modify({
+        features: new ol.Collection(selectedFeatures),
+        condition: function condition(event) {
+          return event.originalEvent.buttons === 1;
+        },
+        deleteCondition: function deleteCondition(event) {
+          // delete vertices on SHIFT + click
+          if (event.type === "pointerdown" && ol.events.condition.shiftKeyOnly(event)) {
+            _this.props.map.setIgnoreNextClick(true);
+          }
+          return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
+        }
+      });
+      modifyInteraction.on('modifyend', _this.updateSelectedFeature);
+      _this.props.map.addInteraction(modifyInteraction);
+      _this.interactions.push(modifyInteraction);
+      return modifyInteraction;
+    });
+    _defineProperty(_this, "setupTransformInteraction", function () {
+      var selectedFeatures = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      var transformInteraction = new ol.interaction.Transform({
+        stretch: false,
+        keepAspectRatio: function keepAspectRatio(ev) {
+          return _this.currentFeature ? GeomTypeConfig[_this.currentFeature.get('shape')].regular || ol.events.condition.shiftKeyOnly(ev) : false;
+        }
+      });
+      transformInteraction.on('rotating', function (e) {
+        if (_this.currentFeature.get('shape') === 'Text') {
+          _this.currentFeature.set('rotation', -e.angle);
+        }
+      });
+      transformInteraction.on('rotateend', _this.updateSelectedFeature);
+      transformInteraction.on('translateend', _this.updateSelectedFeature);
+      transformInteraction.on('scaleend', _this.updateSelectedFeature);
+      _this.props.map.addInteraction(transformInteraction);
+      _this.interactions.push(transformInteraction);
+      transformInteraction.setSelection(new ol.Collection(selectedFeatures));
+      return transformInteraction;
+    });
+    _defineProperty(_this, "updateSelectedFeature", function () {
+      var _featureObj$shape2;
+      var featureObj = _this.currentFeatureObject();
+      _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
+      });
+    });
+    _defineProperty(_this, "triggerDelete", function () {
+      _this.props.changeRedliningState({
+        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, "commitCurrentFeature", function (redliningProps) {
+      var _feature$geometry;
+      var newFeature = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var feature = _this.currentFeatureObject();
+      if (!feature) {
+        return;
+      }
+      // 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]);
+        }
+        _this.resetSelectedFeature();
+        return;
+      }
+      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();
+    });
+    _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
+        });
+      }
+    });
+    _defineProperty(_this, "reset", function (redliningProps) {
+      while (_this.interactions.length > 0) {
+        _this.props.map.removeInteraction(_this.interactions.shift());
+      }
+      if (_this.picking) {
+        _this.commitCurrentFeature(redliningProps, false);
+      } else {
+        _this.resetSelectedFeature();
+      }
+      _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;
+      }
+      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()
+        };
+      }
+      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;
+      // 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;
+      // Don't store empty label prop
+      if (feature.properties.label === "") {
+        delete feature.properties.label;
+      }
+      return feature;
+    });
+    _this.interactions = [];
+    _this.picking = false;
+    _this.currentFeature = null;
+    _this.blockOnChange = false;
+    _this.selectedTextStyle = function (feature, opts) {
+      return new ol.style.Style({
+        text: new ol.style.Text({
+          font: '10pt sans-serif',
+          text: feature.getProperties().label || "",
+          rotation: feature.getProperties().rotation || 0,
+          scale: opts.strokeWidth,
+          fill: new ol.style.Fill({
+            color: opts.textFillColor
+          }),
+          stroke: new ol.style.Stroke({
+            color: [0, 0, 0, 0.5],
+            width: 4
+          })
+        })
+      });
+    };
+    var geometryFunction = function geometryFunction(feature) {
+      if (feature.getGeometry().getType() === "Point") {
+        return new ol.geom.MultiPoint([feature.getGeometry().getCoordinates()]);
+      } else if (feature.getGeometry().getType() === "LineString") {
+        return new ol.geom.MultiPoint(feature.getGeometry().getCoordinates());
+      } else if (feature.getGeometry().getType() === "Polygon") {
+        return new ol.geom.MultiPoint(feature.getGeometry().getCoordinates()[0]);
+      } else if (feature.getGeometry().getType() === "Circle") {
+        var center = feature.getGeometry().getCenter();
+        return new ol.geom.MultiPoint([center, [center[0] + feature.getGeometry().getRadius(), center[1]]]);
+      }
+      return null;
+    };
+    _this.selectedStyle = FeatureStyles.interactionVertex({
+      geometryFunction: geometryFunction
+    });
+    return _this;
+  }
+  _inherits(RedliningSupport, _React$Component);
+  return _createClass(RedliningSupport, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      // Bind keyboard shortcuts to delete features
+      if (this.props.redlining.action && !prevProps.redlining.action) {
+        Mousetrap.bind('del', this.triggerDelete);
+        Mousetrap.bind('backspace', this.triggerDelete);
+      } else if (!this.props.redlining.action && prevProps.redlining.action) {
+        Mousetrap.unbind('del', this.triggerDelete);
+        Mousetrap.unbind('backspace', this.triggerDelete);
+      }
+      // Handle delete action immediately and reset the redlining state to the previous action
+      if (this.props.redlining.action === 'Delete') {
+        this.deleteCurrentFeature();
+        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) {
+        // Commit to previous layer in case layer changed
+        this.reset(prevProps.redlining);
+        if (this.props.redlining.action === 'Draw') {
+          this.addDrawInteraction();
+        } else if (this.props.redlining.action === 'Transform') {
+          this.addTransformInteraction();
+        } else if (this.props.redlining.action === 'Pick' || this.props.redlining.action === 'Buffer') {
+          this.addPickInteraction();
+        } else if (this.props.redlining.action === 'PickDraw') {
+          this.addPickDrawInteraction();
+        }
+      }
+      if (this.currentFeature) {
+        // Update feature style
+        if (this.props.redlining.style !== prevProps.redlining.style) {
+          this.updateFeatureStyle(this.props.redlining.style);
+        }
+        // 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();
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      if (this.props.redlining.numericInput) {
+        return /*#__PURE__*/React.createElement(NumericInputWindow, {
+          feature: this.props.redlining.selectedFeature,
+          onClose: function onClose() {
+            return _this2.props.changeRedliningState({
+              numericInput: false
+            });
+          },
+          onFeatureChanged: this.updateCurrentFeature
+        });
+      }
+      return null;
+    }
+  }]);
+}(React.Component);
+_defineProperty(RedliningSupport, "propTypes", {
+  addLayerFeatures: PropTypes.func,
+  changeRedliningState: PropTypes.func,
+  displayCrs: PropTypes.string,
+  map: PropTypes.object,
+  mapCrs: PropTypes.string,
+  redlining: PropTypes.object,
+  removeLayerFeatures: PropTypes.func
+});
+_defineProperty(RedliningSupport, "defaultProps", {
+  redlining: {}
+});
+export default connect(function (state) {
+  return {
+    displayCrs: state.map.displayCrs,
+    mapCrs: state.map.projection,
+    redlining: state.redlining
+  };
+}, {
+  changeRedliningState: changeRedliningState,
+  addLayerFeatures: addLayerFeatures,
+  removeLayerFeatures: removeLayerFeatures
+})(RedliningSupport);