qwc2 2025.6.13 → 2025.6.27

package/components/timeline/TimelineFeaturesSlider.js

@@ -5,6 +5,6 @@ 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 dayjs from"dayjs";import PropTypes from"prop-types";import randomcolor from"randomcolor";import{addLayerFeatures,removeLayer,LayerRole}from"../../actions/layers";import LocaleUtils from"../../utils/LocaleUtils";import MiscUtils from"../../utils/MiscUtils";import Input from"../widgets/Input";import Spinner from"../widgets/Spinner";import"./style/TimelineFeaturesSlider.css";var TimelineFeaturesSlider=/*#__PURE__*/function(_React$Component){function TimelineFeaturesSlider(){var _this;_classCallCheck(this,TimelineFeaturesSlider);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,TimelineFeaturesSlider,[].concat(args));_defineProperty(_this,"state",{currentTimestampDrag:null,highlightFeatures:null,layerClassifications:{},layerAttrGroups:{}});_defineProperty(_this,"renderCursor",function(timestamp){if(_this.props.timeEnabled){var cursorPos=_this.state.currentTimestampDrag?_this.state.currentTimestampDrag.pos:_this.props.computePixelFromTime(timestamp);var cursorStyle={left:cursorPos-2+"px"};return/*#__PURE__*/React.createElement("div",{className:"timeline-slider-cursor",style:cursorStyle},/*#__PURE__*/React.createElement("div",{className:"timeline-slider-cursor-label"},_this.props.cursorFormat.includes("date")?/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement(Input,{onChange:_this.setCursorDate,required:true,type:"date",value:dayjs(timestamp).format("YYYY-MM-DD")})):null,_this.props.cursorFormat.includes("time")?/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement(Input,{onChange:_this.setCursorTime,required:true,type:"time",value:dayjs(timestamp).format("HH:mm:ss")})):null))}return null});_defineProperty(_this,"setCursorDate",function(date){if(date){var newdate=dayjs(date,"YYYY-MM-DD");_this.props.timestampChanged(+dayjs(_this.props.currentTimestamp).year(newdate.year()).month(newdate.month()).date(newdate.date()))}});_defineProperty(_this,"setCursorTime",function(time){if(time){var parts=time.split(":").map(function(x){return parseInt(x,10)});_this.props.timestampChanged(+dayjs(_this.props.currentTimestamp).hour(parts[0]).minute(parts[1]).second(parts[2]))}});_defineProperty(_this,"pickCurrentTimestamp",function(event){if(["INPUT","SELECT","OPTION"].includes(event.target.nodeName)){return}clearTimeout(_this.timestampChangeTimeout);var target=event.currentTarget;var rect=target.getBoundingClientRect();var computeTimestamp=function computeTimestamp(ev){if(!_this.props.timeEnabled){return}var pos=Math.max(0,Math.min(ev.clientX-rect.left,rect.right-rect.left));var newTimestamp=dayjs(_this.props.computeTimeFromPixel(pos));// Snap to configured step interval
-var add=null;if(_this.props.stepSizeUnit.endsWith("m")){add=newTimestamp.second()>30;newTimestamp=newTimestamp.second(0)}else if(_this.props.stepSizeUnit.endsWith("h")){add=newTimestamp.minute()>30;newTimestamp=newTimestamp.second(0).minute(0)}else if(_this.props.stepSizeUnit.endsWith("d")){add=newTimestamp.hour()>12;newTimestamp=newTimestamp.second(0).minute(0).hour(0)}else if(_this.props.stepSizeUnit.endsWith("M")){add=newTimestamp.date()>15;newTimestamp=newTimestamp.second(0).minute(0).hour(0).date(1)}else if(_this.props.stepSizeUnit.endsWith("y")){add=newTimestamp.month()>5;newTimestamp=newTimestamp.second(0).minute(0).hour(0).date(1).month(0)}if(add){var num=parseInt(_this.props.stepSizeUnit.slice(0,-1),10)||1;newTimestamp=newTimestamp.add(num,_this.props.stepSizeUnit.slice(-1))}_this.setState({currentTimestampDrag:{pos:pos,time:newTimestamp}})};document.addEventListener("mousemove",computeTimestamp);document.addEventListener("mouseup",function(){if(_this.state.currentTimestampDrag){_this.props.timestampChanged(+_this.state.currentTimestampDrag.time);_this.setState({currentTimestampDrag:null})}document.removeEventListener("mousemove",computeTimestamp)},{once:true,capture:true});computeTimestamp(event)});_defineProperty(_this,"renderTimeFeatures",function(sliderGeom){return Object.entries(_this.props.timeFeatures.features).map(function(_ref){var _ref2=_slicedToArray(_ref,2),layer=_ref2[0],features=_ref2[1];var layerTitleStyle={top:sliderGeom.top+"px",left:0,right:0};sliderGeom.top+=30;var classattr=(_this.state.layerClassifications[layer]||{}).attr||"";var groupattr=(_this.state.layerAttrGroups[layer]||{}).attr||"";var sliderFeatures=null;if(_this.state.layerAttrGroups[layer]){var layerAttrGroups=_this.state.layerAttrGroups[layer];sliderFeatures=Object.values(layerAttrGroups.groups).map(function(groupData){return _this.renderTimeFeature(sliderGeom,groupData.start,groupData.end,groupData.features,"",groupattr,groupData)})}else{var layerAttrClasses=_this.state.layerClassifications[layer];sliderFeatures=features.map(function(feature){var attrData=layerAttrClasses?layerAttrClasses.classes[feature.properties[layerAttrClasses.attr]]:null;var tstart=feature.properties.__startdate;var tend=feature.properties.__enddate;var label=feature.properties[feature.displayfield];return _this.renderTimeFeature(sliderGeom,tstart,tend,[feature],label,classattr,attrData)})}return[/*#__PURE__*/React.createElement("div",{className:"timeline-slider-layertitle",key:layer,style:layerTitleStyle},/*#__PURE__*/React.createElement("span",null,layer),/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("timemanager.group"),":\xA0"),/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setGroupAttr(layer,ev.target.value)},value:groupattr},/*#__PURE__*/React.createElement("option",{value:""},LocaleUtils.tr("timemanager.groupnone")),_this.props.timeFeatures.attributes[layer].map(function(attr){return/*#__PURE__*/React.createElement("option",{key:attr,value:attr},attr)})),/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("timemanager.classify"),":\xA0"),/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setClassification(layer,ev.target.value)},value:classattr},/*#__PURE__*/React.createElement("option",{value:""},LocaleUtils.tr("timemanager.classifynone")),_this.props.timeFeatures.attributes[layer].map(function(attr){return/*#__PURE__*/React.createElement("option",{key:attr,value:attr},attr)}))),sliderFeatures]})});_defineProperty(_this,"renderTimeLayers",function(sliderGeom){return Object.entries(_this.props.timeFeatures.features).reduce(function(res,_ref3){var _ref4=_slicedToArray(_ref3,2),layer=_ref4[0],features=_ref4[1];if(features.length>0){var tstart=features[0].properties.__startdate;var tend=features[0].properties.__enddate;for(var i=1;i<features.length;++i){if(features[i].properties.__startdate<tstart){tstart=features[i].properties.__startdate}if(features[i].properties.__enddate>tend){tend=features[i].properties.__enddate}}return[].concat(_toConsumableArray(res),[_this.renderTimeFeature(sliderGeom,tstart,tend,features,layer)])}return res},[])});_defineProperty(_this,"renderTimeFeature",function(sliderGeom,tstart,tend,features,label,attr,featClass){var left=tstart.isValid()?_this.props.computePixelFromTime(tstart):0;var right=tend.isValid()?_this.props.computePixelFromTime(tend):0;var style={top:sliderGeom.top+"px",left:left+"px"};if(tend.isValid()){style.width=right-left+"px"}else{style.right=0}var tooltip=LocaleUtils.tr("timemanager.starttime")+": "+(tstart.isValid()?tstart.format(_this.props.dateFormat):"-")+"\n"+LocaleUtils.tr("timemanager.endtime")+": "+(tend.isValid()?tend.format(_this.props.dateFormat):"-");if(featClass){style.backgroundColor=featClass.bg;style.color=featClass.fg;label+=(label?": ":"")+featClass.val;tooltip+="\n"+attr+": "+featClass.val}sliderGeom.top+=26;return/*#__PURE__*/React.createElement("div",{className:"timeline-slider-feature",key:features[0].id,onMouseEnter:function onMouseEnter(){return _this.setState({highlightFeatures:features})},onMouseLeave:function onMouseLeave(){return _this.setState({highlightFeatures:null})},style:style,title:tooltip},/*#__PURE__*/React.createElement("span",null,label))});_defineProperty(_this,"renderGradient",function(sliderGeom){if(!_this.props.markersEnabled){return null}var left=_this.props.computePixelFromTime(_this.props.startTime);var right=_this.props.computePixelFromTime(_this.props.endTime);var style={left:left+"px",width:right-left+"px",height:sliderGeom.top+"px",background:"linear-gradient(90deg, "+_this.props.markerConfiguration.gradient.join(", ")+")"};return/*#__PURE__*/React.createElement("div",{className:"timeline-slider-gradient",style:style})});_defineProperty(_this,"setClassification",function(layer,attr){_this.setState(function(state){var newLayerClassifications=_objectSpread({},state.layerClassifications);if(attr){var classes={};_this.props.timeFeatures.features[layer].forEach(function(feature){if(!classes[feature.properties[attr]]){var color=randomcolor();classes[feature.properties[attr]]={bg:color,fg:MiscUtils.isBrightColor(color)?"#000":"#FFF",val:feature.properties[attr]}}});newLayerClassifications[layer]={attr:attr,classes:classes}}else{delete newLayerClassifications[layer]}// Attr classification and grouping cannot be enabled at the same time
+var add=null;if(_this.props.stepSizeUnit.endsWith("m")){add=newTimestamp.second()>30;newTimestamp=newTimestamp.second(0)}else if(_this.props.stepSizeUnit.endsWith("h")){add=newTimestamp.minute()>30;newTimestamp=newTimestamp.second(0).minute(0)}else if(_this.props.stepSizeUnit.endsWith("d")){add=newTimestamp.hour()>12;newTimestamp=newTimestamp.second(0).minute(0).hour(0)}else if(_this.props.stepSizeUnit.endsWith("M")){add=newTimestamp.date()>15;newTimestamp=newTimestamp.second(0).minute(0).hour(0).date(1)}else if(_this.props.stepSizeUnit.endsWith("y")){add=newTimestamp.month()>5;newTimestamp=newTimestamp.second(0).minute(0).hour(0).date(1).month(0)}if(add){var num=parseInt(_this.props.stepSizeUnit.slice(0,-1),10)||1;newTimestamp=newTimestamp.add(num,_this.props.stepSizeUnit.slice(-1))}_this.setState({currentTimestampDrag:{pos:pos,time:newTimestamp}})};document.addEventListener("pointermove",computeTimestamp);document.addEventListener("pointerup",function(){if(_this.state.currentTimestampDrag){_this.props.timestampChanged(+_this.state.currentTimestampDrag.time);_this.setState({currentTimestampDrag:null})}document.removeEventListener("pointermove",computeTimestamp)},{once:true,capture:true});computeTimestamp(event)});_defineProperty(_this,"renderTimeFeatures",function(sliderGeom){return Object.entries(_this.props.timeFeatures.features).map(function(_ref){var _ref2=_slicedToArray(_ref,2),layer=_ref2[0],features=_ref2[1];var layerTitleStyle={top:sliderGeom.top+"px",left:0,right:0};sliderGeom.top+=30;var classattr=(_this.state.layerClassifications[layer]||{}).attr||"";var groupattr=(_this.state.layerAttrGroups[layer]||{}).attr||"";var sliderFeatures=null;if(_this.state.layerAttrGroups[layer]){var layerAttrGroups=_this.state.layerAttrGroups[layer];sliderFeatures=Object.values(layerAttrGroups.groups).map(function(groupData){return _this.renderTimeFeature(sliderGeom,groupData.start,groupData.end,groupData.features,"",groupattr,groupData)})}else{var layerAttrClasses=_this.state.layerClassifications[layer];sliderFeatures=features.map(function(feature){var attrData=layerAttrClasses?layerAttrClasses.classes[feature.properties[layerAttrClasses.attr]]:null;var tstart=feature.properties.__startdate;var tend=feature.properties.__enddate;var label=feature.properties[feature.displayfield];return _this.renderTimeFeature(sliderGeom,tstart,tend,[feature],label,classattr,attrData)})}return[/*#__PURE__*/React.createElement("div",{className:"timeline-slider-layertitle",key:layer,style:layerTitleStyle},/*#__PURE__*/React.createElement("span",null,layer),/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("timemanager.group"),":\xA0"),/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setGroupAttr(layer,ev.target.value)},value:groupattr},/*#__PURE__*/React.createElement("option",{value:""},LocaleUtils.tr("timemanager.groupnone")),_this.props.timeFeatures.attributes[layer].map(function(attr){return/*#__PURE__*/React.createElement("option",{key:attr,value:attr},attr)})),/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("timemanager.classify"),":\xA0"),/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setClassification(layer,ev.target.value)},value:classattr},/*#__PURE__*/React.createElement("option",{value:""},LocaleUtils.tr("timemanager.classifynone")),_this.props.timeFeatures.attributes[layer].map(function(attr){return/*#__PURE__*/React.createElement("option",{key:attr,value:attr},attr)}))),sliderFeatures]})});_defineProperty(_this,"renderTimeLayers",function(sliderGeom){return Object.entries(_this.props.timeFeatures.features).reduce(function(res,_ref3){var _ref4=_slicedToArray(_ref3,2),layer=_ref4[0],features=_ref4[1];if(features.length>0){var tstart=features[0].properties.__startdate;var tend=features[0].properties.__enddate;for(var i=1;i<features.length;++i){if(features[i].properties.__startdate<tstart){tstart=features[i].properties.__startdate}if(features[i].properties.__enddate>tend){tend=features[i].properties.__enddate}}return[].concat(_toConsumableArray(res),[_this.renderTimeFeature(sliderGeom,tstart,tend,features,layer)])}return res},[])});_defineProperty(_this,"renderTimeFeature",function(sliderGeom,tstart,tend,features,label,attr,featClass){var left=tstart.isValid()?_this.props.computePixelFromTime(tstart):0;var right=tend.isValid()?_this.props.computePixelFromTime(tend):0;var style={top:sliderGeom.top+"px",left:left+"px"};if(tend.isValid()){style.width=right-left+"px"}else{style.right=0}var tooltip=LocaleUtils.tr("timemanager.starttime")+": "+(tstart.isValid()?tstart.format(_this.props.dateFormat):"-")+"\n"+LocaleUtils.tr("timemanager.endtime")+": "+(tend.isValid()?tend.format(_this.props.dateFormat):"-");if(featClass){style.backgroundColor=featClass.bg;style.color=featClass.fg;label+=(label?": ":"")+featClass.val;tooltip+="\n"+attr+": "+featClass.val}sliderGeom.top+=26;return/*#__PURE__*/React.createElement("div",{className:"timeline-slider-feature",key:features[0].id,onMouseEnter:function onMouseEnter(){return _this.setState({highlightFeatures:features})},onMouseLeave:function onMouseLeave(){return _this.setState({highlightFeatures:null})},style:style,title:tooltip},/*#__PURE__*/React.createElement("span",null,label))});_defineProperty(_this,"renderGradient",function(sliderGeom){if(!_this.props.markersEnabled){return null}var left=_this.props.computePixelFromTime(_this.props.startTime);var right=_this.props.computePixelFromTime(_this.props.endTime);var style={left:left+"px",width:right-left+"px",height:sliderGeom.top+"px",background:"linear-gradient(90deg, "+_this.props.markerConfiguration.gradient.join(", ")+")"};return/*#__PURE__*/React.createElement("div",{className:"timeline-slider-gradient",style:style})});_defineProperty(_this,"setClassification",function(layer,attr){_this.setState(function(state){var newLayerClassifications=_objectSpread({},state.layerClassifications);if(attr){var classes={};_this.props.timeFeatures.features[layer].forEach(function(feature){if(!classes[feature.properties[attr]]){var color=randomcolor();classes[feature.properties[attr]]={bg:color,fg:MiscUtils.isBrightColor(color)?"#000":"#FFF",val:feature.properties[attr]}}});newLayerClassifications[layer]={attr:attr,classes:classes}}else{delete newLayerClassifications[layer]}// Attr classification and grouping cannot be enabled at the same time
 var newLayerAttrGroups=_objectSpread({},state.layerAttrGroups);delete newLayerAttrGroups[layer];return{layerClassifications:newLayerClassifications,layerAttrGroups:newLayerAttrGroups}})});_defineProperty(_this,"setGroupAttr",function(layer,attr){_this.setState(function(state){var newLayerAttrGroups=_objectSpread({},state.layerAttrGroups);if(attr){var groups={};_this.props.timeFeatures.features[layer].forEach(function(feature){if(!groups[feature.properties[attr]]){var color=randomcolor();groups[feature.properties[attr]]={bg:color,fg:MiscUtils.isBrightColor(color)?"#000":"#FFF",val:feature.properties[attr],features:[feature],start:feature.properties.__startdate,end:feature.properties.__enddate}}else{if(feature.properties.__startdate<groups[feature.properties[attr]].start){groups[feature.properties[attr]].start=feature.properties.__startdate}if(feature.properties.__enddate>groups[feature.properties[attr]].end){groups[feature.properties[attr]].end=feature.properties.__enddate}groups[feature.properties[attr]].features.push(feature)}});newLayerAttrGroups[layer]={attr:attr,groups:groups}}else{delete newLayerAttrGroups[layer]}// Attr classification and grouping cannot be enabled at the same time
-var newLayerClassifications=_objectSpread({},state.layerClassifications);delete newLayerClassifications[layer];return{layerClassifications:newLayerClassifications,layerAttrGroups:newLayerAttrGroups}})});return _this}_inherits(TimelineFeaturesSlider,_React$Component);return _createClass(TimelineFeaturesSlider,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this2=this;if(this.state.highlightFeatures!==prevState.highlightFeatures){if(!this.state.highlightFeatures){this.props.removeLayer("timelinefeathighlight")}else{var layer={id:"timelinefeathighlight",role:LayerRole.MARKER,rev:+new Date};this.props.addLayerFeatures(layer,this.state.highlightFeatures,true)}}if(this.props.timeFeatures!==prevProps.timeFeatures){var newLayerClassifications=_objectSpread({},this.state.layerClassifications);Object.keys(this.state.layerClassifications).forEach(function(layername){if(!_this2.props.timeFeatures.attributes[layername]||_this2.props.timeFeatures.attributes[layername]!==prevProps.timeFeatures.attributes[layername]){delete newLayerClassifications.layername}});this.setState(function(state){var newLayerAttrGroups=_objectSpread({},state.layerAttrGroups);Object.keys(state.layerAttrGroups).forEach(function(layername){if(!_this2.props.timeFeatures.attributes[layername]||_this2.props.timeFeatures.attributes[layername]!==prevProps.timeFeatures.attributes[layername]){delete newLayerAttrGroups.layername}});return{layerAttrGroups:newLayerAttrGroups}})}}},{key:"render",value:function render(){var timestamp=this.state.currentTimestampDrag?this.state.currentTimestampDrag.time:this.props.currentTimestamp;var sliderGeom={top:5};return/*#__PURE__*/React.createElement("div",{className:"timeline-slider-container"},/*#__PURE__*/React.createElement("div",{className:"timeline-slider",onMouseDown:this.pickCurrentTimestamp},this.props.displayMode==="features"?this.renderTimeFeatures(sliderGeom):null,this.props.displayMode==="layers"?this.renderTimeLayers(sliderGeom):null,this.renderGradient(sliderGeom)),this.renderCursor(timestamp),this.props.timeFeatures.pendingRequests>0?/*#__PURE__*/React.createElement("div",{className:"timeline-slider-loading"},/*#__PURE__*/React.createElement(Spinner,null),/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("timemanager.loading"))):null)}}])}(React.Component);_defineProperty(TimelineFeaturesSlider,"propTypes",{addLayerFeatures:PropTypes.func,computePixelFromTime:PropTypes.func,computeTimeFromPixel:PropTypes.func,currentTimestamp:PropTypes.number,cursorFormat:PropTypes.string,dateFormat:PropTypes.string,displayMode:PropTypes.string,endTime:PropTypes.object,markerConfiguration:PropTypes.object,markersEnabled:PropTypes.bool,removeLayer:PropTypes.func,startTime:PropTypes.object,stepSizeUnit:PropTypes.string,timeEnabled:PropTypes.bool,timeFeatures:PropTypes.object,timestampChanged:PropTypes.func});export default connect(function(){return{}},{addLayerFeatures:addLayerFeatures,removeLayer:removeLayer})(TimelineFeaturesSlider);
+var newLayerClassifications=_objectSpread({},state.layerClassifications);delete newLayerClassifications[layer];return{layerClassifications:newLayerClassifications,layerAttrGroups:newLayerAttrGroups}})});return _this}_inherits(TimelineFeaturesSlider,_React$Component);return _createClass(TimelineFeaturesSlider,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this2=this;if(this.state.highlightFeatures!==prevState.highlightFeatures){if(!this.state.highlightFeatures){this.props.removeLayer("timelinefeathighlight")}else{var layer={id:"timelinefeathighlight",role:LayerRole.MARKER,rev:+new Date};this.props.addLayerFeatures(layer,this.state.highlightFeatures,true)}}if(this.props.timeFeatures!==prevProps.timeFeatures){var newLayerClassifications=_objectSpread({},this.state.layerClassifications);Object.keys(this.state.layerClassifications).forEach(function(layername){if(!_this2.props.timeFeatures.attributes[layername]||_this2.props.timeFeatures.attributes[layername]!==prevProps.timeFeatures.attributes[layername]){delete newLayerClassifications.layername}});this.setState(function(state){var newLayerAttrGroups=_objectSpread({},state.layerAttrGroups);Object.keys(state.layerAttrGroups).forEach(function(layername){if(!_this2.props.timeFeatures.attributes[layername]||_this2.props.timeFeatures.attributes[layername]!==prevProps.timeFeatures.attributes[layername]){delete newLayerAttrGroups.layername}});return{layerAttrGroups:newLayerAttrGroups}})}}},{key:"render",value:function render(){var timestamp=this.state.currentTimestampDrag?this.state.currentTimestampDrag.time:this.props.currentTimestamp;var sliderGeom={top:5};return/*#__PURE__*/React.createElement("div",{className:"timeline-slider-container"},/*#__PURE__*/React.createElement("div",{className:"timeline-slider",onPointerDown:this.pickCurrentTimestamp},this.props.displayMode==="features"?this.renderTimeFeatures(sliderGeom):null,this.props.displayMode==="layers"?this.renderTimeLayers(sliderGeom):null,this.renderGradient(sliderGeom)),this.renderCursor(timestamp),this.props.timeFeatures.pendingRequests>0?/*#__PURE__*/React.createElement("div",{className:"timeline-slider-loading"},/*#__PURE__*/React.createElement(Spinner,null),/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("timemanager.loading"))):null)}}])}(React.Component);_defineProperty(TimelineFeaturesSlider,"propTypes",{addLayerFeatures:PropTypes.func,computePixelFromTime:PropTypes.func,computeTimeFromPixel:PropTypes.func,currentTimestamp:PropTypes.number,cursorFormat:PropTypes.string,dateFormat:PropTypes.string,displayMode:PropTypes.string,endTime:PropTypes.object,markerConfiguration:PropTypes.object,markersEnabled:PropTypes.bool,removeLayer:PropTypes.func,startTime:PropTypes.object,stepSizeUnit:PropTypes.string,timeEnabled:PropTypes.bool,timeFeatures:PropTypes.object,timestampChanged:PropTypes.func});export default connect(function(){return{}},{addLayerFeatures:addLayerFeatures,removeLayer:removeLayer})(TimelineFeaturesSlider);

