qwc2 2025.6.13 → 2025.7.1

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);

package/plugins/MapExport.js

@@ -6,12 +6,12 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  * LICENSE file in the root directory of this source tree.
  */import React from"react";import{connect}from"react-redux";import{TextEncoder,TextDecoder}from"@kayahr/text-encoding";import axios from"axios";import dayjs from"dayjs";import FileSaver from"file-saver";import isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{LayerRole}from"../actions/layers";import{setSnappingConfig}from"../actions/map";import Icon from"../components/Icon";import PrintSelection from"../components/PrintSelection";import SideBar from"../components/SideBar";import NumberInput from"../components/widgets/NumberInput";import Spinner from"../components/widgets/Spinner";import ConfigUtils from"../utils/ConfigUtils";import CoordinatesUtils from"../utils/CoordinatesUtils";import{explodeDxf,implodeDxf,mergeDxf}from"../utils/DxfUtils";import LayerUtils from"../utils/LayerUtils";import LocaleUtils from"../utils/LocaleUtils";import MapUtils from"../utils/MapUtils";import VectorLayerUtils from"../utils/VectorLayerUtils";import"./style/MapExport.css";import"@kayahr/text-encoding/encodings/windows-1252";/**
  * Allows exporting a selected portion of the map to a variety of formats.
- */var MapExport=/*#__PURE__*/function(_React$Component){function MapExport(props){var _this;_classCallCheck(this,MapExport);_this=_callSuper(this,MapExport,[props]);_defineProperty(_this,"state",{extents:[],exporting:false,availableFormats:[],selectedFormat:null,selectedFormatConfiguration:"",scale:null,pageSize:null,dpi:96});_defineProperty(_this,"changeFormat",function(ev){var _this$props$formatCon;var selectedFormat=ev.target.value;var selectedFormatConfiguration=((((_this$props$formatCon=_this.props.formatConfiguration)===null||_this$props$formatCon===void 0?void 0:_this$props$formatCon[selectedFormat])||[])[0]||{}).name;_this.setState({selectedFormat:selectedFormat,selectedFormatConfiguration:selectedFormatConfiguration})});_defineProperty(_this,"changeScale",function(value){_this.setState({scale:Math.max(1,parseInt(value,10)||0)})});_defineProperty(_this,"changeResolution",function(ev){_this.setState({dpi:parseInt(ev.target.value,10)||0})});_defineProperty(_this,"renderBody",function(){var _this$props$formatCon2;if(!_this.props.theme||!_this.state.selectedFormat){return null}var formatMap={"image/jpeg":"JPEG","image/png":"PNG","image/png; mode=16bit":"PNG 16bit","image/png; mode=8bit":"PNG 8bit","image/png; mode=1bit":"PNG 1bit","image/geotiff":"GeoTIFF","image/tiff":"GeoTIFF","application/dxf":"DXF","application/pdf":"GeoPDF"};var formatConfiguration=((_this$props$formatCon2=_this.props.formatConfiguration)===null||_this$props$formatCon2===void 0?void 0:_this$props$formatCon2[_this.state.selectedFormat.split(";")[0]])||[];var scaleChooser=null;if(!isEmpty(_this.props.allowedScales)){scaleChooser=/*#__PURE__*/React.createElement("select",{onChange:_this.changeScale,value:_this.state.scale||""},/*#__PURE__*/React.createElement("option",{hidden:true,value:_this.state.scale||""},_this.state.scale||""),_this.props.allowedScales.map(function(scale){return/*#__PURE__*/React.createElement("option",{key:scale,value:scale},"1 : ",scale)}))}else if(_this.props.allowedScales!==false){scaleChooser=/*#__PURE__*/React.createElement(NumberInput,{min:1,mobile:true,onChange:_this.changeScale,prefix:"1 : ",value:_this.state.scale||null})}return/*#__PURE__*/React.createElement("div",{className:"mapexport-body"},/*#__PURE__*/React.createElement("form",{action:"#",method:"POST",onSubmit:_this["export"],ref:function ref(el){_this.form=el}},/*#__PURE__*/React.createElement("table",{className:"options-table"},/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.format")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:_this.changeFormat,value:_this.state.selectedFormat},_this.state.availableFormats.map(function(format){return/*#__PURE__*/React.createElement("option",{key:format,value:format},formatMap[format]||format)})))),formatConfiguration.length>1?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.configuration")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setState({selectedFormatConfiguration:ev.target.value})},value:_this.state.selectedFormatConfiguration},formatConfiguration.map(function(config){return/*#__PURE__*/React.createElement("option",{key:config.name,value:config.name},config.labelMsgId?LocaleUtils.tr(config.labelMsgId):config.name)})))):null,!isEmpty(_this.props.pageSizes)?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.size")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setState({pageSize:ev.target.value||null})},value:_this.state.pageSize||""},/*#__PURE__*/React.createElement("option",{value:""},LocaleUtils.tr("mapexport.usersize")),_this.props.pageSizes.map(function(entry,idx){return/*#__PURE__*/React.createElement("option",{key:"size_"+idx,value:idx},entry.name)})))):null,scaleChooser&&_this.state.pageSize!==null?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.scale")),/*#__PURE__*/React.createElement("td",null,scaleChooser)):null,_this.props.dpis?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.resolution")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:_this.changeResolution,value:_this.state.dpi},_this.props.dpis.map(function(dpi){return/*#__PURE__*/React.createElement("option",{key:dpi+"dpi",value:dpi},dpi+" dpi")})))):null)),/*#__PURE__*/React.createElement("div",{className:"button-bar"},/*#__PURE__*/React.createElement("button",{className:"button",disabled:_this.state.exporting||isEmpty(_this.state.extents),type:"submit"},_this.state.exporting?/*#__PURE__*/React.createElement("span",{className:"mapexport-wait"},/*#__PURE__*/React.createElement(Spinner,null)," ",LocaleUtils.tr("mapexport.wait")):LocaleUtils.tr("mapexport.submit")))))});_defineProperty(_this,"renderPrintSelection",function(){if(_this.state.pageSize!==null){var pageSize=_this.props.pageSizes[_this.state.pageSize];var frame={width:pageSize.width,height:pageSize.height};return/*#__PURE__*/React.createElement(PrintSelection,{allowRotation:false,allowScaling:_this.props.allowedScales!==false,center:_this.props.map.center,fixedFrame:frame,geometryChanged:_this.geometryChanged,key:"PrintSelection",scale:_this.state.scale})}else{return/*#__PURE__*/React.createElement(PrintSelection,{allowRotation:false,geometryChanged:_this.geometryChanged,key:"PrintSelection"})}});_defineProperty(_this,"onShow",function(){var _this$props$formatCon3;var scale=Math.round(MapUtils.computeForZoom(_this.props.map.scales,_this.props.map.zoom)*_this.props.defaultScaleFactor);if(!isEmpty(_this.props.allowedScales)){var closestVal=Math.abs(scale-_this.props.allowedScales[0]);var closestIdx=0;for(var i=1;i<_this.props.allowedScales.length;++i){var currVal=Math.abs(scale-_this.props.allowedScales[i]);if(currVal<closestVal){closestVal=currVal;closestIdx=i}}scale=_this.props.allowedScales[closestIdx]}var availableFormats=_this.props.theme.availableFormats;if(!isEmpty(_this.props.allowedFormats)){availableFormats=availableFormats.filter(function(fmt){return _this.props.allowedFormats.includes(fmt)})}var selectedFormat=_this.props.defaultFormat&&availableFormats.includes(_this.props.defaultFormat)?_this.props.defaultFormat:availableFormats[0];var selectedFormatConfiguration=((((_this$props$formatCon3=_this.props.formatConfiguration)===null||_this$props$formatCon3===void 0?void 0:_this$props$formatCon3[selectedFormat])||[])[0]||{}).name;_this.setState({scale:scale,availableFormats:availableFormats,selectedFormat:selectedFormat,selectedFormatConfiguration:selectedFormatConfiguration});_this.props.setSnappingConfig(false,false)});_defineProperty(_this,"onHide",function(){_this.setState({extents:[],width:0,height:0,scale:null,pageSize:null})});_defineProperty(_this,"geometryChanged",function(center,extents,rotation,scale){_this.setState(function(state){return{extents:extents,scale:scale!==null&&scale!==void 0?scale:state.scale}})});_defineProperty(_this,"export",function(ev){var _this$props$formatCon4,_this$state$extents$a;ev.preventDefault();_this.setState({exporting:true});var format=_this.state.selectedFormat.split(";")[0];var formatConfiguration=(((_this$props$formatCon4=_this.props.formatConfiguration)===null||_this$props$formatCon4===void 0?void 0:_this$props$formatCon4[format])||[]).find(function(entry){return entry.name===_this.state.selectedFormatConfiguration});var version=_this.props.theme.version;var crs=_this.props.map.projection;var extent=(_this$state$extents$a=_this.state.extents.at(0))!==null&&_this$state$extents$a!==void 0?_this$state$extents$a:[0,0,0,0];var formattedExtent=CoordinatesUtils.getAxisOrder(crs).substring(0,2)==="ne"&&version==="1.3.0"?extent[1]+","+extent[0]+","+extent[3]+","+extent[2]:extent.join(",");var getPixelFromCoordinate=MapUtils.getHook(MapUtils.GET_PIXEL_FROM_COORDINATES_HOOK);var p1=getPixelFromCoordinate(extent.slice(0,2));var p2=getPixelFromCoordinate(extent.slice(2,4));var width=Math.round(Math.abs(p1[0]-p2[0])*_this.state.dpi/96);var height=Math.round(Math.abs(p1[1]-p2[1])*_this.state.dpi/96);var ext=format.split("/").pop();var timestamp=dayjs(new Date).format("YYYYMMDD_HHmmss");var fileName=_this.props.fileNameTemplate.replace("{username}",ConfigUtils.getConfigProp("username",null,"")).replace("{tenant}",ConfigUtils.getConfigProp("tenant",null,"")).replace("{theme}",_this.props.theme.id).replace("{timestamp}",timestamp)+"."+ext;var params={};// Base request params
-params.SERVICE="WMS";params.VERSION=version;params.REQUEST="GetMap";params.FORMAT=_this.state.selectedFormat;params.DPI=_this.state.dpi;params.TRANSPARENT=true;params.TILED=false;params.CRS=_this.props.map.projection;params.BBOX=formattedExtent;params.WIDTH=width;params.HEIGHT=height;params.filename=fileName;// Dimension values
+ */var MapExport=/*#__PURE__*/function(_React$Component){function MapExport(props){var _this;_classCallCheck(this,MapExport);_this=_callSuper(this,MapExport,[props]);_defineProperty(_this,"state",{extents:[],exporting:false,availableFormats:[],selectedFormat:null,selectedFormatConfiguration:"",exportProjection:null,scale:null,pageSize:null,dpi:96});_defineProperty(_this,"changeFormat",function(ev){var _this$props$formatCon,_formatConfigurations,_formatConfigurations2;var selectedFormat=ev.target.value;var formatConfigurations=((_this$props$formatCon=_this.props.formatConfiguration)===null||_this$props$formatCon===void 0?void 0:_this$props$formatCon[selectedFormat.split(";")[0]])||[];_this.setState({selectedFormat:selectedFormat,selectedFormatConfiguration:(_formatConfigurations=formatConfigurations[0])===null||_formatConfigurations===void 0?void 0:_formatConfigurations.name,exportProjection:_this.getExportProjection((_formatConfigurations2=formatConfigurations[0])===null||_formatConfigurations2===void 0?void 0:_formatConfigurations2.projections)})});_defineProperty(_this,"setSelectedFormatConfiguration",function(ev){var _this$props$formatCon2;var selectedFormatConfiguration=ev.target.value;var formatConfigurations=((_this$props$formatCon2=_this.props.formatConfiguration)===null||_this$props$formatCon2===void 0?void 0:_this$props$formatCon2[_this.state.selectedFormat.split(";")[0]])||[];var formatConfiguration=formatConfigurations.find(function(entry){return entry.name===selectedFormatConfiguration});_this.setState({selectedFormatConfiguration:selectedFormatConfiguration,exportProjection:_this.getExportProjection(formatConfiguration.projections)})});_defineProperty(_this,"getExportProjection",function(projections){if(isEmpty(projections)){return _this.props.map.projection}else{return projections.indexOf(_this.props.map.projection)!==-1?_this.props.map.projection:projections[0]}});_defineProperty(_this,"changeScale",function(value){_this.setState({scale:Math.max(1,parseInt(value,10)||0)})});_defineProperty(_this,"changeResolution",function(ev){_this.setState({dpi:parseInt(ev.target.value,10)||0})});_defineProperty(_this,"renderBody",function(){var _this$props$formatCon3;if(!_this.props.theme||!_this.state.selectedFormat){return null}var formatMap={"image/jpeg":"JPEG","image/png":"PNG","image/png; mode=16bit":"PNG 16bit","image/png; mode=8bit":"PNG 8bit","image/png; mode=1bit":"PNG 1bit","image/geotiff":"GeoTIFF","image/tiff":"GeoTIFF","application/dxf":"DXF","application/pdf":"GeoPDF"};var formatConfigurations=((_this$props$formatCon3=_this.props.formatConfiguration)===null||_this$props$formatCon3===void 0?void 0:_this$props$formatCon3[_this.state.selectedFormat.split(";")[0]])||[];var formatConfiguration=formatConfigurations.find(function(entry){return entry.name===_this.state.selectedFormatConfiguration});var scaleChooser=null;if(!isEmpty(_this.props.allowedScales)){scaleChooser=/*#__PURE__*/React.createElement("select",{onChange:_this.changeScale,value:_this.state.scale||""},/*#__PURE__*/React.createElement("option",{hidden:true,value:_this.state.scale||""},_this.state.scale||""),_this.props.allowedScales.map(function(scale){return/*#__PURE__*/React.createElement("option",{key:scale,value:scale},"1 : ",scale)}))}else if(_this.props.allowedScales!==false){scaleChooser=/*#__PURE__*/React.createElement(NumberInput,{min:1,mobile:true,onChange:_this.changeScale,prefix:"1 : ",value:_this.state.scale||null})}return/*#__PURE__*/React.createElement("div",{className:"mapexport-body"},/*#__PURE__*/React.createElement("form",{action:"#",method:"POST",onSubmit:_this["export"],ref:function ref(el){_this.form=el}},/*#__PURE__*/React.createElement("table",{className:"options-table"},/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.format")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:_this.changeFormat,value:_this.state.selectedFormat},_this.state.availableFormats.map(function(format){return/*#__PURE__*/React.createElement("option",{key:format,value:format},formatMap[format]||format)})))),formatConfigurations.length>1?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.configuration")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:_this.setSelectedFormatConfiguration,value:_this.state.selectedFormatConfiguration},formatConfigurations.map(function(config){return/*#__PURE__*/React.createElement("option",{key:config.name,value:config.name},config.labelMsgId?LocaleUtils.tr(config.labelMsgId):config.name)})))):null,!isEmpty(_this.props.pageSizes)?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.size")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setState({pageSize:ev.target.value||null})},value:_this.state.pageSize||""},/*#__PURE__*/React.createElement("option",{value:""},LocaleUtils.tr("mapexport.usersize")),_this.props.pageSizes.map(function(entry,idx){return/*#__PURE__*/React.createElement("option",{key:"size_"+idx,value:idx},entry.name)})))):null,scaleChooser&&_this.state.pageSize!==null?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.scale")),/*#__PURE__*/React.createElement("td",null,scaleChooser)):null,_this.props.dpis?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.resolution")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:_this.changeResolution,value:_this.state.dpi},_this.props.dpis.map(function(dpi){return/*#__PURE__*/React.createElement("option",{key:dpi+"dpi",value:dpi},dpi+" dpi")})))):null,((formatConfiguration===null||formatConfiguration===void 0?void 0:formatConfiguration.projections)||[]).length>1?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("mapexport.projection")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.setState({exportProjection:ev.target.value})},value:_this.state.exportProjection},formatConfiguration.projections.map(function(proj){return/*#__PURE__*/React.createElement("option",{key:proj,value:proj},proj)})))):null)),/*#__PURE__*/React.createElement("div",{className:"button-bar"},/*#__PURE__*/React.createElement("button",{className:"button",disabled:_this.state.exporting||isEmpty(_this.state.extents),type:"submit"},_this.state.exporting?/*#__PURE__*/React.createElement("span",{className:"mapexport-wait"},/*#__PURE__*/React.createElement(Spinner,null)," ",LocaleUtils.tr("mapexport.wait")):LocaleUtils.tr("mapexport.submit")))))});_defineProperty(_this,"renderPrintSelection",function(){if(_this.state.pageSize!==null){var pageSize=_this.props.pageSizes[_this.state.pageSize];var frame={width:pageSize.width,height:pageSize.height};return/*#__PURE__*/React.createElement(PrintSelection,{allowRotation:false,allowScaling:_this.props.allowedScales!==false,center:_this.props.map.center,fixedFrame:frame,geometryChanged:_this.geometryChanged,key:"PrintSelection",scale:_this.state.scale})}else{return/*#__PURE__*/React.createElement(PrintSelection,{allowRotation:false,geometryChanged:_this.geometryChanged,key:"PrintSelection"})}});_defineProperty(_this,"onShow",function(){var _this$props$formatCon4,_formatConfigurations3,_formatConfigurations4;var scale=Math.round(MapUtils.computeForZoom(_this.props.map.scales,_this.props.map.zoom)*_this.props.defaultScaleFactor);if(!isEmpty(_this.props.allowedScales)){var closestVal=Math.abs(scale-_this.props.allowedScales[0]);var closestIdx=0;for(var i=1;i<_this.props.allowedScales.length;++i){var currVal=Math.abs(scale-_this.props.allowedScales[i]);if(currVal<closestVal){closestVal=currVal;closestIdx=i}}scale=_this.props.allowedScales[closestIdx]}var availableFormats=_this.props.theme.availableFormats;if(!isEmpty(_this.props.allowedFormats)){availableFormats=availableFormats.filter(function(fmt){return _this.props.allowedFormats.includes(fmt)})}var selectedFormat=_this.props.defaultFormat&&availableFormats.includes(_this.props.defaultFormat)?_this.props.defaultFormat:availableFormats[0];var formatConfigurations=((_this$props$formatCon4=_this.props.formatConfiguration)===null||_this$props$formatCon4===void 0?void 0:_this$props$formatCon4[selectedFormat.split(";")[0]])||[];_this.setState({scale:scale,availableFormats:availableFormats,selectedFormat:selectedFormat,selectedFormatConfiguration:(_formatConfigurations3=formatConfigurations[0])===null||_formatConfigurations3===void 0?void 0:_formatConfigurations3.name,exportProjection:_this.getExportProjection((_formatConfigurations4=formatConfigurations[0])===null||_formatConfigurations4===void 0?void 0:_formatConfigurations4.projections)});_this.props.setSnappingConfig(false,false)});_defineProperty(_this,"onHide",function(){_this.setState({extents:[],width:0,height:0,scale:null,pageSize:null})});_defineProperty(_this,"geometryChanged",function(center,extents,rotation,scale){_this.setState(function(state){return{extents:extents,scale:scale!==null&&scale!==void 0?scale:state.scale}})});_defineProperty(_this,"export",function(ev){var _this$props$formatCon5,_this$state$extents$a;ev.preventDefault();_this.setState({exporting:true});var format=_this.state.selectedFormat.split(";")[0];var formatConfiguration=(((_this$props$formatCon5=_this.props.formatConfiguration)===null||_this$props$formatCon5===void 0?void 0:_this$props$formatCon5[format])||[]).find(function(entry){return entry.name===_this.state.selectedFormatConfiguration});var version=_this.props.theme.version;var crs=_this.state.exportProjection;var extent=CoordinatesUtils.reprojectBbox((_this$state$extents$a=_this.state.extents.at(0))!==null&&_this$state$extents$a!==void 0?_this$state$extents$a:[0,0,0,0],_this.props.map.projection,crs);var formattedExtent=CoordinatesUtils.getAxisOrder(crs).substring(0,2)==="ne"&&version==="1.3.0"?extent[1]+","+extent[0]+","+extent[3]+","+extent[2]:extent.join(",");var getPixelFromCoordinate=MapUtils.getHook(MapUtils.GET_PIXEL_FROM_COORDINATES_HOOK);var p1=getPixelFromCoordinate(extent.slice(0,2));var p2=getPixelFromCoordinate(extent.slice(2,4));var width=Math.round(Math.abs(p1[0]-p2[0])*_this.state.dpi/96);var height=Math.round(Math.abs(p1[1]-p2[1])*_this.state.dpi/96);var ext=format.split("/").pop();var timestamp=dayjs(new Date).format("YYYYMMDD_HHmmss");var fileName=_this.props.fileNameTemplate.replace("{username}",ConfigUtils.getConfigProp("username",null,"")).replace("{tenant}",ConfigUtils.getConfigProp("tenant",null,"")).replace("{theme}",_this.props.theme.id).replace("{timestamp}",timestamp)+"."+ext;var params={};// Base request params
+params.SERVICE="WMS";params.VERSION=version;params.REQUEST="GetMap";params.FORMAT=_this.state.selectedFormat;params.DPI=_this.state.dpi;params.TRANSPARENT=true;params.TILED=false;params.CRS=crs;params.BBOX=formattedExtent;params.WIDTH=width;params.HEIGHT=height;params.filename=fileName;// Dimension values
 _this.props.layers.forEach(function(layer){if(layer.role===LayerRole.THEME){Object.entries(layer.dimensionValues||{}).forEach(function(_ref){var _ref2=_slicedToArray(_ref,2),key=_ref2[0],value=_ref2[1];if(value!==undefined){params[key]=value}})}});// Add parameters from custom format configuration
 if(formatConfiguration){var _formatConfiguration$;var keyCaseMap=Object.keys(params).reduce(function(res,key){return _objectSpread(_objectSpread({},res),{},_defineProperty({},key.toLowerCase(),key))},{});(formatConfiguration.extraQuery||"").split(/[?&]/).filter(Boolean).forEach(function(entry){var _entry$split=entry.split("="),_entry$split2=_slicedToArray(_entry$split,2),key=_entry$split2[0],value=_entry$split2[1];var caseKey=keyCaseMap[key.toLowerCase()]||key;params[caseKey]=value!==null&&value!==void 0?value:""});params.FORMAT_OPTIONS=(_formatConfiguration$=formatConfiguration.formatOptions)!==null&&_formatConfiguration$!==void 0?_formatConfiguration$:"";if(formatConfiguration.baseLayer){var layers=params[keyCaseMap.layers].split(",");if(!layers.includes(formatConfiguration.baseLayer)){params[keyCaseMap.layers]=[formatConfiguration.baseLayer].concat(_toConsumableArray(layers))}}}if(_this.state.selectedFormat==="application/dxf"){_this.dxfExport(params,fileName)}else{_this.genericExport(params,fileName,formatConfiguration)}});_defineProperty(_this,"genericExport",function(params,fileName,formatConfiguration){// Layer params
-var exportExternalLayers=_this.props.exportExternalLayers&&ConfigUtils.getConfigProp("qgisServerVersion",null,3)>=3;var exportParams=LayerUtils.collectPrintParams(_this.props.layers,_this.props.theme,_this.state.scale,_this.props.map.projection,exportExternalLayers,!!(formatConfiguration!==null&&formatConfiguration!==void 0&&formatConfiguration.baseLayer));Object.assign(params,exportParams);// Highlight params
-var highlightParams=VectorLayerUtils.createPrintHighlighParams(_this.props.layers,_this.props.map.projection,_this.state.scale,_this.state.dpi);params.HIGHLIGHT_GEOM=highlightParams.geoms.join(";");params.HIGHLIGHT_SYMBOL=highlightParams.styles.join(";");params.HIGHLIGHT_LABELSTRING=highlightParams.labels.join(";");params.HIGHLIGHT_LABELCOLOR=highlightParams.labelFillColors.join(";");params.HIGHLIGHT_LABELBUFFERCOLOR=highlightParams.labelOutlineColors.join(";");params.HIGHLIGHT_LABELBUFFERSIZE=highlightParams.labelOutlineSizes.join(";");params.HIGHLIGHT_LABELSIZE=highlightParams.labelSizes.join(";");params.HIGHLIGHT_LABEL_DISTANCE=highlightParams.labelDist.join(";");params.HIGHLIGHT_LABEL_ROTATION=highlightParams.labelRotations.join(";");// Watermark params
+var exportExternalLayers=_this.props.exportExternalLayers&&ConfigUtils.getConfigProp("qgisServerVersion",null,3)>=3;var exportParams=LayerUtils.collectPrintParams(_this.props.layers,_this.props.theme,_this.state.scale,_this.state.exportProjection,exportExternalLayers,!!(formatConfiguration!==null&&formatConfiguration!==void 0&&formatConfiguration.baseLayer));Object.assign(params,exportParams);// Highlight params
+var highlightParams=VectorLayerUtils.createPrintHighlighParams(_this.props.layers,_this.state.exportProjection,_this.state.scale,_this.state.dpi);params.HIGHLIGHT_GEOM=highlightParams.geoms.join(";");params.HIGHLIGHT_SYMBOL=highlightParams.styles.join(";");params.HIGHLIGHT_LABELSTRING=highlightParams.labels.join(";");params.HIGHLIGHT_LABELCOLOR=highlightParams.labelFillColors.join(";");params.HIGHLIGHT_LABELBUFFERCOLOR=highlightParams.labelOutlineColors.join(";");params.HIGHLIGHT_LABELBUFFERSIZE=highlightParams.labelOutlineSizes.join(";");params.HIGHLIGHT_LABELSIZE=highlightParams.labelSizes.join(";");params.HIGHLIGHT_LABEL_DISTANCE=highlightParams.labelDist.join(";");params.HIGHLIGHT_LABEL_ROTATION=highlightParams.labelRotations.join(";");// Watermark params
 Object.keys(_this.props.theme.watermark||{}).forEach(function(key){params["WATERMARK_"+key.toUpperCase()]=_this.props.theme.watermark[key]});var data=Object.entries(params).map(function(pair){return pair.map(function(entry){return encodeURIComponent(entry).replace(/%20/g,"+")}).join("=")}).join("&");var config={headers:{"Content-Type":"application/x-www-form-urlencoded"},responseType:"arraybuffer"};axios.post(_this.props.theme.url,data,config).then(function(response){_this.setState({exporting:false});var contentType=response.headers["content-type"];FileSaver.saveAs(new Blob([response.data],{type:contentType}),fileName)})["catch"](function(e){_this.setState({exporting:false});if(e.response){/* eslint-disable-next-line */console.log(new TextDecoder().decode(e.response.data))}/* eslint-disable-next-line */alert("Export failed")})});_defineProperty(_this,"dxfExport",function(baseParams,fileName){var promises=_this.props.layers.filter(function(layer){var _layer$mapFormats;return layer.type==="wms"&&layer.role>LayerRole.BACKGROUND&&((_layer$mapFormats=layer.mapFormats)===null||_layer$mapFormats===void 0?void 0:_layer$mapFormats.includes("application/dxf"))}).reverse().map(function(layer){var _layer$params$FILTER,_layer$params$FILTER_;var params=_objectSpread(_objectSpread({},baseParams),{},{LAYERS:layer.params.LAYERS,OPACITIES:layer.params.OPACITIES,STYLES:layer.params.STYLES,FILTER:(_layer$params$FILTER=layer.params.FILTER)!==null&&_layer$params$FILTER!==void 0?_layer$params$FILTER:"",FILTER_GEOM:(_layer$params$FILTER_=layer.params.FILTER_GEOM)!==null&&_layer$params$FILTER_!==void 0?_layer$params$FILTER_:""});var data=Object.entries(params).map(function(pair){return pair.map(function(entry){return encodeURIComponent(entry).replace(/%20/g,"+")}).join("=")}).join("&");var config={headers:{"Content-Type":"application/x-www-form-urlencoded"},responseType:"arraybuffer"};return new Promise(function(resolve,reject){axios.post(layer.url,data,config).then(function(response){resolve(response)})["catch"](function(e){/* eslint-disable-next-line */console.warn(e);resolve(null)})})});Promise.all(promises).then(function(responses){var decoder=new TextDecoder("iso-8859-1");var dxfDocuments=responses.filter(function(response){return response.headers["content-type"]==="application/dxf"}).map(function(response){return explodeDxf(decoder.decode(response.data))});var dxfDocument=mergeDxf(dxfDocuments);var result=implodeDxf(dxfDocument);var encoder=new TextEncoder("iso-8859-1");FileSaver.saveAs(new Blob([encoder.encode(result)],{type:"application/dxf"}),fileName);/*
             responses.forEach((response, idx) => {
                 FileSaver.saveAs(new Blob([response.data], {type: "application/dxf"}), "orig_" + idx + "_" + fileName);
@@ -21,4 +21,5 @@ Object.keys(_this.props.theme.watermark||{}).forEach(function(key){params["WATER
          *  `labelMsgId` is a translation string message id for the combo label. If not defined, `name` will be displayed.
          *  `extraQuery` will be appended to the query string (replacing any existing parameters).
          *  `formatOptions` will be passed as FORMAT_OPTIONS.
-         *  `baseLayer` will be appended to the LAYERS instead of the background layer. */formatConfiguration:PropTypes.shape({format:PropTypes.arrayOf(PropTypes.shape({name:PropTypes.string,labelMsgId:PropTypes.string,extraQuery:PropTypes.string,formatOptions:PropTypes.string,baseLayer:PropTypes.string}))}),layers:PropTypes.array,map:PropTypes.object,/** List of image sizes to offer, in addition to the free-hand selection. The width and height are in millimeters. */pageSizes:PropTypes.arrayOf(PropTypes.shape({name:PropTypes.string,width:PropTypes.number,height:PropTypes.number})),setIdentifyEnabled:PropTypes.func,setSnappingConfig:PropTypes.func,/** The side of the application on which to display the sidebar. */side:PropTypes.string,theme:PropTypes.object});_defineProperty(MapExport,"defaultProps",{defaultScaleFactor:1,exportExternalLayers:true,fileNameTemplate:"{theme}_{timestamp}",side:"right",pageSizes:[]});var selector=function selector(state){return{theme:state.theme.current,map:state.map,layers:state.layers.flat}};export default connect(selector,{setSnappingConfig:setSnappingConfig})(MapExport);
+         *  `baseLayer` will be appended to the LAYERS instead of the background layer.
+         *  `projections` is a list of export projections. If empty, the map projection is automatically used. */formatConfiguration:PropTypes.shape({format:PropTypes.arrayOf(PropTypes.shape({name:PropTypes.string,labelMsgId:PropTypes.string,extraQuery:PropTypes.string,formatOptions:PropTypes.string,baseLayer:PropTypes.string,projections:PropTypes.array}))}),layers:PropTypes.array,map:PropTypes.object,/** List of image sizes to offer, in addition to the free-hand selection. The width and height are in millimeters. */pageSizes:PropTypes.arrayOf(PropTypes.shape({name:PropTypes.string,width:PropTypes.number,height:PropTypes.number})),setIdentifyEnabled:PropTypes.func,setSnappingConfig:PropTypes.func,/** The side of the application on which to display the sidebar. */side:PropTypes.string,theme:PropTypes.object});_defineProperty(MapExport,"defaultProps",{defaultScaleFactor:1,exportExternalLayers:true,fileNameTemplate:"{theme}_{timestamp}",side:"right",pageSizes:[]});var selector=function selector(state){return{theme:state.theme.current,map:state.map,layers:state.layers.flat}};export default connect(selector,{setSnappingConfig:setSnappingConfig})(MapExport);

