qwc2 2025.9.24 → 2025.10.2

package/plugins/GeometryDigitizer.js

@@ -36,7 +36,7 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *   }
  * }
  * ```
- */var GeometryDigitizer=/*#__PURE__*/function(_React$Component){function GeometryDigitizer(props){var _this;_classCallCheck(this,GeometryDigitizer);_this=_callSuper(this,GeometryDigitizer,[props]);_defineProperty(_this,"onShow",function(mode){var layer={id:"__geomdigitizer",title:LocaleUtils.tr("geomdigitizer.layername"),role:LayerRole.USERLAYER,type:"vector",readonly:true};_this.props.addLayerFeatures(layer,[],true);_this.props.changeRedliningState({action:mode||"Pick",geomType:null,layer:"__geomdigitizer",layerTitle:"Geometry digitizer"})});_defineProperty(_this,"onHide",function(){_this.props.removeLayer("__geomdigitizer");_this.props.removeLayer("__geomdigitizerbuffer");_this.setState(GeometryDigitizer.defaultState);_this.props.resetRedliningState()});_defineProperty(_this,"renderBody",function(){var _this$props$layers$fi,_geomLinkData$target,_geomLinkData$target2,_this$props$theme$plu;var geomLinkData=_this.geometryLinkData(_this.state.geomLink);var activeButton=null;if(_this.state.pickGeomType){activeButton="Select"+_this.state.pickGeomType}else{activeButton=_this.props.redlining.action==="Draw"?_this.props.redlining.geomType:_this.props.redlining.action}var supportedGeomType=geomLinkData.geomType||["Point","LineString","Polygon"];var drawButtons=[supportedGeomType.includes("Polygon")&&!supportedGeomType.includes("Point")?{key:"Point",tooltip:LocaleUtils.tr("geomdigitizer.point_buffer"),icon:"point_buffer",data:{action:"Draw",geomType:"Point",text:""}}:{key:"Point",tooltip:LocaleUtils.tr("redlining.point"),icon:"point",data:{action:"Draw",geomType:"Point",text:""},disabled:!supportedGeomType.includes("Point")},supportedGeomType.includes("Polygon")&&!supportedGeomType.includes("LineString")?{key:"LineString",tooltip:LocaleUtils.tr("geomdigitizer.line_buffer"),icon:"line_buffer",data:{action:"Draw",geomType:"LineString",text:""}}:{key:"LineString",tooltip:LocaleUtils.tr("redlining.line"),icon:"line",data:{action:"Draw",geomType:"LineString",text:""},disabled:!supportedGeomType.includes("LineString")},{key:"Polygon",tooltip:LocaleUtils.tr("redlining.polygon"),icon:"polygon",data:{action:"Draw",geomType:"Polygon",text:""},disabled:!supportedGeomType.includes("Polygon")}];var editButtons=[{key:"Pick",tooltip:LocaleUtils.tr("redlining.pick"),icon:"pick",data:{action:"Pick",geomType:null,text:""}},{key:"Delete",tooltip:LocaleUtils.tr("redlining.delete"),icon:"trash",data:{action:"Delete",geomType:null},disabled:!_this.props.redlining.selectedFeature},{key:"Clear",tooltip:LocaleUtils.tr("geomdigitizer.clear"),icon:"clear",data:{action:"Clear"}}];var pickButtons=[{key:"SelectPoint",tooltip:LocaleUtils.tr("geomdigitizer.identifypick"),icon:"pick_point",data:{action:"SelectPoint",geomType:"Point"}},{key:"SelectPolygon",tooltip:LocaleUtils.tr("geomdigitizer.identifypickregion"),icon:"pick_region",data:{action:"SelectPolygon",geomType:"Polygon"}}];var featureLayer=_this.state.bufferDistance?"__geomdigitizerbuffer":"__geomdigitizer";var haveFeatures=!isEmpty((((_this$props$layers$fi=_this.props.layers.find(function(layer){return layer.id===featureLayer}))===null||_this$props$layers$fi===void 0?void 0:_this$props$layers$fi.features)||[]).filter(function(feature){return supportedGeomType.includes(feature.geometry.type.replace(/^Multi/,""))}));var target=(_geomLinkData$target=geomLinkData.target)!==null&&_geomLinkData$target!==void 0&&_geomLinkData$target.iframedialog?"geomdigitizer-output-window":(_geomLinkData$target2=geomLinkData.target)!==null&&_geomLinkData$target2!==void 0?_geomLinkData$target2:"_blank";return/*#__PURE__*/React.createElement("div",{className:"redlining-buttongroups"},/*#__PURE__*/React.createElement("div",{className:"redlining-group"},/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("redlining.draw")),/*#__PURE__*/React.createElement(ButtonBar,{active:activeButton,buttons:drawButtons,onClick:function onClick(key,data){return _this.actionChanged(data)}})),/*#__PURE__*/React.createElement("div",{className:"redlining-group"},/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("redlining.edit")),/*#__PURE__*/React.createElement(ButtonBar,{active:activeButton,buttons:editButtons,onClick:function onClick(key,data){return _this.actionChanged(data)}})),/*#__PURE__*/React.createElement("div",{className:"redlining-group"},/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("redlining.pick")),/*#__PURE__*/React.createElement(ButtonBar,{active:activeButton,buttons:pickButtons,onClick:function onClick(key,data){return _this.actionChanged(data)}})),/*#__PURE__*/React.createElement("div",{className:"redlining-group"},/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("redlining.buffer")),/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement(NumberInput,{max:99999,min:-99999,mobile:true,onChange:_this.computeBuffer,suffix:" m",value:_this.state.bufferDistance}))),/*#__PURE__*/React.createElement("div",{className:"redlining-group"},/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("geomdigitizer.applink")),/*#__PURE__*/React.createElement("div",{className:"controlgroup"},/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setState({geomLink:ev.target.value})},value:_this.state.geomLink},/*#__PURE__*/React.createElement("option",{value:""},LocaleUtils.tr("geomdigitizer.chooselink")),(((_this$props$theme$plu=_this.props.theme.pluginData)===null||_this$props$theme$plu===void 0?void 0:_this$props$theme$plu.geometryLinks)||[]).map(function(entry){return/*#__PURE__*/React.createElement("option",{key:entry,value:entry},_this.geometryLinkData(entry).title)})),/*#__PURE__*/React.createElement("form",{action:geomLinkData.url,method:"post",onSubmit:_this.submitGeometryLink,target:target},/*#__PURE__*/React.createElement("input",{name:"csrf_token",type:"hidden",value:MiscUtils.getCsrfToken()}),/*#__PURE__*/React.createElement("input",{name:"GEOMETRIES",type:"hidden"}),/*#__PURE__*/React.createElement("input",{name:"GEOMCOUNT",type:"hidden"}),/*#__PURE__*/React.createElement("input",{name:"BUFFERDIST",type:"hidden"}),Object.entries(geomLinkData.params||{}).map(function(_ref){var _ref2=_slicedToArray(_ref,2),key=_ref2[0],value=_ref2[1];return/*#__PURE__*/React.createElement("input",{key:key,name:key,type:"hidden",value:value})}),/*#__PURE__*/React.createElement("button",{className:"button",disabled:!geomLinkData.url||!haveFeatures,type:"submit"},LocaleUtils.tr("geomdigitizer.send"))))))});_defineProperty(_this,"renderOutputWindow",function(){if(!_this.state.outputWindowTitle){return null}var controls=[{icon:"print",callback:function callback(){window.frames["geomdigitizer-output-window"].focus();window.frames["geomdigitizer-output-window"].print()}}];return/*#__PURE__*/React.createElement(ResizeableWindow,{dockable:false,extraControls:controls,initialHeight:_this.state.outputWindowSize.h>0?_this.state.outputWindowSize.h:0.75*window.innerHeight,initialWidth:_this.state.outputWindowSize.w>0?_this.state.outputWindowSize.w:320,initialX:0,initialY:0,key:"OutputWindow",onClose:function onClose(){return _this.setState({outputWindowVisible:false,outputLoaded:false})},title:_this.state.outputWindowTitle,visible:_this.state.outputWindowVisible},/*#__PURE__*/React.createElement("div",{className:"geomdigitizer-output-window-body",role:"body"},!_this.state.outputLoaded?/*#__PURE__*/React.createElement("span",{className:"geomdigitizer-output-window-wait"},/*#__PURE__*/React.createElement(Spinner,null)," ",/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("geomdigitizer.wait"))):null,/*#__PURE__*/React.createElement("iframe",{name:"geomdigitizer-output-window",onLoad:function onLoad(){return _this.setState({outputLoaded:true})}})))});_defineProperty(_this,"actionChanged",function(data){if(data.action==="Clear"){_this.props.changeRedliningState({action:"Delete"});_this.setState({pickGeomType:null});_this.props.clearLayer("__geomdigitizer");_this.props.clearLayer("__geomdigitizerbuffer")}else if(data.action.startsWith("Select")){_this.props.changeRedliningState({action:null,geomType:null});_this.setState({pickGeomType:data.geomType})}else if(data.action==="Delete"){_this.props.changeRedliningState({action:"Delete"});if(_this.props.redlining.selectedFeature){_this.props.removeLayerFeatures("__geomdigitizerbuffer",[_this.props.redlining.selectedFeature.id])}}else{_this.props.changeRedliningState(_objectSpread(_objectSpread({},data),{},{style:_this.redliningStyle(data.geomType)}));_this.setState({pickGeomType:null})}});_defineProperty(_this,"computeBuffer",function(distance){distance=distance||0;_this.setState({bufferDistance:distance});import("@turf/buffer").then(function(bufferMod){var buffer=bufferMod["default"];var layer=_this.props.layers.find(function(l){return l.id==="__geomdigitizer"});if(!layer||distance===0){_this.props.removeLayer("__geomdigitizerbuffer");return}var bufferfeatures=[];(layer.features||[]).forEach(function(feature){if(_this.props.redlining.selectedFeature&&_this.props.redlining.selectedFeature.id===feature.id){feature=_this.props.redlining.selectedFeature}var wgsGeometry=VectorLayerUtils.reprojectGeometry(feature.geometry,feature.crs,"EPSG:4326");var wgsFeature=_objectSpread(_objectSpread({},feature),{},{geometry:wgsGeometry});var output=buffer(wgsFeature,distance,{units:"meters"});if(output&&output.geometry){output.geometry=VectorLayerUtils.reprojectGeometry(output.geometry,"EPSG:4326",feature.crs);output.id=feature.id;output.styleName="default";output.styleOptions=_this.featureStyleOptions(output.geometry.type,"__geomdigitizerbuffer",true);bufferfeatures.push(output)}});if(!isEmpty(bufferfeatures)){var bufferlayer={id:"__geomdigitizerbuffer",title:LocaleUtils.tr("geomdigitizer.bufferlayername"),role:LayerRole.USERLAYER,type:"vector",readonly:true};_this.props.addLayerFeatures(bufferlayer,bufferfeatures,true)}})});_defineProperty(_this,"updateFeatureBuffer",function(feature){import("@turf/buffer").then(function(bufferMod){var buffer=bufferMod["default"];var wgsGeometry=VectorLayerUtils.reprojectGeometry(feature.geometry,feature.crs,"EPSG:4326");var wgsFeature=_objectSpread(_objectSpread({},feature),{},{geometry:wgsGeometry});var output=buffer(wgsFeature,_this.state.bufferDistance,{units:"meters"});if(output&&output.geometry){output.geometry=VectorLayerUtils.reprojectGeometry(output.geometry,"EPSG:4326",feature.crs);output.id=feature.id;output.styleName="default";output.styleOptions=_this.featureStyleOptions(output.geometry.type,"__geomdigitizerbuffer",true);_this.props.addLayerFeatures({id:"__geomdigitizerbuffer"},[output])}})});_defineProperty(_this,"redliningStyle",function(geomType){var geomLinkData=_this.geometryLinkData(_this.state.geomLink);var supportedGeomType=_this.state.geomLink?geomLinkData.geomType||["Point","LineString","Polygon"]:[];var featureStyle=supportedGeomType.includes(geomType)&&_this.state.bufferDistance===0?_this.styleActive:_this.styleInactive;return{borderColor:featureStyle.strokeColor,size:featureStyle.strokeWidth,fillColor:featureStyle.fillColor}});_defineProperty(_this,"featureStyleOptions",function(geometryType,layerId,bufferActive){var geomLinkData=_this.geometryLinkData(_this.state.geomLink);var supportedGeomType=geomLinkData.geomType||[];if(layerId==="__geomdigitizer"&&bufferActive){return _this.styleInactive}return supportedGeomType.includes(geometryType.replace(/^Multi/,""))?_this.styleActive:_this.styleInactive});_defineProperty(_this,"geometryLinkData",function(name){var _this$props$themes$pl;return(((_this$props$themes$pl=_this.props.themes.pluginData)===null||_this$props$themes$pl===void 0?void 0:_this$props$themes$pl.geometryLinks)||[]).find(function(entry){return entry.name===name})||{}});_defineProperty(_this,"submitGeometryLink",function(ev){var features=[];var layer=_this.props.layers.find(function(l){return l.id==="__geomdigitizer"});features=(layer||{}).features||[];if(_this.props.redlining.selectedFeature){features=features.filter(function(feature){return feature.id!==_this.props.redlining.selectedFeature.id});features.push(_this.props.redlining.selectedFeature)}var invalidPoly=features.find(function(feature){return feature.geometry.type==="Polygon"&&!isEmpty(polySelfIntersections(feature).geometry.coordinates)});if(invalidPoly){/* eslint-disable-next-line */alert(LocaleUtils.tr("geomdigitizer.selfinter"));ev.preventDefault();return}var data=_this.geometryLinkData(_this.state.geomLink);var supportedGeomType=data.geomType||[];var geometries=features.filter(function(feature){return supportedGeomType.includes(_this.state.bufferDistance>0?"Polygon":feature.geometry.type.replace(/^Multi/,""))}).map(function(feature){return VectorLayerUtils.geoJSONGeomToWkt(feature.geometry)});if(isEmpty(geometries)){ev.preventDefault();return}else{ev.target.GEOMETRIES.value=geometries.join(";");ev.target.GEOMCOUNT.value=geometries.length;ev.target.BUFFERDIST.value=_this.state.bufferDistance}if(ev.target.target==="geomdigitizer-output-window"){_this.setState({outputWindowVisible:true,outputLoaded:false,outputWindowSize:{w:data.target.w,h:data.target.h},outputWindowTitle:data.target.iframedialog})}else{_this.setState({outputWindowVisible:false,outputLoaded:false,outputWindowSize:null,outputWindowTitle:""})}});_defineProperty(_this,"selectFeature",function(layername,feature){var geomdigitizerlayer={id:"__geomdigitizer"};var addFeature=_objectSpread(_objectSpread({},feature),{},{styleName:"default",styleOptions:_this.featureStyleOptions(feature.geometry.type,"__geomdigitizer",_this.state.bufferDistance!==0)});_this.props.addLayerFeatures(geomdigitizerlayer,[addFeature])});var defaultStyle=_objectSpread(_objectSpread({},ConfigUtils.getConfigProp("defaultFeatureStyle")),{},{strokeDash:[]});_this.styleActive=_objectSpread(_objectSpread({},defaultStyle),props.styleActive);_this.styleInactive=_objectSpread(_objectSpread({},defaultStyle),props.styleInactive);_this.state=GeometryDigitizer.defaultState;return _this}_inherits(GeometryDigitizer,_React$Component);return _createClass(GeometryDigitizer,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this2=this;if(!this.props.active){return}// Refresh buffer when layer features changed
+ */var GeometryDigitizer=/*#__PURE__*/function(_React$Component){function GeometryDigitizer(props){var _this;_classCallCheck(this,GeometryDigitizer);_this=_callSuper(this,GeometryDigitizer,[props]);_defineProperty(_this,"onShow",function(mode){var layer={id:"__geomdigitizer",title:LocaleUtils.tr("geomdigitizer.layername"),role:LayerRole.USERLAYER,type:"vector",readonly:true};_this.props.addLayerFeatures(layer,[],true);_this.props.changeRedliningState({action:mode||"Pick",geomType:null,layer:"__geomdigitizer",layerTitle:"Geometry digitizer"})});_defineProperty(_this,"onHide",function(){_this.props.removeLayer("__geomdigitizer");_this.props.removeLayer("__geomdigitizerbuffer");_this.setState(GeometryDigitizer.defaultState);_this.props.resetRedliningState()});_defineProperty(_this,"renderBody",function(){var _this$props$layers$fi,_geomLinkData$target,_geomLinkData$target2,_this$props$theme$plu;var geomLinkData=_this.geometryLinkData(_this.state.geomLink);var activeButton=null;if(_this.state.pickGeomType){activeButton="Select"+_this.state.pickGeomType}else{activeButton=_this.props.redlining.action==="Draw"?_this.props.redlining.geomType:_this.props.redlining.action}var supportedGeomType=geomLinkData.geomType||["Point","LineString","Polygon"];var drawButtons=[supportedGeomType.includes("Polygon")&&!supportedGeomType.includes("Point")?{key:"Point",tooltip:LocaleUtils.tr("geomdigitizer.point_buffer"),icon:"point_buffer",data:{action:"Draw",geomType:"Point",text:""}}:{key:"Point",tooltip:LocaleUtils.tr("redlining.point"),icon:"point",data:{action:"Draw",geomType:"Point",text:""},disabled:!supportedGeomType.includes("Point")},supportedGeomType.includes("Polygon")&&!supportedGeomType.includes("LineString")?{key:"LineString",tooltip:LocaleUtils.tr("geomdigitizer.line_buffer"),icon:"line_buffer",data:{action:"Draw",geomType:"LineString",text:""}}:{key:"LineString",tooltip:LocaleUtils.tr("redlining.line"),icon:"line",data:{action:"Draw",geomType:"LineString",text:""},disabled:!supportedGeomType.includes("LineString")},{key:"Polygon",tooltip:LocaleUtils.tr("redlining.polygon"),icon:"polygon",data:{action:"Draw",geomType:"Polygon",text:""},disabled:!supportedGeomType.includes("Polygon")}];var editButtons=[{key:"Pick",tooltip:LocaleUtils.tr("redlining.pick"),icon:"pick",data:{action:"Pick",geomType:null,text:""}},{key:"Delete",tooltip:LocaleUtils.tr("redlining.delete"),icon:"trash",data:{action:"Delete",geomType:null},disabled:!_this.props.redlining.selectedFeature},{key:"Clear",tooltip:LocaleUtils.tr("geomdigitizer.clear"),icon:"clear",data:{action:"Clear"}}];var pickButtons=[{key:"SelectPoint",tooltip:LocaleUtils.tr("geomdigitizer.identifypick"),icon:"pick_point",data:{action:"SelectPoint",geomType:"Point"}},{key:"SelectPolygon",tooltip:LocaleUtils.tr("geomdigitizer.identifypickregion"),icon:"pick_region",data:{action:"SelectPolygon",geomType:"Polygon"}}];var featureLayer=_this.state.bufferDistance?"__geomdigitizerbuffer":"__geomdigitizer";var haveFeatures=!isEmpty((((_this$props$layers$fi=_this.props.layers.find(function(layer){return layer.id===featureLayer}))===null||_this$props$layers$fi===void 0?void 0:_this$props$layers$fi.features)||[]).filter(function(feature){return supportedGeomType.includes(feature.geometry.type.replace(/^Multi/,""))}));var target=(_geomLinkData$target=geomLinkData.target)!==null&&_geomLinkData$target!==void 0&&_geomLinkData$target.iframedialog?"geomdigitizer-output-window":(_geomLinkData$target2=geomLinkData.target)!==null&&_geomLinkData$target2!==void 0?_geomLinkData$target2:"_blank";return/*#__PURE__*/React.createElement("div",{className:"redlining-controlsbar"},/*#__PURE__*/React.createElement("div",{className:"redlining-groupcontrol"},/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("redlining.draw")),/*#__PURE__*/React.createElement(ButtonBar,{active:activeButton,buttons:drawButtons,onClick:function onClick(key,data){return _this.actionChanged(data)}})),/*#__PURE__*/React.createElement("div",{className:"redlining-groupcontrol"},/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("redlining.edit")),/*#__PURE__*/React.createElement(ButtonBar,{active:activeButton,buttons:editButtons,onClick:function onClick(key,data){return _this.actionChanged(data)}})),/*#__PURE__*/React.createElement("div",{className:"redlining-groupcontrol"},/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("redlining.pick")),/*#__PURE__*/React.createElement(ButtonBar,{active:activeButton,buttons:pickButtons,onClick:function onClick(key,data){return _this.actionChanged(data)}})),/*#__PURE__*/React.createElement("div",{className:"redlining-groupcontrol"},/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("redlining.buffer")),/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement(NumberInput,{max:99999,min:-99999,mobile:true,onChange:_this.computeBuffer,suffix:" m",value:_this.state.bufferDistance}))),/*#__PURE__*/React.createElement("div",{className:"redlining-groupcontrol"},/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("geomdigitizer.applink")),/*#__PURE__*/React.createElement("div",{className:"controlgroup"},/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setState({geomLink:ev.target.value})},value:_this.state.geomLink},/*#__PURE__*/React.createElement("option",{value:""},LocaleUtils.tr("geomdigitizer.chooselink")),(((_this$props$theme$plu=_this.props.theme.pluginData)===null||_this$props$theme$plu===void 0?void 0:_this$props$theme$plu.geometryLinks)||[]).map(function(entry){return/*#__PURE__*/React.createElement("option",{key:entry,value:entry},_this.geometryLinkData(entry).title)})),/*#__PURE__*/React.createElement("form",{action:geomLinkData.url,method:"post",onSubmit:_this.submitGeometryLink,target:target},/*#__PURE__*/React.createElement("input",{name:"csrf_token",type:"hidden",value:MiscUtils.getCsrfToken()}),/*#__PURE__*/React.createElement("input",{name:"GEOMETRIES",type:"hidden"}),/*#__PURE__*/React.createElement("input",{name:"GEOMCOUNT",type:"hidden"}),/*#__PURE__*/React.createElement("input",{name:"BUFFERDIST",type:"hidden"}),Object.entries(geomLinkData.params||{}).map(function(_ref){var _ref2=_slicedToArray(_ref,2),key=_ref2[0],value=_ref2[1];return/*#__PURE__*/React.createElement("input",{key:key,name:key,type:"hidden",value:value})}),/*#__PURE__*/React.createElement("button",{className:"button",disabled:!geomLinkData.url||!haveFeatures,type:"submit"},LocaleUtils.tr("geomdigitizer.send"))))))});_defineProperty(_this,"renderOutputWindow",function(){if(!_this.state.outputWindowTitle){return null}var controls=[{icon:"print",callback:function callback(){window.frames["geomdigitizer-output-window"].focus();window.frames["geomdigitizer-output-window"].print()}}];return/*#__PURE__*/React.createElement(ResizeableWindow,{dockable:false,extraControls:controls,initialHeight:_this.state.outputWindowSize.h>0?_this.state.outputWindowSize.h:0.75*window.innerHeight,initialWidth:_this.state.outputWindowSize.w>0?_this.state.outputWindowSize.w:320,initialX:0,initialY:0,key:"OutputWindow",onClose:function onClose(){return _this.setState({outputWindowVisible:false,outputLoaded:false})},title:_this.state.outputWindowTitle,visible:_this.state.outputWindowVisible},/*#__PURE__*/React.createElement("div",{className:"geomdigitizer-output-window-body",role:"body"},!_this.state.outputLoaded?/*#__PURE__*/React.createElement("span",{className:"geomdigitizer-output-window-wait"},/*#__PURE__*/React.createElement(Spinner,null)," ",/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("geomdigitizer.wait"))):null,/*#__PURE__*/React.createElement("iframe",{name:"geomdigitizer-output-window",onLoad:function onLoad(){return _this.setState({outputLoaded:true})}})))});_defineProperty(_this,"actionChanged",function(data){if(data.action==="Clear"){_this.props.changeRedliningState({action:"Delete"});_this.setState({pickGeomType:null});_this.props.clearLayer("__geomdigitizer");_this.props.clearLayer("__geomdigitizerbuffer")}else if(data.action.startsWith("Select")){_this.props.changeRedliningState({action:null,geomType:null});_this.setState({pickGeomType:data.geomType})}else if(data.action==="Delete"){_this.props.changeRedliningState({action:"Delete"});if(_this.props.redlining.selectedFeature){_this.props.removeLayerFeatures("__geomdigitizerbuffer",[_this.props.redlining.selectedFeature.id])}}else{_this.props.changeRedliningState(_objectSpread(_objectSpread({},data),{},{style:_this.redliningStyle(data.geomType)}));_this.setState({pickGeomType:null})}});_defineProperty(_this,"computeBuffer",function(distance){distance=distance||0;_this.setState({bufferDistance:distance});import("@turf/buffer").then(function(bufferMod){var buffer=bufferMod["default"];var layer=_this.props.layers.find(function(l){return l.id==="__geomdigitizer"});if(!layer||distance===0){_this.props.removeLayer("__geomdigitizerbuffer");return}var bufferfeatures=[];(layer.features||[]).forEach(function(feature){if(_this.props.redlining.selectedFeature&&_this.props.redlining.selectedFeature.id===feature.id){feature=_this.props.redlining.selectedFeature}var wgsGeometry=VectorLayerUtils.reprojectGeometry(feature.geometry,feature.crs,"EPSG:4326");var wgsFeature=_objectSpread(_objectSpread({},feature),{},{geometry:wgsGeometry});var output=buffer(wgsFeature,distance,{units:"meters"});if(output&&output.geometry){output.geometry=VectorLayerUtils.reprojectGeometry(output.geometry,"EPSG:4326",feature.crs);output.id=feature.id;output.styleName="default";output.styleOptions=_this.featureStyleOptions(output.geometry.type,"__geomdigitizerbuffer",true);bufferfeatures.push(output)}});if(!isEmpty(bufferfeatures)){var bufferlayer={id:"__geomdigitizerbuffer",title:LocaleUtils.tr("geomdigitizer.bufferlayername"),role:LayerRole.USERLAYER,type:"vector",readonly:true};_this.props.addLayerFeatures(bufferlayer,bufferfeatures,true)}})});_defineProperty(_this,"updateFeatureBuffer",function(feature){import("@turf/buffer").then(function(bufferMod){var buffer=bufferMod["default"];var wgsGeometry=VectorLayerUtils.reprojectGeometry(feature.geometry,feature.crs,"EPSG:4326");var wgsFeature=_objectSpread(_objectSpread({},feature),{},{geometry:wgsGeometry});var output=buffer(wgsFeature,_this.state.bufferDistance,{units:"meters"});if(output&&output.geometry){output.geometry=VectorLayerUtils.reprojectGeometry(output.geometry,"EPSG:4326",feature.crs);output.id=feature.id;output.styleName="default";output.styleOptions=_this.featureStyleOptions(output.geometry.type,"__geomdigitizerbuffer",true);_this.props.addLayerFeatures({id:"__geomdigitizerbuffer"},[output])}})});_defineProperty(_this,"redliningStyle",function(geomType){var geomLinkData=_this.geometryLinkData(_this.state.geomLink);var supportedGeomType=_this.state.geomLink?geomLinkData.geomType||["Point","LineString","Polygon"]:[];var featureStyle=supportedGeomType.includes(geomType)&&_this.state.bufferDistance===0?_this.styleActive:_this.styleInactive;return{borderColor:featureStyle.strokeColor,size:featureStyle.strokeWidth,fillColor:featureStyle.fillColor}});_defineProperty(_this,"featureStyleOptions",function(geometryType,layerId,bufferActive){var geomLinkData=_this.geometryLinkData(_this.state.geomLink);var supportedGeomType=geomLinkData.geomType||[];if(layerId==="__geomdigitizer"&&bufferActive){return _this.styleInactive}return supportedGeomType.includes(geometryType.replace(/^Multi/,""))?_this.styleActive:_this.styleInactive});_defineProperty(_this,"geometryLinkData",function(name){var _this$props$themes$pl;return(((_this$props$themes$pl=_this.props.themes.pluginData)===null||_this$props$themes$pl===void 0?void 0:_this$props$themes$pl.geometryLinks)||[]).find(function(entry){return entry.name===name})||{}});_defineProperty(_this,"submitGeometryLink",function(ev){var features=[];var layer=_this.props.layers.find(function(l){return l.id==="__geomdigitizer"});features=(layer||{}).features||[];if(_this.props.redlining.selectedFeature){features=features.filter(function(feature){return feature.id!==_this.props.redlining.selectedFeature.id});features.push(_this.props.redlining.selectedFeature)}var invalidPoly=features.find(function(feature){return feature.geometry.type==="Polygon"&&!isEmpty(polySelfIntersections(feature).geometry.coordinates)});if(invalidPoly){/* eslint-disable-next-line */alert(LocaleUtils.tr("geomdigitizer.selfinter"));ev.preventDefault();return}var data=_this.geometryLinkData(_this.state.geomLink);var supportedGeomType=data.geomType||[];var geometries=features.filter(function(feature){return supportedGeomType.includes(_this.state.bufferDistance>0?"Polygon":feature.geometry.type.replace(/^Multi/,""))}).map(function(feature){return VectorLayerUtils.geoJSONGeomToWkt(feature.geometry)});if(isEmpty(geometries)){ev.preventDefault();return}else{ev.target.GEOMETRIES.value=geometries.join(";");ev.target.GEOMCOUNT.value=geometries.length;ev.target.BUFFERDIST.value=_this.state.bufferDistance}if(ev.target.target==="geomdigitizer-output-window"){_this.setState({outputWindowVisible:true,outputLoaded:false,outputWindowSize:{w:data.target.w,h:data.target.h},outputWindowTitle:data.target.iframedialog})}else{_this.setState({outputWindowVisible:false,outputLoaded:false,outputWindowSize:null,outputWindowTitle:""})}});_defineProperty(_this,"selectFeature",function(layername,feature){var geomdigitizerlayer={id:"__geomdigitizer"};var addFeature=_objectSpread(_objectSpread({},feature),{},{styleName:"default",styleOptions:_this.featureStyleOptions(feature.geometry.type,"__geomdigitizer",_this.state.bufferDistance!==0)});_this.props.addLayerFeatures(geomdigitizerlayer,[addFeature])});var defaultStyle=_objectSpread(_objectSpread({},ConfigUtils.getConfigProp("defaultFeatureStyle")),{},{strokeDash:[]});_this.styleActive=_objectSpread(_objectSpread({},defaultStyle),props.styleActive);_this.styleInactive=_objectSpread(_objectSpread({},defaultStyle),props.styleInactive);_this.state=GeometryDigitizer.defaultState;return _this}_inherits(GeometryDigitizer,_React$Component);return _createClass(GeometryDigitizer,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this2=this;if(!this.props.active){return}// Refresh buffer when layer features changed
 var newLayer=this.props.layers.find(function(layer){return layer.id==="__geomdigitizer"});var oldLayer=prevProps.layers.find(function(layer){return layer.id==="__geomdigitizer"});if((newLayer===null||newLayer===void 0?void 0:newLayer.features)!==(oldLayer===null||oldLayer===void 0?void 0:oldLayer.features)){this.computeBuffer(this.state.bufferDistance)}// Recompute buffer feature when selected feature changes and buffering is active
 if(this.state.bufferDistance!==0&&this.props.redlining.selectedFeature&&this.props.redlining.selectedFeature!==prevProps.redlining.selectedFeature){this.updateFeatureBuffer(this.props.redlining.selectedFeature)}// Update feature styles according to permissible geometry types
 if(this.state.geomLink!==prevState.geomLink){this.props.changeRedliningState({style:this.redliningStyle(this.props.redlining.geomType)});["__geomdigitizer","__geomdigitizerbuffer"].forEach(function(layerId){var layer=_this2.props.layers.find(function(l){return l.id===layerId});if(layer&&layer.features){var newFeatures=layer.features.map(function(feature){var newFeature=feature;if(_this2.props.redlining.selectedFeature&&_this2.props.redlining.selectedFeature.id===feature.id){newFeature=_this2.props.redlining.selectedFeature}return _objectSpread(_objectSpread({},newFeature),{},{styleOptions:_this2.featureStyleOptions(feature.geometry.type,layerId,_this2.state.bufferDistance!==0)})});_this2.props.addLayerFeatures(layer,newFeatures,true)}})}// Mark base geometries as inactive or active depending on whether buffering is active

package/plugins/HeightProfile.js

@@ -4,7 +4,7 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *
  * 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{Line}from"react-chartjs-2";import ReactDOM from"react-dom";import{connect}from"react-redux";import axios from"axios";import{Chart as ChartJS,CategoryScale,LinearScale,PointElement,LineElement,Title,Tooltip,Filler,BubbleController}from"chart.js";import FileSaver from"file-saver";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{v1 as uuidv1}from"uuid";import{addMarker,removeMarker}from"../actions/layers";import{changeMeasurementState}from"../actions/measurement";import Icon from"../components/Icon";import ResizeableWindow from"../components/ResizeableWindow";import Spinner from"../components/widgets/Spinner";import{getElevationInterface}from"../utils/ElevationInterface";import LayerUtils from"../utils/LayerUtils";import LocaleUtils from"../utils/LocaleUtils";import MapUtils from"../utils/MapUtils";import MeasureUtils from"../utils/MeasureUtils";import MiscUtils from"../utils/MiscUtils";import VectorLayerUtils from"../utils/VectorLayerUtils";import"./style/HeightProfile.css";ChartJS.register(CategoryScale,LinearScale,PointElement,LineElement,Title,Tooltip,Filler,BubbleController);var HeightProfilePrintDialog_=/*#__PURE__*/function(_React$PureComponent){function HeightProfilePrintDialog_(props){var _this;_classCallCheck(this,HeightProfilePrintDialog_);_this=_callSuper(this,HeightProfilePrintDialog_,[props]);_defineProperty(_this,"state",{initialized:false,imageUrl:""});_defineProperty(_this,"closePrintWindow",function(){_this.externalWindow.close()});_defineProperty(_this,"setWindowContent",function(){_this.externalWindow.addEventListener("beforeunload",_this.props.onClose,false);var container=_this.externalWindow.document.getElementById("heightprofilecontainer");if(container){var printBtn=_this.externalWindow.document.createElement("div");printBtn.id="print";printBtn.style.marginBottom="1em";printBtn.innerHTML="<style type=\"text/css\">@media print{ #print { display: none; }}</style>"+"<button onClick=\"(function(){window.print();})()\">"+LocaleUtils.tr("heightprofile.print")+"</button>";container.appendChild(printBtn);_this.imageEl=_this.externalWindow.document.createElement("div");_this.imageEl.id="map";_this.imageEl.innerHTML=LocaleUtils.tr("heightprofile.loadingimage");container.appendChild(_this.imageEl);_this.portalEl=_this.externalWindow.document.createElement("div");_this.portalEl.id="profile";container.appendChild(_this.portalEl);_this.setState({initialized:true});_this.externalWindow.document.body.style.overflowX="hidden"}else{_this.externalWindow.document.body.innerHTML="Broken template. An element with id=heightprofilecontainer must exist."}});_defineProperty(_this,"refreshImage",function(){var measurement=_this.props.measurement;var layer={type:"vector",opacity:255,features:[{type:"Feature",geometry:{coordinates:measurement.coordinates,type:"LineString"},styleOptions:{strokeColor:[255,0,0,1],strokeWidth:4},properties:{segment_labels:measurement.segment_lengths.map(function(length){return MeasureUtils.formatMeasurement(length,false,measurement.lenUnit)})}}]};var mapCrs=_this.props.map.projection;var scale=Math.round(MapUtils.computeForZoom(_this.props.map.scales,_this.props.map.zoom));var exportParams=LayerUtils.collectPrintParams(_this.props.layers,_this.props.theme,scale,mapCrs,true,false);var highlightParams=VectorLayerUtils.createPrintHighlighParams([layer],mapCrs);var imageParams=_objectSpread({SERVICE:"WMS",VERSION:"1.3.0",REQUEST:"GetMap",TRANSPARENT:"true",TILED:"false",CRS:_this.props.map.projection,BBOX:_this.props.map.bbox.bounds,WIDTH:_this.props.map.size.width,HEIGHT:_this.props.map.size.height,HIGHLIGHT_GEOM:highlightParams.geoms.join(";"),HIGHLIGHT_SYMBOL:highlightParams.styles.join(";"),HIGHLIGHT_LABELSTRING:highlightParams.labels.join(";"),HIGHLIGHT_LABELCOLOR:highlightParams.labelFillColors.join(";"),HIGHLIGHT_LABELBUFFERCOLOR:highlightParams.labelOutlineColors.join(";"),HIGHLIGHT_LABELBUFFERSIZE:highlightParams.labelOutlineSizes.join(";"),HIGHLIGHT_LABELSIZE:highlightParams.labelSizes.join(";"),HIGHLIGHT_LABEL_DISTANCE:highlightParams.labelDist.join(";"),HIGHLIGHT_LABEL_ROTATION:highlightParams.labelRotations.join(";"),csrf_token:MiscUtils.getCsrfToken()},exportParams);var baseUrl=_this.props.theme.url.split("?")[0];var query=Object.entries(imageParams).map(function(_ref){var _ref2=_slicedToArray(_ref,2),k=_ref2[0],v=_ref2[1];return"".concat(encodeURIComponent(k),"=").concat(encodeURIComponent(v))}).join("&");var src=baseUrl+"?"+query;if(src===_this.state.imageUrl){return}_this.setState({imageUrl:src});var options={headers:{"content-type":"application/x-www-form-urlencoded"},responseType:"blob"};axios.post(baseUrl,query,options).then(function(response){var reader=new FileReader;reader.readAsDataURL(response.data);reader.onload=function(){_this.imageEl.innerHTML="<img src=\"".concat(reader.result,"\" style=\"width: 100%\" />")}})["catch"](function(){// Fall back to GET
+ */import React from"react";import{Line}from"react-chartjs-2";import ReactDOM from"react-dom";import{connect}from"react-redux";import axios from"axios";import{Chart as ChartJS,CategoryScale,LinearScale,PointElement,LineElement,Title,Tooltip,Filler,BubbleController}from"chart.js";import FileSaver from"file-saver";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{v4 as uuidv4}from"uuid";import{addMarker,removeMarker}from"../actions/layers";import{changeMeasurementState}from"../actions/measurement";import Icon from"../components/Icon";import ResizeableWindow from"../components/ResizeableWindow";import Spinner from"../components/widgets/Spinner";import{getElevationInterface}from"../utils/ElevationInterface";import LayerUtils from"../utils/LayerUtils";import LocaleUtils from"../utils/LocaleUtils";import MapUtils from"../utils/MapUtils";import MeasureUtils from"../utils/MeasureUtils";import MiscUtils from"../utils/MiscUtils";import VectorLayerUtils from"../utils/VectorLayerUtils";import"./style/HeightProfile.css";ChartJS.register(CategoryScale,LinearScale,PointElement,LineElement,Title,Tooltip,Filler,BubbleController);var HeightProfilePrintDialog_=/*#__PURE__*/function(_React$PureComponent){function HeightProfilePrintDialog_(props){var _this;_classCallCheck(this,HeightProfilePrintDialog_);_this=_callSuper(this,HeightProfilePrintDialog_,[props]);_defineProperty(_this,"state",{initialized:false,imageUrl:""});_defineProperty(_this,"closePrintWindow",function(){_this.externalWindow.close()});_defineProperty(_this,"setWindowContent",function(){_this.externalWindow.addEventListener("beforeunload",_this.props.onClose,false);var container=_this.externalWindow.document.getElementById("heightprofilecontainer");if(container){var printBtn=_this.externalWindow.document.createElement("div");printBtn.id="print";printBtn.style.marginBottom="1em";printBtn.innerHTML="<style type=\"text/css\">@media print{ #print { display: none; }}</style>"+"<button onClick=\"(function(){window.print();})()\">"+LocaleUtils.tr("heightprofile.print")+"</button>";container.appendChild(printBtn);_this.imageEl=_this.externalWindow.document.createElement("div");_this.imageEl.id="map";_this.imageEl.innerHTML=LocaleUtils.tr("heightprofile.loadingimage");container.appendChild(_this.imageEl);_this.portalEl=_this.externalWindow.document.createElement("div");_this.portalEl.id="profile";container.appendChild(_this.portalEl);_this.setState({initialized:true});_this.externalWindow.document.body.style.overflowX="hidden"}else{_this.externalWindow.document.body.innerHTML="Broken template. An element with id=heightprofilecontainer must exist."}});_defineProperty(_this,"refreshImage",function(){var measurement=_this.props.measurement;var layer={type:"vector",opacity:255,features:[{type:"Feature",geometry:{coordinates:measurement.coordinates,type:"LineString"},styleOptions:{strokeColor:[255,0,0,1],strokeWidth:4},properties:{segment_labels:measurement.segment_lengths.map(function(length){return MeasureUtils.formatMeasurement(length,false,measurement.lenUnit)})}}]};var mapCrs=_this.props.map.projection;var scale=Math.round(MapUtils.computeForZoom(_this.props.map.scales,_this.props.map.zoom));var exportParams=LayerUtils.collectPrintParams(_this.props.layers,_this.props.theme,scale,mapCrs,true,false);var highlightParams=VectorLayerUtils.createPrintHighlighParams([layer],mapCrs);var imageParams=_objectSpread({SERVICE:"WMS",VERSION:"1.3.0",REQUEST:"GetMap",TRANSPARENT:"true",TILED:"false",CRS:_this.props.map.projection,BBOX:_this.props.map.bbox.bounds,WIDTH:_this.props.map.size.width,HEIGHT:_this.props.map.size.height,HIGHLIGHT_GEOM:highlightParams.geoms.join(";"),HIGHLIGHT_SYMBOL:highlightParams.styles.join(";"),HIGHLIGHT_LABELSTRING:highlightParams.labels.join(";"),HIGHLIGHT_LABELCOLOR:highlightParams.labelFillColors.join(";"),HIGHLIGHT_LABELBUFFERCOLOR:highlightParams.labelOutlineColors.join(";"),HIGHLIGHT_LABELBUFFERSIZE:highlightParams.labelOutlineSizes.join(";"),HIGHLIGHT_LABELSIZE:highlightParams.labelSizes.join(";"),HIGHLIGHT_LABEL_DISTANCE:highlightParams.labelDist.join(";"),HIGHLIGHT_LABEL_ROTATION:highlightParams.labelRotations.join(";"),csrf_token:MiscUtils.getCsrfToken()},exportParams);var baseUrl=_this.props.theme.url.split("?")[0];var query=Object.entries(imageParams).map(function(_ref){var _ref2=_slicedToArray(_ref,2),k=_ref2[0],v=_ref2[1];return"".concat(encodeURIComponent(k),"=").concat(encodeURIComponent(v))}).join("&");var src=baseUrl+"?"+query;if(src===_this.state.imageUrl){return}_this.setState({imageUrl:src});var options={headers:{"content-type":"application/x-www-form-urlencoded"},responseType:"blob"};axios.post(baseUrl,query,options).then(function(response){var reader=new FileReader;reader.readAsDataURL(response.data);reader.onload=function(){_this.imageEl.innerHTML="<img src=\"".concat(reader.result,"\" style=\"width: 100%\" />")}})["catch"](function(){// Fall back to GET
 _this.imageEl.innerHTML="<img src=\"".concat(src,"\" style=\"width: 100%\" />")})});_defineProperty(_this,"windowResized",function(){if(_this.chart){_this.chart.resize()}});_this.externalWindow=null;_this.chart=null;_this.portalEl=null;_this.imageEl=null;return _this}_inherits(HeightProfilePrintDialog_,_React$PureComponent);return _createClass(HeightProfilePrintDialog_,[{key:"componentDidMount",value:function componentDidMount(){var templatePath=MiscUtils.resolveAssetsPath(this.props.templatePath);this.externalWindow=window.open(templatePath,LocaleUtils.tr("heightprofile.title"),"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes");this.externalWindow.addEventListener("load",this.setWindowContent,false);this.externalWindow.addEventListener("resize",this.windowResized,false);window.addEventListener("beforeunload",this.closePrintWindow)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(this.props.layers!==prevProps.layers||this.props.map.bbox!==prevProps.map.bbox||this.state.initialized&&!prevState.initialized){this.refreshImage()}}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.closePrintWindow();window.removeEventListener("beforeunload",this.closePrintWindow)}},{key:"render",value:function render(){var _this2=this;if(!this.state.initialized){return null}return/*#__PURE__*/ReactDOM.createPortal(this.props.children(function(el){_this2.chart=el},false),this.portalEl)}}])}(React.PureComponent);_defineProperty(HeightProfilePrintDialog_,"propTypes",{children:PropTypes.func,layers:PropTypes.array,map:PropTypes.object,measurement:PropTypes.object,onClose:PropTypes.func,templatePath:PropTypes.string,theme:PropTypes.object});var HeightProfilePrintDialog=connect(function(state){return{layers:state.layers.flat,map:state.map,theme:state.theme.current}},{})(HeightProfilePrintDialog_);/**
  * Displays a height profile along a measured line.
  *
@@ -24,7 +24,7 @@ var stepSizeFact=Math.pow(10,Math.ceil(Math.log10(sampleDataset.totLength/10)));
 var segmentLengths=_this3.props.measurement.segment_lengths;var coo=_this3.props.measurement.coordinates;var x=0;for(var iSegment=0;iSegment<coo.length-1;++iSegment){if(_this3.pointOnSegment(pos,coo[iSegment],coo[iSegment+1])){var len=MeasureUtils.computeSegmentLengths([pos,coo[iSegment]],_this3.props.projection,_this3.props.measurement.geodesic)[0];x+=len;break}else{x+=segmentLengths[iSegment]}}var k=Math.min(1,x/data.totLength);var idx=Math.min(data.y.length-1,Math.floor(k*_this3.props.samples));_this3.showTooltip(idx)});_defineProperty(_this3,"pointOnSegment",function(q,p1,p2){var tol=1E-3;// Determine whether points lie on same line: cross-product (P2-P1) x (Q - P1) zero?
 var cross=(p2[0]-p1[0])*(q[1]-p1[1])-(q[0]-p1[0])*(p2[1]-p1[1]);if(Math.abs(cross)>tol){return false}// Determine if coordinates lie within segment coordinates
 if(Math.abs(p1[0]-p2[0])>tol){return p1[0]<=q[0]&&q[0]<=p2[0]||p2[0]<=q[0]&&q[0]<=p1[0]}else{return p1[1]<=q[1]&&q[1]<=p2[1]||p2[1]<=q[1]&&q[1]<=p1[1]}});_defineProperty(_this3,"exportProfile",function(){// const data = this.state.data[this.state.selectedDatasetIndex];
-_this3.state.selectedDatasetIndices.forEach(function(index){var data=_this3.state.data[index];if(!data.x){return}var csv="";csv+="index"+"\t"+"distance"+"\t"+"elevation"+"\n";data.x.forEach(function(x,idx){var sample={x:x,y:data.y[idx]};var prec=_this3.props.heightProfilePrecision;var distance=Math.round(sample.x*Math.pow(10,prec))/Math.pow(10,prec);var height=Math.round(sample.y*Math.pow(10,prec))/Math.pow(10,prec);csv+=String(idx).replace("\"","\"\"")+"\t"+String(distance)+"\t"+String(height)+"\n"});FileSaver.saveAs(new Blob([csv],{type:"text/plain;charset=utf-8"}),_this3.state.data.length>1?"heightprofile-".concat(data.dataset,".csv"):"heightprofile.csv")})});_this3.chart=null;_this3.profilePrintWindow=null;return _this3}_inherits(HeightProfile,_React$Component);return _createClass(HeightProfile,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(this.props.measurement.coordinates!==prevProps.measurement.coordinates){if(this.props.measurement.drawing===false&&this.props.measurement.geomType==="LineString"&&!isEmpty(this.props.measurement.coordinates)){this.queryElevations(this.props.measurement.coordinates,this.props.measurement.segment_lengths,this.props.projection)}else if(!isEmpty(this.state.data)){this.setState({data:{}});this.props.changeMeasurementState(_objectSpread(_objectSpread({},this.props.measurement),{},{pickPositionCallback:null}))}}}},{key:"queryElevations",value:function queryElevations(coordinates,distances,projection){var _this4=this;var reqId=uuidv1();this.setState({reqId:reqId});var totLength=this.props.measurement.length;getElevationInterface().getProfile(coordinates,distances,projection,this.props.samples).then(function(response){// Request changed
+_this3.state.selectedDatasetIndices.forEach(function(index){var data=_this3.state.data[index];if(!data.x){return}var csv="";csv+="index"+"\t"+"distance"+"\t"+"elevation"+"\n";data.x.forEach(function(x,idx){var sample={x:x,y:data.y[idx]};var prec=_this3.props.heightProfilePrecision;var distance=Math.round(sample.x*Math.pow(10,prec))/Math.pow(10,prec);var height=Math.round(sample.y*Math.pow(10,prec))/Math.pow(10,prec);csv+=String(idx).replace("\"","\"\"")+"\t"+String(distance)+"\t"+String(height)+"\n"});FileSaver.saveAs(new Blob([csv],{type:"text/plain;charset=utf-8"}),_this3.state.data.length>1?"heightprofile-".concat(data.dataset,".csv"):"heightprofile.csv")})});_this3.chart=null;_this3.profilePrintWindow=null;return _this3}_inherits(HeightProfile,_React$Component);return _createClass(HeightProfile,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(this.props.measurement.coordinates!==prevProps.measurement.coordinates){if(this.props.measurement.drawing===false&&this.props.measurement.geomType==="LineString"&&!isEmpty(this.props.measurement.coordinates)){this.queryElevations(this.props.measurement.coordinates,this.props.measurement.segment_lengths,this.props.projection)}else if(!isEmpty(this.state.data)){this.setState({data:{}});this.props.changeMeasurementState(_objectSpread(_objectSpread({},this.props.measurement),{},{pickPositionCallback:null}))}}}},{key:"queryElevations",value:function queryElevations(coordinates,distances,projection){var _this4=this;var reqId=uuidv4();this.setState({reqId:reqId});var totLength=this.props.measurement.length;getElevationInterface().getProfile(coordinates,distances,projection,this.props.samples).then(function(response){// Request changed
 if(_this4.state.reqId!==reqId){return}var elevationsList=response.list;if(!elevationsList){elevationsList=[{elevations:response,dataset:null}]}var data=elevationsList.map(function(entry,index){var elevations=entry.elevations;// Compute x-axis distances and get node points
 var nodes=[];var cumDist=distances[0];var distIdx=0;var y=elevations;var x=y.map(function(value,idx,a){var dist=idx/(a.length-1)*totLength;if(dist>=cumDist){nodes.push({x:dist,y:y[idx]});cumDist+=distances[++distIdx]}return dist});// First and last node
 nodes.unshift({x:x[0],y:y[0]});nodes.push({x:x[x.length-1],y:y[y.length-1]});var nonZeroElevations=elevations.filter(function(elev){return elev!==0});if(nonZeroElevations.length>0){return{dataset:entry.dataset||"".concat(LocaleUtils.tr("heightprofile.dhmdefaultname")," ").concat(index+1),x:x,y:elevations,maxY:Math.max.apply(Math,_toConsumableArray(elevations)),minY:Math.min.apply(Math,_toConsumableArray(nonZeroElevations)),totLength:totLength,nodes:nodes}}return null}).filter(function(entry){return entry!==null});_this4.setState(function(prevState){return{reqId:null,data:data,selectedDatasetIndices:prevState.selectedDatasetIndices.filter(function(i){return i<data.length})?prevState.selectedDatasetIndices:[0]}});_this4.props.changeMeasurementState(_objectSpread(_objectSpread({},_this4.props.measurement),{},{pickPositionCallback:_this4.pickPositionCallback}))})["catch"](function(error){_this4.setState({reqId:null,data:error?{error:error}:{}})})}},{key:"render",value:function render(){var _this5=this;if(isEmpty(this.state.data)&&!this.state.isloading){return null}var extraControls=[{icon:"circle",active:this.state.drawnodes,callback:function callback(){return _this5.setState(function(state){return{drawnodes:!state.drawnodes}})},title:LocaleUtils.tr("heightprofile.drawnodes")},{icon:"export",callback:this.exportProfile,title:LocaleUtils.tr("heightprofile.export")},{icon:"print",active:this.state.printdialog,callback:function callback(){return _this5.setState(function(state){return{printdialog:!state.printdialog}})},title:LocaleUtils.tr("heightprofile.print")}];return[/*#__PURE__*/React.createElement(ResizeableWindow,{dockable:"bottom",extraControls:extraControls,icon:"line",initialHeight:this.props.height,initialWidth:600,initiallyDocked:true,key:"ProfileDialog",onClose:this.onClose,onExternalWindowResized:this.resizeChart,splitScreenWhenDocked:true,title:LocaleUtils.tr("heightprofile.title"),usePortal:false},this.state.isloading?/*#__PURE__*/React.createElement("div",{className:"height-profile-loading-indicator",role:"body"},/*#__PURE__*/React.createElement(Spinner,{className:"spinner"})," ",LocaleUtils.tr("heightprofile.loading")):this.renderHeightProfile(function(el){_this5.chart=el},true)),this.state.printdialog?/*#__PURE__*/React.createElement(HeightProfilePrintDialog,{key:"ProfilePrintDialog",measurement:this.props.measurement,onClose:function onClose(){return _this5.setState({printdialog:false})},templatePath:this.props.templatePath},this.renderHeightProfile):null]}}])}(React.Component);_defineProperty(HeightProfile,"propTypes",{addMarker:PropTypes.func,changeMeasurementState:PropTypes.func,/** The height of the height profile widget in pixels. */height:PropTypes.number,/** The precision of displayed and exported values (0: no decimals, 1: 1 decimal position, etc). */heightProfilePrecision:PropTypes.number,measurement:PropTypes.object,projection:PropTypes.string,removeMarker:PropTypes.func,/** The number of elevation samples to query. */samples:PropTypes.number,/** Template location for the height profile print functionality */templatePath:PropTypes.string});_defineProperty(HeightProfile,"defaultProps",{samples:500,heightProfilePrecision:0,height:150,templatePath:":/templates/heightprofileprint.html"});export default connect(function(state){return{measurement:state.measurement,projection:state.map.projection}},{addMarker:addMarker,changeMeasurementState:changeMeasurementState,removeMarker:removeMarker})(HeightProfile);

package/plugins/LayerTree.js

@@ -9,7 +9,7 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *
  * The print legend functionality requires a template located by default at assets/templates/legendprint.html
  * with containing a container element with id=legendcontainer.
- */var LayerTree=/*#__PURE__*/function(_React$Component){function LayerTree(props){var _this;_classCallCheck(this,LayerTree);_this=_callSuper(this,LayerTree,[props]);_defineProperty(_this,"state",{activemenu:null,activestylemenu:null,legendTooltip:null,sidebarwidth:null,importvisible:false,filterinvisiblelayers:false,legendPrintVisible:false,visibilityMenu:false,activePreset:null});_defineProperty(_this,"renderSubLayers",function(layer,group,path,enabled){var inMutuallyExclusiveGroup=arguments.length>4&&arguments[4]!==undefined?arguments[4]:false;return(group.sublayers||[]).map(function(sublayer,idx){var subpath=[].concat(_toConsumableArray(path),[idx]);if(sublayer.sublayers){return _this.renderLayerGroup(layer,sublayer,subpath,enabled,inMutuallyExclusiveGroup)}else{return _this.renderLayer(layer,sublayer,subpath,enabled,inMutuallyExclusiveGroup)}})});_defineProperty(_this,"renderLayerGroup",function(layer,group,path,enabled){var inMutuallyExclusiveGroup=arguments.length>4&&arguments[4]!==undefined?arguments[4]:false;var flattenGroups=ConfigUtils.getConfigProp("flattenLayerTreeGroups",_this.props.theme)||_this.props.flattenGroups;if(flattenGroups){return _this.renderSubLayers(layer,group,path,enabled,false)}var subtreevisibility=LayerUtils.computeLayerVisibility(group);if(subtreevisibility===0&&_this.state.filterinvisiblelayers){return null}var groupId=layer.id+":"+group.name;var visibility=true;var checkboxstate="";if(_this.props.groupTogglesSublayers&&!inMutuallyExclusiveGroup){visibility=subtreevisibility>0;if(subtreevisibility===1){checkboxstate="checked"}else if(subtreevisibility===0){checkboxstate="unchecked"}else{checkboxstate="tristate"}}else{visibility=group.visibility===undefined?subtreevisibility>0:group.visibility;if(visibility){checkboxstate=subtreevisibility===1?"checked":"tristate"}else{checkboxstate="unchecked"}}var omitqueryable;var identifyableClassName="";var subtreequeryable=LayerUtils.computeLayerQueryable(group);if(subtreequeryable===1){identifyableClassName="layertree-item-identifyable-checked";omitqueryable=false}else if(subtreequeryable===0){identifyableClassName="layertree-item-identifyable-unchecked";omitqueryable=true}else{identifyableClassName="layertree-item-identifyable-tristate";omitqueryable=true}if(inMutuallyExclusiveGroup){checkboxstate="radio_"+checkboxstate}var expanderstate=group.expanded?"tree_minus":"tree_plus";var showExpander=!_this.props.onlyGroups||(group.sublayers||[]).some(function(sublayer){return sublayer.sublayers});var itemclasses={"layertree-item":true,"layertree-item-disabled":!_this.props.groupTogglesSublayers&&!enabled||_this.props.grayUnchecked&&!visibility};var sublayersContent=null;if(group.expanded){sublayersContent=_this.renderSubLayers(layer,group,path,enabled&&visibility,group.mutuallyExclusive===true)}var optMenuClasses=classnames({"layertree-item-menubutton":true,"layertree-item-menubutton-active":_this.state.activemenu===groupId});var styleMenuClasses=classnames({"layertree-item-menubutton":true,"layertree-item-menubutton-active":_this.state.activestylemenu===groupId});var allowRemove=ConfigUtils.getConfigProp("allowRemovingThemeLayers",_this.props.theme)===true||layer.role!==LayerRole.THEME;var allowReordering=ConfigUtils.getConfigProp("allowReorderingLayers",_this.props.theme)===true&&!_this.state.filterinvisiblelayers;var sortable=allowReordering&&ConfigUtils.getConfigProp("preventSplittingGroupsWhenReordering",_this.props.theme)===true;var styles=layer.type==="wms"&&path.length===0?_this.getLayerStyles(layer):null;return/*#__PURE__*/React.createElement("div",{className:"layertree-item-container","data-id":JSON.stringify({layer:layer.id,path:path}),key:groupId},/*#__PURE__*/React.createElement("div",{className:classnames(itemclasses)},showExpander?/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-expander",icon:expanderstate,onClick:function onClick(){return _this.groupExpandedToggled(layer,path,group.expanded)}}):/*#__PURE__*/React.createElement("span",{className:"layertree-item-expander"}),/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-checkbox",icon:checkboxstate,onClick:function onClick(){return _this.itemVisibilityToggled(layer,path,visibility)}}),/*#__PURE__*/React.createElement("span",{className:"layertree-item-title",onClick:function onClick(){return _this.itemVisibilityToggled(layer,path,visibility)},title:group.title},group.title),LayerUtils.hasQueryableSublayers(group)&&_this.props.allowSelectIdentifyableLayers?/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-identifyable "+identifyableClassName,icon:"info-sign",onClick:function onClick(){return _this.itemOmitQueryableToggled(layer,path,omitqueryable)}}):null,/*#__PURE__*/React.createElement("span",{className:"layertree-item-spacer"}),Object.keys(styles||{}).length>1?/*#__PURE__*/React.createElement(Icon,{className:styleMenuClasses,icon:"paint",onClick:function onClick(){return _this.layerStyleMenuToggled(groupId)}}):null,/*#__PURE__*/React.createElement(Icon,{className:optMenuClasses,icon:"cog",onClick:function onClick(){return _this.layerMenuToggled(groupId)}}),allowRemove?/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-remove",icon:"trash",onClick:function onClick(){return _this.props.removeLayer(layer.id,path)}}):null),_this.state.activemenu===groupId?_this.renderOptionsMenu(layer,group,path,allowRemove):null,_this.state.activestylemenu===groupId?_this.renderStyleMenu(styles,_this.getSelectedStyles(layer),function(style){return _this.applyLayerStyle(style,layer)}):null,/*#__PURE__*/React.createElement(Sortable,{onChange:_this.onSortChange,options:{disabled:sortable===false,ghostClass:"drop-ghost",delay:200,forceFallback:_this.props.fallbackDrag}},sublayersContent))});_defineProperty(_this,"renderLayer",function(layer,sublayer,path){var enabled=arguments.length>3&&arguments[3]!==undefined?arguments[3]:true;var inMutuallyExclusiveGroup=arguments.length>4&&arguments[4]!==undefined?arguments[4]:false;var skipExpanderPlaceholder=arguments.length>5&&arguments[5]!==undefined?arguments[5]:false;if(_this.props.onlyGroups){return null}if(_this.state.filterinvisiblelayers&&!sublayer.visibility){return null}if(Array.isArray(layer.layerTreeHiddenSublayers)&&layer.layerTreeHiddenSublayers.includes(sublayer.name)){return null}var sublayerId=layer.id+":"+sublayer.name;var allowRemove=ConfigUtils.getConfigProp("allowRemovingThemeLayers",_this.props.theme)===true||layer.role!==LayerRole.THEME;var allowReordering=ConfigUtils.getConfigProp("allowReorderingLayers",_this.props.theme)===true;var checkboxstate=sublayer.visibility===true?"checked":"unchecked";if(inMutuallyExclusiveGroup){checkboxstate="radio_"+checkboxstate}var optMenuClasses=classnames({"layertree-item-menubutton":true,"layertree-item-menubutton-active":_this.state.activemenu===sublayerId});var styleMenuClasses=classnames({"layertree-item-menubutton":true,"layertree-item-menubutton-active":_this.state.activestylemenu===sublayerId});var itemclasses={"layertree-item":true,"layertree-item-disabled":layer.type!=="separator"&&(!_this.props.groupTogglesSublayers&&!enabled||_this.props.grayUnchecked&&!sublayer.visibility),"layertree-item-separator":layer.type==="separator","layertree-item-outsidescalerange":sublayer.minScale!==undefined&&_this.props.mapScale<sublayer.minScale||sublayer.maxScale!==undefined&&_this.props.mapScale>sublayer.maxScale};var infoButton=null;if(layer.type==="wms"||layer.type==="wfs"||layer.type==="wmts"){infoButton=/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-metadata",icon:"info-sign",onClick:function onClick(){return _this.props.setActiveLayerInfo(layer,sublayer)}})}var legendicon=null;if(_this.props.showLegendIcons){var legendUrl=LayerUtils.getLegendUrl(layer,sublayer,_this.props.mapScale,_this.props.map,_this.props.bboxDependentLegend,_this.props.scaleDependentLegend,_this.props.extraLegendParameters);if(legendUrl){legendicon=/*#__PURE__*/React.createElement(Image,{className:"layertree-item-legend-thumbnail",onMouseOut:_this.hideLegendTooltip,onMouseOver:function onMouseOver(ev){return _this.showLegendTooltip(ev,legendUrl)},onTouchStart:function onTouchStart(ev){return _this.showLegendTooltip(ev,legendUrl)},src:legendUrl+"&TYPE=thumbnail"})}else if(layer.color){legendicon=/*#__PURE__*/React.createElement("span",{className:"layertree-item-legend-coloricon",style:{backgroundColor:layer.color}})}}var checkbox=null;if(layer.type==="placeholder"){checkbox=/*#__PURE__*/React.createElement(Spinner,null)}else if(layer.type==="separator"){checkbox=null}else{checkbox=/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-checkbox",icon:checkboxstate,onClick:function onClick(){return _this.itemVisibilityToggled(layer,path,sublayer.visibility)}})}var title=null;if(layer.type==="separator"){title=/*#__PURE__*/React.createElement("input",{onChange:function onChange(ev){return _this.props.changeLayerProperty(layer.id,"title",ev.target.value)},value:sublayer.title})}else{title=/*#__PURE__*/React.createElement("span",{className:"layertree-item-title",onClick:function onClick(){return _this.itemVisibilityToggled(layer,path,sublayer.visibility)},title:sublayer.title},sublayer.title)}var queryableicon=null;if(_this.props.allowSelectIdentifyableLayers){var identifyableClassName=!sublayer.omitFromQueryLayers?"layertree-item-identifyable-checked":"layertree-item-identifyable-unchecked";queryableicon=/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-identifyable "+identifyableClassName,icon:"info-sign",onClick:function onClick(){return _this.itemOmitQueryableToggled(layer,path,sublayer.omitFromQueryLayers)}})}else{queryableicon=/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-queryable",icon:"info-sign"})}var allowOptions=layer.type!=="placeholder"&&layer.type!=="separator";var flattenGroups=ConfigUtils.getConfigProp("flattenLayerTreeGroups",_this.props.theme)||_this.props.flattenGroups;var allowSeparators=flattenGroups&&allowReordering&&ConfigUtils.getConfigProp("allowLayerTreeSeparators",_this.props.theme);var separatorTitle=LocaleUtils.tr("layertree.separator");var separatorTooltip=LocaleUtils.tr("layertree.separatortooltip");return/*#__PURE__*/React.createElement("div",{className:"layertree-item-container","data-id":JSON.stringify({layer:layer.id,path:path}),key:sublayerId},allowSeparators?/*#__PURE__*/React.createElement("div",{className:"layertree-item-addsep",onClick:function onClick(){return _this.props.addLayerSeparator(separatorTitle,layer.id,path)},title:separatorTooltip}):null,/*#__PURE__*/React.createElement("div",{className:classnames(itemclasses)},flattenGroups||skipExpanderPlaceholder?null:/*#__PURE__*/React.createElement("span",{className:"layertree-item-expander"}),checkbox,legendicon,title,sublayer.queryable&&_this.props.showQueryableIcon?queryableicon:null,sublayer.name in(_this.props.filter.filterParams||{})||_this.props.filter.filterGeom?/*#__PURE__*/React.createElement(Icon,{icon:"filter"}):null,_this.props.loadingLayers.includes(layer.id)?/*#__PURE__*/React.createElement(Spinner,null):null,/*#__PURE__*/React.createElement("span",{className:"layertree-item-spacer"}),allowOptions&&!_this.props.infoInSettings?infoButton:null,Object.keys(sublayer.styles||{}).length>1?/*#__PURE__*/React.createElement(Icon,{className:styleMenuClasses,icon:"paint",onClick:function onClick(){return _this.layerStyleMenuToggled(sublayerId)}}):null,allowOptions?/*#__PURE__*/React.createElement(Icon,{className:optMenuClasses,icon:"cog",onClick:function onClick(){return _this.layerMenuToggled(sublayerId)}}):null,allowRemove?/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-remove",icon:"trash",onClick:function onClick(){return _this.props.removeLayer(layer.id,path)}}):null),_this.state.activemenu===sublayerId?_this.renderOptionsMenu(layer,sublayer,path,allowRemove):null,_this.state.activestylemenu===sublayerId?_this.renderStyleMenu(sublayer.styles,[sublayer.style],function(style){return _this.layerStyleChanged(layer,path,style)}):null)});_defineProperty(_this,"renderOptionsMenu",function(layer,sublayer,path){var marginRight=arguments.length>3&&arguments[3]!==undefined?arguments[3]:0;var allowReordering=ConfigUtils.getConfigProp("allowReorderingLayers",_this.props.theme)===true;var reorderButtons=null;if(allowReordering&&!_this.state.filterinvisiblelayers){reorderButtons=[/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-move",icon:"arrow-down",key:"layertree-item-move-down",onClick:function onClick(){return _this.props.reorderLayer(layer,path,+1)}}),/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-move",icon:"arrow-up",key:"layertree-item-move-up",onClick:function onClick(){return _this.props.reorderLayer(layer,path,-1)}})]}var zoomToLayerButton=null;if(sublayer.bbox&&sublayer.bbox.bounds){var zoomToLayerTooltip=LocaleUtils.tr("layertree.zoomtolayer");var crs=sublayer.bbox.crs||_this.props.map.projection;zoomToLayerButton=/*#__PURE__*/React.createElement(Icon,{icon:"zoom",onClick:function onClick(){return _this.props.zoomToExtent(sublayer.bbox.bounds,crs)},title:zoomToLayerTooltip})}var infoButton=null;if(_this.props.infoInSettings&&(layer.type==="wms"||layer.type==="wfs"||layer.type==="wmts")){infoButton=/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-metadata",icon:"info-sign",onClick:function onClick(){return _this.props.setActiveLayerInfo(layer,sublayer)}})}var attrTableButton=null;if(_this.props.showAttributeTableLink&&ConfigUtils.havePlugin("AttributeTable")&&layer.role===LayerRole.THEME&&_this.props.theme.editConfig[sublayer.name]){attrTableButton=/*#__PURE__*/React.createElement(Icon,{icon:"editing",onClick:function onClick(){return _this.props.setCurrentTask("AttributeTable",null,null,{layer:sublayer.name})}})}return/*#__PURE__*/React.createElement("div",{className:"layertree-item-optionsmenu",onPointerDown:_this.preventLayerTreeItemDrag,style:{marginRight:marginRight*1.75+"em"}},zoomToLayerButton,_this.props.transparencyIcon?/*#__PURE__*/React.createElement(Icon,{icon:"transparency"}):LocaleUtils.tr("layertree.transparency"),/*#__PURE__*/React.createElement("input",{className:"layertree-item-transparency-slider",max:"255",min:"0",onChange:function onChange(ev){return _this.layerTransparencyChanged(layer,path,ev.target.value,!isEmpty(sublayer.sublayers)?"children":null)},step:"1",type:"range",value:255-LayerUtils.computeLayerOpacity(sublayer)}),reorderButtons,infoButton,attrTableButton,layer.type==="vector"?/*#__PURE__*/React.createElement(Icon,{icon:"export",onClick:function onClick(){return _this.exportRedliningLayer(layer)}}):null)});_defineProperty(_this,"renderStyleMenu",function(styles,selectedStyles,onStyleChange){var marginRight=arguments.length>3&&arguments[3]!==undefined?arguments[3]:0;var checkedIcon=selectedStyles.length===1?"radio_checked":"radio_tristate";return/*#__PURE__*/React.createElement("div",{className:"layertree-item-stylemenu",style:{marginRight:marginRight*1.75+"em"}},Object.entries(styles).map(function(_ref){var _ref2=_slicedToArray(_ref,2),name=_ref2[0],title=_ref2[1];return/*#__PURE__*/React.createElement("div",{key:name,onClick:function onClick(){return onStyleChange(name)}},/*#__PURE__*/React.createElement(Icon,{icon:selectedStyles.includes(name)?checkedIcon:"radio_unchecked"}),/*#__PURE__*/React.createElement("div",null,title))}))});_defineProperty(_this,"preventLayerTreeItemDrag",function(ev){var draggableEl=ev.currentTarget.parentNode;if(draggableEl.draggable){draggableEl.draggable=false;document.addEventListener("pointerup",function(){draggableEl.draggable=true},{once:true})}});_defineProperty(_this,"renderLayerTree",function(layers){var flattenGroups=ConfigUtils.getConfigProp("flattenLayerTreeGroups",_this.props.theme)||_this.props.flattenGroups;var haveGroups=!flattenGroups&&layers.find(function(layer){if(layer.role===LayerRole.THEME&&!_this.props.showRootEntry){return(layer.sublayers||[]).find(function(sublayer){return!isEmpty(sublayer.sublayers)})}else{return!isEmpty(layer.sublayers)}});return layers.map(function(layer){if(isEmpty(layer.sublayers)&&layer.role!==LayerRole.THEME){return _this.renderLayer(layer,layer,[],layer.visibility,false,!haveGroups)}else if(_this.props.showRootEntry||layer.role!==LayerRole.THEME){return _this.renderLayerGroup(layer,layer,[],layer.visibility)}else{return layer.sublayers.map(function(sublayer,idx){var subpath=[idx];if(sublayer.sublayers){return _this.renderLayerGroup(layer,sublayer,subpath,layer.visibility)}else{return _this.renderLayer(layer,sublayer,subpath,layer.visibility,false,!haveGroups)}})}})});_defineProperty(_this,"renderBody",function(){var maptipcheckboxstate=_this.props.mapTipsEnabled===true?"checked":"unchecked";var maptipCheckbox=null;var maptipsEnabled=false;if(_this.props.theme.mapTips!==undefined){maptipsEnabled=_this.props.theme.mapTips!==null&&_this.props.allowMapTips}else{maptipsEnabled=_this.props.allowMapTips}if(!ConfigUtils.isMobile()&&maptipsEnabled){maptipCheckbox=/*#__PURE__*/React.createElement("div",{className:"layertree-option"},/*#__PURE__*/React.createElement(Icon,{icon:maptipcheckboxstate,onClick:_this.toggleMapTips}),/*#__PURE__*/React.createElement("span",{onClick:_this.toggleMapTips},LocaleUtils.tr("layertree.maptip")))}var allowReordering=ConfigUtils.getConfigProp("allowReorderingLayers",_this.props.theme)===true&&!_this.state.filterinvisiblelayers;var haveMapCompare=ConfigUtils.havePlugin("MapCompare");var compareCheckbox=null;if(haveMapCompare&&_this.props.allowCompare&&allowReordering){var swipecheckboxstate=_this.props.swipe||_this.props.swipe===0?"checked":"unchecked";compareCheckbox=/*#__PURE__*/React.createElement("div",{className:"layertree-option"},/*#__PURE__*/React.createElement(Icon,{icon:swipecheckboxstate,onClick:_this.toggleSwipe}),/*#__PURE__*/React.createElement("span",{onClick:_this.toggleSwipe},LocaleUtils.tr("layertree.compare")))}var layerImportExpander=null;if(_this.props.allowImport){layerImportExpander=/*#__PURE__*/React.createElement("div",{className:"layertree-option",onClick:_this.toggleImportLayers},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.importvisible?"collapse":"expand"})," ",LocaleUtils.tr("layertree.importlayer"))}var flattenGroups=ConfigUtils.getConfigProp("flattenLayerTreeGroups",_this.props.theme)||_this.props.flattenGroups;var sortable=allowReordering&&(ConfigUtils.getConfigProp("preventSplittingGroupsWhenReordering",_this.props.theme)===true||flattenGroups===true);var treelayers=_this.props.layers.filter(function(layer){return layer.role!==LayerRole.BACKGROUND&&!layer.layertreehidden});return/*#__PURE__*/React.createElement("div",{className:"layertree-container",role:"body"},/*#__PURE__*/React.createElement("div",{className:"layertree-tree",onContextMenuCapture:function onContextMenuCapture(ev){// Prevent context menu on drag-sort
+ */var LayerTree=/*#__PURE__*/function(_React$Component){function LayerTree(props){var _this;_classCallCheck(this,LayerTree);_this=_callSuper(this,LayerTree,[props]);_defineProperty(_this,"state",{activemenu:null,activestylemenu:null,legendTooltip:null,sidebarwidth:null,importvisible:false,filterinvisiblelayers:false,legendPrintVisible:false,visibilityMenu:false,activePreset:null});_defineProperty(_this,"renderSubLayers",function(layer,group,path,enabled){var inMutuallyExclusiveGroup=arguments.length>4&&arguments[4]!==undefined?arguments[4]:false;return(group.sublayers||[]).map(function(sublayer,idx){var subpath=[].concat(_toConsumableArray(path),[idx]);if(sublayer.sublayers){return _this.renderLayerGroup(layer,sublayer,subpath,enabled,inMutuallyExclusiveGroup)}else{return _this.renderLayer(layer,sublayer,subpath,enabled,inMutuallyExclusiveGroup)}})});_defineProperty(_this,"renderLayerGroup",function(layer,group,path,enabled){var _path$slice$;var inMutuallyExclusiveGroup=arguments.length>4&&arguments[4]!==undefined?arguments[4]:false;var flattenGroups=ConfigUtils.getConfigProp("flattenLayerTreeGroups",_this.props.theme)||_this.props.flattenGroups;if(flattenGroups){return _this.renderSubLayers(layer,group,path,enabled,false)}var subtreevisibility=LayerUtils.computeLayerVisibility(group);if(subtreevisibility===0&&_this.state.filterinvisiblelayers){return null}var groupId=layer.id+":"+group.name+":"+((_path$slice$=path.slice(-1)[0])!==null&&_path$slice$!==void 0?_path$slice$:"");var visibility=true;var checkboxstate="";if(_this.props.groupTogglesSublayers&&!inMutuallyExclusiveGroup){visibility=subtreevisibility>0;if(subtreevisibility===1){checkboxstate="checked"}else if(subtreevisibility===0){checkboxstate="unchecked"}else{checkboxstate="tristate"}}else{visibility=group.visibility===undefined?subtreevisibility>0:group.visibility;if(visibility){checkboxstate=subtreevisibility===1?"checked":"tristate"}else{checkboxstate="unchecked"}}var omitqueryable;var identifyableClassName="";var subtreequeryable=LayerUtils.computeLayerQueryable(group);if(subtreequeryable===1){identifyableClassName="layertree-item-identifyable-checked";omitqueryable=false}else if(subtreequeryable===0){identifyableClassName="layertree-item-identifyable-unchecked";omitqueryable=true}else{identifyableClassName="layertree-item-identifyable-tristate";omitqueryable=true}if(inMutuallyExclusiveGroup){checkboxstate="radio_"+checkboxstate}var expanderstate=group.expanded?"tree_minus":"tree_plus";var showExpander=!_this.props.onlyGroups||(group.sublayers||[]).some(function(sublayer){return sublayer.sublayers});var itemclasses={"layertree-item":true,"layertree-item-disabled":!_this.props.groupTogglesSublayers&&!enabled||_this.props.grayUnchecked&&!visibility};var sublayersContent=null;if(group.expanded){sublayersContent=_this.renderSubLayers(layer,group,path,enabled&&visibility,group.mutuallyExclusive===true)}var optMenuClasses=classnames({"layertree-item-menubutton":true,"layertree-item-menubutton-active":_this.state.activemenu===groupId});var styleMenuClasses=classnames({"layertree-item-menubutton":true,"layertree-item-menubutton-active":_this.state.activestylemenu===groupId});var allowRemove=ConfigUtils.getConfigProp("allowRemovingThemeLayers",_this.props.theme)===true||layer.role!==LayerRole.THEME;var allowReordering=ConfigUtils.getConfigProp("allowReorderingLayers",_this.props.theme)===true&&!_this.state.filterinvisiblelayers;var sortable=allowReordering&&ConfigUtils.getConfigProp("preventSplittingGroupsWhenReordering",_this.props.theme)===true;var styles=layer.type==="wms"&&path.length===0?_this.getLayerStyles(layer):null;return/*#__PURE__*/React.createElement("div",{className:"layertree-item-container","data-id":JSON.stringify({layer:layer.id,path:path}),key:groupId},/*#__PURE__*/React.createElement("div",{className:classnames(itemclasses)},showExpander?/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-expander",icon:expanderstate,onClick:function onClick(){return _this.groupExpandedToggled(layer,path,group.expanded)}}):/*#__PURE__*/React.createElement("span",{className:"layertree-item-expander"}),/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-checkbox",icon:checkboxstate,onClick:function onClick(){return _this.itemVisibilityToggled(layer,path,visibility)}}),/*#__PURE__*/React.createElement("span",{className:"layertree-item-title",onClick:function onClick(){return _this.itemVisibilityToggled(layer,path,visibility)},title:group.title},group.title),LayerUtils.hasQueryableSublayers(group)&&_this.props.allowSelectIdentifyableLayers?/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-identifyable "+identifyableClassName,icon:"info-sign",onClick:function onClick(){return _this.itemOmitQueryableToggled(layer,path,omitqueryable)}}):null,/*#__PURE__*/React.createElement("span",{className:"layertree-item-spacer"}),Object.keys(styles||{}).length>1?/*#__PURE__*/React.createElement(Icon,{className:styleMenuClasses,icon:"paint",onClick:function onClick(){return _this.layerStyleMenuToggled(groupId)}}):null,/*#__PURE__*/React.createElement(Icon,{className:optMenuClasses,icon:"cog",onClick:function onClick(){return _this.layerMenuToggled(groupId)}}),allowRemove?/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-remove",icon:"trash",onClick:function onClick(){return _this.props.removeLayer(layer.id,path)}}):null),_this.state.activemenu===groupId?_this.renderOptionsMenu(layer,group,path,allowRemove):null,_this.state.activestylemenu===groupId?_this.renderStyleMenu(styles,_this.getSelectedStyles(layer),function(style){return _this.applyLayerStyle(style,layer)}):null,/*#__PURE__*/React.createElement(Sortable,{onChange:_this.onSortChange,options:{disabled:sortable===false,ghostClass:"drop-ghost",delay:200,forceFallback:_this.props.fallbackDrag}},sublayersContent))});_defineProperty(_this,"renderLayer",function(layer,sublayer,path){var enabled=arguments.length>3&&arguments[3]!==undefined?arguments[3]:true;var inMutuallyExclusiveGroup=arguments.length>4&&arguments[4]!==undefined?arguments[4]:false;var skipExpanderPlaceholder=arguments.length>5&&arguments[5]!==undefined?arguments[5]:false;if(_this.props.onlyGroups){return null}if(_this.state.filterinvisiblelayers&&!sublayer.visibility){return null}if(Array.isArray(layer.layerTreeHiddenSublayers)&&layer.layerTreeHiddenSublayers.includes(sublayer.name)){return null}var sublayerId=layer.id+":"+sublayer.name;var allowRemove=ConfigUtils.getConfigProp("allowRemovingThemeLayers",_this.props.theme)===true||layer.role!==LayerRole.THEME;var allowReordering=ConfigUtils.getConfigProp("allowReorderingLayers",_this.props.theme)===true;var checkboxstate=sublayer.visibility===true?"checked":"unchecked";if(inMutuallyExclusiveGroup){checkboxstate="radio_"+checkboxstate}var optMenuClasses=classnames({"layertree-item-menubutton":true,"layertree-item-menubutton-active":_this.state.activemenu===sublayerId});var styleMenuClasses=classnames({"layertree-item-menubutton":true,"layertree-item-menubutton-active":_this.state.activestylemenu===sublayerId});var itemclasses={"layertree-item":true,"layertree-item-disabled":layer.type!=="separator"&&(!_this.props.groupTogglesSublayers&&!enabled||_this.props.grayUnchecked&&!sublayer.visibility),"layertree-item-separator":layer.type==="separator","layertree-item-outsidescalerange":sublayer.minScale!==undefined&&_this.props.mapScale<sublayer.minScale||sublayer.maxScale!==undefined&&_this.props.mapScale>sublayer.maxScale};var infoButton=null;if(layer.type==="wms"||layer.type==="wfs"||layer.type==="wmts"){infoButton=/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-metadata",icon:"info-sign",onClick:function onClick(){return _this.props.setActiveLayerInfo(layer,sublayer)}})}var legendicon=null;if(_this.props.showLegendIcons){var legendUrl=LayerUtils.getLegendUrl(layer,sublayer,_this.props.mapScale,_this.props.map,_this.props.bboxDependentLegend,_this.props.scaleDependentLegend,_this.props.extraLegendParameters);if(legendUrl){legendicon=/*#__PURE__*/React.createElement(Image,{className:"layertree-item-legend-thumbnail",onMouseOut:_this.hideLegendTooltip,onMouseOver:function onMouseOver(ev){return _this.showLegendTooltip(ev,legendUrl)},onTouchStart:function onTouchStart(ev){return _this.showLegendTooltip(ev,legendUrl)},src:legendUrl+"&TYPE=thumbnail"})}else if(layer.color){legendicon=/*#__PURE__*/React.createElement("span",{className:"layertree-item-legend-coloricon",style:{backgroundColor:layer.color}})}}var checkbox=null;if(layer.type==="placeholder"){checkbox=/*#__PURE__*/React.createElement(Spinner,null)}else if(layer.type==="separator"){checkbox=null}else{checkbox=/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-checkbox",icon:checkboxstate,onClick:function onClick(){return _this.itemVisibilityToggled(layer,path,sublayer.visibility)}})}var title=null;if(layer.type==="separator"){title=/*#__PURE__*/React.createElement("input",{onChange:function onChange(ev){return _this.props.changeLayerProperty(layer.id,"title",ev.target.value)},value:sublayer.title})}else{title=/*#__PURE__*/React.createElement("span",{className:"layertree-item-title",onClick:function onClick(){return _this.itemVisibilityToggled(layer,path,sublayer.visibility)},title:sublayer.title},sublayer.title)}var queryableicon=null;if(_this.props.allowSelectIdentifyableLayers){var identifyableClassName=!sublayer.omitFromQueryLayers?"layertree-item-identifyable-checked":"layertree-item-identifyable-unchecked";queryableicon=/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-identifyable "+identifyableClassName,icon:"info-sign",onClick:function onClick(){return _this.itemOmitQueryableToggled(layer,path,sublayer.omitFromQueryLayers)}})}else{queryableicon=/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-queryable",icon:"info-sign"})}var allowOptions=layer.type!=="placeholder"&&layer.type!=="separator";var flattenGroups=ConfigUtils.getConfigProp("flattenLayerTreeGroups",_this.props.theme)||_this.props.flattenGroups;var allowSeparators=flattenGroups&&allowReordering&&ConfigUtils.getConfigProp("allowLayerTreeSeparators",_this.props.theme);var separatorTitle=LocaleUtils.tr("layertree.separator");var separatorTooltip=LocaleUtils.tr("layertree.separatortooltip");return/*#__PURE__*/React.createElement("div",{className:"layertree-item-container","data-id":JSON.stringify({layer:layer.id,path:path}),key:sublayerId},allowSeparators?/*#__PURE__*/React.createElement("div",{className:"layertree-item-addsep",onClick:function onClick(){return _this.props.addLayerSeparator(separatorTitle,layer.id,path)},title:separatorTooltip}):null,/*#__PURE__*/React.createElement("div",{className:classnames(itemclasses)},flattenGroups||skipExpanderPlaceholder?null:/*#__PURE__*/React.createElement("span",{className:"layertree-item-expander"}),checkbox,legendicon,title,sublayer.queryable&&_this.props.showQueryableIcon?queryableicon:null,sublayer.name in(_this.props.filter.filterParams||{})||_this.props.filter.filterGeom?/*#__PURE__*/React.createElement(Icon,{icon:"filter"}):null,_this.props.loadingLayers.includes(layer.id)?/*#__PURE__*/React.createElement(Spinner,null):null,/*#__PURE__*/React.createElement("span",{className:"layertree-item-spacer"}),allowOptions&&!_this.props.infoInSettings?infoButton:null,Object.keys(sublayer.styles||{}).length>1?/*#__PURE__*/React.createElement(Icon,{className:styleMenuClasses,icon:"paint",onClick:function onClick(){return _this.layerStyleMenuToggled(sublayerId)}}):null,allowOptions?/*#__PURE__*/React.createElement(Icon,{className:optMenuClasses,icon:"cog",onClick:function onClick(){return _this.layerMenuToggled(sublayerId)}}):null,allowRemove?/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-remove",icon:"trash",onClick:function onClick(){return _this.props.removeLayer(layer.id,path)}}):null),_this.state.activemenu===sublayerId?_this.renderOptionsMenu(layer,sublayer,path,allowRemove):null,_this.state.activestylemenu===sublayerId?_this.renderStyleMenu(sublayer.styles,[sublayer.style],function(style){return _this.layerStyleChanged(layer,path,style)}):null)});_defineProperty(_this,"renderOptionsMenu",function(layer,sublayer,path){var marginRight=arguments.length>3&&arguments[3]!==undefined?arguments[3]:0;var allowReordering=ConfigUtils.getConfigProp("allowReorderingLayers",_this.props.theme)===true;var reorderButtons=null;if(allowReordering&&!_this.state.filterinvisiblelayers){reorderButtons=[/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-move",icon:"arrow-down",key:"layertree-item-move-down",onClick:function onClick(){return _this.props.reorderLayer(layer,path,+1)}}),/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-move",icon:"arrow-up",key:"layertree-item-move-up",onClick:function onClick(){return _this.props.reorderLayer(layer,path,-1)}})]}var zoomToLayerButton=null;if(sublayer.bbox&&sublayer.bbox.bounds){var zoomToLayerTooltip=LocaleUtils.tr("layertree.zoomtolayer");var crs=sublayer.bbox.crs||_this.props.map.projection;zoomToLayerButton=/*#__PURE__*/React.createElement(Icon,{icon:"zoom",onClick:function onClick(){return _this.props.zoomToExtent(sublayer.bbox.bounds,crs)},title:zoomToLayerTooltip})}var infoButton=null;if(_this.props.infoInSettings&&(layer.type==="wms"||layer.type==="wfs"||layer.type==="wmts")){infoButton=/*#__PURE__*/React.createElement(Icon,{className:"layertree-item-metadata",icon:"info-sign",onClick:function onClick(){return _this.props.setActiveLayerInfo(layer,sublayer)}})}var attrTableButton=null;if(_this.props.showAttributeTableLink&&ConfigUtils.havePlugin("AttributeTable")&&layer.role===LayerRole.THEME&&_this.props.theme.editConfig[sublayer.name]){attrTableButton=/*#__PURE__*/React.createElement(Icon,{icon:"editing",onClick:function onClick(){return _this.props.setCurrentTask("AttributeTable",null,null,{layer:sublayer.name})}})}return/*#__PURE__*/React.createElement("div",{className:"layertree-item-optionsmenu",onPointerDown:_this.preventLayerTreeItemDrag,style:{marginRight:marginRight*1.75+"em"}},zoomToLayerButton,_this.props.transparencyIcon?/*#__PURE__*/React.createElement(Icon,{icon:"transparency"}):LocaleUtils.tr("layertree.transparency"),/*#__PURE__*/React.createElement("input",{className:"layertree-item-transparency-slider",max:"255",min:"0",onChange:function onChange(ev){return _this.layerTransparencyChanged(layer,path,ev.target.value,!isEmpty(sublayer.sublayers)?"children":null)},step:"1",type:"range",value:255-LayerUtils.computeLayerOpacity(sublayer)}),reorderButtons,infoButton,attrTableButton,layer.type==="vector"?/*#__PURE__*/React.createElement(Icon,{icon:"export",onClick:function onClick(){return _this.exportRedliningLayer(layer)}}):null)});_defineProperty(_this,"renderStyleMenu",function(styles,selectedStyles,onStyleChange){var marginRight=arguments.length>3&&arguments[3]!==undefined?arguments[3]:0;var checkedIcon=selectedStyles.length===1?"radio_checked":"radio_tristate";return/*#__PURE__*/React.createElement("div",{className:"layertree-item-stylemenu",style:{marginRight:marginRight*1.75+"em"}},Object.entries(styles).map(function(_ref){var _ref2=_slicedToArray(_ref,2),name=_ref2[0],title=_ref2[1];return/*#__PURE__*/React.createElement("div",{key:name,onClick:function onClick(){return onStyleChange(name)}},/*#__PURE__*/React.createElement(Icon,{icon:selectedStyles.includes(name)?checkedIcon:"radio_unchecked"}),/*#__PURE__*/React.createElement("div",null,title))}))});_defineProperty(_this,"preventLayerTreeItemDrag",function(ev){var draggableEl=ev.currentTarget.parentNode;if(draggableEl.draggable){draggableEl.draggable=false;document.addEventListener("pointerup",function(){draggableEl.draggable=true},{once:true})}});_defineProperty(_this,"renderLayerTree",function(layers){var flattenGroups=ConfigUtils.getConfigProp("flattenLayerTreeGroups",_this.props.theme)||_this.props.flattenGroups;var haveGroups=!flattenGroups&&layers.find(function(layer){if(layer.role===LayerRole.THEME&&!_this.props.showRootEntry){return(layer.sublayers||[]).find(function(sublayer){return!isEmpty(sublayer.sublayers)})}else{return!isEmpty(layer.sublayers)}});return layers.map(function(layer){if(isEmpty(layer.sublayers)&&layer.role!==LayerRole.THEME){return _this.renderLayer(layer,layer,[],layer.visibility,false,!haveGroups)}else if(_this.props.showRootEntry||layer.role!==LayerRole.THEME){return _this.renderLayerGroup(layer,layer,[],layer.visibility)}else{return layer.sublayers.map(function(sublayer,idx){var subpath=[idx];if(sublayer.sublayers){return _this.renderLayerGroup(layer,sublayer,subpath,layer.visibility)}else{return _this.renderLayer(layer,sublayer,subpath,layer.visibility,false,!haveGroups)}})}})});_defineProperty(_this,"renderBody",function(){var maptipcheckboxstate=_this.props.mapTipsEnabled===true?"checked":"unchecked";var maptipCheckbox=null;var maptipsEnabled=false;if(_this.props.theme.mapTips!==undefined){maptipsEnabled=_this.props.theme.mapTips!==null&&_this.props.allowMapTips}else{maptipsEnabled=_this.props.allowMapTips}if(!ConfigUtils.isMobile()&&maptipsEnabled){maptipCheckbox=/*#__PURE__*/React.createElement("div",{className:"layertree-option"},/*#__PURE__*/React.createElement(Icon,{icon:maptipcheckboxstate,onClick:_this.toggleMapTips}),/*#__PURE__*/React.createElement("span",{onClick:_this.toggleMapTips},LocaleUtils.tr("layertree.maptip")))}var allowReordering=ConfigUtils.getConfigProp("allowReorderingLayers",_this.props.theme)===true&&!_this.state.filterinvisiblelayers;var haveMapCompare=ConfigUtils.havePlugin("MapCompare");var compareCheckbox=null;if(haveMapCompare&&_this.props.allowCompare&&allowReordering){var swipecheckboxstate=_this.props.swipe||_this.props.swipe===0?"checked":"unchecked";compareCheckbox=/*#__PURE__*/React.createElement("div",{className:"layertree-option"},/*#__PURE__*/React.createElement(Icon,{icon:swipecheckboxstate,onClick:_this.toggleSwipe}),/*#__PURE__*/React.createElement("span",{onClick:_this.toggleSwipe},LocaleUtils.tr("layertree.compare")))}var layerImportExpander=null;if(_this.props.allowImport){layerImportExpander=/*#__PURE__*/React.createElement("div",{className:"layertree-option",onClick:_this.toggleImportLayers},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.importvisible?"collapse":"expand"})," ",LocaleUtils.tr("layertree.importlayer"))}var flattenGroups=ConfigUtils.getConfigProp("flattenLayerTreeGroups",_this.props.theme)||_this.props.flattenGroups;var sortable=allowReordering&&(ConfigUtils.getConfigProp("preventSplittingGroupsWhenReordering",_this.props.theme)===true||flattenGroups===true);var treelayers=_this.props.layers.filter(function(layer){return layer.role!==LayerRole.BACKGROUND&&!layer.layertreehidden});return/*#__PURE__*/React.createElement("div",{className:"layertree-container",role:"body"},/*#__PURE__*/React.createElement("div",{className:"layertree-tree",onContextMenuCapture:function onContextMenuCapture(ev){// Prevent context menu on drag-sort
 ev.stopPropagation();ev.preventDefault();return false},onTouchEnd:function onTouchEnd(ev){var target=ev.currentTarget;clearTimeout(target.preventScrollTimeout);target.preventScrollTimeout=null;target.removeEventListener("touchmove",MiscUtils.killEvent)},onTouchStart:function onTouchStart(ev){// Prevent touch-scroll after sortable trigger delay
 var target=ev.currentTarget;target.preventScrollTimeout=setTimeout(function(){target.addEventListener("touchmove",MiscUtils.killEvent,{passive:false})},200)},ref:MiscUtils.setupKillTouchEvents},/*#__PURE__*/React.createElement(Sortable,{onChange:_this.onSortChange,options:{disabled:sortable===false,ghostClass:"drop-ghost",delay:200,forceFallback:_this.props.fallbackDrag}},_this.renderLayerTree(treelayers))),maptipCheckbox,compareCheckbox,layerImportExpander,_this.state.importvisible?/*#__PURE__*/React.createElement(ImportLayer,{theme:_this.props.theme}):null)});_defineProperty(_this,"renderVisibilityButton",function(){if(!_this.props.showToggleAllLayersCheckbox&&!_this.props.enableVisibleFilter&&isEmpty(_this.props.theme.visibilityPresets)){return null}var vis=0;var count=0;var _iterator=_createForOfIteratorHelper(_this.props.layers),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var layer=_step.value;if(layer.role===LayerRole.THEME||layer.role===LayerRole.USERLAYER){count+=1;vis+=layer.visibility}}}catch(err){_iterator.e(err)}finally{_iterator.f()}vis/=Math.min(1,count);var buttonClasses=classnames({"layertree-visibility-button":true,"layertree-visibility-button-active":_this.state.visibilityMenu});var style={};if(_this.props.side==="left"){style.left=0}else{style.right=0}return/*#__PURE__*/React.createElement("span",{className:buttonClasses,onClick:function onClick(){return _this.setState(function(state){return{visibilityMenu:!state.visibilityMenu}})}},/*#__PURE__*/React.createElement(Icon,{icon:"eye"}),/*#__PURE__*/React.createElement(Icon,{icon:"chevron-down"}),_this.state.visibilityMenu?/*#__PURE__*/React.createElement("div",{className:"layertree-visibility-menu",style:style},_this.props.showToggleAllLayersCheckbox?/*#__PURE__*/React.createElement("div",{onClick:function onClick(){return _this.toggleLayerTreeVisibility(vis===0)}},/*#__PURE__*/React.createElement(Icon,{icon:vis===0?"checked":"unchecked"})," ",LocaleUtils.tr("layertree.hidealllayers")):null,_this.props.enableVisibleFilter?/*#__PURE__*/React.createElement("div",{onClick:function onClick(){return _this.setState(function(state){return{filterinvisiblelayers:!state.filterinvisiblelayers}})}},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.filterinvisiblelayers?"checked":"unchecked"})," ",LocaleUtils.tr("layertree.visiblefilter")):null,Object.entries(_this.props.theme.visibilityPresets||{}).map(function(_ref3,idx){var _ref4=_slicedToArray(_ref3,2),name=_ref4[0],preset=_ref4[1];return/*#__PURE__*/React.createElement("div",{className:idx===0?"layertree-visibility-menu-sep":"",key:name,onClick:function onClick(){return _this.props.setThemeLayersVisibilityPreset(preset)}},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.activePreset===name?"radio_checked":"radio_unchecked"})," ",name)})):null)});_defineProperty(_this,"renderLegendPrintWindow",function(){if(!_this.state.legendPrintVisible){return null}var setLegendPrintContents=function setLegendPrintContents(el){if(!el){return}el.addEventListener("load",function(){var container=el.contentWindow.document.getElementById("legendcontainer");if(container){var body="<p id=\"legendcontainerbody\">";body+=_this.props.layers.map(function(layer){if(!layer.visibility){return""}else if(layer.legendUrl){return _this.printLayerLegend(layer,layer)}else if(layer.color){return"<div class=\"legend-entry\"><span style=\"display: inline-block; width: 1em; height: 1em; box-shadow: inset 0 0 0 1000px "+layer.color+"; margin: 0.25em; border: 1px solid black;\">&nbsp;</span>"+(layer.title||layer.name)+"</div>"}else{return""}}).join("");body+="</p>";container.innerHTML=body}else{_this.legendPrintWindow.document.body.innerHTML="Broken template. An element with id=legendcontainer must exist."}})};var printLegend=function printLegend(ev){ev.target.parentElement.parentElement.getElementsByTagName("iframe")[0].contentWindow.print()};return/*#__PURE__*/React.createElement(ResizeableWindow,{icon:"print",initialHeight:0.75*window.innerHeight,initialWidth:0.5*window.innerWidth,onClose:function onClose(){return _this.setState({legendPrintVisible:false})},title:LocaleUtils.tr("layertree.printlegend")},/*#__PURE__*/React.createElement("div",{className:"layertree-legend-print-body",role:"body"},/*#__PURE__*/React.createElement("iframe",{ref:setLegendPrintContents,src:MiscUtils.resolveAssetsPath(_this.props.templatePath)}),/*#__PURE__*/React.createElement("div",{className:"layertree-legend-print-body-buttonbar"},/*#__PURE__*/React.createElement("button",{onClick:printLegend},LocaleUtils.tr("layertree.printlegend")))))});_defineProperty(_this,"legendTooltipLoaded",function(ev){if(ev.target.naturalWidth>1){ev.target.style.visibility="visible"}});_defineProperty(_this,"onSortChange",function(order,sortable,ev){var moved=JSON.parse(order[ev.newIndex]);var layer=_this.props.layers.find(function(l){return l.id===moved.layer});if(layer){_this.props.reorderLayer(layer,moved.path,ev.newIndex-ev.oldIndex)}});_defineProperty(_this,"toggleImportLayers",function(){_this.setState(function(state){var visible=!state.importvisible;return{importvisible:visible,sidebarwidth:visible?"40em":null}})});_defineProperty(_this,"propagateOptions",function(layer,options){var path=arguments.length>2&&arguments[2]!==undefined?arguments[2]:null;if(layer.sublayers){layer.sublayers=layer.sublayers.map(function(sublayer,idx){if(path===null||!isEmpty(path)&&path[0]===idx){var newsublayer=_objectSpread(_objectSpread({},sublayer),options);_this.propagateOptions(newsublayer,options,path?path.slice(1):null);return newsublayer}else{return sublayer}})}});_defineProperty(_this,"groupExpandedToggled",function(layer,grouppath,oldexpanded){_this.props.changeLayerProperty(layer.id,"expanded",!oldexpanded,grouppath)});_defineProperty(_this,"itemVisibilityToggled",function(layer,grouppath,oldvisibility){var recurseDirection=null;// If item becomes visible, also make parents visible
 if(_this.props.groupTogglesSublayers){recurseDirection=!oldvisibility?"both":"children"}else{recurseDirection=!oldvisibility?"parents":null}_this.props.changeLayerProperty(layer.id,"visibility",!oldvisibility,grouppath,recurseDirection)});_defineProperty(_this,"itemOmitQueryableToggled",function(layer,grouppath,oldomitqueryable){_this.props.changeLayerProperty(layer.id,"omitFromQueryLayers",!oldomitqueryable,grouppath,"children")});_defineProperty(_this,"layerTransparencyChanged",function(layer,sublayerpath,value){var recurse=arguments.length>3&&arguments[3]!==undefined?arguments[3]:null;_this.props.changeLayerProperty(layer.id,"opacity",Math.max(1,255-value),sublayerpath,recurse)});_defineProperty(_this,"layerStyleChanged",function(layer,sublayerpath,value){var recurseDirection=arguments.length>3&&arguments[3]!==undefined?arguments[3]:null;_this.props.changeLayerProperty(layer.id,"style",value,sublayerpath,recurseDirection)});_defineProperty(_this,"layerMenuToggled",function(sublayerid){_this.setState(function(state){return{activemenu:state.activemenu===sublayerid?null:sublayerid,activestylemenu:null}})});_defineProperty(_this,"layerStyleMenuToggled",function(sublayerid){_this.setState(function(state){return{activestylemenu:state.activestylemenu===sublayerid?null:sublayerid,activemenu:null}})});_defineProperty(_this,"showLegendTooltip",function(ev,request){_this.setState({legendTooltip:{x:ev.target.getBoundingClientRect().right,y:ev.target.getBoundingClientRect().top,img:request+"&TYPE=tooltip"}})});_defineProperty(_this,"onHide",function(){_this.setState({legendTooltip:undefined,visibilityMenu:false})});_defineProperty(_this,"hideLegendTooltip",function(){_this.setState({legendTooltip:undefined})});_defineProperty(_this,"toggleMapTips",function(){_this.props.toggleMapTips(!_this.props.mapTipsEnabled)});_defineProperty(_this,"toggleSwipe",function(){_this.props.setSwipe(_this.props.swipe!==null?null:50)});_defineProperty(_this,"printLayerLegend",function(layer,sublayer){var body="";if(sublayer.sublayers){if(sublayer.visibility){body="<div class=\"legend-group\">"+"<h3 class=\"legend-group-title\">"+(sublayer.title||sublayer.name)+"</h3>"+"<div class=\"legend-group-body\">"+sublayer.sublayers.map(function(subsublayer){return _this.printLayerLegend(layer,subsublayer)}).join("\n")+"</div>"+"</div>"}}else{if(sublayer.visibility&&LayerUtils.layerScaleInRange(sublayer,_this.props.mapScale)){var request=LayerUtils.getLegendUrl(layer,{name:sublayer.name},_this.props.mapScale,_this.props.map,_this.props.bboxDependentLegend,_this.props.scaleDependentLegend,_this.props.extraLegendParameters);body=request?"<div class=\"legend-entry\"><img src=\""+request+"\" style=\"max-width: 100%\"/></div>":""}}return body});_defineProperty(_this,"deleteAllLayers",function(){var _iterator2=_createForOfIteratorHelper(_this.props.layers),_step2;try{for(_iterator2.s();!(_step2=_iterator2.n()).done;){var layer=_step2.value;if(layer.role===LayerRole.THEME){var sublayers=layer.sublayers||[];for(var i=sublayers.length-1;i>=0;--i){_this.props.removeLayer(layer.id,[i])}}else if(layer.role===LayerRole.USERLAYER){_this.props.removeLayer(layer.id)}}}catch(err){_iterator2.e(err)}finally{_iterator2.f()}});_defineProperty(_this,"toggleLayerTreeVisibility",function(visibile){var _iterator3=_createForOfIteratorHelper(_this.props.layers),_step3;try{for(_iterator3.s();!(_step3=_iterator3.n()).done;){var layer=_step3.value;if(layer.role===LayerRole.THEME||layer.role===LayerRole.USERLAYER){_this.props.changeLayerProperty(layer.id,"visibility",visibile,[],null)}}}catch(err){_iterator3.e(err)}finally{_iterator3.f()}});_defineProperty(_this,"exportRedliningLayer",function(layer){var data=JSON.stringify({type:"FeatureCollection",features:layer.features.map(function(feature){var newFeature=_objectSpread(_objectSpread({},feature),{},{geometry:VectorLayerUtils.reprojectGeometry(feature.geometry,feature.crs||_this.props.map.projection,"EPSG:4326")});delete newFeature.crs;return newFeature})},null," ");FileSaver.saveAs(new Blob([data],{type:"text/plain;charset=utf-8"}),layer.title+".json")});_defineProperty(_this,"getSelectedStyles",function(layer){var _layer$params;return _toConsumableArray(new Set((((_layer$params=layer.params)===null||_layer$params===void 0?void 0:_layer$params.STYLES)||"").split(",").filter(Boolean)))});_defineProperty(_this,"getLayerStyles",function(layer){var _layer$sublayers;return layer===null||layer===void 0||(_layer$sublayers=layer.sublayers)===null||_layer$sublayers===void 0?void 0:_layer$sublayers.reduce(function(styleList,sublayer){Object.assign(styleList,_this.getLayerStyles(sublayer.sublayers));return Object.assign(styleList,sublayer.styles)},{})});_defineProperty(_this,"applyLayerStyle",function(style,layer){var path=arguments.length>2&&arguments[2]!==undefined?arguments[2]:[];var layerId=arguments.length>3&&arguments[3]!==undefined?arguments[3]:null;layerId=layerId!==null&&layerId!==void 0?layerId:layer.id;(layer.sublayers||[]).forEach(function(sublayer,idx){_this.applyLayerStyle(style,sublayer,[].concat(_toConsumableArray(path),[idx]),layerId);if(style in(sublayer.styles||{})){_this.props.changeLayerProperty(layerId,"style",style,[].concat(_toConsumableArray(path),[idx]))}})});_this.legendPrintWindow=null;window.addEventListener("beforeunload",function(){if(_this.legendPrintWindow&&!_this.legendPrintWindow.closed){_this.legendPrintWindow.close()}});return _this}_inherits(LayerTree,_React$Component);return _createClass(LayerTree,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(this.props.theme.mapTips!==undefined&&this.props.theme.mapTips!==prevProps.theme.mapTips){this.props.toggleMapTips(this.props.theme.mapTips&&!ConfigUtils.isMobile())}if(this.props.layers!==prevProps.layers){this.setState({activePreset:LayerUtils.getActiveVisibilityPreset(this.props.layers,this.props.theme.visibilityPresets)})}}},{key:"render",value:function render(){var _this2=this;var legendTooltip=null;if(this.state.legendTooltip){var style={left:this.state.legendTooltip.x,top:this.state.legendTooltip.y,maxWidth:window.innerWidth-this.state.legendTooltip.x-2,maxHeight:window.innerHeight-this.state.legendTooltip.y-2,visibility:"hidden"};legendTooltip=/*#__PURE__*/React.createElement(Image,{className:"layertree-item-legend-tooltip",onLoad:this.legendTooltipLoaded,onTouchStart:this.hideLegendTooltip,src:this.state.legendTooltip.img,style:style})}var legendPrintIcon=null;if(this.props.enableLegendPrint){legendPrintIcon=/*#__PURE__*/React.createElement(Icon,{className:"layertree-print-legend",icon:"print",onClick:function onClick(){return _this2.setState({legendPrintVisible:true})},title:LocaleUtils.tr("layertree.printlegend")})}var deleteAllLayersIcon=null;if(ConfigUtils.getConfigProp("allowRemovingThemeLayers")===true){var deleteAllLayersTooltip=LocaleUtils.tr("layertree.deletealllayers");deleteAllLayersIcon=/*#__PURE__*/React.createElement(Icon,{className:"layertree-delete-legend",icon:"trash",onClick:this.deleteAllLayers,title:deleteAllLayersTooltip})}var serviceInfoIcon=null;if(this.props.enableServiceInfo){var serviceInfoTooltip=LocaleUtils.tr("serviceinfo.title");serviceInfoIcon=/*#__PURE__*/React.createElement(Icon,{className:"layertree-theme-metadata",icon:"info-sign",onClick:function onClick(){return _this2.props.setActiveServiceInfo(_this2.props.theme)},title:serviceInfoTooltip})}var extraTitlebarContent=/*#__PURE__*/React.createElement("span",null,this.renderVisibilityButton(),legendPrintIcon,deleteAllLayersIcon,serviceInfoIcon);return/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement(SideBar,{extraTitlebarContent:extraTitlebarContent,icon:"layers",id:"LayerTree",onHide:this.onHide,side:this.props.side,title:LocaleUtils.tr("appmenu.items.LayerTree"),width:this.state.sidebarwidth||this.props.width},function(){return{body:_this2.renderBody()}}),legendTooltip,this.renderLegendPrintWindow(),/*#__PURE__*/React.createElement(LayerInfoWindow,{bboxDependentLegend:this.props.bboxDependentLegend,layerInfoGeometry:this.props.layerInfoGeometry,scaleDependentLegend:this.props.scaleDependentLegend}),/*#__PURE__*/React.createElement(ServiceInfoWindow,{layerInfoGeometry:this.props.layerInfoGeometry}))}}])}(React.Component);_defineProperty(LayerTree,"propTypes",{/** Whether to allow adding separator entries in the layer tree, useful for organizing the tree. */addLayerSeparator:PropTypes.func,/** Whether to enable the compare function. Requires the `MapCompare` plugin. */allowCompare:PropTypes.bool,/** Whether to allow importing external layers. */allowImport:PropTypes.bool,/** Whether to allow enabling map tips. */allowMapTips:PropTypes.bool,/** Whether to allow selection of identifyable layers. The `showQueryableIcon` property should be `true` to be able to select identifyable layers. */allowSelectIdentifyableLayers:PropTypes.bool,/** Whether to display a BBOX dependent legend. Can be `true|false|"theme"`, latter means only for theme layers. */bboxDependentLegend:PropTypes.oneOfType([PropTypes.bool,PropTypes.string]),changeLayerProperty:PropTypes.func,/** Whether to enable the legend print functionality. */enableLegendPrint:PropTypes.bool,/** Whether to display a service info button to display the WMS service metadata. */enableServiceInfo:PropTypes.bool,/** Whether to display a button to filter invisible layers from the layertree. */enableVisibleFilter:PropTypes.bool,/** Additional parameters to pass to the GetLegendGraphics request. */extraLegendParameters:PropTypes.string,/** Whether to use the fallback logic for drag-and-drop. */fallbackDrag:PropTypes.bool,filter:PropTypes.object,/** Whether to display a flat layer tree, omitting any groups. */flattenGroups:PropTypes.bool,/** Whether to display unchecked layers gray in the layertree. */grayUnchecked:PropTypes.bool,/** Whether toggling a group also toggles all sublayers. */groupTogglesSublayers:PropTypes.bool,/** Whether to display the layer info button inside the layer settings menu rather than next to the layer title. */infoInSettings:PropTypes.bool,/** Default layer info window geometry with size, position and docking status. */layerInfoGeometry:PropTypes.shape({initialWidth:PropTypes.number,initialHeight:PropTypes.number,initialX:PropTypes.number,initialY:PropTypes.number,initiallyDocked:PropTypes.bool}),layers:PropTypes.array,loadingLayers:PropTypes.array,map:PropTypes.object,mapScale:PropTypes.number,mapTipsEnabled:PropTypes.bool,mobile:PropTypes.bool,/** Whether to only display layer groups but not individual layers in layertree. */onlyGroups:PropTypes.bool,removeLayer:PropTypes.func,reorderLayer:PropTypes.func,/** Whether to display a scale dependent legend. Can be `true|false|"theme"`, latter means only for theme layers. */scaleDependentLegend:PropTypes.oneOfType([PropTypes.bool,PropTypes.string]),setActiveLayerInfo:PropTypes.func,setActiveServiceInfo:PropTypes.func,setCurrentTask:PropTypes.func,setSwipe:PropTypes.func,setThemeLayersVisibilityPreset:PropTypes.func,/** Whether to display an icon linking to the layer attribute table in the layer options menu.  */showAttributeTableLink:PropTypes.bool,/** Whether to display legend icons. */showLegendIcons:PropTypes.bool,/** Whether to display the queryable icon to indicate that a layer is identifyable. */showQueryableIcon:PropTypes.bool,/** Whether to display the root entry of the layertree. */showRootEntry:PropTypes.bool,/** Whether to display a checkbox to toggle all layers. */showToggleAllLayersCheckbox:PropTypes.bool,/** The side of the application on which to display the sidebar. */side:PropTypes.string,swipe:PropTypes.number,/** Template location for the legend print functionality */templatePath:PropTypes.string,theme:PropTypes.object,toggleMapTips:PropTypes.func,transparencyIcon:PropTypes.bool,/** The initial width of the layertree, as a CSS width string. */width:PropTypes.string,zoomToExtent:PropTypes.func});_defineProperty(LayerTree,"defaultProps",{layers:[],showLegendIcons:true,showRootEntry:true,showQueryableIcon:true,allowMapTips:true,allowCompare:true,allowImport:true,allowSelectIdentifyableLayers:false,groupTogglesSublayers:false,grayUnchecked:true,layerInfoGeometry:{initialWidth:480,initialHeight:480,initialX:null,initialY:null,initiallyDocked:false},bboxDependentLegend:false,flattenGroups:false,onlyGroups:false,width:"25em",enableLegendPrint:true,enableVisibleFilter:true,enableServiceInfo:true,infoInSettings:true,showToggleAllLayersCheckbox:true,transparencyIcon:true,side:"right",templatePath:":/templates/legendprint.html"});var selector=function selector(state){return{layers:state.layers.flat,filter:state.layers.filter,loadingLayers:state.layers.loading,map:state.map,mapScale:MapUtils.computeForZoom(state.map.scales,state.map.zoom),swipe:state.layers.swipe,theme:state.theme.current||{},mapTipsEnabled:state.map.maptips}};export default connect(selector,{addLayerSeparator:addLayerSeparator,changeLayerProperty:changeLayerProperty,removeLayer:removeLayer,reorderLayer:reorderLayer,toggleMapTips:toggleMapTips,setSwipe:setSwipe,setActiveLayerInfo:setActiveLayerInfo,setActiveServiceInfo:setActiveServiceInfo,setCurrentTask:setCurrentTask,setThemeLayersVisibilityPreset:setThemeLayersVisibilityPreset,zoomToExtent:zoomToExtent})(LayerTree);

package/plugins/Map.js

@@ -7,7 +7,7 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  * LICENSE file in the root directory of this source tree.
  */import React from"react";import ReactDOM from"react-dom";import{connect}from"react-redux";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{LayerRole}from"../actions/layers";import{MapContainerPortalContext}from"../components/PluginsContainer";import OlLayer from"../components/map/OlLayer";import OlMap from"../components/map/OlMap";import Spinner from"../components/widgets/Spinner";import LayerUtils from"../utils/LayerUtils";import LocaleUtils from"../utils/LocaleUtils";import"./style/Map.css";/**
  * The main map component.
- */var Map=/*#__PURE__*/function(_React$Component){function Map(props){var _this;_classCallCheck(this,Map);_this=_callSuper(this,Map,[props]);_defineProperty(_this,"state",{renderLayers:[],swipeLayer:null});_defineProperty(_this,"renderLayers",function(){var zIndex=0;return _this.state.renderLayers.map(function(layer){var _layer$zIndex;if(layer.type==="placeholder"){return null}++zIndex;var swipe=_this.props.swipe!==null&&layer===_this.state.swipeLayer;return/*#__PURE__*/React.createElement(OlLayer,{key:layer.id,options:layer,swipe:swipe?_this.props.swipe:null,zIndex:(_layer$zIndex=layer.zIndex)!==null&&_layer$zIndex!==void 0?_layer$zIndex:zIndex})})});_defineProperty(_this,"renderSupportTools",function(){return Object.entries(_this.props.tools).map(function(_ref){var _ref2=_slicedToArray(_ref,2),key=_ref2[0],Tool=_ref2[1];var options=_this.props.toolsOptions[key]||{};return/*#__PURE__*/React.createElement(Tool,_extends({key:key},options))})});_this.loadingEl=null;return _this}_inherits(Map,_React$Component);return _createClass(Map,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){var _this2=this;if(this.props.layers!==prevProps.layers||this.props.swipe!==null!==(prevProps.swipe!==null)){var renderLayers=[];// Inject external layers
+ */var Map=/*#__PURE__*/function(_React$Component){function Map(props){var _this;_classCallCheck(this,Map);_this=_callSuper(this,Map,[props]);_defineProperty(_this,"state",{renderLayers:[],swipeLayer:null});_defineProperty(_this,"renderLayers",function(){var zIndex=0;return _this.state.renderLayers.map(function(layer){var _ref,_layer$params,_layer$zIndex;if(layer.type==="placeholder"){return null}++zIndex;var swipe=_this.props.swipe!==null&&layer===_this.state.swipeLayer;var key=(_ref=layer.id+":"+((_layer$params=layer.params)===null||_layer$params===void 0?void 0:_layer$params.LAYERS))!==null&&_ref!==void 0?_ref:"";return/*#__PURE__*/React.createElement(OlLayer,{key:key,options:layer,swipe:swipe?_this.props.swipe:null,zIndex:(_layer$zIndex=layer.zIndex)!==null&&_layer$zIndex!==void 0?_layer$zIndex:zIndex})})});_defineProperty(_this,"renderSupportTools",function(){return Object.entries(_this.props.tools).map(function(_ref2){var _ref3=_slicedToArray(_ref2,2),key=_ref3[0],Tool=_ref3[1];var options=_this.props.toolsOptions[key]||{};return/*#__PURE__*/React.createElement(Tool,_extends({key:key},options))})});_this.loadingEl=null;return _this}_inherits(Map,_React$Component);return _createClass(Map,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){var _this2=this;if(this.props.layers!==prevProps.layers||this.props.swipe!==null!==(prevProps.swipe!==null)){var renderLayers=[];// Inject external layers
 this.props.layers.slice(0).reverse().forEach(function(layer){if(layer.type==="wms"&&layer.role===LayerRole.THEME){var sublayers=layer.params.LAYERS.split(",");var opacities=layer.params.OPACITIES.split(",");var styles=(layer.params.STYLES||"").split(",");for(var i=0;i<sublayers.length;++i){if(layer.externalLayerMap&&layer.externalLayerMap[sublayers[i]]){// Sublayer is mapped to an external layer
 var sublayer=LayerUtils.searchSubLayer(layer,"name",sublayers[i]);if(sublayer.visibility){var extlayer=_objectSpread(_objectSpread({},layer.externalLayerMap[sublayers[i]]),{},{rev:layer.rev,opacity:parseInt(opacities[i],10),visibility:true,role:LayerRole.THEME,minScale:sublayer.minScale,maxScale:sublayer.maxScale});if(extlayer.type==="wms"){extlayer.params=_objectSpread(_objectSpread(_objectSpread({},layer.params),layer.externalLayerMap[sublayers[i]].params),{},{OPACITIES:opacities[i],STYLES:""})}renderLayers.push(extlayer)}}else if(renderLayers.length>0&&renderLayers[renderLayers.length-1].id===layer.id){// Compress with previous renderlayer
 renderLayers[renderLayers.length-1].params.LAYERS+=","+sublayers[i];renderLayers[renderLayers.length-1].params.OPACITIES+=","+opacities[i];renderLayers[renderLayers.length-1].params.STYLES+=","+(styles[i]||"")}else{// Add new renderlayer

package/plugins/MapFilter.js

@@ -4,7 +4,7 @@ function _extends(){return _extends=Object.assign?Object.assign.bind():function(
  *
  * 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 axios from"axios";import isEmpty from"lodash.isempty";import isEqual from"lodash.isequal";import PropTypes from"prop-types";import{v1 as uuidv1}from"uuid";import{LayerRole,setFilter}from"../actions/layers";import{setPermalinkParameters}from"../actions/localConfig";import{setCurrentTask}from"../actions/task";import Icon from"../components/Icon";import MapButton from"../components/MapButton";import MapSelection from"../components/MapSelection";import PickFeature from"../components/PickFeature";import SideBar from"../components/SideBar";import ButtonBar from"../components/widgets/ButtonBar";import ComboBox from"../components/widgets/ComboBox";import DateTimeInput from"../components/widgets/DateTimeInput";import TextInput from"../components/widgets/TextInput";import ToggleSwitch from"../components/widgets/ToggleSwitch";import ConfigUtils from"../utils/ConfigUtils";import LayerUtils from"../utils/LayerUtils";import LocaleUtils from"../utils/LocaleUtils";import MiscUtils from"../utils/MiscUtils";import"./style/MapFilter.css";/**
+ */import React from"react";import{connect}from"react-redux";import axios from"axios";import isEmpty from"lodash.isempty";import isEqual from"lodash.isequal";import PropTypes from"prop-types";import{v4 as uuidv4}from"uuid";import{LayerRole,setFilter}from"../actions/layers";import{setPermalinkParameters}from"../actions/localConfig";import{setCurrentTask}from"../actions/task";import Icon from"../components/Icon";import MapButton from"../components/MapButton";import MapSelection from"../components/MapSelection";import PickFeature from"../components/PickFeature";import SideBar from"../components/SideBar";import ButtonBar from"../components/widgets/ButtonBar";import ComboBox from"../components/widgets/ComboBox";import DateTimeInput from"../components/widgets/DateTimeInput";import TextInput from"../components/widgets/TextInput";import ToggleSwitch from"../components/widgets/ToggleSwitch";import ConfigUtils from"../utils/ConfigUtils";import LayerUtils from"../utils/LayerUtils";import LocaleUtils from"../utils/LocaleUtils";import MiscUtils from"../utils/MiscUtils";import"./style/MapFilter.css";/**
  * Allows filtering the map content via QGIS Server WMS FILTER.
  *
  * See [Map filtering](../../topics/MapFilter).
@@ -13,8 +13,8 @@ Object.values(_this.state.filters).forEach(function(entry){if(entry.active){Obje
 var themeLayer=_this.props.layers.find(function(layer){return layer.role===LayerRole.THEME});if(themeLayer){var wmsParams=LayerUtils.buildWMSLayerParams(themeLayer,{filterParams:layerExpressions,filterGeom:_this.state.geomFilter.geom}).params;var wmsLayers=wmsParams.LAYERS.split(",");var reqParams={SERVICE:"WMS",REQUEST:"GetMap",VERSION:"1.3.0",CRS:"EPSG:4326",WIDTH:10,HEIGHT:10,BBOX:"-0.5,-0.5,0.5,0.5",LAYERS:Object.keys(layerExpressions).filter(function(layer){return wmsLayers.includes(layer)}).join(","),csrf_token:MiscUtils.getCsrfToken()};if(wmsParams.FILTER){reqParams.FILTER=wmsParams.FILTER}if(wmsParams.FILTER_GEOM){reqParams.FILTER_GEOM=wmsParams.FILTER_GEOM}var options={headers:{"content-type":"application/x-www-form-urlencoded"},responseType:"blob"};axios.post(themeLayer.url,new URLSearchParams(reqParams).toString(),options).then(function(){_this.setState({filterInvalid:false})})["catch"](function(){_this.setState({filterInvalid:true})})}var permalinkState=Object.entries(_this.state.filters).reduce(function(res,_ref3){var _ref4=_slicedToArray(_ref3,2),key=_ref4[0],value=_ref4[1];if(value.active){return _objectSpread(_objectSpread({},res),{},_defineProperty({},key,value.values))}else{return res}},{});if(_this.state.geomFilter.geom){permalinkState.__geomfilter=_this.state.geomFilter.geom.coordinates}permalinkState.__custom=Object.values(_this.state.customFilters).map(function(entry){if(!entry.active){return null}var expr=null;try{expr=JSON.parse(entry.expr)}catch(e){return null}return{title:entry.title,layer:entry.layer,expr:expr}}).filter(Boolean);_this.props.setPermalinkParameters({f:JSON.stringify(permalinkState)})});_defineProperty(_this,"buildTimeFilter",function(layer,filters){if(layer.sublayers){layer.sublayers.forEach(function(sublayer){return _this.buildTimeFilter(sublayer,filters)})}else{var timeDimension=(layer.dimensions||[]).find(function(dimension){return dimension.units==="ISO8601"});if(timeDimension){filters[layer.name]=[[[timeDimension.fieldName,">=","$tstart$"],"or",[timeDimension.fieldName,"IS",null]],"and",[[timeDimension.endFieldName,"<=","$tend$"],"or",[timeDimension.endFieldName,"IS",null]]]}}});_defineProperty(_this,"filterMapButtonClicked",function(){var mapClickAction=ConfigUtils.getPluginConfig("MapFilter").mapClickAction;_this.props.setCurrentTask(_this.props.currentTask==="MapFilter"?null:"MapFilter",null,mapClickAction)});_defineProperty(_this,"onSidebarHide",function(){_this.setState(function(state){var newState=_objectSpread({},state);if(!state.geomFilter.geom&&state.geomFilter.geomType){newState.geomFilter.geomType=null}if(state.geomFilter.picking){newState.geomFilter.picking=false}return newState})});_defineProperty(_this,"renderBody",function(){if(_this.state.filterEditor){return _this.renderFilterEditor()}else{return[_this.renderInvalidWarning()].concat(_toConsumableArray(_this.renderPredefinedFilters()),[_this.props.allowFilterByTime?_this.renderTimeFilter():null,_this.props.allowFilterByGeom?_this.renderGeomFilter():null],_toConsumableArray(_this.renderCustomFilters()))}});_defineProperty(_this,"renderInvalidWarning",function(){if(_this.state.filterInvalid){return/*#__PURE__*/React.createElement("div",{className:"map-filter-invalid-warning",key:"InvalidFilterWarning"},/*#__PURE__*/React.createElement(Icon,{icon:"warning"})," ",/*#__PURE__*/React.createElement("div",null,LocaleUtils.tr("mapfilter.brokenrendering")))}return null});_defineProperty(_this,"renderFilterEditor",function(){var commitButtons=[{key:"Save",icon:"ok",label:LocaleUtils.tr("mapfilter.save"),extraClasses:"button-accept"},{key:"Cancel",icon:"remove",label:LocaleUtils.tr("mapfilter.cancel"),extraClasses:"button-reject"}];var sampleFilters="[\"field\", \"=\", \"val\"]\n"+"[[\"field\", \">\", \"val1\"], \"and\", [\"field\", \"<\", \"val2\"]]";return/*#__PURE__*/React.createElement("div",{className:"map-filter-editor-container"},/*#__PURE__*/React.createElement(TextInput,{className:"map-filter-editor "+(_this.state.filterEditor.invalid?"map-filter-editor-invalid":""),multiline:true,onChange:function onChange(value){return _this.setState(function(state){return{filterEditor:_objectSpread(_objectSpread({},state.filterEditor),{},{value:value,invalid:false})}})},placeholder:sampleFilters,value:_this.state.filterEditor.value}),_this.state.filterEditor.invalid?/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement(Icon,{icon:"warning"})," ",/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("mapfilter.invalidfilter"))):null,/*#__PURE__*/React.createElement(ButtonBar,{buttons:commitButtons,onClick:_this.commitFilterEditor}))});_defineProperty(_this,"commitFilterEditor",function(action){if(action==="Save"){// Validate expression
 var _validateExpression=function validateExpression(values){if(Array.isArray(values[0])){// Even entries must be arrays, odd entries must be 'and' or 'or'
 return values.every(function(value,idx){return idx%2===0?Array.isArray(value)&&_validateExpression(value):["and","or"].includes(value.toLowerCase())},true)}else{return values.length===3&&typeof values[0]==="string"&&typeof values[1]==="string"&&["string","number"].includes(_typeof(values[2]))}};var filterexpr=null;try{filterexpr=JSON.parse(_this.state.filterEditor.value)}catch(e){// Pass
-}if(!Array.isArray(filterexpr)||!_validateExpression(filterexpr)){_this.setState(function(state){return{filterEditor:_objectSpread(_objectSpread({},state.filterEditor),{},{invalid:true})}});return}_this.updateCustomFilter(_this.state.filterEditor.filterId,"expr",_this.state.filterEditor.value)}_this.setState({filterEditor:null})});_defineProperty(_this,"renderPredefinedFilters",function(){var predefinedFilters=_this.collectPredefinedFilters(_this.props.layers);return Object.values(predefinedFilters).map(function(config){var _config$title,_this$state$filters$c;return/*#__PURE__*/React.createElement("div",{className:"map-filter-entry",key:config.id},/*#__PURE__*/React.createElement("div",{className:"map-filter-entry-titlebar"},/*#__PURE__*/React.createElement("span",{className:"map-filter-entry-title"},(_config$title=config.title)!==null&&_config$title!==void 0?_config$title:LocaleUtils.tr(config.titlemsgid)),/*#__PURE__*/React.createElement(ToggleSwitch,{active:(_this$state$filters$c=_this.state.filters[config.id])===null||_this$state$filters$c===void 0?void 0:_this$state$filters$c.active,onChange:function onChange(active){return _this.toggleFilter(config.id,active)}})),/*#__PURE__*/React.createElement("div",{className:"map-filter-entry-body"},/*#__PURE__*/React.createElement("table",{className:"map-filter-entry-fields"},/*#__PURE__*/React.createElement("tbody",null,config.fields.map(function(field){var _field$title;return/*#__PURE__*/React.createElement("tr",{key:field.id},/*#__PURE__*/React.createElement("td",null,(_field$title=field.title)!==null&&_field$title!==void 0?_field$title:LocaleUtils.tr(field.titlemsgid),": "),/*#__PURE__*/React.createElement("td",null,field.inputConfig.type==="select"?/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.updateFieldValue(config.id,field.id,ev.target.value)},value:_this.state.filters[config.id].values[field.id]},!field.defaultValue?/*#__PURE__*/React.createElement("option",{value:""},LocaleUtils.tr("mapfilter.select")):null,field.inputConfig.options.map(function(entry){var _entry$value,_entry$value2,_entry$label;return/*#__PURE__*/React.createElement("option",{key:(_entry$value=entry.value)!==null&&_entry$value!==void 0?_entry$value:entry,value:(_entry$value2=entry.value)!==null&&_entry$value2!==void 0?_entry$value2:entry},(_entry$label=entry.label)!==null&&_entry$label!==void 0?_entry$label:entry.labelmsgid?LocaleUtils.tr(entry.labelmsgid):entry)})):/*#__PURE__*/React.createElement("input",_extends({onChange:function onChange(ev){return _this.updateFieldValue(config.id,field.id,ev.target.value)},type:"text",value:_this.state.filters[config.id].values[field.id]||""},field.inputConfig))))})))))})});_defineProperty(_this,"renderTimeFilter",function(){var timeFilter=_this.state.filters.__timefilter;if(!timeFilter){return null}return/*#__PURE__*/React.createElement("div",{className:"map-filter-entry",key:"__timefilter"},/*#__PURE__*/React.createElement("div",{className:"map-filter-entry-titlebar"},/*#__PURE__*/React.createElement("span",{className:"map-filter-entry-title"},LocaleUtils.tr("mapfilter.timefilter")),/*#__PURE__*/React.createElement(ToggleSwitch,{active:timeFilter.active,onChange:function onChange(active){return _this.toggleFilter("__timefilter",active)}})),/*#__PURE__*/React.createElement("div",{className:"map-filter-entry-body"},/*#__PURE__*/React.createElement("table",{className:"map-filter-entry-fields"},/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapfilter.timefrom"),": "),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(DateTimeInput,{onChange:function onChange(value){return _this.updateFieldValue("__timefilter","tstart",value)},value:timeFilter.values.tstart}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapfilter.timeto"),": "),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(DateTimeInput,{onChange:function onChange(value){return _this.updateFieldValue("__timefilter","tend",value)},value:timeFilter.values.tend})))))))});_defineProperty(_this,"renderCustomFilters",function(){if(!_this.props.allowCustomFilters){return[]}var layerNames=_this.props.layers.reduce(function(res,layer){if(layer.role===LayerRole.THEME){return[].concat(_toConsumableArray(res),_toConsumableArray(LayerUtils.getSublayerNames(layer,true,function(lyr){return!!lyr.geometryType})))}return res},[]);var customFilters=Object.entries(_this.state.customFilters).map(function(_ref5){var _ref6=_slicedToArray(_ref5,2),key=_ref6[0],entry=_ref6[1];return/*#__PURE__*/React.createElement("div",{className:"map-filter-entry",key:key},/*#__PURE__*/React.createElement("div",{className:"map-filter-entry-titlebar map-filter-custom-entry-titlebar"},/*#__PURE__*/React.createElement(TextInput,{className:"map-filter-entry-title",onChange:function onChange(value){return _this.updateCustomFilter(key,"title",value)},value:entry.title}),/*#__PURE__*/React.createElement(ToggleSwitch,{active:entry.active,onChange:function onChange(active){return _this.updateCustomFilter(key,"active",active)}}),/*#__PURE__*/React.createElement(Icon,{icon:"trash",onClick:function onClick(){return _this.deleteCustomFilter(key)}})),/*#__PURE__*/React.createElement("div",{className:"map-filter-entry-body"},/*#__PURE__*/React.createElement("table",{className:"map-filter-entry-fields"},/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ComboBox,{onChange:function onChange(value){return _this.updateCustomFilter(key,"layer",value)},placeholder:LocaleUtils.tr("mapfilter.selectlayer"),value:entry.layer},layerNames.map(function(layerName){return/*#__PURE__*/React.createElement("div",{key:layerName,value:layerName},layerName)}))),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("input",{className:"map-filter-custom-entry-expr",onChange:function onChange(){},onClick:function onClick(){return _this.setState({filterEditor:{filterId:key,value:entry.expr}})},readOnly:true,value:entry.expr})))))))});return[].concat(_toConsumableArray(customFilters),[/*#__PURE__*/React.createElement("div",{className:"map-filter-add-custom",key:"addcustomfilter"},/*#__PURE__*/React.createElement("button",{className:"button",onClick:_this.addCustomFilter,type:"button"},LocaleUtils.tr("mapfilter.addcustomfilter")))])});_defineProperty(_this,"renderGeomFilter",function(){var geomFilter=_this.state.geomFilter;var filterButtons=[{key:"Polygon",tooltip:LocaleUtils.tr("redlining.polygon"),icon:"polygon",label:LocaleUtils.tr("redlining.polygon")},{key:"Circle",tooltip:LocaleUtils.tr("redlining.circle"),icon:"circle",label:LocaleUtils.tr("redlining.circle")},{key:"Pick",tooltip:LocaleUtils.tr("redlining.pick"),icon:"pick",label:LocaleUtils.tr("redlining.pick")}];var active=geomFilter.picking?"Pick":geomFilter.geomType||"";return/*#__PURE__*/React.createElement("div",{className:"map-filter-entry",key:"__geomfilter"},/*#__PURE__*/React.createElement("div",{className:"map-filter-entry-titlebar"},/*#__PURE__*/React.createElement("span",{className:"map-filter-entry-title"},LocaleUtils.tr("mapfilter.geomfilter"))),/*#__PURE__*/React.createElement("div",{className:"map-filter-entry-body"},/*#__PURE__*/React.createElement(ButtonBar,{active:active,buttons:filterButtons,onClick:_this.triggerGeometryFilter}),/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("label",null,/*#__PURE__*/React.createElement("input",{checked:!!geomFilter.hideFilterGeom,onChange:_this.toggleHideFilterGeom,type:"checkbox"})," ",LocaleUtils.tr("mapfilter.hidefiltergeom")))))});_defineProperty(_this,"triggerGeometryFilter",function(action){if(action==="Pick"){_this.setState(function(state){return{geomFilter:_objectSpread(_objectSpread({},state.geomFilter),{},{geom:null,picking:!state.geomFilter.picking,geomType:null})}})}else{_this.setState(function(state){return{geomFilter:_objectSpread(_objectSpread({},state.geomFilter),{},{geom:null,picking:false,geomType:state.geomFilter.geomType===action?null:action})}})}});_defineProperty(_this,"setFilterGeometry",function(geom){_this.setState(function(state){return{geomFilter:_objectSpread(_objectSpread({},state.geomFilter),{},{geom:geom})}})});_defineProperty(_this,"filterGeomPicked",function(layer,feature){_this.setState(function(state){return{geomFilter:_objectSpread(_objectSpread({},state.geomFilter),{},{geom:feature.geometry,geomType:feature.geometry.type})}})});_defineProperty(_this,"toggleHideFilterGeom",function(ev){_this.setState(function(state){return{geomFilter:_objectSpread(_objectSpread({},state.geomFilter),{},{hideFilterGeom:ev.target.checked})}})});_defineProperty(_this,"toggleFilter",function(filterId,active){_this.setState(function(state){return{filters:_objectSpread(_objectSpread({},state.filters),{},_defineProperty({},filterId,_objectSpread(_objectSpread({},state.filters[filterId]),{},{active:active})))}})});_defineProperty(_this,"updateFieldValue",function(filterId,fieldId,value){_this.setState(function(state){return{filters:_objectSpread(_objectSpread({},state.filters),{},_defineProperty({},filterId,_objectSpread(_objectSpread({},state.filters[filterId]),{},{values:_objectSpread(_objectSpread({},state.filters[filterId].values),{},_defineProperty({},fieldId,value))})))}})});_defineProperty(_this,"updateCustomFilter",function(filterId,key,value){_this.setState(function(state){return{customFilters:_objectSpread(_objectSpread({},state.customFilters),{},_defineProperty({},filterId,_objectSpread(_objectSpread({},state.customFilters[filterId]),{},_defineProperty({},key,value))))}})});_defineProperty(_this,"addCustomFilter",function(){var key=uuidv1();_this.setState(function(state){return{customFilters:_objectSpread(_objectSpread({},state.customFilters),{},_defineProperty({},key,{active:false,title:"",layer:"",expr:""}))}})});_defineProperty(_this,"deleteCustomFilter",function(key){_this.setState(function(state){var newCustomFilters=_objectSpread({},state.customFilters);delete newCustomFilters[key];return{customFilters:newCustomFilters}})});_defineProperty(_this,"replaceExpressionVariables",function(expr,values,defaultValues){if(expr.length<3||expr.length%2===0||typeof expr[1]!=="string"){// Invalid expression: array must have at least three and odd number of entries,
+}if(!Array.isArray(filterexpr)||!_validateExpression(filterexpr)){_this.setState(function(state){return{filterEditor:_objectSpread(_objectSpread({},state.filterEditor),{},{invalid:true})}});return}_this.updateCustomFilter(_this.state.filterEditor.filterId,"expr",_this.state.filterEditor.value)}_this.setState({filterEditor:null})});_defineProperty(_this,"renderPredefinedFilters",function(){var predefinedFilters=_this.collectPredefinedFilters(_this.props.layers);return Object.values(predefinedFilters).map(function(config){var _config$title,_this$state$filters$c;return/*#__PURE__*/React.createElement("div",{className:"map-filter-entry",key:config.id},/*#__PURE__*/React.createElement("div",{className:"map-filter-entry-titlebar"},/*#__PURE__*/React.createElement("span",{className:"map-filter-entry-title"},(_config$title=config.title)!==null&&_config$title!==void 0?_config$title:LocaleUtils.tr(config.titlemsgid)),/*#__PURE__*/React.createElement(ToggleSwitch,{active:(_this$state$filters$c=_this.state.filters[config.id])===null||_this$state$filters$c===void 0?void 0:_this$state$filters$c.active,onChange:function onChange(active){return _this.toggleFilter(config.id,active)}})),/*#__PURE__*/React.createElement("div",{className:"map-filter-entry-body"},/*#__PURE__*/React.createElement("table",{className:"map-filter-entry-fields"},/*#__PURE__*/React.createElement("tbody",null,config.fields.map(function(field){var _field$title;return/*#__PURE__*/React.createElement("tr",{key:field.id},/*#__PURE__*/React.createElement("td",null,(_field$title=field.title)!==null&&_field$title!==void 0?_field$title:LocaleUtils.tr(field.titlemsgid),": "),/*#__PURE__*/React.createElement("td",null,field.inputConfig.type==="select"?/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.updateFieldValue(config.id,field.id,ev.target.value)},value:_this.state.filters[config.id].values[field.id]},!field.defaultValue?/*#__PURE__*/React.createElement("option",{value:""},LocaleUtils.tr("mapfilter.select")):null,field.inputConfig.options.map(function(entry){var _entry$value,_entry$value2,_entry$label;return/*#__PURE__*/React.createElement("option",{key:(_entry$value=entry.value)!==null&&_entry$value!==void 0?_entry$value:entry,value:(_entry$value2=entry.value)!==null&&_entry$value2!==void 0?_entry$value2:entry},(_entry$label=entry.label)!==null&&_entry$label!==void 0?_entry$label:entry.labelmsgid?LocaleUtils.tr(entry.labelmsgid):entry)})):/*#__PURE__*/React.createElement("input",_extends({onChange:function onChange(ev){return _this.updateFieldValue(config.id,field.id,ev.target.value)},type:"text",value:_this.state.filters[config.id].values[field.id]||""},field.inputConfig))))})))))})});_defineProperty(_this,"renderTimeFilter",function(){var timeFilter=_this.state.filters.__timefilter;if(!timeFilter){return null}return/*#__PURE__*/React.createElement("div",{className:"map-filter-entry",key:"__timefilter"},/*#__PURE__*/React.createElement("div",{className:"map-filter-entry-titlebar"},/*#__PURE__*/React.createElement("span",{className:"map-filter-entry-title"},LocaleUtils.tr("mapfilter.timefilter")),/*#__PURE__*/React.createElement(ToggleSwitch,{active:timeFilter.active,onChange:function onChange(active){return _this.toggleFilter("__timefilter",active)}})),/*#__PURE__*/React.createElement("div",{className:"map-filter-entry-body"},/*#__PURE__*/React.createElement("table",{className:"map-filter-entry-fields"},/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapfilter.timefrom"),": "),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(DateTimeInput,{onChange:function onChange(value){return _this.updateFieldValue("__timefilter","tstart",value)},value:timeFilter.values.tstart}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapfilter.timeto"),": "),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(DateTimeInput,{onChange:function onChange(value){return _this.updateFieldValue("__timefilter","tend",value)},value:timeFilter.values.tend})))))))});_defineProperty(_this,"renderCustomFilters",function(){if(!_this.props.allowCustomFilters){return[]}var layerNames=_this.props.layers.reduce(function(res,layer){if(layer.role===LayerRole.THEME){return[].concat(_toConsumableArray(res),_toConsumableArray(LayerUtils.getSublayerNames(layer,true,function(lyr){return!!lyr.geometryType})))}return res},[]);var customFilters=Object.entries(_this.state.customFilters).map(function(_ref5){var _ref6=_slicedToArray(_ref5,2),key=_ref6[0],entry=_ref6[1];return/*#__PURE__*/React.createElement("div",{className:"map-filter-entry",key:key},/*#__PURE__*/React.createElement("div",{className:"map-filter-entry-titlebar map-filter-custom-entry-titlebar"},/*#__PURE__*/React.createElement(TextInput,{className:"map-filter-entry-title",onChange:function onChange(value){return _this.updateCustomFilter(key,"title",value)},value:entry.title}),/*#__PURE__*/React.createElement(ToggleSwitch,{active:entry.active,onChange:function onChange(active){return _this.updateCustomFilter(key,"active",active)}}),/*#__PURE__*/React.createElement(Icon,{icon:"trash",onClick:function onClick(){return _this.deleteCustomFilter(key)}})),/*#__PURE__*/React.createElement("div",{className:"map-filter-entry-body"},/*#__PURE__*/React.createElement("table",{className:"map-filter-entry-fields"},/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ComboBox,{onChange:function onChange(value){return _this.updateCustomFilter(key,"layer",value)},placeholder:LocaleUtils.tr("mapfilter.selectlayer"),value:entry.layer},layerNames.map(function(layerName){return/*#__PURE__*/React.createElement("div",{key:layerName,value:layerName},layerName)}))),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("input",{className:"map-filter-custom-entry-expr",onChange:function onChange(){},onClick:function onClick(){return _this.setState({filterEditor:{filterId:key,value:entry.expr}})},readOnly:true,value:entry.expr})))))))});return[].concat(_toConsumableArray(customFilters),[/*#__PURE__*/React.createElement("div",{className:"map-filter-add-custom",key:"addcustomfilter"},/*#__PURE__*/React.createElement("button",{className:"button",onClick:_this.addCustomFilter,type:"button"},LocaleUtils.tr("mapfilter.addcustomfilter")))])});_defineProperty(_this,"renderGeomFilter",function(){var geomFilter=_this.state.geomFilter;var filterButtons=[{key:"Polygon",tooltip:LocaleUtils.tr("redlining.polygon"),icon:"polygon",label:LocaleUtils.tr("redlining.polygon")},{key:"Circle",tooltip:LocaleUtils.tr("redlining.circle"),icon:"circle",label:LocaleUtils.tr("redlining.circle")},{key:"Pick",tooltip:LocaleUtils.tr("redlining.pick"),icon:"pick",label:LocaleUtils.tr("redlining.pick")}];var active=geomFilter.picking?"Pick":geomFilter.geomType||"";return/*#__PURE__*/React.createElement("div",{className:"map-filter-entry",key:"__geomfilter"},/*#__PURE__*/React.createElement("div",{className:"map-filter-entry-titlebar"},/*#__PURE__*/React.createElement("span",{className:"map-filter-entry-title"},LocaleUtils.tr("mapfilter.geomfilter"))),/*#__PURE__*/React.createElement("div",{className:"map-filter-entry-body"},/*#__PURE__*/React.createElement(ButtonBar,{active:active,buttons:filterButtons,onClick:_this.triggerGeometryFilter}),/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("label",null,/*#__PURE__*/React.createElement("input",{checked:!!geomFilter.hideFilterGeom,onChange:_this.toggleHideFilterGeom,type:"checkbox"})," ",LocaleUtils.tr("mapfilter.hidefiltergeom")))))});_defineProperty(_this,"triggerGeometryFilter",function(action){if(action==="Pick"){_this.setState(function(state){return{geomFilter:_objectSpread(_objectSpread({},state.geomFilter),{},{geom:null,picking:!state.geomFilter.picking,geomType:null})}})}else{_this.setState(function(state){return{geomFilter:_objectSpread(_objectSpread({},state.geomFilter),{},{geom:null,picking:false,geomType:state.geomFilter.geomType===action?null:action})}})}});_defineProperty(_this,"setFilterGeometry",function(geom){_this.setState(function(state){return{geomFilter:_objectSpread(_objectSpread({},state.geomFilter),{},{geom:geom})}})});_defineProperty(_this,"filterGeomPicked",function(layer,feature){_this.setState(function(state){return{geomFilter:_objectSpread(_objectSpread({},state.geomFilter),{},{geom:feature.geometry,geomType:feature.geometry.type})}})});_defineProperty(_this,"toggleHideFilterGeom",function(ev){_this.setState(function(state){return{geomFilter:_objectSpread(_objectSpread({},state.geomFilter),{},{hideFilterGeom:ev.target.checked})}})});_defineProperty(_this,"toggleFilter",function(filterId,active){_this.setState(function(state){return{filters:_objectSpread(_objectSpread({},state.filters),{},_defineProperty({},filterId,_objectSpread(_objectSpread({},state.filters[filterId]),{},{active:active})))}})});_defineProperty(_this,"updateFieldValue",function(filterId,fieldId,value){_this.setState(function(state){return{filters:_objectSpread(_objectSpread({},state.filters),{},_defineProperty({},filterId,_objectSpread(_objectSpread({},state.filters[filterId]),{},{values:_objectSpread(_objectSpread({},state.filters[filterId].values),{},_defineProperty({},fieldId,value))})))}})});_defineProperty(_this,"updateCustomFilter",function(filterId,key,value){_this.setState(function(state){return{customFilters:_objectSpread(_objectSpread({},state.customFilters),{},_defineProperty({},filterId,_objectSpread(_objectSpread({},state.customFilters[filterId]),{},_defineProperty({},key,value))))}})});_defineProperty(_this,"addCustomFilter",function(){var key=uuidv4();_this.setState(function(state){return{customFilters:_objectSpread(_objectSpread({},state.customFilters),{},_defineProperty({},key,{active:false,title:"",layer:"",expr:""}))}})});_defineProperty(_this,"deleteCustomFilter",function(key){_this.setState(function(state){var newCustomFilters=_objectSpread({},state.customFilters);delete newCustomFilters[key];return{customFilters:newCustomFilters}})});_defineProperty(_this,"replaceExpressionVariables",function(expr,values,defaultValues){if(expr.length<3||expr.length%2===0||typeof expr[1]!=="string"){// Invalid expression: array must have at least three and odd number of entries,
 // mid entry must be a string (operator)
 return null}var op=expr[1].toLowerCase();if(typeof expr[0]==="string"){if(typeof expr[2]==="string"){var right=Object.entries(values).reduce(function(res,_ref7){var _ref9;var _ref8=_slicedToArray(_ref7,2),key=_ref8[0],value=_ref8[1];return res.replace("$".concat(key,"$"),(_ref9=value||defaultValues[key])!==null&&_ref9!==void 0?_ref9:value)},expr[2]);return[expr[0],op,right]}else{return[expr[0],op,expr[2]]}}else{// Even indices must be arrays, odd and|or strings
 var isAndOr=function isAndOr(entry){return["and","or"].includes(String(entry).toLowerCase())};var invalid=expr.find(function(entry,idx){return idx%2===0?!Array.isArray(entry):!isAndOr(entry)});if(invalid){return null}return expr.map(function(entry,idx){return idx%2===0?_this.replaceExpressionVariables(entry,values,defaultValues):entry})}});_this.applyFilterTimeout=null;return _this}_inherits(MapFilter,_React$Component);return _createClass(MapFilter,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this2=this;if(this.props.theme!==prevProps.theme){var _this$props$startupPa;// Initialize filter state
-var predefinedFilters=this.collectPredefinedFilters(this.props.layers);var filters=this.initializeFilters(predefinedFilters,{});var geomFilter={};var customFilters={};if(!prevProps.theme&&(_this$props$startupPa=this.props.startupParams)!==null&&_this$props$startupPa!==void 0&&_this$props$startupPa.f){try{var startupConfig=JSON.parse(this.props.startupParams.f);Object.entries(startupConfig).forEach(function(_ref10){var _ref11=_slicedToArray(_ref10,2),filterId=_ref11[0],values=_ref11[1];if(filterId in filters){filters[filterId].active=true;Object.entries(values).forEach(function(_ref12){var _ref13=_slicedToArray(_ref12,2),fieldId=_ref13[0],value=_ref13[1];filters[filterId].values[fieldId]=value})}});if("__geomfilter"in startupConfig){geomFilter={geomType:"Polygon",geom:{type:"Polygon",coordinates:startupConfig.__geomfilter}}}if("__custom"in startupConfig){customFilters=startupConfig.__custom.reduce(function(res,entry){return _objectSpread(_objectSpread({},res),{},_defineProperty({},uuidv1(),{title:entry.title||"",layer:entry.layer,expr:JSON.stringify(entry.expr),active:true}))},{})}}catch(e){/* eslint-disable-next-line */console.log("Error while parsing startup filter")}}this.setState({filters:filters,geomFilter:geomFilter,customFilters:customFilters})}else if(this.props.layers!==prevProps.layers){var _predefinedFilters=this.collectPredefinedFilters(this.props.layers);var prevPredefinedFilters=this.collectPredefinedFilters(prevProps.layers);if(!isEqual(Object.keys(_predefinedFilters).sort(),Object.keys(prevPredefinedFilters).sort())){this.setState(function(state){return{filters:_this2.initializeFilters(_predefinedFilters,state.filters)}})}}if(this.state.filters!==prevState.filters||this.state.customFilters!==prevState.customFilters||this.state.geomFilter.geom!==prevState.geomFilter.geom){clearTimeout(this.applyFilterTimeout);this.applyFilterTimeout=setTimeout(this.applyFilter,500)}}},{key:"render",value:function render(){var _this$state$geomFilte,_this$state$geomFilte2,_this3=this,_this$state$geomFilte3,_this$state$geomFilte4;var button=null;var taskActive=this.props.currentTask==="MapFilter";if(this.props.position>=0){var filterActive=!isEmpty(this.props.filter.filterParams)||!!this.props.filter.filterGeom;var title=LocaleUtils.tr("appmenu.items.MapFilter");var className=filterActive&&this.state.filterInvalid?"filter-map-button-error":"";button=/*#__PURE__*/React.createElement(MapButton,{active:taskActive,className:className,engaged:filterActive&&!this.state.filterInvalid,icon:"filter",key:"MapFilterButton",onClick:this.filterMapButtonClicked,position:this.props.position,tooltip:title})}var selGeomType=(_this$state$geomFilte=this.state.geomFilter)!==null&&_this$state$geomFilte!==void 0&&_this$state$geomFilte.picking?null:(_this$state$geomFilte2=this.state.geomFilter)===null||_this$state$geomFilte2===void 0?void 0:_this$state$geomFilte2.geomType;return[button,/*#__PURE__*/React.createElement(SideBar,{icon:"filter",id:"MapFilter",key:"MapFilterSidebar",onHide:this.onSidebarHide,side:this.props.side,title:LocaleUtils.tr("appmenu.items.MapFilter"),width:"20em"},function(){return{body:_this3.renderBody()}}),this.state.geomFilter.picking?/*#__PURE__*/React.createElement(PickFeature,{featureFilter:function featureFilter(feature){var _feature$geometry;return((feature===null||feature===void 0||(_feature$geometry=feature.geometry)===null||_feature$geometry===void 0?void 0:_feature$geometry.type)||"").endsWith("Polygon")},featurePicked:this.filterGeomPicked,highlightStyle:this.props.highlightStyle,key:"FeaturePicker"}):null,/*#__PURE__*/React.createElement(MapSelection,{active:taskActive&&!!selGeomType,geomType:selGeomType,geometry:(_this$state$geomFilte3=this.state.geomFilter)===null||_this$state$geomFilte3===void 0?void 0:_this$state$geomFilte3.geom,geometryChanged:this.setFilterGeometry,hideGeometry:(_this$state$geomFilte4=this.state.geomFilter)===null||_this$state$geomFilte4===void 0?void 0:_this$state$geomFilte4.hideFilterGeom,key:"MapSelection",styleOptions:this.props.highlightStyle})]}}])}(React.Component);_defineProperty(MapFilter,"propTypes",{/** Whether to allow custom filters. */allowCustomFilters:PropTypes.bool,/** Whether to allow filter by geometry. Requires the filter_geom plugin from qwc-qgis-server-plugins, and the filter will only be applied to postgis layers. */allowFilterByGeom:PropTypes.bool,/** Whether to display the temporal filter if temporal dimensions are found. */allowFilterByTime:PropTypes.bool,currentTask:PropTypes.string,filter:PropTypes.object,/** The style used for highlighting filter geometries. */highlightStyle:PropTypes.shape({/* Stroke color rgba array, i.e. [255, 0, 0, 0.5] */strokeColor:PropTypes.array,/* Stroke width */strokeWidth:PropTypes.number,/* Stroke dash/gap pattern array. Empty for solid line. */strokeDash:PropTypes.array,/* Fill color rgba array, i.e. [255, 0, 0, 0.33] */fillColor:PropTypes.array}),layers:PropTypes.array,/** The position slot index of the map button, from the bottom (0: bottom slot). Set to -1 to hide the button. */position:PropTypes.number,setCurrentTask:PropTypes.func,setFilter:PropTypes.func,setPermalinkParameters:PropTypes.func,/** The side of the application on which to display the sidebar. */side:PropTypes.string,startupParams:PropTypes.object,theme:PropTypes.object});_defineProperty(MapFilter,"defaultProps",{allowFilterByTime:true,position:5,predefinedFilters:[],highlightStyle:{strokeColor:[0,0,0],fillColor:[255,255,0,0.25]}});export default connect(function(state){return{currentTask:state.task.id,theme:state.theme.current,layers:state.layers.flat,filter:state.layers.filter,startupParams:state.localConfig.startupParams}},{setFilter:setFilter,setCurrentTask:setCurrentTask,setPermalinkParameters:setPermalinkParameters})(MapFilter);
+var predefinedFilters=this.collectPredefinedFilters(this.props.layers);var filters=this.initializeFilters(predefinedFilters,{});var geomFilter={};var customFilters={};if(!prevProps.theme&&(_this$props$startupPa=this.props.startupParams)!==null&&_this$props$startupPa!==void 0&&_this$props$startupPa.f){try{var startupConfig=JSON.parse(this.props.startupParams.f);Object.entries(startupConfig).forEach(function(_ref10){var _ref11=_slicedToArray(_ref10,2),filterId=_ref11[0],values=_ref11[1];if(filterId in filters){filters[filterId].active=true;Object.entries(values).forEach(function(_ref12){var _ref13=_slicedToArray(_ref12,2),fieldId=_ref13[0],value=_ref13[1];filters[filterId].values[fieldId]=value})}});if("__geomfilter"in startupConfig){geomFilter={geomType:"Polygon",geom:{type:"Polygon",coordinates:startupConfig.__geomfilter}}}if("__custom"in startupConfig){customFilters=startupConfig.__custom.reduce(function(res,entry){return _objectSpread(_objectSpread({},res),{},_defineProperty({},uuidv4(),{title:entry.title||"",layer:entry.layer,expr:JSON.stringify(entry.expr),active:true}))},{})}}catch(e){/* eslint-disable-next-line */console.log("Error while parsing startup filter")}}this.setState({filters:filters,geomFilter:geomFilter,customFilters:customFilters})}else if(this.props.layers!==prevProps.layers){var _predefinedFilters=this.collectPredefinedFilters(this.props.layers);var prevPredefinedFilters=this.collectPredefinedFilters(prevProps.layers);if(!isEqual(Object.keys(_predefinedFilters).sort(),Object.keys(prevPredefinedFilters).sort())){this.setState(function(state){return{filters:_this2.initializeFilters(_predefinedFilters,state.filters)}})}}if(this.state.filters!==prevState.filters||this.state.customFilters!==prevState.customFilters||this.state.geomFilter.geom!==prevState.geomFilter.geom){clearTimeout(this.applyFilterTimeout);this.applyFilterTimeout=setTimeout(this.applyFilter,500)}}},{key:"render",value:function render(){var _this$state$geomFilte,_this$state$geomFilte2,_this3=this,_this$state$geomFilte3,_this$state$geomFilte4;var button=null;var taskActive=this.props.currentTask==="MapFilter";if(this.props.position>=0){var filterActive=!isEmpty(this.props.filter.filterParams)||!!this.props.filter.filterGeom;var title=LocaleUtils.tr("appmenu.items.MapFilter");var className=filterActive&&this.state.filterInvalid?"filter-map-button-error":"";button=/*#__PURE__*/React.createElement(MapButton,{active:taskActive,className:className,engaged:filterActive&&!this.state.filterInvalid,icon:"filter",key:"MapFilterButton",onClick:this.filterMapButtonClicked,position:this.props.position,tooltip:title})}var selGeomType=(_this$state$geomFilte=this.state.geomFilter)!==null&&_this$state$geomFilte!==void 0&&_this$state$geomFilte.picking?null:(_this$state$geomFilte2=this.state.geomFilter)===null||_this$state$geomFilte2===void 0?void 0:_this$state$geomFilte2.geomType;return[button,/*#__PURE__*/React.createElement(SideBar,{icon:"filter",id:"MapFilter",key:"MapFilterSidebar",onHide:this.onSidebarHide,side:this.props.side,title:LocaleUtils.tr("appmenu.items.MapFilter"),width:"20em"},function(){return{body:_this3.renderBody()}}),this.state.geomFilter.picking?/*#__PURE__*/React.createElement(PickFeature,{featureFilter:function featureFilter(feature){var _feature$geometry;return((feature===null||feature===void 0||(_feature$geometry=feature.geometry)===null||_feature$geometry===void 0?void 0:_feature$geometry.type)||"").endsWith("Polygon")},featurePicked:this.filterGeomPicked,highlightStyle:this.props.highlightStyle,key:"FeaturePicker"}):null,/*#__PURE__*/React.createElement(MapSelection,{active:taskActive&&!!selGeomType,geomType:selGeomType,geometry:(_this$state$geomFilte3=this.state.geomFilter)===null||_this$state$geomFilte3===void 0?void 0:_this$state$geomFilte3.geom,geometryChanged:this.setFilterGeometry,hideGeometry:(_this$state$geomFilte4=this.state.geomFilter)===null||_this$state$geomFilte4===void 0?void 0:_this$state$geomFilte4.hideFilterGeom,key:"MapSelection",styleOptions:this.props.highlightStyle})]}}])}(React.Component);_defineProperty(MapFilter,"propTypes",{/** Whether to allow custom filters. */allowCustomFilters:PropTypes.bool,/** Whether to allow filter by geometry. Requires the filter_geom plugin from qwc-qgis-server-plugins, and the filter will only be applied to postgis layers. */allowFilterByGeom:PropTypes.bool,/** Whether to display the temporal filter if temporal dimensions are found. */allowFilterByTime:PropTypes.bool,currentTask:PropTypes.string,filter:PropTypes.object,/** The style used for highlighting filter geometries. */highlightStyle:PropTypes.shape({/* Stroke color rgba array, i.e. [255, 0, 0, 0.5] */strokeColor:PropTypes.array,/* Stroke width */strokeWidth:PropTypes.number,/* Stroke dash/gap pattern array. Empty for solid line. */strokeDash:PropTypes.array,/* Fill color rgba array, i.e. [255, 0, 0, 0.33] */fillColor:PropTypes.array}),layers:PropTypes.array,/** The position slot index of the map button, from the bottom (0: bottom slot). Set to -1 to hide the button. */position:PropTypes.number,setCurrentTask:PropTypes.func,setFilter:PropTypes.func,setPermalinkParameters:PropTypes.func,/** The side of the application on which to display the sidebar. */side:PropTypes.string,startupParams:PropTypes.object,theme:PropTypes.object});_defineProperty(MapFilter,"defaultProps",{allowFilterByTime:true,position:5,predefinedFilters:[],highlightStyle:{strokeColor:[0,0,0],fillColor:[255,255,0,0.25]}});export default connect(function(state){return{currentTask:state.task.id,theme:state.theme.current,layers:state.layers.flat,filter:state.layers.filter,startupParams:state.localConfig.startupParams}},{setFilter:setFilter,setCurrentTask:setCurrentTask,setPermalinkParameters:setPermalinkParameters})(MapFilter);

package/plugins/MapTip.js

@@ -4,12 +4,12 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *
  * 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 ReactDOM from"react-dom";import{connect}from"react-redux";import htmlReactParser,{domToReact}from"html-react-parser";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{v1 as uuidv1}from"uuid";import{LayerRole,addLayerFeatures,removeLayer}from"../actions/layers";import{openExternalUrl}from"../actions/windows";import{MapContainerPortalContext}from"../components/PluginsContainer";import IdentifyUtils from"../utils/IdentifyUtils";import MapUtils from"../utils/MapUtils";import"./style/MapTip.css";/**
+ */import React from"react";import ReactDOM from"react-dom";import{connect}from"react-redux";import htmlReactParser,{domToReact}from"html-react-parser";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{v4 as uuidv4}from"uuid";import{LayerRole,addLayerFeatures,removeLayer}from"../actions/layers";import{openExternalUrl}from"../actions/windows";import{MapContainerPortalContext}from"../components/PluginsContainer";import IdentifyUtils from"../utils/IdentifyUtils";import MapUtils from"../utils/MapUtils";import"./style/MapTip.css";/**
  * Displays maptips by hovering over features on the map.
  *
  * Queries the map tips configured in the QGIS layer properites over GetFeatureInfo.
  *
  * The map tip needs to be configured in QGIS Layer Properties → Display.
- */var MapTip=/*#__PURE__*/function(_React$Component){function MapTip(){var _this;_classCallCheck(this,MapTip);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,MapTip,[].concat(args));_defineProperty(_this,"state",{maptips:{},maptipsLayerOrder:[],mousePos:null,pos:null});_defineProperty(_this,"getMapMousePos",function(ev){_this.clearMaptip();clearTimeout(_this.mouseStateTimeout);_this.mouseStateTimeout=setTimeout(function(){_this.setState({mousePos:{coordinate:ev.coordinate,pixel:ev.pixel}})},100)});_defineProperty(_this,"clearMaptip",function(){clearTimeout(_this.timeoutId);_this.timeoutId=null;if(_this.state.pos){_this.props.removeLayer("maptipselection");_this.setState({maptips:{},maptipsOrder:[],pos:null})}});_defineProperty(_this,"queryMapTip",function(pos){_this.timeoutId=null;var options={info_format:"text/xml",feature_count:_this.props.layerFeatureCount,FI_POINT_TOLERANCE:16,FI_LINE_TOLERANCE:8,FI_POLYGON_TOLERANCE:4,with_maptip:true,with_htmlcontent:false};var reqId=uuidv1();_this.reqId=reqId;var layerOrder=[];_this.props.layers.forEach(function(layer){if(!(layer.role===LayerRole.THEME||layer.role===LayerRole.USERLAYER)||!(layer.infoFormats||[]).includes("text/xml")||isEmpty(layer.queryLayers)){return}var queryLayers=layer.queryLayers;if(!isEmpty(layer.drawingOrder)){queryLayers=layer.drawingOrder.slice(0).reverse().filter(function(entry){return layer.queryLayers.includes(entry)})}layerOrder.push(layer.id);var request=IdentifyUtils.buildRequest(layer,queryLayers.join(","),_this.state.mousePos.coordinate,_this.props.map,options);IdentifyUtils.sendRequest(request,function(response){if(_this.reqId===reqId){var result=IdentifyUtils.parseXmlResponse(response||"",_this.props.map.projection,layer);var mapTips=[];var features=[];var _iterator=_createForOfIteratorHelper(request.params.layers.split(",")),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var sublayer=_step.value;var sublayerFeatures=(result[sublayer]||[]).filter(function(feature){return feature.properties.maptip});features.push.apply(features,_toConsumableArray(sublayerFeatures));mapTips.push.apply(mapTips,_toConsumableArray(sublayerFeatures.map(function(feature){return feature.properties.maptip})))}}catch(err){_iterator.e(err)}finally{_iterator.f()}if(_this.props.showFeatureSelection&&!isEmpty(features)){var sellayer={id:"maptipselection",role:LayerRole.SELECTION};_this.props.addLayerFeatures(sellayer,features,true)}_this.setState(function(state){return{pos:pos,maptips:_objectSpread(_objectSpread({},state.maptips),{},_defineProperty({},layer.id,mapTips))}})}})});_this.setState({maptipsLayerOrder:layerOrder})});_defineProperty(_this,"parsedContent",function(text){var options={replace:function replace(node){if(node.name==="a"){return/*#__PURE__*/React.createElement("a",{href:node.attribs.href,onClick:node.attribs.onclick?function(ev){return _this.evalOnClick(ev,node.attribs.onclick)}:_this.attributeLinkClicked,target:node.attribs.target||"_blank"},domToReact(node.children,options))}return undefined}};return htmlReactParser(text,options)});_defineProperty(_this,"evalOnClick",function(ev,onclick){// eslint-disable-next-line
+ */var MapTip=/*#__PURE__*/function(_React$Component){function MapTip(){var _this;_classCallCheck(this,MapTip);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,MapTip,[].concat(args));_defineProperty(_this,"state",{maptips:{},maptipsLayerOrder:[],mousePos:null,pos:null});_defineProperty(_this,"getMapMousePos",function(ev){_this.clearMaptip();clearTimeout(_this.mouseStateTimeout);_this.mouseStateTimeout=setTimeout(function(){_this.setState({mousePos:{coordinate:ev.coordinate,pixel:ev.pixel}})},100)});_defineProperty(_this,"clearMaptip",function(){clearTimeout(_this.timeoutId);_this.timeoutId=null;if(_this.state.pos){_this.props.removeLayer("maptipselection");_this.setState({maptips:{},maptipsOrder:[],pos:null})}});_defineProperty(_this,"queryMapTip",function(pos){_this.timeoutId=null;var options={info_format:"text/xml",feature_count:_this.props.layerFeatureCount,FI_POINT_TOLERANCE:16,FI_LINE_TOLERANCE:8,FI_POLYGON_TOLERANCE:4,with_maptip:true,with_htmlcontent:false};var reqId=uuidv4();_this.reqId=reqId;var layerOrder=[];_this.props.layers.forEach(function(layer){if(!(layer.role===LayerRole.THEME||layer.role===LayerRole.USERLAYER)||!(layer.infoFormats||[]).includes("text/xml")||isEmpty(layer.queryLayers)){return}var queryLayers=layer.queryLayers;if(!isEmpty(layer.drawingOrder)){queryLayers=layer.drawingOrder.slice(0).reverse().filter(function(entry){return layer.queryLayers.includes(entry)})}layerOrder.push(layer.id);var request=IdentifyUtils.buildRequest(layer,queryLayers.join(","),_this.state.mousePos.coordinate,_this.props.map,options);IdentifyUtils.sendRequest(request,function(response){if(_this.reqId===reqId){var result=IdentifyUtils.parseXmlResponse(response||"",_this.props.map.projection,layer);var mapTips=[];var features=[];var _iterator=_createForOfIteratorHelper(request.params.layers.split(",")),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var sublayer=_step.value;var sublayerFeatures=(result[sublayer]||[]).filter(function(feature){return feature.properties.maptip});features.push.apply(features,_toConsumableArray(sublayerFeatures));mapTips.push.apply(mapTips,_toConsumableArray(sublayerFeatures.map(function(feature){return feature.properties.maptip})))}}catch(err){_iterator.e(err)}finally{_iterator.f()}if(_this.props.showFeatureSelection&&!isEmpty(features)){var sellayer={id:"maptipselection",role:LayerRole.SELECTION};_this.props.addLayerFeatures(sellayer,features,true)}_this.setState(function(state){return{pos:pos,maptips:_objectSpread(_objectSpread({},state.maptips),{},_defineProperty({},layer.id,mapTips))}})}})});_this.setState({maptipsLayerOrder:layerOrder})});_defineProperty(_this,"parsedContent",function(text){var options={replace:function replace(node){if(node.name==="a"){return/*#__PURE__*/React.createElement("a",{href:node.attribs.href,onClick:node.attribs.onclick?function(ev){return _this.evalOnClick(ev,node.attribs.onclick)}:_this.attributeLinkClicked,target:node.attribs.target||"_blank"},domToReact(node.children,options))}return undefined}};return htmlReactParser(text,options)});_defineProperty(_this,"evalOnClick",function(ev,onclick){// eslint-disable-next-line
 eval(onclick);ev.preventDefault()});_defineProperty(_this,"attributeLinkClicked",function(ev){_this.props.openExternalUrl(ev.target.href,ev.target.target,{docked:_this.props.iframeDialogsInitiallyDocked});ev.preventDefault()});_defineProperty(_this,"positionMapTip",function(el){if(el){var x=_this.state.pos[0];var y=_this.state.pos[1];var parentBBox=el.parentElement.getBoundingClientRect();var bbox=el.getBoundingClientRect();if(x+bbox.width>parentBBox.width){x-=bbox.width}if(y+bbox.height>parentBBox.height){y-=bbox.height}el.style.left=x+"px";el.style.top=y+"px"}});return _this}_inherits(MapTip,_React$Component);return _createClass(MapTip,[{key:"componentDidMount",value:function componentDidMount(){MapUtils.getHook(MapUtils.ADD_POINTER_MOVE_LISTENER)(this.getMapMousePos)}},{key:"componentWillUnmount",value:function componentWillUnmount(){MapUtils.getHook(MapUtils.REMOVE_POINTER_MOVE_LISTENER)(this.getMapMousePos)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this2=this;if(this.props.map!==prevProps.map){this.clearMaptip()}if(this.props.mapTipsEnabled&&this.state.mousePos&&this.state.mousePos!==prevState.mousePos&&(isEmpty(this.state.pos)||Math.abs(this.state.mousePos.pixel[0]-this.state.pos[0])>5||Math.abs(this.state.mousePos.pixel[1]-this.state.pos[1])>5)){this.timeoutId=setTimeout(function(){return _this2.queryMapTip(_this2.state.mousePos.pixel)},500)}else if(!this.props.mapTipsEnabled&&prevProps.mapTipsEnabled){this.clearMaptip()}}},{key:"render",value:function render(){var _this3=this;if(!isEmpty(this.state.maptips)&&this.state.pos){// Render off-screen first to measure dimensions, then place as necessary
 var style={left:10000+"px",top:10000+"px",maxHeight:this.props.maxHeight,maxWidth:this.props.maxWidth};var bufferPos={left:this.state.pos[0]-8+"px",top:this.state.pos[1]-8+"px"};return/*#__PURE__*/ReactDOM.createPortal([/*#__PURE__*/React.createElement("div",{id:"MapTipPointerBuffer",key:"MapTipPointerBuffer",style:bufferPos}),/*#__PURE__*/React.createElement("div",{id:"MapTip",key:"MapTip",ref:this.positionMapTip,style:style},this.state.maptipsLayerOrder.map(function(key){return _this3.state.maptips[key]||[]}).flat().map(function(maptip,idx){return/*#__PURE__*/React.createElement("div",{key:idx},_this3.parsedContent(maptip))}))],this.context)}return null}}])}(React.Component);_defineProperty(MapTip,"contextType",MapContainerPortalContext);_defineProperty(MapTip,"propTypes",{addLayerFeatures:PropTypes.func,iframeDialogsInitiallyDocked:PropTypes.bool,/** The maximum number of feature maptips to display for a single layer. */layerFeatureCount:PropTypes.number,layers:PropTypes.array,map:PropTypes.object,mapTipsEnabled:PropTypes.bool,/** The maximum height of the maptip popop bubble, as a CSS string. */maxHeight:PropTypes.string,/** The maximum height of the maptip popop bubble, as a CSS string. */maxWidth:PropTypes.string,openExternalUrl:PropTypes.func,removeLayer:PropTypes.func,/** Whether to show the maptip feature selection on the map or not */showFeatureSelection:PropTypes.bool});_defineProperty(MapTip,"defaultProps",{layerFeatureCount:5,maxHeight:"15em",maxWidth:"20em",showFeatureSelection:true});export default connect(function(state){return{mapTipsEnabled:state.map.maptips&&state.task.identifyEnabled,layers:state.layers.flat,map:state.map}},{addLayerFeatures:addLayerFeatures,removeLayer:removeLayer,openExternalUrl:openExternalUrl})(MapTip);

package/plugins/OverviewMap.js

@@ -5,9 +5,9 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *
  * 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 ol from"openlayers";import PropTypes from"prop-types";import{v1 as uuidv1}from"uuid";import{LayerRole}from"../actions/layers";import OlLayer from"../components/map/OlLayer";import MapUtils from"../utils/MapUtils";import"./style/OverviewMap.css";/**
+ */import React from"react";import{connect}from"react-redux";import ol from"openlayers";import PropTypes from"prop-types";import{v4 as uuidv4}from"uuid";import{LayerRole}from"../actions/layers";import OlLayer from"../components/map/OlLayer";import MapUtils from"../utils/MapUtils";import"./style/OverviewMap.css";/**
  * Overview map support for the map component.
- */var OverviewMap=/*#__PURE__*/function(_React$Component){function OverviewMap(){var _this;_classCallCheck(this,OverviewMap);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,OverviewMap,[].concat(args));_defineProperty(_this,"state",{overviewView:null,overviewLayer:null});_defineProperty(_this,"componentWillUnmount",function(){if(_this.overview){var _MapUtils$getHook,_MapUtils$getHook$rem;(_MapUtils$getHook=MapUtils.getHook(MapUtils.GET_MAP))===null||_MapUtils$getHook===void 0||(_MapUtils$getHook$rem=_MapUtils$getHook.removeControl)===null||_MapUtils$getHook$rem===void 0||_MapUtils$getHook$rem.call(_MapUtils$getHook,_this.overview)}});_defineProperty(_this,"initOverviewMap",function(el){if(el){var opt=_objectSpread({className:"overview-map",collapseLabel:"\xBB",label:"\xAB",collapsed:true,collapsible:true},_this.props.options);delete opt.layer;delete opt.viewOptions;_this.overview=new ol.control.OverviewMap(opt);_this.overview.setTarget(el);MapUtils.getHook(MapUtils.GET_MAP).addControl(_this.overview);_this.setupView()}});_defineProperty(_this,"setupView",function(){var overviewView=new ol.View(_objectSpread({projection:_this.props.projection},_this.props.options.viewOptions||{}));_this.overview.getOverviewMap().setView(overviewView);overviewView.setZoom(_this.props.zoom*0.8);overviewView.setCenter(_this.props.center);_this.setState({overviewView:overviewView,overviewLayer:null})});return _this}_inherits(OverviewMap,_React$Component);return _createClass(OverviewMap,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(this.props.theme!==prevProps.theme){this.setupView()}else if(this.state.overviewView!==prevState.overviewView){var _find,_this$props$theme;var overviewLayerName=(_find=(((_this$props$theme=this.props.theme)===null||_this$props$theme===void 0?void 0:_this$props$theme.backgroundLayers)||[]).find(function(entry){return entry.overview}))===null||_find===void 0?void 0:_find.name;var overviewLayer=null;if(this.props.options.layer){overviewLayer=_objectSpread(_objectSpread({},this.props.options.layer),{},{visibility:true,id:uuidv1()});if(overviewLayer.type==="wms"){var _this$props$themes;overviewLayer.version=overviewLayer.params.VERSION||overviewLayer.version||((_this$props$themes=this.props.themes)===null||_this$props$themes===void 0?void 0:_this$props$themes.defaultWMSVersion)||"1.3.0"}}else if(overviewLayerName){overviewLayer=this.props.layers.find(function(l){return l.role===LayerRole.BACKGROUND&&l.name===overviewLayerName});if(overviewLayer){overviewLayer=_objectSpread(_objectSpread({},overviewLayer),{},{visibility:true})}}else{overviewLayer=this.props.backgroundLayer}this.setState({overviewLayer:overviewLayer})}else if(this.props.backgroundLayer!==prevProps.backgroundLayer&&!this.props.options.layer){this.setState({overviewLayer:this.props.backgroundLayer})}}},{key:"render",value:function render(){return/*#__PURE__*/React.createElement("div",{ref:this.initOverviewMap},this.state.overviewLayer?/*#__PURE__*/React.createElement(OlLayer,{key:this.state.overviewLayer.id,map:this.overview.getOverviewMap(),options:this.state.overviewLayer,projection:this.props.projection}):null)}}])}(React.Component);_defineProperty(OverviewMap,"propTypes",{backgroundLayer:PropTypes.object,center:PropTypes.array,layers:PropTypes.array,/** See [OpenLayers API doc](https://openlayers.org/en/latest/apidoc/module-ol_control_OverviewMap-OverviewMap.html) for general options.
+ */var OverviewMap=/*#__PURE__*/function(_React$Component){function OverviewMap(){var _this;_classCallCheck(this,OverviewMap);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,OverviewMap,[].concat(args));_defineProperty(_this,"state",{overviewView:null,overviewLayer:null});_defineProperty(_this,"componentWillUnmount",function(){if(_this.overview){var _MapUtils$getHook,_MapUtils$getHook$rem;(_MapUtils$getHook=MapUtils.getHook(MapUtils.GET_MAP))===null||_MapUtils$getHook===void 0||(_MapUtils$getHook$rem=_MapUtils$getHook.removeControl)===null||_MapUtils$getHook$rem===void 0||_MapUtils$getHook$rem.call(_MapUtils$getHook,_this.overview)}});_defineProperty(_this,"initOverviewMap",function(el){if(el){var opt=_objectSpread({className:"overview-map",collapseLabel:"\xBB",label:"\xAB",collapsed:true,collapsible:true},_this.props.options);delete opt.layer;delete opt.viewOptions;_this.overview=new ol.control.OverviewMap(opt);_this.overview.setTarget(el);MapUtils.getHook(MapUtils.GET_MAP).addControl(_this.overview);_this.setupView()}});_defineProperty(_this,"setupView",function(){var overviewView=new ol.View(_objectSpread({projection:_this.props.projection},_this.props.options.viewOptions||{}));_this.overview.getOverviewMap().setView(overviewView);overviewView.setZoom(_this.props.zoom*0.8);overviewView.setCenter(_this.props.center);_this.setState({overviewView:overviewView,overviewLayer:null})});return _this}_inherits(OverviewMap,_React$Component);return _createClass(OverviewMap,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(this.props.theme!==prevProps.theme){this.setupView()}else if(this.state.overviewView!==prevState.overviewView){var _find,_this$props$theme;var overviewLayerName=(_find=(((_this$props$theme=this.props.theme)===null||_this$props$theme===void 0?void 0:_this$props$theme.backgroundLayers)||[]).find(function(entry){return entry.overview}))===null||_find===void 0?void 0:_find.name;var overviewLayer=null;if(this.props.options.layer){overviewLayer=_objectSpread(_objectSpread({},this.props.options.layer),{},{visibility:true,id:uuidv4()});if(overviewLayer.type==="wms"){var _this$props$themes;overviewLayer.version=overviewLayer.params.VERSION||overviewLayer.version||((_this$props$themes=this.props.themes)===null||_this$props$themes===void 0?void 0:_this$props$themes.defaultWMSVersion)||"1.3.0"}}else if(overviewLayerName){overviewLayer=this.props.layers.find(function(l){return l.role===LayerRole.BACKGROUND&&l.name===overviewLayerName});if(overviewLayer){overviewLayer=_objectSpread(_objectSpread({},overviewLayer),{},{visibility:true})}}else{overviewLayer=this.props.backgroundLayer}this.setState({overviewLayer:overviewLayer})}else if(this.props.backgroundLayer!==prevProps.backgroundLayer&&!this.props.options.layer){this.setState({overviewLayer:this.props.backgroundLayer})}}},{key:"render",value:function render(){return/*#__PURE__*/React.createElement("div",{ref:this.initOverviewMap},this.state.overviewLayer?/*#__PURE__*/React.createElement(OlLayer,{key:this.state.overviewLayer.id,map:this.overview.getOverviewMap(),options:this.state.overviewLayer,projection:this.props.projection}):null)}}])}(React.Component);_defineProperty(OverviewMap,"propTypes",{backgroundLayer:PropTypes.object,center:PropTypes.array,layers:PropTypes.array,/** See [OpenLayers API doc](https://openlayers.org/en/latest/apidoc/module-ol_control_OverviewMap-OverviewMap.html) for general options.
          *  Additionally, you can specify:
          *  - `layer`: Custom overview layer, in the same form as background layer definitions (`{type: "<wms|wmts>", "url": ...}`).
          *  - `viewOptions`: Options for the OverviewMap View, see [OpenLayers API doc](https://openlayers.org/en/latest/apidoc/module-ol_View.html).

package/plugins/ScratchDrawing.js

@@ -4,12 +4,12 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *
  * 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 PropTypes from"prop-types";import{v1 as uuidv1}from"uuid";import{LayerRole,addLayerFeatures,removeLayer,clearLayer}from"../actions/layers";import{setSnappingConfig}from"../actions/map";import{changeRedliningState,resetRedliningState}from"../actions/redlining";import{setCurrentTask}from"../actions/task";import TaskBar from"../components/TaskBar";import LocaleUtils from"../utils/LocaleUtils";import"./style/Redlining.css";import"./style/ScratchDrawing.css";/**
+ */import React from"react";import{connect}from"react-redux";import PropTypes from"prop-types";import{v4 as uuidv4}from"uuid";import{LayerRole,addLayerFeatures,removeLayer,clearLayer}from"../actions/layers";import{setSnappingConfig}from"../actions/map";import{changeRedliningState,resetRedliningState}from"../actions/redlining";import{setCurrentTask}from"../actions/task";import TaskBar from"../components/TaskBar";import LocaleUtils from"../utils/LocaleUtils";import"./style/Redlining.css";import"./style/ScratchDrawing.css";/**
  * Task which which can be invoked by other tools to draw a geometry and pass it to a callback.
  *
  * Only useful for third-party code, i.e. over the JavaScript API.
  *
  * Invoke as `setCurrentTask("ScratchDrawing", null, null, {callback: <function(features, crs)>});`
- */var ScratchDrawing=/*#__PURE__*/function(_React$Component){function ScratchDrawing(props){var _this;_classCallCheck(this,ScratchDrawing);_this=_callSuper(this,ScratchDrawing,[props]);_defineProperty(_this,"createDrawLayer",function(data){var layerId=uuidv1();var features=(data.initialFeatures||[]).map(function(feature){return _objectSpread(_objectSpread({},feature),{},{id:uuidv1(),shape:feature.geometry.type,styleName:"default",styleOptions:_this.styleOptions(_this.drawingStyle(data.style))})});var layer={id:layerId,role:LayerRole.USERLAYER,type:"vector"};_this.props.addLayerFeatures(layer,features,true);return layerId});_defineProperty(_this,"drawingStyle",function(style){return _objectSpread({borderColor:[255,0,0,1],size:2,fillColor:[255,255,255,0.5],text:""},style)});_defineProperty(_this,"styleOptions",function(styleProps){return{strokeColor:styleProps.borderColor,strokeWidth:1+0.5*styleProps.size,fillColor:styleProps.fillColor,circleRadius:5+styleProps.size,strokeDash:[],headmarker:styleProps.headmarker,tailmarker:styleProps.tailmarker}});_defineProperty(_this,"submitGeometry",function(){var _this$props$layers$fi;var features=((_this$props$layers$fi=_this.props.layers.find(function(l){return l.id===_this.props.redlining.layer}))===null||_this$props$layers$fi===void 0?void 0:_this$props$layers$fi.features)||[];_this.submitted=true;_this.props.task.data.callback(features,_this.props.projection);_this.props.setCurrentTask(null)});_this.submitted=false;return _this}_inherits(ScratchDrawing,_React$Component);return _createClass(ScratchDrawing,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){// Clear when task changes
+ */var ScratchDrawing=/*#__PURE__*/function(_React$Component){function ScratchDrawing(props){var _this;_classCallCheck(this,ScratchDrawing);_this=_callSuper(this,ScratchDrawing,[props]);_defineProperty(_this,"createDrawLayer",function(data){var layerId=uuidv4();var features=(data.initialFeatures||[]).map(function(feature){return _objectSpread(_objectSpread({},feature),{},{id:uuidv4(),shape:feature.geometry.type,styleName:"default",styleOptions:_this.styleOptions(_this.drawingStyle(data.style))})});var layer={id:layerId,role:LayerRole.USERLAYER,type:"vector"};_this.props.addLayerFeatures(layer,features,true);return layerId});_defineProperty(_this,"drawingStyle",function(style){return _objectSpread({borderColor:[255,0,0,1],size:2,fillColor:[255,255,255,0.5],text:""},style)});_defineProperty(_this,"styleOptions",function(styleProps){return{strokeColor:styleProps.borderColor,strokeWidth:1+0.5*styleProps.size,fillColor:styleProps.fillColor,circleRadius:5+styleProps.size,strokeDash:[],headmarker:styleProps.headmarker,tailmarker:styleProps.tailmarker}});_defineProperty(_this,"submitGeometry",function(){var _this$props$layers$fi;var features=((_this$props$layers$fi=_this.props.layers.find(function(l){return l.id===_this.props.redlining.layer}))===null||_this$props$layers$fi===void 0?void 0:_this$props$layers$fi.features)||[];_this.submitted=true;_this.props.task.data.callback(features,_this.props.projection);_this.props.setCurrentTask(null)});_this.submitted=false;return _this}_inherits(ScratchDrawing,_React$Component);return _createClass(ScratchDrawing,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){// Clear when task changes
 if(this.props.task.id!=="ScratchDrawing"&&prevProps.task.id==="ScratchDrawing"){if(!this.submitted){prevProps.task.data.callback(null,null);this.submitted=true}this.props.removeLayer(prevProps.redlining.layer);this.props.resetRedliningState()}// Setup redlining state
 if(this.props.task!==prevProps.task&&this.props.task.id==="ScratchDrawing"){if(prevProps.task.id==="ScratchDrawing"){this.props.removeLayer(prevProps.redlining.layer);if(!this.submitted){prevProps.task.data.callback(null,null);this.submitted=true}}this.submitted=false;var data=this.props.task.data;var layerId=this.createDrawLayer(data);this.props.setSnappingConfig(data.snapping,data.snappingActive);this.props.changeRedliningState({action:"PickDraw",geomType:data.geomType,layer:layerId,layerTitle:null,drawMultiple:data.drawMultiple,style:this.drawingStyle(data.style)})}}},{key:"render",value:function render(){var _this$props$task$data,_this2=this;return/*#__PURE__*/React.createElement(TaskBar,{task:"ScratchDrawing"},/*#__PURE__*/React.createElement("div",{className:"scratch-drawing-taskbar-body",role:"body"},/*#__PURE__*/React.createElement("span",null,(_this$props$task$data=this.props.task.data)===null||_this$props$task$data===void 0?void 0:_this$props$task$data.message),/*#__PURE__*/React.createElement("button",{className:"button",onClick:function onClick(){return _this2.submitGeometry()}},LocaleUtils.tr("scratchdrawing.finish"))))}}])}(React.Component);_defineProperty(ScratchDrawing,"propTypes",{addLayerFeatures:PropTypes.func,changeRedliningState:PropTypes.func,clearLayer:PropTypes.func,layers:PropTypes.array,projection:PropTypes.string,redlining:PropTypes.object,removeLayer:PropTypes.func,resetRedliningState:PropTypes.func,setCurrentTask:PropTypes.func,setSnappingConfig:PropTypes.func,task:PropTypes.object});export default connect(function(state){return{task:state.task,layers:state.layers.flat,redlining:state.redlining,projection:state.map.projection,theme:state.theme.current}},{changeRedliningState:changeRedliningState,addLayerFeatures:addLayerFeatures,clearLayer:clearLayer,removeLayer:removeLayer,resetRedliningState:resetRedliningState,setCurrentTask:setCurrentTask,setSnappingConfig:setSnappingConfig})(ScratchDrawing);