package/components/timeline/style/FixedTimeline.css

@@ -21,6 +21,7 @@ div.fixtimeline-slider {
 
 button.fixtimeline-pan-left,
 button.fixtimeline-pan-right {
+    touch-action: none;
     position: absolute;
     bottom: 0;
     top: 0;

package/components/timeline/style/InfiniteTimeline.css

@@ -72,6 +72,7 @@ div.inftimeline-ticks > span.inftimeline-tick {
 
 button.inftimeline-pan-left,
 button.inftimeline-pan-right {
+    touch-action: none;
     position: absolute;
     bottom: 0;
     top: 0;

package/components/timeline/style/TimelineFeaturesSlider.css

@@ -8,6 +8,7 @@ div.timeline-slider-container {
 }
 
 div.timeline-slider {
+    touch-action: none;
     flex: 1 1 auto;
     background-color: white;
     height: 35px;

package/components/widgets/NumberInput.js

@@ -4,6 +4,6 @@ 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 classNames from"classnames";import PropTypes from"prop-types";import Icon from"../Icon";import"./style/NumberInput.css";var NumberInput=/*#__PURE__*/function(_React$Component){function NumberInput(){var _this;_classCallCheck(this,NumberInput);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,NumberInput,[].concat(args));_defineProperty(_this,"state",{propValue:"",value:"",changed:false,valid:false});_defineProperty(_this,"onChange",function(ev){var len=ev.target.value.length;var value=ev.target.value.substring(_this.props.prefix.length,len-_this.props.suffix.length);_this.setState({value:value,changed:true})});_defineProperty(_this,"currentFloatValue",function(){var floatValue=parseFloat(_this.state.value);return isNaN(floatValue)?null:floatValue});_defineProperty(_this,"startStep",function(delta){if(_this.props.disabled||_this.props.readOnly){return}_this.props.onChange(_this.constrainValue(_this.currentFloatValue()+delta));var stepInterval=null;var stepTimeout=setTimeout(function(){stepInterval=setInterval(function(){_this.props.onChange(_this.constrainValue(_this.currentFloatValue()+delta))},50)},500);document.addEventListener("mouseup",function(){clearTimeout(stepTimeout);clearInterval(stepInterval)},{once:true})});_defineProperty(_this,"onKeyDown",function(ev){if(ev.key==="Enter"){_this.commit()}// Ensure prefix/suffix isn't changed
+ */import React from"react";import classNames from"classnames";import PropTypes from"prop-types";import Icon from"../Icon";import"./style/NumberInput.css";var NumberInput=/*#__PURE__*/function(_React$Component){function NumberInput(){var _this;_classCallCheck(this,NumberInput);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,NumberInput,[].concat(args));_defineProperty(_this,"state",{propValue:"",value:"",changed:false,valid:false});_defineProperty(_this,"onChange",function(ev){var len=ev.target.value.length;var value=ev.target.value.substring(_this.props.prefix.length,len-_this.props.suffix.length);_this.setState({value:value,changed:true})});_defineProperty(_this,"currentFloatValue",function(){var floatValue=parseFloat(_this.state.value);return isNaN(floatValue)?null:floatValue});_defineProperty(_this,"startStep",function(delta){if(_this.props.disabled||_this.props.readOnly){return}_this.props.onChange(_this.constrainValue(_this.currentFloatValue()+delta));var stepInterval=null;var stepTimeout=setTimeout(function(){stepInterval=setInterval(function(){_this.props.onChange(_this.constrainValue(_this.currentFloatValue()+delta))},50)},500);document.addEventListener("pointerup",function(){clearTimeout(stepTimeout);clearInterval(stepInterval)},{once:true})});_defineProperty(_this,"onKeyDown",function(ev){if(ev.key==="Enter"){_this.commit()}// Ensure prefix/suffix isn't changed
 var selStart=ev.target.selectionStart;var selEnd=ev.target.selectionEnd;var len=ev.target.value.length;var startOffset=ev.key==="Backspace"&&selStart===selEnd?1:0;var endOffset=ev.key==="Delete"&&selStart===selEnd?1:0;if(selStart<_this.props.prefix.length+startOffset||selEnd>len-_this.props.suffix.length-endOffset){ev.preventDefault()}});_defineProperty(_this,"commit",function(){if(_this.state.changed){var value=_this.constrainValue(_this.currentFloatValue());_this.setState({value:value===null?"":value.toFixed(_this.props.decimals)});_this.props.onChange(value)}});_defineProperty(_this,"constrainValue",function(value){if(value===null){return null}if(_this.props.min!==undefined){value=Math.max(_this.props.min,value)}if(_this.props.max!==undefined){value=Math.min(_this.props.max,value)}var k=Math.pow(10,_this.props.decimals);return Math.round(value*k)/k});_defineProperty(_this,"setupSelectionListener",function(event){var input=event.target;var selectionHandler=function selectionHandler(ev){if(ev.target===input){// Ensure prefix/suffix isn't selected
-var len=input.value.length;var prefixLen=_this.props.prefix.length;var suffixLen=_this.props.suffix.length;var selStart=Math.min(Math.max(input.selectionStart,prefixLen),len-suffixLen);var selEnd=Math.max(Math.min(input.selectionEnd,len-suffixLen),prefixLen);if(selStart!==input.selectionStart||selEnd!==input.selectionEnd){input.setSelectionRange(selStart,selEnd)}}};document.addEventListener("selectionchange",selectionHandler);input.addEventListener("blur",function(){document.removeEventListener("selectionchange",selectionHandler)},{once:true})});return _this}_inherits(NumberInput,_React$Component);return _createClass(NumberInput,[{key:"render",value:function render(){var _this$props$step,_this2=this;var className=classNames({"number-input":true,"number-input-mobile":this.props.mobile,"number-input-normal":!this.props.mobile,"number-input-disabled":this.props.disabled||this.props.readOnly,"number-input-invalid":this.props.required&&!this.state.value});var style={};if(!this.props.fitParent){var paddingLength=(this.props.mobile?4:1.5)+"em";var prefixSuffixLength=this.props.prefix.length+this.props.suffix.length+"ch";var numberLength=2+Math.max((this.props.min||0).toFixed(this.props.decimals).length,(this.props.max||0).toFixed(this.props.decimals).length)+"ch";style.minWidth="calc(".concat(paddingLength," + ").concat(prefixSuffixLength," + ").concat(numberLength,")")}var step=(_this$props$step=this.props.step)!==null&&_this$props$step!==void 0?_this$props$step:Math.pow(10,-this.props.decimals);var plusIcon=this.props.mobile?"plus":"chevron-up";var minusIcon=this.props.mobile?"minus":"chevron-down";return/*#__PURE__*/React.createElement("div",{className:className+" "+this.props.className},/*#__PURE__*/React.createElement("input",{disabled:this.props.disabled,onBlur:this.commit,onChange:this.onChange,onFocus:this.setupSelectionListener,onKeyDown:this.onKeyDown,placeholder:this.props.placeholder,readOnly:this.props.readOnly,required:this.props.required,style:style,type:"text",value:this.props.prefix+this.state.value+this.props.suffix}),/*#__PURE__*/React.createElement("input",{name:this.props.name,required:this.props.required,type:"hidden",value:this.state.value}),/*#__PURE__*/React.createElement(Icon,{icon:plusIcon,onMouseDown:function onMouseDown(){return _this2.startStep(+step)}}),/*#__PURE__*/React.createElement(Icon,{icon:minusIcon,onMouseDown:function onMouseDown(){return _this2.startStep(-step)}}))}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps,state){if(state.propValue!==nextProps.value){return{propValue:nextProps.value,value:typeof nextProps.value==="number"?nextProps.value.toFixed(nextProps.decimals):"",changed:false}}return null}}])}(React.Component);_defineProperty(NumberInput,"propTypes",{className:PropTypes.string,decimals:PropTypes.number,disabled:PropTypes.bool,fitParent:PropTypes.bool,max:PropTypes.number,min:PropTypes.number,mobile:PropTypes.bool,name:PropTypes.string,onChange:PropTypes.func,placeholder:PropTypes.string,prefix:PropTypes.string,readOnly:PropTypes.bool,required:PropTypes.bool,step:PropTypes.number,style:PropTypes.object,suffix:PropTypes.string,value:PropTypes.number});_defineProperty(NumberInput,"defaultProps",{className:"",decimals:0,mobile:false,prefix:"",suffix:""});export{NumberInput as default};
+var len=input.value.length;var prefixLen=_this.props.prefix.length;var suffixLen=_this.props.suffix.length;var selStart=Math.min(Math.max(input.selectionStart,prefixLen),len-suffixLen);var selEnd=Math.max(Math.min(input.selectionEnd,len-suffixLen),prefixLen);if(selStart!==input.selectionStart||selEnd!==input.selectionEnd){input.setSelectionRange(selStart,selEnd)}}};document.addEventListener("selectionchange",selectionHandler);input.addEventListener("blur",function(){document.removeEventListener("selectionchange",selectionHandler)},{once:true})});return _this}_inherits(NumberInput,_React$Component);return _createClass(NumberInput,[{key:"render",value:function render(){var _this$props$step,_this2=this;var className=classNames({"number-input":true,"number-input-mobile":this.props.mobile,"number-input-normal":!this.props.mobile,"number-input-disabled":this.props.disabled||this.props.readOnly,"number-input-invalid":this.props.required&&!this.state.value});var style={};if(!this.props.fitParent){var paddingLength=(this.props.mobile?4:1.5)+"em";var prefixSuffixLength=this.props.prefix.length+this.props.suffix.length+"ch";var numberLength=2+Math.max((this.props.min||0).toFixed(this.props.decimals).length,(this.props.max||0).toFixed(this.props.decimals).length)+"ch";style.minWidth="calc(".concat(paddingLength," + ").concat(prefixSuffixLength," + ").concat(numberLength,")")}var step=(_this$props$step=this.props.step)!==null&&_this$props$step!==void 0?_this$props$step:Math.pow(10,-this.props.decimals);var plusIcon=this.props.mobile?"plus":"chevron-up";var minusIcon=this.props.mobile?"minus":"chevron-down";return/*#__PURE__*/React.createElement("div",{className:className+" "+this.props.className},/*#__PURE__*/React.createElement("input",{disabled:this.props.disabled,onBlur:this.commit,onChange:this.onChange,onFocus:this.setupSelectionListener,onKeyDown:this.onKeyDown,placeholder:this.props.placeholder,readOnly:this.props.readOnly,required:this.props.required,style:style,type:"text",value:this.props.prefix+this.state.value+this.props.suffix}),/*#__PURE__*/React.createElement("input",{name:this.props.name,required:this.props.required,type:"hidden",value:this.state.value}),/*#__PURE__*/React.createElement(Icon,{icon:plusIcon,onPointerDown:function onPointerDown(){return _this2.startStep(+step)}}),/*#__PURE__*/React.createElement(Icon,{icon:minusIcon,onPointerDown:function onPointerDown(){return _this2.startStep(-step)}}))}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps,state){if(state.propValue!==nextProps.value){return{propValue:nextProps.value,value:typeof nextProps.value==="number"?nextProps.value.toFixed(nextProps.decimals):"",changed:false}}return null}}])}(React.Component);_defineProperty(NumberInput,"propTypes",{className:PropTypes.string,decimals:PropTypes.number,disabled:PropTypes.bool,fitParent:PropTypes.bool,max:PropTypes.number,min:PropTypes.number,mobile:PropTypes.bool,name:PropTypes.string,onChange:PropTypes.func,placeholder:PropTypes.string,prefix:PropTypes.string,readOnly:PropTypes.bool,required:PropTypes.bool,step:PropTypes.number,style:PropTypes.object,suffix:PropTypes.string,value:PropTypes.number});_defineProperty(NumberInput,"defaultProps",{className:"",decimals:0,mobile:false,prefix:"",suffix:""});export{NumberInput as default};