package/plugins/MapInfoTooltip.js

@@ -4,7 +4,7 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import{connect}from"react-redux";import axios from"axios";import PropTypes from"prop-types";import{setCurrentTask}from"../actions/task";import Icon from"../components/Icon";import CopyButton from"../components/widgets/CopyButton";import ConfigUtils from"../utils/ConfigUtils";import CoordinatesUtils from"../utils/CoordinatesUtils";import{getElevationInterface}from"../utils/ElevationInterface";import LocaleUtils from"../utils/LocaleUtils";import MapUtils from"../utils/MapUtils";import"./style/MapInfoTooltip.css";/**
+ */import React from"react";import ReactDOM from"react-dom";import{connect}from"react-redux";import axios from"axios";import PropTypes from"prop-types";import{setCurrentTask}from"../actions/task";import Icon from"../components/Icon";import{MapContainerPortalContext}from"../components/PluginsContainer";import CopyButton from"../components/widgets/CopyButton";import ConfigUtils from"../utils/ConfigUtils";import CoordinatesUtils from"../utils/CoordinatesUtils";import{getElevationInterface}from"../utils/ElevationInterface";import LocaleUtils from"../utils/LocaleUtils";import MapUtils from"../utils/MapUtils";import"./style/MapInfoTooltip.css";/**
  * Provides map context information when right-clicking on the map.
  *
  * Displays the coordinates at the picked position by default.
@@ -31,4 +31,4 @@ function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof
  *   render() { return ...; }
  * };
  * ```
- */var MapInfoTooltip=/*#__PURE__*/function(_React$Component){function MapInfoTooltip(){var _this;_classCallCheck(this,MapInfoTooltip);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,MapInfoTooltip,[].concat(args));_defineProperty(_this,"state",{point:null,elevation:null,extraInfo:null});_defineProperty(_this,"clear",function(){_this.setState({point:null,height:null,extraInfo:null})});return _this}_inherits(MapInfoTooltip,_React$Component);return _createClass(MapInfoTooltip,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){var _this2=this;if(!this.props.enabled&&this.state.point){this.clear();return}var newPoint=this.props.map.click;if(!newPoint||newPoint.button!==2){if(this.state.point){this.clear()}}else{var oldPoint=prevProps.map.click;if(!oldPoint||oldPoint.pixel[0]!==newPoint.pixel[0]||oldPoint.pixel[1]!==newPoint.pixel[1]){this.setState({point:newPoint,elevation:null,extraInfo:null});var pos=newPoint.coordinate;var crs=this.props.map.projection;getElevationInterface().getElevation(pos,crs).then(function(elevation){var elevationPrecision=_this2.props.elevationPrecision;_this2.setState({elevation:Math.round(elevation*Math.pow(10,elevationPrecision))/Math.pow(10,elevationPrecision)})})["catch"](function(){});var mapInfoService=ConfigUtils.getConfigProp("mapInfoService");if(mapInfoService){axios.get(mapInfoService,{params:{pos:pos.join(","),crs:crs}}).then(function(response){_this2.setState({extraInfo:response.data.results})})["catch"](function(){})}}}}},{key:"render",value:function render(){var _this3=this;if(!this.state.point){return null}var info=[];var projections=[this.props.map.displayCrs];if(!projections.includes(this.props.map.projection)){projections.push(this.props.map.projection)}if(this.props.includeWGS84&&!projections.includes("EPSG:4326")){projections.push("EPSG:4326")}projections.map(function(crs){var coo=CoordinatesUtils.reproject(_this3.state.point.coordinate,_this3.props.map.projection,crs);var decimals=CoordinatesUtils.getPrecision(crs);info.push([(CoordinatesUtils.getAvailableCRS()[crs]||{label:crs}).label,coo.map(function(x){return LocaleUtils.toLocaleFixed(x,decimals)}).join(", ")])});if(this.state.elevation){info.push([LocaleUtils.tr("mapinfotooltip.elevation"),this.state.elevation+" m"])}if(this.state.extraInfo){info.push.apply(info,_toConsumableArray(this.state.extraInfo))}var title=LocaleUtils.tr("mapinfotooltip.title");var pixel=MapUtils.getHook(MapUtils.GET_PIXEL_FROM_COORDINATES_HOOK)(this.state.point.coordinate);var style={left:this.props.mapMargins.left+pixel[0]+"px",top:this.props.mapMargins.top+pixel[1]+"px"};var text=info.map(function(entry){return entry.join(": ")}).join("\n");var routingButtons=null;if(ConfigUtils.havePlugin("Routing")){var prec=CoordinatesUtils.getPrecision(this.props.map.displayCrs);var pos=CoordinatesUtils.reproject(this.state.point.coordinate,this.props.map.projection,this.props.map.displayCrs);var point={text:pos.map(function(x){return x.toFixed(prec)}).join(", ")+" ("+this.props.map.displayCrs+")",pos:_toConsumableArray(pos),crs:this.props.map.displayCrs};routingButtons=/*#__PURE__*/React.createElement("table",{className:"mapinfotooltip-body-routing"},/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("b",null,LocaleUtils.tr("routing.route"),":")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("div",{className:"controlgroup"},/*#__PURE__*/React.createElement("button",{className:"button",onClick:function onClick(){return _this3.props.setCurrentTask("Routing",null,null,{from:point})}},LocaleUtils.tr("routing.fromhere")),/*#__PURE__*/React.createElement("button",{className:"button",onClick:function onClick(){return _this3.props.setCurrentTask("Routing",null,null,{to:point})}},LocaleUtils.tr("routing.tohere")),/*#__PURE__*/React.createElement("button",{className:"button",onClick:function onClick(){return _this3.props.setCurrentTask("Routing",null,null,{via:point})}},LocaleUtils.tr("routing.addviapoint"))))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("b",null,LocaleUtils.tr("routing.reachability"),":")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("div",{className:"controlgroup"},/*#__PURE__*/React.createElement("button",{className:"button",onClick:function onClick(){return _this3.props.setCurrentTask("Routing",null,null,{isocenter:point})}},LocaleUtils.tr("routing.isocenter")),/*#__PURE__*/React.createElement("button",{className:"button",onClick:function onClick(){return _this3.props.setCurrentTask("Routing",null,null,{isoextracenter:point})}},LocaleUtils.tr("routing.isoextracenter")))))))}return/*#__PURE__*/React.createElement("div",{className:"mapinfotooltip",style:style},/*#__PURE__*/React.createElement("div",{className:"mapinfotooltip-window"},/*#__PURE__*/React.createElement("div",{className:"mapinfotooltip-titlebar"},/*#__PURE__*/React.createElement("span",{className:"mapinfotooltip-title"},title),/*#__PURE__*/React.createElement(CopyButton,{buttonClass:"mapinfotooltip-button",text:text}),/*#__PURE__*/React.createElement(Icon,{className:"mapinfotooltip-button",icon:"remove",onClick:this.clear})),/*#__PURE__*/React.createElement("div",{className:"mapinfotooltip-body"},/*#__PURE__*/React.createElement("table",null,/*#__PURE__*/React.createElement("tbody",null,info.map(function(entry,index){return/*#__PURE__*/React.createElement("tr",{key:"row"+index},/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("b",null,entry[0],":")),/*#__PURE__*/React.createElement("td",null,entry[1]))}))),routingButtons,this.props.plugins.map(function(Plugin,idx){return/*#__PURE__*/React.createElement(Plugin,{closePopup:_this3.clear,key:idx,point:_this3.state.point,projection:_this3.props.map.projection})}))))}}])}(React.Component);_defineProperty(MapInfoTooltip,"propTypes",{/** The number of decimal places to display for elevation values. */elevationPrecision:PropTypes.number,enabled:PropTypes.bool,includeWGS84:PropTypes.bool,map:PropTypes.object,mapMargins:PropTypes.object,/** Additional plugin components for the map info tooltip. */plugins:PropTypes.array,setCurrentTask:PropTypes.func});_defineProperty(MapInfoTooltip,"defaultProps",{elevationPrecision:0,includeWGS84:true,plugins:[]});export default(function(plugins){return connect(function(state){return{mapMargins:state.windows.mapMargins,enabled:state.task.identifyEnabled,map:state.map,plugins:plugins}},{setCurrentTask:setCurrentTask})(MapInfoTooltip)});
+ */var MapInfoTooltip=/*#__PURE__*/function(_React$Component){function MapInfoTooltip(){var _this;_classCallCheck(this,MapInfoTooltip);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,MapInfoTooltip,[].concat(args));_defineProperty(_this,"state",{point:null,elevation:null,extraInfo:null});_defineProperty(_this,"clear",function(){_this.setState({point:null,height:null,extraInfo:null})});return _this}_inherits(MapInfoTooltip,_React$Component);return _createClass(MapInfoTooltip,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){var _this2=this;if(!this.props.enabled&&this.state.point){this.clear();return}var newPoint=this.props.map.click;if(!newPoint||newPoint.button!==2){if(this.state.point){this.clear()}}else{var oldPoint=prevProps.map.click;if(!oldPoint||oldPoint.pixel[0]!==newPoint.pixel[0]||oldPoint.pixel[1]!==newPoint.pixel[1]){this.setState({point:newPoint,elevation:null,extraInfo:null});var pos=newPoint.coordinate;var crs=this.props.map.projection;getElevationInterface().getElevation(pos,crs).then(function(elevation){var elevationPrecision=_this2.props.elevationPrecision;_this2.setState({elevation:Math.round(elevation*Math.pow(10,elevationPrecision))/Math.pow(10,elevationPrecision)})})["catch"](function(){});var mapInfoService=ConfigUtils.getConfigProp("mapInfoService");if(mapInfoService){axios.get(mapInfoService,{params:{pos:pos.join(","),crs:crs}}).then(function(response){_this2.setState({extraInfo:response.data.results})})["catch"](function(){})}}}}},{key:"render",value:function render(){var _this3=this;if(!this.state.point){return null}var info=[];var projections=[this.props.map.displayCrs];if(!projections.includes(this.props.map.projection)){projections.push(this.props.map.projection)}if(this.props.includeWGS84&&!projections.includes("EPSG:4326")){projections.push("EPSG:4326")}projections.map(function(crs){var coo=CoordinatesUtils.reproject(_this3.state.point.coordinate,_this3.props.map.projection,crs);var decimals=CoordinatesUtils.getPrecision(crs);info.push([(CoordinatesUtils.getAvailableCRS()[crs]||{label:crs}).label,coo.map(function(x){return LocaleUtils.toLocaleFixed(x,decimals)}).join(", ")])});if(this.state.elevation){info.push([LocaleUtils.tr("mapinfotooltip.elevation"),this.state.elevation+" m"])}if(this.state.extraInfo){info.push.apply(info,_toConsumableArray(this.state.extraInfo))}var title=LocaleUtils.tr("mapinfotooltip.title");var pixel=MapUtils.getHook(MapUtils.GET_PIXEL_FROM_COORDINATES_HOOK)(this.state.point.coordinate);var style={left:pixel[0]+"px",top:pixel[1]+"px"};var text=info.map(function(entry){return entry.join(": ")}).join("\n");var routingButtons=null;if(ConfigUtils.havePlugin("Routing")){var prec=CoordinatesUtils.getPrecision(this.props.map.displayCrs);var pos=CoordinatesUtils.reproject(this.state.point.coordinate,this.props.map.projection,this.props.map.displayCrs);var point={text:pos.map(function(x){return x.toFixed(prec)}).join(", ")+" ("+this.props.map.displayCrs+")",pos:_toConsumableArray(pos),crs:this.props.map.displayCrs};routingButtons=/*#__PURE__*/React.createElement("table",{className:"mapinfotooltip-body-routing"},/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("b",null,LocaleUtils.tr("routing.route"),":")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("div",{className:"controlgroup"},/*#__PURE__*/React.createElement("button",{className:"button",onClick:function onClick(){return _this3.props.setCurrentTask("Routing",null,null,{from:point})}},LocaleUtils.tr("routing.fromhere")),/*#__PURE__*/React.createElement("button",{className:"button",onClick:function onClick(){return _this3.props.setCurrentTask("Routing",null,null,{to:point})}},LocaleUtils.tr("routing.tohere")),/*#__PURE__*/React.createElement("button",{className:"button",onClick:function onClick(){return _this3.props.setCurrentTask("Routing",null,null,{via:point})}},LocaleUtils.tr("routing.addviapoint"))))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("b",null,LocaleUtils.tr("routing.reachability"),":")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("div",{className:"controlgroup"},/*#__PURE__*/React.createElement("button",{className:"button",onClick:function onClick(){return _this3.props.setCurrentTask("Routing",null,null,{isocenter:point})}},LocaleUtils.tr("routing.isocenter")),/*#__PURE__*/React.createElement("button",{className:"button",onClick:function onClick(){return _this3.props.setCurrentTask("Routing",null,null,{isoextracenter:point})}},LocaleUtils.tr("routing.isoextracenter")))))))}return/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{className:"mapinfotooltip",style:style},/*#__PURE__*/React.createElement("div",{className:"mapinfotooltip-window"},/*#__PURE__*/React.createElement("div",{className:"mapinfotooltip-titlebar"},/*#__PURE__*/React.createElement("span",{className:"mapinfotooltip-title"},title),/*#__PURE__*/React.createElement(CopyButton,{buttonClass:"mapinfotooltip-button",text:text}),/*#__PURE__*/React.createElement(Icon,{className:"mapinfotooltip-button",icon:"remove",onClick:this.clear})),/*#__PURE__*/React.createElement("div",{className:"mapinfotooltip-body"},/*#__PURE__*/React.createElement("table",null,/*#__PURE__*/React.createElement("tbody",null,info.map(function(entry,index){return/*#__PURE__*/React.createElement("tr",{key:"row"+index},/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("b",null,entry[0],":")),/*#__PURE__*/React.createElement("td",null,entry[1]))}))),routingButtons,this.props.plugins.map(function(Plugin,idx){return/*#__PURE__*/React.createElement(Plugin,{closePopup:_this3.clear,key:idx,point:_this3.state.point,projection:_this3.props.map.projection})})))),this.context)}}])}(React.Component);_defineProperty(MapInfoTooltip,"contextType",MapContainerPortalContext);_defineProperty(MapInfoTooltip,"propTypes",{/** The number of decimal places to display for elevation values. */elevationPrecision:PropTypes.number,enabled:PropTypes.bool,includeWGS84:PropTypes.bool,map:PropTypes.object,/** Additional plugin components for the map info tooltip. */plugins:PropTypes.array,setCurrentTask:PropTypes.func});_defineProperty(MapInfoTooltip,"defaultProps",{elevationPrecision:0,includeWGS84:true,plugins:[]});export default(function(plugins){return connect(function(state){return{enabled:state.task.identifyEnabled,map:state.map,plugins:plugins}},{setCurrentTask:setCurrentTask})(MapInfoTooltip)});

package/plugins/MapTip.js

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

package/plugins/{map/OverviewSupport.js → OverviewMap.js}

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