package/components/widgets/TextInput.js

@@ -4,4 +4,4 @@ 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 classNames from"classnames";import PropTypes from"prop-types";import LocaleUtils from"../../utils/LocaleUtils";import MiscUtils from"../../utils/MiscUtils";import Icon from"../Icon";import"./style/TextInput.css";var TextInput=/*#__PURE__*/function(_React$Component){function TextInput(props){var _this;_classCallCheck(this,TextInput);_this=_callSuper(this,TextInput,[props]);_defineProperty(_this,"state",{focus:false,value:"",valueRev:0,curValue:"",changed:false});_defineProperty(_this,"setDefaultValue",function(value,valueRev,prevValueRef){if(valueRev>prevValueRef){_this.input.innerHTML=value}});_defineProperty(_this,"onCopy",function(ev,cut){ev.preventDefault();var selection=window.getSelection();var plainText=selection.toString();if(ev.clipboardData){ev.clipboardData.setData("text/plain",plainText)}if(cut){_this.clear()}});_defineProperty(_this,"clear",function(){var clearValue=_this.props.clearValue;_this.props.onChange(clearValue);_this.setState(function(state){return{curValue:_this.props.clearValue,changed:state.value!==clearValue}});_this.input.innerHTML=clearValue});_defineProperty(_this,"onChange",function(ev){var curValue=ev.target.innerText.replace(/<br\s*\/?>$/,"").replace(/\n$/,"");if(!_this.props.multiline){curValue=curValue.replace("\n","")}_this.setState({curValue:curValue,changed:true})});_defineProperty(_this,"onBlur",function(){_this.setState({focus:false});if(!_this.skipNextCommitOnBlur){_this.commit()}});_defineProperty(_this,"onFocus",function(ev){_this.setState({focus:true});window.setTimeout(function(){if(window.getSelection&&document.createRange){var range=document.createRange();range.selectNodeContents(ev.target);var sel=window.getSelection();sel.removeAllRanges();sel.addRange(range)}else if(document.body.createTextRange){var _range=document.body.createTextRange();_range.moveToElementText(ev.target);_range.select()}},1)});_defineProperty(_this,"onMouseDown",function(ev){var el=document.elementFromPoint(ev.clientX,ev.clientY);if((el===null||el===void 0?void 0:el.nodeName)==="A"&&ev.ctrlKey){window.open(el.href,el.target)}});_defineProperty(_this,"onMouseMove",function(ev){var isTouch="ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0;clearTimeout(_this.tooltipTimeout);var editable=!_this.props.disabled&&!_this.props.readOnly;if(!isTouch&&editable&&ev.target.nodeName==="A"){var rect=ev.target.getBoundingClientRect();var left=rect.left+window.scrollX;var bottom=rect.bottom+window.scrollY+2;_this.tooltipTimeout=setTimeout(function(){if(!_this.tooltipEl){_this.tooltipEl=document.createElement("span");_this.tooltipEl.className="text-input-link-tooltip";_this.tooltipEl.innerHTML=LocaleUtils.tr("misc.ctrlclickhint");_this.tooltipEl.style.position="absolute";_this.tooltipEl.style.zIndex=10000000000;document.body.appendChild(_this.tooltipEl)}_this.tooltipEl.style.left=left+"px";_this.tooltipEl.style.top=bottom+"px";_this.tooltipTimeout=null},250)}else if(_this.tooltipEl){document.body.removeChild(_this.tooltipEl);_this.tooltipEl=null}});_defineProperty(_this,"onMouseLeave",function(){clearTimeout(_this.tooltipTimeout);if(_this.tooltipEl){document.body.removeChild(_this.tooltipEl);_this.tooltipEl=null}});_defineProperty(_this,"onKeyDown",function(ev){if(ev.key==="Enter"&&!_this.props.multiline){ev.preventDefault();_this.commit()}else if(ev.key==="Escape"){_this.setState(function(state){return{value:_this.props.value,valueRev:state.valueRev+1,curValue:_this.props.value||"",changed:false}});_this.skipNextCommitOnBlur=true;ev.target.blur()}});_defineProperty(_this,"commit",function(){if(_this.state.changed){if(_this.props.addLinkAnchors){var valueWithLinks=MiscUtils.addLinkAnchors(_this.state.curValue);_this.props.onChange(valueWithLinks)}else{_this.props.onChange(_this.state.curValue)}}});_defineProperty(_this,"storeInitialHeight",function(el){if(el){_this.initialHeight=el.offsetHeight}});_defineProperty(_this,"startResize",function(ev){var container=ev.target.parentElement;if(!container){return}var startHeight=container.offsetHeight;var startMouseY=ev.clientY;var resizeInput=function resizeInput(event){container.style.height=Math.max(_this.initialHeight,startHeight+(event.clientY-startMouseY))+"px"};document.body.style.userSelect="none";ev.view.addEventListener("mousemove",resizeInput);ev.view.addEventListener("mouseup",function(){document.body.style.userSelect="";ev.view.removeEventListener("mousemove",resizeInput)},{once:true})});_this.skipNextCommitOnBlur=false;_this.focusEnterClick=false;_this.initialHeight=null;_this.input=null;_this.tooltipEl=null;_this.tooltipTimeout=null;return _this}_inherits(TextInput,_React$Component);return _createClass(TextInput,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){this.setDefaultValue(this.state.value,this.state.valueRev,prevState.valueRev)}},{key:"render",value:function render(){var _this2=this;var wrapperClassName=classNames({"TextInput":true,"text-input-wrapper":true,"text-input-wrapper-multiline":this.props.multiline,"text-input-wrapper-focused":this.state.focus});var preClassName=classNames({"text-input":true,"text-input-disabled":this.props.disabled,"text-input-readonly":this.props.readOnly||!this.state.curValue,"text-input-invalid":this.props.required&&!this.state.curValue});var showClear=this.state.focus&&!this.props.multiline&&!this.props.disabled&&!this.props.readOnly&&this.state.curValue;var style=_objectSpread({},this.props.style);if(showClear){style.marginRight="1.5em"}return/*#__PURE__*/React.createElement("div",{className:wrapperClassName+" "+(this.props.className||""),ref:this.storeInitialHeight},this.props.name?/*#__PURE__*/React.createElement("textarea",{className:"text-input-form-el",name:this.props.name,onChange:function onChange(){},required:this.props.required,tabIndex:"-1",value:this.state.curValue}):null,/*#__PURE__*/React.createElement("pre",{className:preClassName,contentEditable:!this.props.disabled&&!this.props.readOnly,dangerouslySetInnerHTML:{__html:this.state.value},onBlur:this.onBlur,onChange:this.onChange,onCopy:function onCopy(ev){return _this2.onCopy(ev,false)},onCut:function onCut(ev){return _this2.onCopy(ev,true)},onFocus:this.onFocus,onInput:this.onChange,onKeyDown:this.onKeyDown,onMouseDown:this.onMouseDown,onMouseLeave:this.onMouseLeave,onMouseMove:this.onMouseMove,ref:function ref(el){_this2.input=el},style:style}),!this.state.curValue?/*#__PURE__*/React.createElement("div",{className:"text-input-placeholder"},this.props.placeholder):null,this.props.multiline?/*#__PURE__*/React.createElement("div",{className:"text-input-resize-handle",onMouseDown:this.startResize}):null,showClear?/*#__PURE__*/React.createElement("div",{className:"text-input-clear-icon"},/*#__PURE__*/React.createElement(Icon,{icon:"clear",onClick:this.clear,onMouseDown:MiscUtils.killEvent})):null)}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps,state){if(state.value!==nextProps.value){return{value:nextProps.value,valueRev:state.valueRev+1,curValue:nextProps.value||"",changed:false}}return null}}])}(React.Component);_defineProperty(TextInput,"propTypes",{addLinkAnchors:PropTypes.bool,className:PropTypes.string,clearValue:PropTypes.string,disabled:PropTypes.bool,multiline:PropTypes.bool,name:PropTypes.string,onChange:PropTypes.func,placeholder:PropTypes.string,readOnly:PropTypes.bool,required:PropTypes.bool,style:PropTypes.object,value:PropTypes.string});_defineProperty(TextInput,"defaultProps",{clearValue:"",placeholder:""});export{TextInput as default};
+ */import React from"react";import classNames from"classnames";import PropTypes from"prop-types";import LocaleUtils from"../../utils/LocaleUtils";import MiscUtils from"../../utils/MiscUtils";import Icon from"../Icon";import"./style/TextInput.css";var TextInput=/*#__PURE__*/function(_React$Component){function TextInput(props){var _this;_classCallCheck(this,TextInput);_this=_callSuper(this,TextInput,[props]);_defineProperty(_this,"state",{focus:false,value:"",valueRev:0,curValue:"",changed:false});_defineProperty(_this,"setDefaultValue",function(value,valueRev,prevValueRef){if(valueRev>prevValueRef){_this.input.innerHTML=value}});_defineProperty(_this,"onCopy",function(ev,cut){ev.preventDefault();var selection=window.getSelection();var plainText=selection.toString();if(ev.clipboardData){ev.clipboardData.setData("text/plain",plainText)}if(cut){_this.clear()}});_defineProperty(_this,"clear",function(){var clearValue=_this.props.clearValue;_this.props.onChange(clearValue);_this.setState(function(state){return{curValue:_this.props.clearValue,changed:state.value!==clearValue}});_this.input.innerHTML=clearValue});_defineProperty(_this,"onChange",function(ev){var curValue=ev.target.innerText.replace(/<br\s*\/?>$/,"").replace(/\n$/,"");if(!_this.props.multiline){curValue=curValue.replace("\n","")}_this.setState({curValue:curValue,changed:true})});_defineProperty(_this,"onBlur",function(){_this.setState({focus:false});if(!_this.skipNextCommitOnBlur){_this.commit()}});_defineProperty(_this,"onFocus",function(ev){_this.setState({focus:true});window.setTimeout(function(){if(window.getSelection&&document.createRange){var range=document.createRange();range.selectNodeContents(ev.target);var sel=window.getSelection();sel.removeAllRanges();sel.addRange(range)}else if(document.body.createTextRange){var _range=document.body.createTextRange();_range.moveToElementText(ev.target);_range.select()}},1)});_defineProperty(_this,"onMouseDown",function(ev){var el=document.elementFromPoint(ev.clientX,ev.clientY);if((el===null||el===void 0?void 0:el.nodeName)==="A"&&ev.ctrlKey){window.open(el.href,el.target)}});_defineProperty(_this,"onMouseMove",function(ev){var isTouch="ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0;clearTimeout(_this.tooltipTimeout);var editable=!_this.props.disabled&&!_this.props.readOnly;if(!isTouch&&editable&&ev.target.nodeName==="A"){var rect=ev.target.getBoundingClientRect();var left=rect.left+window.scrollX;var bottom=rect.bottom+window.scrollY+2;_this.tooltipTimeout=setTimeout(function(){if(!_this.tooltipEl){_this.tooltipEl=document.createElement("span");_this.tooltipEl.className="text-input-link-tooltip";_this.tooltipEl.innerHTML=LocaleUtils.tr("misc.ctrlclickhint");_this.tooltipEl.style.position="absolute";_this.tooltipEl.style.zIndex=10000000000;document.body.appendChild(_this.tooltipEl)}_this.tooltipEl.style.left=left+"px";_this.tooltipEl.style.top=bottom+"px";_this.tooltipTimeout=null},250)}else if(_this.tooltipEl){document.body.removeChild(_this.tooltipEl);_this.tooltipEl=null}});_defineProperty(_this,"onMouseLeave",function(){clearTimeout(_this.tooltipTimeout);if(_this.tooltipEl){document.body.removeChild(_this.tooltipEl);_this.tooltipEl=null}});_defineProperty(_this,"onKeyDown",function(ev){if(ev.key==="Enter"&&!_this.props.multiline){ev.preventDefault();_this.commit()}else if(ev.key==="Escape"){_this.setState(function(state){return{value:_this.props.value,valueRev:state.valueRev+1,curValue:_this.props.value||"",changed:false}});_this.skipNextCommitOnBlur=true;ev.target.blur()}});_defineProperty(_this,"commit",function(){if(_this.state.changed){if(_this.props.addLinkAnchors){var valueWithLinks=MiscUtils.addLinkAnchors(_this.state.curValue);_this.props.onChange(valueWithLinks)}else{_this.props.onChange(_this.state.curValue)}}});_defineProperty(_this,"storeInitialHeight",function(el){if(el){_this.initialHeight=el.offsetHeight}});_defineProperty(_this,"startResize",function(ev){var container=ev.target.parentElement;if(!container){return}var startHeight=container.offsetHeight;var startMouseY=ev.clientY;var resizeInput=function resizeInput(event){container.style.height=Math.max(_this.initialHeight,startHeight+(event.clientY-startMouseY))+"px"};document.body.style.userSelect="none";ev.view.addEventListener("pointermove",resizeInput);ev.view.addEventListener("pointerup",function(){document.body.style.userSelect="";ev.view.removeEventListener("pointermove",resizeInput)},{once:true})});_this.skipNextCommitOnBlur=false;_this.focusEnterClick=false;_this.initialHeight=null;_this.input=null;_this.tooltipEl=null;_this.tooltipTimeout=null;return _this}_inherits(TextInput,_React$Component);return _createClass(TextInput,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){this.setDefaultValue(this.state.value,this.state.valueRev,prevState.valueRev)}},{key:"render",value:function render(){var _this2=this;var wrapperClassName=classNames({"TextInput":true,"text-input-wrapper":true,"text-input-wrapper-multiline":this.props.multiline,"text-input-wrapper-focused":this.state.focus});var preClassName=classNames({"text-input":true,"text-input-disabled":this.props.disabled,"text-input-readonly":this.props.readOnly||!this.state.curValue,"text-input-invalid":this.props.required&&!this.state.curValue});var showClear=this.state.focus&&!this.props.multiline&&!this.props.disabled&&!this.props.readOnly&&this.state.curValue;var style=_objectSpread({},this.props.style);if(showClear){style.marginRight="1.5em"}return/*#__PURE__*/React.createElement("div",{className:wrapperClassName+" "+(this.props.className||""),ref:this.storeInitialHeight},this.props.name?/*#__PURE__*/React.createElement("textarea",{className:"text-input-form-el",name:this.props.name,onChange:function onChange(){},required:this.props.required,tabIndex:"-1",value:this.state.curValue}):null,/*#__PURE__*/React.createElement("pre",{className:preClassName,contentEditable:!this.props.disabled&&!this.props.readOnly,dangerouslySetInnerHTML:{__html:this.state.value},onBlur:this.onBlur,onChange:this.onChange,onCopy:function onCopy(ev){return _this2.onCopy(ev,false)},onCut:function onCut(ev){return _this2.onCopy(ev,true)},onFocus:this.onFocus,onInput:this.onChange,onKeyDown:this.onKeyDown,onMouseDown:this.onMouseDown,onMouseLeave:this.onMouseLeave,onMouseMove:this.onMouseMove,ref:function ref(el){_this2.input=el},style:style}),!this.state.curValue?/*#__PURE__*/React.createElement("div",{className:"text-input-placeholder"},this.props.placeholder):null,this.props.multiline?/*#__PURE__*/React.createElement("div",{className:"text-input-resize-handle",onPointerDown:this.startResize}):null,showClear?/*#__PURE__*/React.createElement("div",{className:"text-input-clear-icon"},/*#__PURE__*/React.createElement(Icon,{icon:"clear",onClick:this.clear,onMouseDown:MiscUtils.killEvent})):null)}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps,state){if(state.value!==nextProps.value){return{value:nextProps.value,valueRev:state.valueRev+1,curValue:nextProps.value||"",changed:false}}return null}}])}(React.Component);_defineProperty(TextInput,"propTypes",{addLinkAnchors:PropTypes.bool,className:PropTypes.string,clearValue:PropTypes.string,disabled:PropTypes.bool,multiline:PropTypes.bool,name:PropTypes.string,onChange:PropTypes.func,placeholder:PropTypes.string,readOnly:PropTypes.bool,required:PropTypes.bool,style:PropTypes.object,value:PropTypes.string});_defineProperty(TextInput,"defaultProps",{clearValue:"",placeholder:""});export{TextInput as default};

package/components/widgets/style/TextInput.css

@@ -76,6 +76,7 @@ div.text-input-placeholder {
 }
 
 div.text-input-resize-handle {
+    touch-action: none;
     position: absolute;
     right: 0;
     bottom: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "qwc2",
-    "version": "2025.06.13",
+    "version": "2025.06.27",
     "description": "QGIS Web Client",
     "author": "Sourcepole AG",
     "license": "BSD-2-Clause",
@@ -84,6 +84,7 @@
         "svgpath": "^2.6.0",
         "three": "^0.170.0",
         "three-csg-ts": "^3.2.0",
+        "three.meshline": "^1.4.0",
         "url": "^0.11.4",
         "utif": "^3.1.0",
         "uuid": "^11.0.3"

package/plugins/Authentication.js

@@ -4,10 +4,10 @@ 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 url from"url";import Icon from"../components/Icon";import ConfigUtils from"../utils/ConfigUtils";import"./style/Authentication.css";/**
+ */import React from"react";import ReactDOM from"react-dom";import{connect}from"react-redux";import PropTypes from"prop-types";import url from"url";import Icon from"../components/Icon";import{MapContainerPortalContext}from"../components/PluginsContainer";import ConfigUtils from"../utils/ConfigUtils";import"./style/Authentication.css";/**
  * Handles authentication
  *
  * Invokes the the authentication service specified by `authServiceUrl` in `config.json`.
  */var Authentication=/*#__PURE__*/function(_React$Component){function Authentication(props){var _this;_classCallCheck(this,Authentication);_this=_callSuper(this,Authentication,[props]);_defineProperty(_this,"showLogin",function(){var urlObj=url.parse(window.location.href,true);if(_this.props.clearLayerParam){delete urlObj.query.l}urlObj.search=undefined;window.location.href=ConfigUtils.getConfigProp("authServiceUrl")+"login?url="+encodeURIComponent(url.format(urlObj))});_defineProperty(_this,"resetIdleTimer",function(){if(_this.idleTimer){clearTimeout(_this.idleTimer);_this.idleTimer=setTimeout(_this.idleAutologout,_this.props.idleTimeout*1000)}});_defineProperty(_this,"idleAutologout",function(){var urlObj=url.parse(window.location.href,true);urlObj.search=undefined;var loginUrl=ConfigUtils.getConfigProp("authServiceUrl")+"login?url="+encodeURIComponent(url.format(urlObj));window.location.href=ConfigUtils.getConfigProp("authServiceUrl")+"logout?url="+encodeURIComponent(loginUrl)});_this.idleTimer=null;return _this}_inherits(Authentication,_React$Component);return _createClass(Authentication,[{key:"componentDidMount",value:function componentDidMount(){var username=ConfigUtils.getConfigProp("username");if(this.props.requireLogin&&!username){this.showLogin()}if(this.props.idleTimeout&&username){this.idleTimer=setTimeout(this.idleAutologout,this.props.idleTimeout*1000);window.addEventListener("keydown",this.resetIdleTimer,{passive:true});window.addEventListener("mousedown",this.resetIdleTimer,{passive:true});window.addEventListener("wheel",this.resetIdleTimer,{passive:true})}}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){var task=this.props.task;if(task!==prevProps.task){// "Login" and "Logout" task ids are legacy
 if(task.id==="Login"||task.id==="Authentication"&&task.mode==="Login"){this.showLogin()}else if(task==="Logout"||task.id==="Authentication"&&task.mode==="Logout"){// logout and redirect to custom logoutTargetUrl or current location if not set
-window.location.href=ConfigUtils.getConfigProp("authServiceUrl")+"logout?url="+encodeURIComponent(this.props.logoutTargetUrl||window.location.href)}}}},{key:"render",value:function render(){if(!this.props.showLoginUser){return null}var username=ConfigUtils.getConfigProp("username");var style={right:this.props.mapMargins.right};if(!username){return null}return/*#__PURE__*/React.createElement("div",{className:"login-user",style:style},/*#__PURE__*/React.createElement(Icon,{icon:"login"}),/*#__PURE__*/React.createElement("span",null,username))}}])}(React.Component);_defineProperty(Authentication,"availableIn3D",true);_defineProperty(Authentication,"propTypes",{/** Whether to clear the layer parameter from the URL on login. */clearLayerParam:PropTypes.bool,/** An idle timeout in seconds after which the user is automatically logged of. */idleTimeout:PropTypes.number,/** An URL to redirect to on logout, instead of the viewer URL. */logoutTargetUrl:PropTypes.string,mapMargins:PropTypes.object,/** Whether authentication is required, i.e. the viewer automatically redirects to the login page if no user is authenticated. */requireLogin:PropTypes.bool,/** Whether to display the currently logged in user below the application menu button. */showLoginUser:PropTypes.bool,task:PropTypes.object});export default connect(function(state){return{mapMargins:state.windows.mapMargins,task:state.task}},{})(Authentication);
+window.location.href=ConfigUtils.getConfigProp("authServiceUrl")+"logout?url="+encodeURIComponent(this.props.logoutTargetUrl||window.location.href)}}}},{key:"render",value:function render(){if(!this.props.showLoginUser){return null}var username=ConfigUtils.getConfigProp("username");if(!username){return null}return/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{className:"login-user"},/*#__PURE__*/React.createElement(Icon,{icon:"login"}),/*#__PURE__*/React.createElement("span",null,username)),this.context)}}])}(React.Component);_defineProperty(Authentication,"contextType",MapContainerPortalContext);_defineProperty(Authentication,"availableIn3D",true);_defineProperty(Authentication,"propTypes",{/** Whether to clear the layer parameter from the URL on login. */clearLayerParam:PropTypes.bool,/** An idle timeout in seconds after which the user is automatically logged of. */idleTimeout:PropTypes.number,/** An URL to redirect to on logout, instead of the viewer URL. */logoutTargetUrl:PropTypes.string,/** Whether authentication is required, i.e. the viewer automatically redirects to the login page if no user is authenticated. */requireLogin:PropTypes.bool,/** Whether to display the currently logged in user below the application menu button. */showLoginUser:PropTypes.bool,task:PropTypes.object});export default connect(function(state){return{task:state.task}},{})(Authentication);

package/plugins/BottomBar.js

@@ -1,10 +1,10 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _slicedToArray(r,e){return _arrayWithHoles(r)||_iterableToArrayLimit(r,e)||_unsupportedIterableToArray(r,e)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t["return"]&&(u=t["return"](),Object(u)!==u))return}finally{if(o)throw n}}return a}}function _arrayWithHoles(r){if(Array.isArray(r))return r}function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _slicedToArray(r,e){return _arrayWithHoles(r)||_iterableToArrayLimit(r,e)||_unsupportedIterableToArray(r,e)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t["return"]&&(u=t["return"](),Object(u)!==u))return}finally{if(o)throw n}}return a}}function _arrayWithHoles(r){if(Array.isArray(r))return r}function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
  * Copyright 2016-2024 Sourcepole AG
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import{connect}from"react-redux";import PropTypes from"prop-types";import{changeZoomLevel,setDisplayCrs}from"../actions/map";import{openExternalUrl,setBottombarHeight}from"../actions/windows";import CoordinateDisplayer from"../components/CoordinateDisplayer";import InputContainer from"../components/widgets/InputContainer";import CoordinatesUtils from"../utils/CoordinatesUtils";import LocaleUtils from"../utils/LocaleUtils";import MapUtils from"../utils/MapUtils";import"./style/BottomBar.css";/**
+ */import React from"react";import{connect}from"react-redux";import ol from"openlayers";import PropTypes from"prop-types";import{changeZoomLevel,setDisplayCrs}from"../actions/map";import{openExternalUrl,setBottombarHeight}from"../actions/windows";import CoordinateDisplayer from"../components/CoordinateDisplayer";import InputContainer from"../components/widgets/InputContainer";import CoordinatesUtils from"../utils/CoordinatesUtils";import LocaleUtils from"../utils/LocaleUtils";import MapUtils from"../utils/MapUtils";import"./style/BottomBar.css";/**
  * Bottom bar, displaying mouse coordinate, scale, etc.
- */var BottomBar=/*#__PURE__*/function(_React$Component){function BottomBar(){var _this;_classCallCheck(this,BottomBar);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,BottomBar,[].concat(args));_defineProperty(_this,"state",{scale:0});_defineProperty(_this,"openUrl",function(ev,url,target,title,icon){if(target==="iframe"){target=":iframedialog:externallinkiframe"}_this.props.openExternalUrl(url,target,{title:title,icon:icon});ev.preventDefault()});_defineProperty(_this,"setScale",function(value){var scale=parseInt(value,10);if(!isNaN(scale)){var zoom=MapUtils.computeZoom(_this.props.map.scales,scale);_this.props.changeZoomLevel(zoom)}else{_this.props.changeZoomLevel(_this.props.map.zoom)}});_defineProperty(_this,"storeHeight",function(el){if(el){_this.props.setBottombarHeight(el.clientHeight)}});return _this}_inherits(BottomBar,_React$Component);return _createClass(BottomBar,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(this.props.map!==prevProps.map){this.setState({scale:Math.round(MapUtils.computeForZoom(this.props.map.scales,this.props.map.zoom))})}}},{key:"render",value:function render(){var _this2=this;if(this.props.fullscreen){return null}var bottomLinks=(this.props.additionalBottomBarLinks||[]).map(function(entry){var _entry$labelMsgId;return/*#__PURE__*/React.createElement("a",{href:entry.url,key:(_entry$labelMsgId=entry.labelMsgId)!==null&&_entry$labelMsgId!==void 0?_entry$labelMsgId:entry.label,onClick:function onClick(ev){return _this2.openUrl(ev,entry.url,entry.urlTarget,entry.labelMsgId?LocaleUtils.tr(entry.labelMsgId):entry.label,entry.icon)}},/*#__PURE__*/React.createElement("span",{className:"extra_label"},entry.labelMsgId?LocaleUtils.tr(entry.labelMsgId):entry.label))});if(this.props.viewertitleUrl){bottomLinks.push(/*#__PURE__*/React.createElement("a",{href:this.props.viewertitleUrl,key:"viewertitle",onClick:function onClick(ev){return _this2.openUrl(ev,_this2.props.viewertitleUrl,_this2.props.viewertitleUrlTarget,LocaleUtils.tr("bottombar.viewertitle_label"),_this2.props.viewertitleUrlIcon)}},/*#__PURE__*/React.createElement("span",{className:"viewertitle_label"},LocaleUtils.tr("bottombar.viewertitle_label"))))}if(this.props.termsUrl){bottomLinks.push(/*#__PURE__*/React.createElement("a",{href:this.props.termsUrl,key:"terms",onClick:function onClick(ev){return _this2.openUrl(ev,_this2.props.termsUrl,_this2.props.termsUrlTarget,LocaleUtils.tr("bottombar.terms_label"),_this2.props.termsUrlIcon)}},/*#__PURE__*/React.createElement("span",{className:"terms_label"},LocaleUtils.tr("bottombar.terms_label"))))}var enabledMouseCrs=[].concat(_toConsumableArray(this.props.additionalMouseCrs||[]),[this.props.map.projection,"EPSG:4326"]);// eslint-disable-next-line no-unused-vars
-var availableCRS=Object.fromEntries(Object.entries(CoordinatesUtils.getAvailableCRS()).filter(function(_ref){var _ref2=_slicedToArray(_ref,2),key=_ref2[0],value=_ref2[1];return enabledMouseCrs.includes(key)}));var coordinates=null;if(this.props.displayCoordinates){coordinates=/*#__PURE__*/React.createElement("div",{className:"controlgroup"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("bottombar.mousepos_label"),":\xA0"),/*#__PURE__*/React.createElement(CoordinateDisplayer,{className:"bottombar-mousepos",displayCrs:this.props.map.displayCrs,mapCrs:this.props.map.projection}),/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this2.props.setDisplayCrs(ev.target.value)},value:this.props.map.displayCrs},Object.keys(availableCRS).map(function(crs){return/*#__PURE__*/React.createElement("option",{key:crs,value:crs},availableCRS[crs].label)})))}var scales=null;if(this.props.displayScales){scales=/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("bottombar.scale_label"),":\xA0"),/*#__PURE__*/React.createElement(InputContainer,{className:"bottombar-scale-combo"},/*#__PURE__*/React.createElement("span",{className:"bottombar-scale-combo-prefix",role:"prefix"}," 1 : "),/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this2.props.changeZoomLevel(parseInt(ev.target.value,10))},role:"input",value:Math.round(this.props.map.zoom)},this.props.map.scales.map(function(item,index){return/*#__PURE__*/React.createElement("option",{key:index,value:index},LocaleUtils.toLocaleFixed(item,0))})),/*#__PURE__*/React.createElement("input",{onBlur:function onBlur(ev){return _this2.setScale(ev.target.value)},onChange:function onChange(ev){return _this2.setState({scale:ev.target.value})},onKeyUp:function onKeyUp(ev){if(ev.key==="Enter")_this2.setScale(ev.target.value)},role:"input",type:"text",value:this.state.scale})))}var style=this.props.mapMargins.splitTopAndBottomBar?{marginLeft:this.props.mapMargins.left+"px",marginRight:this.props.mapMargins.right+"px"}:{};return/*#__PURE__*/React.createElement("div",{id:"BottomBar",ref:this.storeHeight,style:style},/*#__PURE__*/React.createElement("span",{className:"bottombar-spacer"}),coordinates,scales,/*#__PURE__*/React.createElement("span",{className:"bottombar-spacer"}),/*#__PURE__*/React.createElement("span",{className:"bottombar-links"},bottomLinks))}}])}(React.Component);_defineProperty(BottomBar,"propTypes",{/** Additional bottombar links */additionalBottomBarLinks:PropTypes.arrayOf(PropTypes.shape({label:PropTypes.string,labelMsgId:PropTypes.string,url:PropTypes.string,urlTarget:PropTypes.string,icon:PropTypes.string})),additionalMouseCrs:PropTypes.array,changeZoomLevel:PropTypes.func,/** Whether to display the coordinates in the bottom bar. */displayCoordinates:PropTypes.bool,/** Whether to display the scale in the bottom bar. */displayScales:PropTypes.bool,fullscreen:PropTypes.bool,map:PropTypes.object,mapMargins:PropTypes.object,openExternalUrl:PropTypes.func,setBottombarHeight:PropTypes.func,setDisplayCrs:PropTypes.func,/** The URL of the terms label anchor. */termsUrl:PropTypes.string,/** Icon of the terms inline window. Relevant only when `termsUrlTarget` is `iframe`. */termsUrlIcon:PropTypes.string,/** The target where to open the terms URL. If `iframe`, it will be displayed in an inline window, otherwise in a new tab. You can also use the `:iframedialog:<dialogname>:<options>` syntax to set up the inline window. */termsUrlTarget:PropTypes.string,/** The URL of the viewer title label anchor. */viewertitleUrl:PropTypes.string,/** Icon of the viewer title inline window. Relevant only when `viewertitleUrl` is `iframe`. */viewertitleUrlIcon:PropTypes.string,/** The target where to open the viewer title URL. If `iframe`, it will be displayed in an inline window, otherwise in a new tab. You can also use the `:iframedialog:<dialogname>:<options>` syntax to set up the inline window. */viewertitleUrlTarget:PropTypes.string});_defineProperty(BottomBar,"defaultProps",{displayCoordinates:true,displayScales:true});export default connect(function(state){var _state$display,_state$theme$current$,_state$theme$current;return{map:state.map,fullscreen:(_state$display=state.display)===null||_state$display===void 0?void 0:_state$display.fullscreen,mapMargins:state.windows.mapMargins,additionalMouseCrs:(_state$theme$current$=(_state$theme$current=state.theme.current)===null||_state$theme$current===void 0?void 0:_state$theme$current.additionalMouseCrs)!==null&&_state$theme$current$!==void 0?_state$theme$current$:[]}},{changeZoomLevel:changeZoomLevel,openExternalUrl:openExternalUrl,setBottombarHeight:setBottombarHeight,setDisplayCrs:setDisplayCrs})(BottomBar);
+ */var BottomBar=/*#__PURE__*/function(_React$Component){function BottomBar(){var _this;_classCallCheck(this,BottomBar);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,BottomBar,[].concat(args));_defineProperty(_this,"state",{scale:0});_defineProperty(_this,"initScaleBar",function(el){_this.scalebar=new ol.control.ScaleLine(_objectSpread({target:el,minWidth:64,units:"metric"},_this.props.scalebarOptions));MapUtils.getHook(MapUtils.GET_MAP).addControl(_this.scalebar)});_defineProperty(_this,"openUrl",function(ev,url,target,title,icon){if(target==="iframe"){target=":iframedialog:externallinkiframe"}_this.props.openExternalUrl(url,target,{title:title,icon:icon});ev.preventDefault()});_defineProperty(_this,"setScale",function(value){var scale=parseInt(value,10);if(!isNaN(scale)){var zoom=MapUtils.computeZoom(_this.props.map.scales,scale);_this.props.changeZoomLevel(zoom)}else{_this.props.changeZoomLevel(_this.props.map.zoom)}});_defineProperty(_this,"storeHeight",function(el){if(el){_this.props.setBottombarHeight(el.clientHeight)}});return _this}_inherits(BottomBar,_React$Component);return _createClass(BottomBar,[{key:"componentWillUnmount",value:function componentWillUnmount(){if(this.scalebar){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.scalebar)}}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(this.props.map!==prevProps.map){this.setState({scale:Math.round(MapUtils.computeForZoom(this.props.map.scales,this.props.map.zoom))})}}},{key:"render",value:function render(){var _this2=this;if(this.props.fullscreen){return null}var bottomLinks=(this.props.additionalBottomBarLinks||[]).map(function(entry){var _entry$labelMsgId;return/*#__PURE__*/React.createElement("a",{href:entry.url,key:(_entry$labelMsgId=entry.labelMsgId)!==null&&_entry$labelMsgId!==void 0?_entry$labelMsgId:entry.label,onClick:function onClick(ev){return _this2.openUrl(ev,entry.url,entry.urlTarget,entry.labelMsgId?LocaleUtils.tr(entry.labelMsgId):entry.label,entry.icon)}},/*#__PURE__*/React.createElement("span",{className:"extra_label"},entry.labelMsgId?LocaleUtils.tr(entry.labelMsgId):entry.label))});if(this.props.viewertitleUrl){bottomLinks.push(/*#__PURE__*/React.createElement("a",{href:this.props.viewertitleUrl,key:"viewertitle",onClick:function onClick(ev){return _this2.openUrl(ev,_this2.props.viewertitleUrl,_this2.props.viewertitleUrlTarget,LocaleUtils.tr("bottombar.viewertitle_label"),_this2.props.viewertitleUrlIcon)}},/*#__PURE__*/React.createElement("span",{className:"viewertitle_label"},LocaleUtils.tr("bottombar.viewertitle_label"))))}if(this.props.termsUrl){bottomLinks.push(/*#__PURE__*/React.createElement("a",{href:this.props.termsUrl,key:"terms",onClick:function onClick(ev){return _this2.openUrl(ev,_this2.props.termsUrl,_this2.props.termsUrlTarget,LocaleUtils.tr("bottombar.terms_label"),_this2.props.termsUrlIcon)}},/*#__PURE__*/React.createElement("span",{className:"terms_label"},LocaleUtils.tr("bottombar.terms_label"))))}var enabledMouseCrs=[].concat(_toConsumableArray(this.props.additionalMouseCrs||[]),[this.props.map.projection,"EPSG:4326"]);// eslint-disable-next-line no-unused-vars
+var availableCRS=Object.fromEntries(Object.entries(CoordinatesUtils.getAvailableCRS()).filter(function(_ref){var _ref2=_slicedToArray(_ref,2),key=_ref2[0],value=_ref2[1];return enabledMouseCrs.includes(key)}));var scalebar=null;if(this.props.displayScalebar){scalebar=/*#__PURE__*/React.createElement("div",{className:"bottombar-scalebar",ref:this.initScaleBar})}var coordinates=null;if(this.props.displayCoordinates){coordinates=/*#__PURE__*/React.createElement("div",{className:"controlgroup"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("bottombar.mousepos_label"),":\xA0"),/*#__PURE__*/React.createElement(CoordinateDisplayer,{className:"bottombar-mousepos",displayCrs:this.props.map.displayCrs,mapCrs:this.props.map.projection}),/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this2.props.setDisplayCrs(ev.target.value)},value:this.props.map.displayCrs},Object.keys(availableCRS).map(function(crs){return/*#__PURE__*/React.createElement("option",{key:crs,value:crs},availableCRS[crs].label)})))}var scales=null;if(this.props.displayScales){scales=/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("bottombar.scale_label"),":\xA0"),/*#__PURE__*/React.createElement(InputContainer,{className:"bottombar-scale-combo"},/*#__PURE__*/React.createElement("span",{className:"bottombar-scale-combo-prefix",role:"prefix"}," 1 : "),/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this2.props.changeZoomLevel(parseInt(ev.target.value,10))},role:"input",value:Math.round(this.props.map.zoom)},this.props.map.scales.map(function(item,index){return/*#__PURE__*/React.createElement("option",{key:index,value:index},LocaleUtils.toLocaleFixed(item,0))})),/*#__PURE__*/React.createElement("input",{onBlur:function onBlur(ev){return _this2.setScale(ev.target.value)},onChange:function onChange(ev){return _this2.setState({scale:ev.target.value})},onKeyUp:function onKeyUp(ev){if(ev.key==="Enter")_this2.setScale(ev.target.value)},role:"input",type:"text",value:this.state.scale})))}var style=this.props.windowMargins.splitTopAndBottomBar?{marginLeft:this.props.windowMargins.left+"px",marginRight:this.props.windowMargins.right+"px"}:{};return/*#__PURE__*/React.createElement("div",{id:"BottomBar",ref:this.storeHeight,style:style},scalebar,/*#__PURE__*/React.createElement("span",{className:"bottombar-spacer"}),coordinates,scales,/*#__PURE__*/React.createElement("span",{className:"bottombar-spacer"}),/*#__PURE__*/React.createElement("span",{className:"bottombar-links"},bottomLinks))}}])}(React.Component);_defineProperty(BottomBar,"propTypes",{/** Additional bottombar links */additionalBottomBarLinks:PropTypes.arrayOf(PropTypes.shape({label:PropTypes.string,labelMsgId:PropTypes.string,url:PropTypes.string,urlTarget:PropTypes.string,icon:PropTypes.string})),additionalMouseCrs:PropTypes.array,changeZoomLevel:PropTypes.func,/** Whether to display the coordinates in the bottom bar. */displayCoordinates:PropTypes.bool,/** Whether to display the scalebar in the bottom bar. */displayScalebar:PropTypes.bool,/** Whether to display the scale in the bottom bar. */displayScales:PropTypes.bool,fullscreen:PropTypes.bool,map:PropTypes.object,openExternalUrl:PropTypes.func,/** See [OpenLayers API doc](https://openlayers.org/en/latest/apidoc/module-ol_control_ScaleLine-ScaleLine.html) */scalebarOptions:PropTypes.object,setBottombarHeight:PropTypes.func,setDisplayCrs:PropTypes.func,/** The URL of the terms label anchor. */termsUrl:PropTypes.string,/** Icon of the terms inline window. Relevant only when `termsUrlTarget` is `iframe`. */termsUrlIcon:PropTypes.string,/** The target where to open the terms URL. If `iframe`, it will be displayed in an inline window, otherwise in a new tab. You can also use the `:iframedialog:<dialogname>:<options>` syntax to set up the inline window. */termsUrlTarget:PropTypes.string,/** The URL of the viewer title label anchor. */viewertitleUrl:PropTypes.string,/** Icon of the viewer title inline window. Relevant only when `viewertitleUrl` is `iframe`. */viewertitleUrlIcon:PropTypes.string,/** The target where to open the viewer title URL. If `iframe`, it will be displayed in an inline window, otherwise in a new tab. You can also use the `:iframedialog:<dialogname>:<options>` syntax to set up the inline window. */viewertitleUrlTarget:PropTypes.string,windowMargins:PropTypes.object});_defineProperty(BottomBar,"defaultProps",{displayCoordinates:true,displayScalebar:true,displayScales:true});export default connect(function(state){var _state$display,_state$theme$current$,_state$theme$current;return{map:state.map,fullscreen:(_state$display=state.display)===null||_state$display===void 0?void 0:_state$display.fullscreen,windowMargins:state.windows.windowMargins,additionalMouseCrs:(_state$theme$current$=(_state$theme$current=state.theme.current)===null||_state$theme$current===void 0?void 0:_state$theme$current.additionalMouseCrs)!==null&&_state$theme$current$!==void 0?_state$theme$current$:[]}},{changeZoomLevel:changeZoomLevel,openExternalUrl:openExternalUrl,setBottombarHeight:setBottombarHeight,setDisplayCrs:setDisplayCrs})(BottomBar);

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"}),!isEmpty(styles)?/*#__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",onMouseDown:_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("mouseup",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-wrapper",role:"body"},/*#__PURE__*/React.createElement("div",{className:"layertree-container"},/*#__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 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"}),!isEmpty(styles)?/*#__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-wrapper",role:"body"},/*#__PURE__*/React.createElement("div",{className:"layertree-container"},/*#__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+"\" /></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

@@ -5,7 +5,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{connect}from"react-redux";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{LayerRole}from"../actions/layers";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";/**
+ */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 MapPlugin=/*#__PURE__*/function(_React$Component){function MapPlugin(props){var _this;_classCallCheck(this,MapPlugin);_this=_callSuper(this,MapPlugin,[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,{key:key,options:options})})});_this.loadingEl=null;return _this}_inherits(MapPlugin,_React$Component);return _createClass(MapPlugin,[{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
@@ -19,4 +19,4 @@ var swipeLayer=null;var swipeLayerNameBlacklist=this.props.swipeLayerNameBlackli
 },_ret2;for(var j=paramLayers.length-1;j>=0;--j){_ret2=_loop2();if(_ret2===0)continue;if(_ret2===1)break}}else{if(swipeLayerNameBlacklist.find(function(entry){return layer.name.match(entry)})){return 0;// continue
 }if(_this2.props.swipeGeometryTypeBlacklist.includes((layer.geometryType||"").replace(/[ZM]+$/,""))){return 0;// continue
 }swipeLayer=layer}},_ret;// Pick candidate swipe layer according to rules
-for(var i=renderLayers.length-1;swipeLayer===null&&i>=0;--i){_ret=_loop();if(_ret===0)continue}}this.setState({renderLayers:renderLayers,swipeLayer:swipeLayer})}}},{key:"render",value:function render(){var _this3=this,_this$props$theme;var loadingIndicator=null;if(this.props.showLoading&&!isEmpty(this.props.loadingLayers)){var left="calc(".concat(this.props.mapMargins.left,"px + 0.25em");loadingIndicator=/*#__PURE__*/React.createElement("span",{className:"map-loading-indicator",key:"map-loading",ref:function ref(el){_this3.loadingEl=el},style:{left:left}},/*#__PURE__*/React.createElement(Spinner,{className:"spinner"}),LocaleUtils.tr("map.loading"));setTimeout(function(){if(_this3.loadingEl){_this3.loadingEl.style.opacity=1}},1000)}return[/*#__PURE__*/React.createElement(OlMap,_extends({id:"map",key:"map",mapOptions:this.props.mapOptions},this.props.map,{fullExtent:(_this$props$theme=this.props.theme)===null||_this$props$theme===void 0?void 0:_this$props$theme.bbox}),this.renderLayers(),this.renderSupportTools()),loadingIndicator]}}])}(React.Component);_defineProperty(MapPlugin,"propTypes",{layers:PropTypes.array,loadingLayers:PropTypes.array,map:PropTypes.object,mapMargins:PropTypes.object,/** Zoom duration in ms, rotation in degrees, panStepSize and panPageSize as fraction of map width/height. */mapOptions:PropTypes.shape({zoomDuration:PropTypes.number,enableRotation:PropTypes.bool,rotation:PropTypes.number,panStepSize:PropTypes.number,panPageSize:PropTypes.number,constrainExtent:PropTypes.bool,kineticPanParams:PropTypes.object}),/** Whether to display the loading spinner when layers are loading. */showLoading:PropTypes.bool,swipe:PropTypes.number,/** A list of layer geometry types to ignore when determining the top-most layer to compare. */swipeGeometryTypeBlacklist:PropTypes.arrayOf(PropTypes.string),/** A list of layer names to ignore when determining the top-most layer to compare. You can use `*` as a wildcard character. */swipeLayerNameBlacklist:PropTypes.arrayOf(PropTypes.string),theme:PropTypes.object,tools:PropTypes.object,/** Map tool configuraiton options. Refer to the sample config.json. */toolsOptions:PropTypes.object});_defineProperty(MapPlugin,"defaultProps",{mapOptions:{},showLoading:true,swipeGeometryTypeBlacklist:[],swipeLayerNameBlacklist:[],tools:{},toolsOptions:{}});export default(function(tools){return connect(function(state){return{map:state.map,layers:state.layers.flat,loadingLayers:state.layers.loading,mapMargins:state.windows.mapMargins,swipe:state.layers.swipe,theme:state.theme.current,tools:tools}})(MapPlugin)});
+for(var i=renderLayers.length-1;swipeLayer===null&&i>=0;--i){_ret=_loop();if(_ret===0)continue}}this.setState({renderLayers:renderLayers,swipeLayer:swipeLayer})}}},{key:"render",value:function render(){var _this3=this,_this$props$theme;var loadingIndicator=null;if(this.props.showLoading&&!isEmpty(this.props.loadingLayers)){loadingIndicator=/*#__PURE__*/React.createElement("span",{className:"map-loading-indicator",key:"map-loading",ref:function ref(el){_this3.loadingEl=el}},/*#__PURE__*/React.createElement(Spinner,{className:"spinner"}),LocaleUtils.tr("map.loading"));setTimeout(function(){if(_this3.loadingEl){_this3.loadingEl.style.opacity=1}},1000)}return/*#__PURE__*/ReactDOM.createPortal([/*#__PURE__*/React.createElement("div",{className:"map-contents",id:"map",key:"map",tabIndex:"0"},/*#__PURE__*/React.createElement(OlMap,_extends({id:"map",key:"map",mapOptions:this.props.mapOptions},this.props.map,{fullExtent:(_this$props$theme=this.props.theme)===null||_this$props$theme===void 0?void 0:_this$props$theme.bbox}),this.renderLayers(),this.renderSupportTools())),loadingIndicator],this.context)}}])}(React.Component);_defineProperty(MapPlugin,"contextType",MapContainerPortalContext);_defineProperty(MapPlugin,"propTypes",{layers:PropTypes.array,loadingLayers:PropTypes.array,map:PropTypes.object,/** Zoom duration in ms, rotation in degrees, panStepSize and panPageSize as fraction of map width/height. */mapOptions:PropTypes.shape({zoomDuration:PropTypes.number,enableRotation:PropTypes.bool,rotation:PropTypes.number,panStepSize:PropTypes.number,panPageSize:PropTypes.number,constrainExtent:PropTypes.bool,kineticPanParams:PropTypes.object}),/** Whether to display the loading spinner when layers are loading. */showLoading:PropTypes.bool,swipe:PropTypes.number,/** A list of layer geometry types to ignore when determining the top-most layer to compare. */swipeGeometryTypeBlacklist:PropTypes.arrayOf(PropTypes.string),/** A list of layer names to ignore when determining the top-most layer to compare. You can use `*` as a wildcard character. */swipeLayerNameBlacklist:PropTypes.arrayOf(PropTypes.string),theme:PropTypes.object,tools:PropTypes.object,/** Map tool configuraiton options. Refer to the sample config.json. */toolsOptions:PropTypes.object});_defineProperty(MapPlugin,"defaultProps",{mapOptions:{},showLoading:true,swipeGeometryTypeBlacklist:[],swipeLayerNameBlacklist:[],tools:{},toolsOptions:{}});export default(function(tools){return connect(function(state){return{map:state.map,layers:state.layers.flat,loadingLayers:state.layers.loading,swipe:state.layers.swipe,theme:state.theme.current,tools:tools}})(MapPlugin)});

package/plugins/MapCompare.js

@@ -4,8 +4,8 @@ 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{setSwipe}from"../actions/layers";import Icon from"../components/Icon";import"./style/MapCompare.css";/**
+ */import React from"react";import ReactDOM from"react-dom";import{connect}from"react-redux";import PropTypes from"prop-types";import{setSwipe}from"../actions/layers";import Icon from"../components/Icon";import{MapContainerPortalContext}from"../components/PluginsContainer";import"./style/MapCompare.css";/**
  * Allows comparing the top layer with the rest of the map.
  *
  * Activated through a checkbox in the LayerTree.
- */var MapComparePlugin=/*#__PURE__*/function(_React$Component){function MapComparePlugin(props){var _this;_classCallCheck(this,MapComparePlugin);_this=_callSuper(this,MapComparePlugin,[props]);_defineProperty(_this,"mouseDragStart",function(ev){if(_this.el){var rect=_this.el.getBoundingClientRect();_this.clickOffset=ev.clientX-rect.left;document.addEventListener("mousemove",_this.mouseDrag);document.addEventListener("mouseup",_this.mouseDragEnd)}ev.preventDefault();ev.stopPropagation()});_defineProperty(_this,"mouseDrag",function(ev){var perc=(ev.clientX-_this.clickOffset)/document.body.clientWidth*100;perc=Math.min(100,Math.max(0,perc));_this.props.setSwipe(perc);ev.preventDefault();ev.stopPropagation()});_defineProperty(_this,"mouseDragEnd",function(ev){document.removeEventListener("mousemove",_this.mouseDrag);document.removeEventListener("mouseup",_this.mouseDragEnd);ev.preventDefault();ev.stopPropagation()});_defineProperty(_this,"touchDragStart",function(ev){if(_this.el){var rect=_this.el.getBoundingClientRect();_this.clickOffset=ev.touches[0].clientX-rect.left}});_defineProperty(_this,"touchDrag",function(ev){var perc=(ev.touches[0].clientX-_this.clickOffset)/document.body.clientWidth*100;perc=Math.min(100,Math.max(0,perc));_this.props.setSwipe(perc)});_this.clickOffset=0;_this.el=null;return _this}_inherits(MapComparePlugin,_React$Component);return _createClass(MapComparePlugin,[{key:"render",value:function render(){var _this2=this;if(this.props.swipe===null){return null}var style={left:this.props.swipe+"%"};return/*#__PURE__*/React.createElement("div",{id:"MapCompare",onMouseDown:this.mouseDragStart,onTouchMove:this.touchDrag,onTouchStart:this.touchDragStart,ref:function ref(el){_this2.el=el},style:style},/*#__PURE__*/React.createElement("span",{className:"map-compare-handle"},/*#__PURE__*/React.createElement(Icon,{className:"map-compare-handle-icon",icon:"triangle-left"}),/*#__PURE__*/React.createElement(Icon,{className:"map-compare-handle-icon",icon:"triangle-right"})))}}])}(React.Component);_defineProperty(MapComparePlugin,"propTypes",{setSwipe:PropTypes.func,swipe:PropTypes.number});export default connect(function(state){return{swipe:state.layers.swipe}},{setSwipe:setSwipe})(MapComparePlugin);
+ */var MapComparePlugin=/*#__PURE__*/function(_React$Component){function MapComparePlugin(){var _this;_classCallCheck(this,MapComparePlugin);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,MapComparePlugin,[].concat(args));_defineProperty(_this,"startDragHandle",function(ev){var rect=ev.currentTarget.getBoundingClientRect();var parentRect=ev.currentTarget.parentElement.getBoundingClientRect();var clickOffset=ev.clientX-rect.left;var moveHandle=function moveHandle(ev2){var perc=(ev2.clientX-clickOffset-parentRect.left)/parentRect.width*100;perc=Math.min(100,Math.max(0,perc));_this.props.setSwipe(perc)};ev.view.document.body.style.userSelect="none";ev.view.addEventListener("pointermove",moveHandle);ev.view.addEventListener("pointerup",function(){ev.view.document.body.style.userSelect="";ev.view.removeEventListener("pointermove",moveHandle)},{once:true})});return _this}_inherits(MapComparePlugin,_React$Component);return _createClass(MapComparePlugin,[{key:"render",value:function render(){if(this.props.swipe===null){return null}var style={left:this.props.swipe+"%"};return/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{id:"MapCompare",onPointerDown:this.startDragHandle,style:style},/*#__PURE__*/React.createElement("span",{className:"map-compare-handle"},/*#__PURE__*/React.createElement(Icon,{className:"map-compare-handle-icon",icon:"triangle-left"}),/*#__PURE__*/React.createElement(Icon,{className:"map-compare-handle-icon",icon:"triangle-right"}))),this.context)}}])}(React.Component);_defineProperty(MapComparePlugin,"contextType",MapContainerPortalContext);_defineProperty(MapComparePlugin,"propTypes",{setSwipe:PropTypes.func,swipe:PropTypes.number});export default connect(function(state){return{swipe:state.layers.swipe}},{setSwipe:setSwipe})(MapComparePlugin);

package/plugins/MapCopyright.js

@@ -4,8 +4,8 @@ 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 isEmpty from"lodash.isempty";import PropTypes from"prop-types";import LayerUtils from"../utils/LayerUtils";import LocaleUtils from"../utils/LocaleUtils";import"./style/MapCopyright.css";/**
+ */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{MapContainerPortalContext}from"../components/PluginsContainer";import LayerUtils from"../utils/LayerUtils";import LocaleUtils from"../utils/LocaleUtils";import"./style/MapCopyright.css";/**
  * Displays layer attributions in the bottom right corner of the map.
  */var MapCopyright=/*#__PURE__*/function(_React$Component){function MapCopyright(){var _this;_classCallCheck(this,MapCopyright);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,MapCopyright,[].concat(args));_defineProperty(_this,"state",{currentCopyrights:{}});_defineProperty(_this,"layerNames",function(layers){if(!_this.props.prefixCopyrightsWithLayerNames){return""}else{return layers.map(function(layer){return layer.titleMsgId?LocaleUtils.tr(layer.titleMsgId):layer.title}).join(", ")+": "}});return _this}_inherits(MapCopyright,_React$Component);return _createClass(MapCopyright,[{key:"render",value:function render(){var _this2=this;// If attribution has both url and label, "key" is the url and "value.title" the label.
 // If it only has a label, "key" is the label and "value" is null.
-var copyrights=Object.entries(this.state.currentCopyrights).map(function(_ref){var _ref2=_slicedToArray(_ref,2),key=_ref2[0],value=_ref2[1];if(value.title){return/*#__PURE__*/React.createElement("span",{key:key},/*#__PURE__*/React.createElement("a",{href:key,rel:"noreferrer",target:"_blank"},_this2.layerNames(value.layers)+value.title))}else{return/*#__PURE__*/React.createElement("span",{key:key},_this2.layerNames(value.layers),/*#__PURE__*/React.createElement("span",{dangerouslySetInnerHTML:{__html:key}}))}});if(isEmpty(copyrights)){return null}var right=this.props.mapMargins.right;var bottom=this.props.mapMargins.bottom;var style={right:"calc(0.25em + "+right+"px)",bottom:"calc(var(--bottombar-height) + 0.25em + "+bottom+"px)"};return/*#__PURE__*/React.createElement("div",{id:"MapCopyright",style:style},copyrights)}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps){if(nextProps.map&&nextProps.map.bbox&&nextProps.layers){var copyrights=nextProps.layers.reduce(function(res,layer){return _objectSpread(_objectSpread({},res),LayerUtils.getAttribution(layer,nextProps.map,nextProps.showThemeCopyrightOnly))},{});return{currentCopyrights:copyrights}}return null}}])}(React.Component);_defineProperty(MapCopyright,"propTypes",{layers:PropTypes.array,map:PropTypes.object,mapMargins:PropTypes.object,/** Whether to prepend the layer name to the attribution string. */prefixCopyrightsWithLayerNames:PropTypes.bool,/** Whether to only display the attribution of the theme, omitting external layers. */showThemeCopyrightOnly:PropTypes.bool});var selector=function selector(state){return{layers:state.layers.flat,map:state.map,mapMargins:state.windows.mapMargins}};export default connect(selector,{})(MapCopyright);
+var copyrights=Object.entries(this.state.currentCopyrights).map(function(_ref){var _ref2=_slicedToArray(_ref,2),key=_ref2[0],value=_ref2[1];if(value.title){return/*#__PURE__*/React.createElement("span",{key:key},/*#__PURE__*/React.createElement("a",{href:key,rel:"noreferrer",target:"_blank"},_this2.layerNames(value.layers)+value.title))}else{return/*#__PURE__*/React.createElement("span",{key:key},_this2.layerNames(value.layers),/*#__PURE__*/React.createElement("span",{dangerouslySetInnerHTML:{__html:key}}))}});if(isEmpty(copyrights)){return null}return/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{id:"MapCopyright"},copyrights),this.context)}}],[{key:"getDerivedStateFromProps",value:function getDerivedStateFromProps(nextProps){if(nextProps.map&&nextProps.map.bbox&&nextProps.layers){var copyrights=nextProps.layers.reduce(function(res,layer){return _objectSpread(_objectSpread({},res),LayerUtils.getAttribution(layer,nextProps.map,nextProps.showThemeCopyrightOnly))},{});return{currentCopyrights:copyrights}}return null}}])}(React.Component);_defineProperty(MapCopyright,"contextType",MapContainerPortalContext);_defineProperty(MapCopyright,"propTypes",{layers:PropTypes.array,map:PropTypes.object,/** Whether to prepend the layer name to the attribution string. */prefixCopyrightsWithLayerNames:PropTypes.bool,/** Whether to only display the attribution of the theme, omitting external layers. */showThemeCopyrightOnly:PropTypes.bool});var selector=function selector(state){return{layers:state.layers.flat,map:state.map}};export default connect(selector,{})(MapCopyright);