qwc2 2025.10.13 → 2025.10.15

package/components/PickFeature.js

@@ -1,7 +1,271 @@
-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 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 _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 _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 _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 _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 _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 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 _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 _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 _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 _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 _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 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 isEmpty from"lodash.isempty";import PropTypes from"prop-types";import{v4 as uuidv4}from"uuid";import{LayerRole,addLayerFeatures,clearLayer}from"../actions/layers";import IdentifyUtils from"../utils/IdentifyUtils";import LocaleUtils from"../utils/LocaleUtils";import MapUtils from"../utils/MapUtils";import VectorLayerUtils from"../utils/VectorLayerUtils";import MapSelection from"./MapSelection";import PopupMenu from"./widgets/PopupMenu";import Spinner from"./widgets/Spinner";import"./style/PickFeature.css";var PickFeature=/*#__PURE__*/function(_React$Component){function PickFeature(props){var _this;_classCallCheck(this,PickFeature);_this=_callSuper(this,PickFeature,[props]);_defineProperty(_this,"handleIdentifyResponse",function(response,reqId,layer,infoFormat){if(_this.state.reqId!==reqId){return}var result=IdentifyUtils.parseResponse(response,layer,infoFormat,_this.state.clickPos,_this.props.map.projection,false);if(_this.props.featureFilter){Object.entries(result).forEach(function(_ref){var _ref2=_slicedToArray(_ref,2),layername=_ref2[0],features=_ref2[1];result[layername]=features.filter(_this.props.featureFilter)})}else{Object.entries(result).forEach(function(_ref3){var _ref4=_slicedToArray(_ref3,2),layername=_ref4[0],features=_ref4[1];result[layername]=features.filter(function(feature){return!!feature.geometry})})}_this.setState(function(state){var newState={pickResults:_objectSpread(_objectSpread({},state.pickResults),result),pendingQueries:state.pendingQueries-1};if(newState.pendingQueries===0){var entries=Object.entries(newState.pickResults);if(entries.length===1&&entries[0][1].length===1){_this.props.featurePicked(entries[0][0],entries[0][1][0]);newState.pickResults=null;newState.pickGeom=null}else if(entries.reduce(function(sum,entry){return sum+entry[1].length},0)===0){newState.pickResults=null;newState.pickGeom=null}}return newState})});_defineProperty(_this,"highlightFeature",function(key,feature){var layer={id:"pick-feature-selection",role:LayerRole.SELECTION};_this.props.addLayerFeatures(layer,[feature],true);_this.setState({highlightedFeature:key+":"+feature.id})});_defineProperty(_this,"clearHighlight",function(key,feature){if(_this.state.highlightedFeature===key+":"+feature.id){_this.setState({highlightFeature:null});_this.props.clearLayer("pick-feature-selection")}});_defineProperty(_this,"onClose",function(){_this.setState(PickFeature.defaultState);_this.props.clearLayer("pick-feature-selection")});_this.state=PickFeature.defaultState;return _this}_inherits(PickFeature,_React$Component);return _createClass(PickFeature,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _this2=this;if(this.state.pickGeom&&this.state.pickGeom!==prevState.pickGeom){var queryLayers=[];if(this.props.layerFilter){queryLayers=[this.props.layers.find(function(l){return l.url===_this2.props.layerFilter.url})].filter(Boolean)}else{queryLayers=IdentifyUtils.getQueryLayers(this.props.layers,this.props.map)}if(!isEmpty(queryLayers)){this.setState(function(state){var getPixelFromCoordinate=MapUtils.getHook(MapUtils.GET_PIXEL_FROM_COORDINATES_HOOK);var coordinates=_this2.props.pickGeomType==="Point"?[[state.pickGeom.coordinates]]:state.pickGeom.coordinates;var maxX=coordinates[0][0][0];var maxY=coordinates[0][0][1];for(var i=1;i<coordinates[0].length;++i){if(coordinates[0][i][0]>maxX){maxX=coordinates[0][i][0];maxY=coordinates[0][i][1]}}var clickPos=getPixelFromCoordinate([maxX,maxY],false);var reqId=uuidv4();queryLayers.forEach(function(layer){var request=null;if(_this2.props.pickGeomType==="Point"){var _this2$props$layerFil;request=IdentifyUtils.buildRequest(layer,((_this2$props$layerFil=_this2.props.layerFilter)===null||_this2$props$layerFil===void 0?void 0:_this2$props$layerFil.name)||layer.queryLayers.join(","),state.pickGeom.coordinates,_this2.props.map)}else if(_this2.props.pickGeomType==="Polygon"){var _this2$props$layerFil2;var filter=VectorLayerUtils.geoJSONGeomToWkt(_this2.state.pickGeom);request=IdentifyUtils.buildFilterRequest(layer,((_this2$props$layerFil2=_this2.props.layerFilter)===null||_this2$props$layerFil2===void 0?void 0:_this2$props$layerFil2.name)||layer.queryLayers.join(","),filter,_this2.props.map)}else{return}IdentifyUtils.sendRequest(request,function(response){return _this2.handleIdentifyResponse(response,reqId,layer,request.params.info_format)})});return{pickResults:{},clickPos:clickPos,pendingQueries:queryLayers.length,reqId:reqId}})}}}},{key:"render",value:function render(){var _this3=this;var resultsMenu=null;if(this.state.pickResults){resultsMenu=/*#__PURE__*/React.createElement(PopupMenu,{className:"PickFeatureMenu",key:"PickResultMenu",onClose:this.onClose,x:this.state.clickPos[0],y:this.state.clickPos[1]},this.state.pendingQueries===0?Object.entries(this.state.pickResults).map(function(_ref5){var _ref6=_slicedToArray(_ref5,2),layername=_ref6[0],features=_ref6[1];return features.map(function(feature){return/*#__PURE__*/React.createElement("div",{key:layername+":"+feature.id,onClickCapture:function onClickCapture(){return _this3.props.featurePicked(layername,feature)},onMouseOut:function onMouseOut(){return _this3.clearHighlight(layername,feature)},onMouseOver:function onMouseOver(){return _this3.highlightFeature(layername,feature)}},layername+": "+feature.displayname)})}):/*#__PURE__*/React.createElement("div",{className:"pick-feature-menu-querying"},/*#__PURE__*/React.createElement(Spinner,null),LocaleUtils.tr("pickfeature.querying")))}return[resultsMenu,/*#__PURE__*/React.createElement(MapSelection,{active:true,geomType:this.props.pickGeomType,geometry:this.state.pickGeom,geometryChanged:function geometryChanged(geom){return _this3.setState({pickGeom:geom})},key:"MapSelection",styleOptions:this.props.highlightStyle})]}}])}(React.Component);_defineProperty(PickFeature,"propTypes",{addLayerFeatures:PropTypes.func,clearLayer:PropTypes.func,/** Optional: Function which accepts a GeoJSON feature and returns whether it should be accepted (true) or discarded (false) */featureFilter:PropTypes.func,featurePicked:PropTypes.func,/** The style used for highlighting filter geometries. */highlightStyle:PropTypes.shape({/* Stroke color rgba array, i.e. [255, 0, 0, 0.5] */strokeColor:PropTypes.array,/* Stroke width */strokeWidth:PropTypes.number,/* Stroke dash/gap pattern array. Empty for solid line. */strokeDash:PropTypes.array,/* Fill color rgba array, i.e. [255, 0, 0, 0.33] */fillColor:PropTypes.array}),/** Optional: Restrict pick to specified layer name */layerFilter:PropTypes.shape({url:PropTypes.string,name:PropTypes.string}),layers:PropTypes.array,map:PropTypes.object,/** Pick geometry type: Point, Polygon, ... (default: Point) */pickGeomType:PropTypes.string});_defineProperty(PickFeature,"defaultProps",{pickGeomType:"Point",highlightStyle:{strokeColor:[0,0,0],fillColor:[255,255,0,0.25]}});_defineProperty(PickFeature,"defaultState",{pickGeom:null,pickResults:null,clickPos:null,highlightedFeature:null,pendingQueries:0,reqId:null});export default connect(function(state){return{layers:state.layers.flat,map:state.map}},{addLayerFeatures:addLayerFeatures,clearLayer:clearLayer})(PickFeature);
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import isEmpty from 'lodash.isempty';
+import PropTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
+import { LayerRole, addLayerFeatures, clearLayer } from '../actions/layers';
+import IdentifyUtils from '../utils/IdentifyUtils';
+import LocaleUtils from '../utils/LocaleUtils';
+import MapUtils from '../utils/MapUtils';
+import VectorLayerUtils from '../utils/VectorLayerUtils';
+import MapSelection from './MapSelection';
+import PopupMenu from './widgets/PopupMenu';
+import Spinner from './widgets/Spinner';
+import './style/PickFeature.css';
+var PickFeature = /*#__PURE__*/function (_React$Component) {
+  function PickFeature(props) {
+    var _this;
+    _classCallCheck(this, PickFeature);
+    _this = _callSuper(this, PickFeature, [props]);
+    _defineProperty(_this, "handleIdentifyResponse", function (response, reqId, layer, infoFormat) {
+      if (_this.state.reqId !== reqId) {
+        return;
+      }
+      var result = IdentifyUtils.parseResponse(response, layer, infoFormat, _this.state.clickPos, _this.props.map.projection, false);
+      if (_this.props.featureFilter) {
+        Object.entries(result).forEach(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+            layername = _ref2[0],
+            features = _ref2[1];
+          result[layername] = features.filter(_this.props.featureFilter);
+        });
+      } else {
+        Object.entries(result).forEach(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2),
+            layername = _ref4[0],
+            features = _ref4[1];
+          result[layername] = features.filter(function (feature) {
+            return !!feature.geometry;
+          });
+        });
+      }
+      _this.setState(function (state) {
+        var newState = {
+          pickResults: _objectSpread(_objectSpread({}, state.pickResults), result),
+          pendingQueries: state.pendingQueries - 1
+        };
+        if (newState.pendingQueries === 0) {
+          var entries = Object.entries(newState.pickResults);
+          if (entries.length === 1 && entries[0][1].length === 1) {
+            _this.props.featurePicked(entries[0][0], entries[0][1][0]);
+            newState.pickResults = null;
+            newState.pickGeom = null;
+          } else if (entries.reduce(function (sum, entry) {
+            return sum + entry[1].length;
+          }, 0) === 0) {
+            newState.pickResults = null;
+            newState.pickGeom = null;
+          }
+        }
+        return newState;
+      });
+    });
+    _defineProperty(_this, "highlightFeature", function (key, feature) {
+      var layer = {
+        id: "pick-feature-selection",
+        role: LayerRole.SELECTION
+      };
+      _this.props.addLayerFeatures(layer, [feature], true);
+      _this.setState({
+        highlightedFeature: key + ":" + feature.id
+      });
+    });
+    _defineProperty(_this, "clearHighlight", function (key, feature) {
+      if (_this.state.highlightedFeature === key + ":" + feature.id) {
+        _this.setState({
+          highlightFeature: null
+        });
+        _this.props.clearLayer("pick-feature-selection");
+      }
+    });
+    _defineProperty(_this, "onClose", function () {
+      _this.setState(PickFeature.defaultState);
+      _this.props.clearLayer("pick-feature-selection");
+    });
+    _this.state = PickFeature.defaultState;
+    return _this;
+  }
+  _inherits(PickFeature, _React$Component);
+  return _createClass(PickFeature, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this2 = this;
+      if (this.state.pickGeom && this.state.pickGeom !== prevState.pickGeom) {
+        var queryLayers = [];
+        if (this.props.layerFilter) {
+          queryLayers = [this.props.layers.find(function (l) {
+            return l.url === _this2.props.layerFilter.url;
+          })].filter(Boolean);
+        } else {
+          queryLayers = IdentifyUtils.getQueryLayers(this.props.layers, this.props.map);
+        }
+        if (!isEmpty(queryLayers)) {
+          this.setState(function (state) {
+            var getPixelFromCoordinate = MapUtils.getHook(MapUtils.GET_PIXEL_FROM_COORDINATES_HOOK);
+            var coordinates = _this2.props.pickGeomType === "Point" ? [[state.pickGeom.coordinates]] : state.pickGeom.coordinates;
+            var maxX = coordinates[0][0][0];
+            var maxY = coordinates[0][0][1];
+            for (var i = 1; i < coordinates[0].length; ++i) {
+              if (coordinates[0][i][0] > maxX) {
+                maxX = coordinates[0][i][0];
+                maxY = coordinates[0][i][1];
+              }
+            }
+            var clickPos = getPixelFromCoordinate([maxX, maxY], false);
+            var reqId = uuidv4();
+            queryLayers.forEach(function (layer) {
+              var request = null;
+              if (_this2.props.pickGeomType === 'Point') {
+                var _this2$props$layerFil;
+                request = IdentifyUtils.buildRequest(layer, ((_this2$props$layerFil = _this2.props.layerFilter) === null || _this2$props$layerFil === void 0 ? void 0 : _this2$props$layerFil.name) || layer.queryLayers.join(","), state.pickGeom.coordinates, _this2.props.map);
+              } else if (_this2.props.pickGeomType === 'Polygon') {
+                var _this2$props$layerFil2;
+                var filter = VectorLayerUtils.geoJSONGeomToWkt(_this2.state.pickGeom);
+                request = IdentifyUtils.buildFilterRequest(layer, ((_this2$props$layerFil2 = _this2.props.layerFilter) === null || _this2$props$layerFil2 === void 0 ? void 0 : _this2$props$layerFil2.name) || layer.queryLayers.join(","), filter, _this2.props.map);
+              } else {
+                return;
+              }
+              IdentifyUtils.sendRequest(request, function (response) {
+                return _this2.handleIdentifyResponse(response, reqId, layer, request.params.info_format);
+              });
+            });
+            return {
+              pickResults: {},
+              clickPos: clickPos,
+              pendingQueries: queryLayers.length,
+              reqId: reqId
+            };
+          });
+        }
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+      var resultsMenu = null;
+      if (this.state.pickResults) {
+        resultsMenu = /*#__PURE__*/React.createElement(PopupMenu, {
+          className: "PickFeatureMenu",
+          key: "PickResultMenu",
+          onClose: this.onClose,
+          x: this.state.clickPos[0],
+          y: this.state.clickPos[1]
+        }, this.state.pendingQueries === 0 ? Object.entries(this.state.pickResults).map(function (_ref5) {
+          var _ref6 = _slicedToArray(_ref5, 2),
+            layername = _ref6[0],
+            features = _ref6[1];
+          return features.map(function (feature) {
+            return /*#__PURE__*/React.createElement("div", {
+              key: layername + ":" + feature.id,
+              onClickCapture: function onClickCapture() {
+                return _this3.props.featurePicked(layername, feature);
+              },
+              onMouseOut: function onMouseOut() {
+                return _this3.clearHighlight(layername, feature);
+              },
+              onMouseOver: function onMouseOver() {
+                return _this3.highlightFeature(layername, feature);
+              }
+            }, layername + ": " + feature.displayname);
+          });
+        }) : /*#__PURE__*/React.createElement("div", {
+          className: "pick-feature-menu-querying"
+        }, /*#__PURE__*/React.createElement(Spinner, null), LocaleUtils.tr("pickfeature.querying")));
+      }
+      return [resultsMenu, /*#__PURE__*/React.createElement(MapSelection, {
+        active: true,
+        geomType: this.props.pickGeomType,
+        geometry: this.state.pickGeom,
+        geometryChanged: function geometryChanged(geom) {
+          return _this3.setState({
+            pickGeom: geom
+          });
+        },
+        key: "MapSelection",
+        styleOptions: this.props.highlightStyle
+      })];
+    }
+  }]);
+}(React.Component);
+_defineProperty(PickFeature, "propTypes", {
+  addLayerFeatures: PropTypes.func,
+  clearLayer: PropTypes.func,
+  /** Optional: Function which accepts a GeoJSON feature and returns whether it should be accepted (true) or discarded (false) */
+  featureFilter: PropTypes.func,
+  featurePicked: PropTypes.func,
+  /** The style used for highlighting filter geometries. */
+  highlightStyle: PropTypes.shape({
+    /* Stroke color rgba array, i.e. [255, 0, 0, 0.5] */
+    strokeColor: PropTypes.array,
+    /* Stroke width */
+    strokeWidth: PropTypes.number,
+    /* Stroke dash/gap pattern array. Empty for solid line. */
+    strokeDash: PropTypes.array,
+    /* Fill color rgba array, i.e. [255, 0, 0, 0.33] */
+    fillColor: PropTypes.array
+  }),
+  /** Optional: Restrict pick to specified layer name */
+  layerFilter: PropTypes.shape({
+    url: PropTypes.string,
+    name: PropTypes.string
+  }),
+  layers: PropTypes.array,
+  map: PropTypes.object,
+  /** Pick geometry type: Point, Polygon, ... (default: Point) */
+  pickGeomType: PropTypes.string
+});
+_defineProperty(PickFeature, "defaultProps", {
+  pickGeomType: 'Point',
+  highlightStyle: {
+    strokeColor: [0, 0, 0],
+    fillColor: [255, 255, 0, 0.25]
+  }
+});
+_defineProperty(PickFeature, "defaultState", {
+  pickGeom: null,
+  pickResults: null,
+  clickPos: null,
+  highlightedFeature: null,
+  pendingQueries: 0,
+  reqId: null
+});
+export default connect(function (state) {
+  return {
+    layers: state.layers.flat,
+    map: state.map
+  };
+}, {
+  addLayerFeatures: addLayerFeatures,
+  clearLayer: clearLayer
+})(PickFeature);

package/components/PluginsContainer.js

@@ -1,14 +1,233 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}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)}/**
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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 GeoSolutions Sas
  * 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 ConfigUtils from"../utils/ConfigUtils";import PluginStore from"../utils/PluginStore";import ProcessNotifications from"./ProcessNotifications";import WindowManager from"./WindowManager";import"./style/PluginsContainer.css";export var MapButtonPortalContext=/*#__PURE__*/React.createContext(null);export var MapContainerPortalContext=/*#__PURE__*/React.createContext(null);export var AppInfosPortalContext=/*#__PURE__*/React.createContext(null);var PluginsContainer=/*#__PURE__*/function(_React$Component){function PluginsContainer(){var _this;_classCallCheck(this,PluginsContainer);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key]}_this=_callSuper(this,PluginsContainer,[].concat(args));_defineProperty(_this,"state",{mapButtonsContainerRef:null,mapContainerRef:null,appInfosContainerRef:null});_defineProperty(_this,"renderPlugins",function(){var device=ConfigUtils.isMobile()?"mobile":"desktop";var plugins=PluginStore.getPlugins();return _this.props.pluginsConfig.map(function(pluginConf){var _this$props$theme,_this$props$theme2,_pluginConf$key;var Plugin=plugins[pluginConf.name+"Plugin"];if(!Plugin){return null}var themeDevicePluginConfig=((_this$props$theme=_this.props.theme)===null||_this$props$theme===void 0||(_this$props$theme=_this$props$theme.config)===null||_this$props$theme===void 0||(_this$props$theme=_this$props$theme[device])===null||_this$props$theme===void 0||(_this$props$theme=_this$props$theme.plugins)===null||_this$props$theme===void 0?void 0:_this$props$theme[pluginConf.name])||{};var themePluginConfig=((_this$props$theme2=_this.props.theme)===null||_this$props$theme2===void 0||(_this$props$theme2=_this$props$theme2.config)===null||_this$props$theme2===void 0||(_this$props$theme2=_this$props$theme2.plugins)===null||_this$props$theme2===void 0?void 0:_this$props$theme2[pluginConf.name])||{};var cfg=_objectSpread(_objectSpread(_objectSpread({},pluginConf.cfg||{}),themePluginConfig),themeDevicePluginConfig);return/*#__PURE__*/React.createElement(Plugin,_extends({key:(_pluginConf$key=pluginConf.key)!==null&&_pluginConf$key!==void 0?_pluginConf$key:pluginConf.name},cfg))})});_defineProperty(_this,"setupTouchEvents",function(el){if(el){el.addEventListener("touchstart",function(ev){_this.touchY=ev.targetTouches[0].clientY},{passive:false});el.addEventListener("touchmove",_this.preventOverscroll,{passive:false});var resizeObserver=new ResizeObserver(function(entries){var contentRectEntry=entries.find(function(entry){return entry.contentRect});if(contentRectEntry){var height=contentRectEntry.contentRect.height;el.style.setProperty("--plugins-container-height","".concat(height,"px"))}});resizeObserver.observe(el)}});_defineProperty(_this,"preventOverscroll",function(ev){if(ev.touches[0].touchType!=="direct"){// Don't do anything for stylus inputs
-return}var scrollEvent=false;var element=ev.target;var direction=ev.targetTouches[0].clientY-_this.touchY;_this.touchY=ev.targetTouches[0].clientY;while(!scrollEvent&&element){var scrollable=element.scrollHeight>element.clientHeight;// Workaround for resizeable-window having scrollHeight > clientHeight even though it has no scrollbar
-if(element.classList.contains("resizeable-window")){scrollable=false}if(element.type==="range"){// If it is a range element, treat it as a scroll event
-scrollEvent=true}else if(scrollable&&element.scrollTop+element.clientHeight<element.scrollHeight&&direction<0){// User scrolls down and element is not at end of scroll
-scrollEvent=true}else if(scrollable&&element.scrollTop>0&&direction>0){// User scrolls up and element is not at start of scroll
-scrollEvent=true}else{element=element.parentElement}}if(!scrollEvent){ev.preventDefault()}});_defineProperty(_this,"setMapContainerRef",function(el){_this.setState({mapContainerRef:el})});_defineProperty(_this,"setAppInfosContainerRef",function(el){_this.setState({appInfosContainerRef:el})});_defineProperty(_this,"setButtonContainerRef",function(el){_this.setState({mapButtonsContainerRef:el});if(el){var resizeObserver=new ResizeObserver(function(entries){var contentRectEntry=entries.find(function(entry){return entry.contentRect});if(contentRectEntry){var width=contentRectEntry.contentRect.width;var height=contentRectEntry.contentRect.height;el.style.setProperty("--buttons-container-width","".concat(width,"px"));el.style.setProperty("--buttons-container-height","".concat(height,"px"))}});resizeObserver.observe(el);el.recomputeSpacers=function(){var slots=new Set;Array.from(el.childNodes).forEach(function(child){if(child.dataset.spacer){el.removeChild(child)}else{slots.add(child.dataset.slot)}});var maxSlot=Math.max.apply(Math,_toConsumableArray(slots));for(var i=0;i<maxSlot;++i){if(!slots.has(String(i))){var child=document.createElement("div");child.className="map-buttons-spacer";child.dataset.spacer=1;child.style.order=i;el.appendChild(child)}}}}});return _this}_inherits(PluginsContainer,_React$Component);return _createClass(PluginsContainer,[{key:"render",value:function render(){var _this$props$className;var left=this.props.mapMargins.left+this.props.mapMargins.outerLeft;var top=this.props.mapMargins.top;var right=this.props.mapMargins.right+this.props.mapMargins.outerRight;var bottom=this.props.mapMargins.bottom;var mapContainerStyle={left:"calc("+left+"px)",top:"calc(var(--topbar-height) + "+top+"px)",right:"calc("+right+"px)",bottom:"calc(var(--bottombar-height) + "+bottom+"px)"};var haveRefs=this.state.mapButtonsContainerRef&&this.state.mapContainerRef&&this.state.appInfosContainerRef;return/*#__PURE__*/React.createElement("div",{className:"plugins-container "+((_this$props$className=this.props.className)!==null&&_this$props$className!==void 0?_this$props$className:""),ref:this.setupTouchEvents},/*#__PURE__*/React.createElement(AppInfosPortalContext.Provider,{value:this.state.appInfosContainerRef},/*#__PURE__*/React.createElement(MapButtonPortalContext.Provider,{value:this.state.mapButtonsContainerRef},/*#__PURE__*/React.createElement(MapContainerPortalContext.Provider,{value:this.state.mapContainerRef},haveRefs?this.renderPlugins():null,haveRefs?this.props.children:null))),/*#__PURE__*/React.createElement(WindowManager,null),/*#__PURE__*/React.createElement("div",{className:"map-container",ref:this.setMapContainerRef,style:mapContainerStyle},/*#__PURE__*/React.createElement(ProcessNotifications,null)),/*#__PURE__*/React.createElement("div",{className:"map-buttons-container",ref:this.setButtonContainerRef,style:mapContainerStyle}),/*#__PURE__*/React.createElement("div",{className:"app-infos-container",ref:this.setAppInfosContainerRef,style:mapContainerStyle}))}}])}(React.Component);_defineProperty(PluginsContainer,"propTypes",{children:PropTypes.oneOfType([PropTypes.node,PropTypes.func]),className:PropTypes.string,mapMargins:PropTypes.object,pluginsConfig:PropTypes.array,theme:PropTypes.object});export default connect(function(state){return{// Just to trigger re-render when custom plugins change
-customPlugins:state.localConfig.customPlugins,mapMargins:state.windows.mapMargins,theme:state.theme.current}})(PluginsContainer);
+ */
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ConfigUtils from '../utils/ConfigUtils';
+import PluginStore from '../utils/PluginStore';
+import ProcessNotifications from './ProcessNotifications';
+import WindowManager from './WindowManager';
+import './style/PluginsContainer.css';
+export var MapButtonPortalContext = /*#__PURE__*/React.createContext(null);
+export var MapContainerPortalContext = /*#__PURE__*/React.createContext(null);
+export var AppInfosPortalContext = /*#__PURE__*/React.createContext(null);
+var PluginsContainer = /*#__PURE__*/function (_React$Component) {
+  function PluginsContainer() {
+    var _this;
+    _classCallCheck(this, PluginsContainer);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, PluginsContainer, [].concat(args));
+    _defineProperty(_this, "state", {
+      mapButtonsContainerRef: null,
+      mapContainerRef: null,
+      appInfosContainerRef: null
+    });
+    _defineProperty(_this, "renderPlugins", function () {
+      var device = ConfigUtils.isMobile() ? 'mobile' : 'desktop';
+      var plugins = PluginStore.getPlugins();
+      return _this.props.pluginsConfig.map(function (pluginConf) {
+        var _this$props$theme, _this$props$theme2, _pluginConf$key;
+        var Plugin = plugins[pluginConf.name + "Plugin"];
+        if (!Plugin) {
+          return null;
+        }
+        var themeDevicePluginConfig = ((_this$props$theme = _this.props.theme) === null || _this$props$theme === void 0 || (_this$props$theme = _this$props$theme.config) === null || _this$props$theme === void 0 || (_this$props$theme = _this$props$theme[device]) === null || _this$props$theme === void 0 || (_this$props$theme = _this$props$theme.plugins) === null || _this$props$theme === void 0 ? void 0 : _this$props$theme[pluginConf.name]) || {};
+        var themePluginConfig = ((_this$props$theme2 = _this.props.theme) === null || _this$props$theme2 === void 0 || (_this$props$theme2 = _this$props$theme2.config) === null || _this$props$theme2 === void 0 || (_this$props$theme2 = _this$props$theme2.plugins) === null || _this$props$theme2 === void 0 ? void 0 : _this$props$theme2[pluginConf.name]) || {};
+        var cfg = _objectSpread(_objectSpread(_objectSpread({}, pluginConf.cfg || {}), themePluginConfig), themeDevicePluginConfig);
+        return /*#__PURE__*/React.createElement(Plugin, _extends({
+          key: (_pluginConf$key = pluginConf.key) !== null && _pluginConf$key !== void 0 ? _pluginConf$key : pluginConf.name
+        }, cfg));
+      });
+    });
+    _defineProperty(_this, "setupTouchEvents", function (el) {
+      if (el) {
+        el.addEventListener('touchstart', function (ev) {
+          _this.touchY = ev.targetTouches[0].clientY;
+        }, {
+          passive: false
+        });
+        el.addEventListener('touchmove', _this.preventOverscroll, {
+          passive: false
+        });
+        var resizeObserver = new ResizeObserver(function (entries) {
+          var contentRectEntry = entries.find(function (entry) {
+            return entry.contentRect;
+          });
+          if (contentRectEntry) {
+            var height = contentRectEntry.contentRect.height;
+            el.style.setProperty('--plugins-container-height', "".concat(height, "px"));
+          }
+        });
+        resizeObserver.observe(el);
+      }
+    });
+    _defineProperty(_this, "preventOverscroll", function (ev) {
+      if (ev.touches[0].touchType !== "direct") {
+        // Don't do anything for stylus inputs
+        return;
+      }
+      var scrollEvent = false;
+      var element = ev.target;
+      var direction = ev.targetTouches[0].clientY - _this.touchY;
+      _this.touchY = ev.targetTouches[0].clientY;
+      while (!scrollEvent && element) {
+        var scrollable = element.scrollHeight > element.clientHeight;
+        // Workaround for resizeable-window having scrollHeight > clientHeight even though it has no scrollbar
+        if (element.classList.contains('resizeable-window')) {
+          scrollable = false;
+        }
+        if (element.type === "range") {
+          // If it is a range element, treat it as a scroll event
+          scrollEvent = true;
+        } else if (scrollable && element.scrollTop + element.clientHeight < element.scrollHeight && direction < 0) {
+          // User scrolls down and element is not at end of scroll
+          scrollEvent = true;
+        } else if (scrollable && element.scrollTop > 0 && direction > 0) {
+          // User scrolls up and element is not at start of scroll
+          scrollEvent = true;
+        } else {
+          element = element.parentElement;
+        }
+      }
+      if (!scrollEvent) {
+        ev.preventDefault();
+      }
+    });
+    _defineProperty(_this, "setMapContainerRef", function (el) {
+      _this.setState({
+        mapContainerRef: el
+      });
+    });
+    _defineProperty(_this, "setAppInfosContainerRef", function (el) {
+      _this.setState({
+        appInfosContainerRef: el
+      });
+    });
+    _defineProperty(_this, "setButtonContainerRef", function (el) {
+      _this.setState({
+        mapButtonsContainerRef: el
+      });
+      if (el) {
+        var resizeObserver = new ResizeObserver(function (entries) {
+          var contentRectEntry = entries.find(function (entry) {
+            return entry.contentRect;
+          });
+          if (contentRectEntry) {
+            var width = contentRectEntry.contentRect.width;
+            var height = contentRectEntry.contentRect.height;
+            el.style.setProperty('--buttons-container-width', "".concat(width, "px"));
+            el.style.setProperty('--buttons-container-height', "".concat(height, "px"));
+          }
+        });
+        resizeObserver.observe(el);
+        el.recomputeSpacers = function () {
+          var slots = new Set();
+          Array.from(el.childNodes).forEach(function (child) {
+            if (child.dataset.spacer) {
+              el.removeChild(child);
+            } else {
+              slots.add(child.dataset.slot);
+            }
+          });
+          var maxSlot = Math.max.apply(Math, _toConsumableArray(slots));
+          for (var i = 0; i < maxSlot; ++i) {
+            if (!slots.has(String(i))) {
+              var child = document.createElement("div");
+              child.className = "map-buttons-spacer";
+              child.dataset.spacer = 1;
+              child.style.order = i;
+              el.appendChild(child);
+            }
+          }
+        };
+      }
+    });
+    return _this;
+  }
+  _inherits(PluginsContainer, _React$Component);
+  return _createClass(PluginsContainer, [{
+    key: "render",
+    value: function render() {
+      var _this$props$className;
+      var left = this.props.mapMargins.left + this.props.mapMargins.outerLeft;
+      var top = this.props.mapMargins.top;
+      var right = this.props.mapMargins.right + this.props.mapMargins.outerRight;
+      var bottom = this.props.mapMargins.bottom;
+      var mapContainerStyle = {
+        left: 'calc(' + left + 'px)',
+        top: 'calc(var(--topbar-height) + ' + top + 'px)',
+        right: 'calc(' + right + 'px)',
+        bottom: 'calc(var(--bottombar-height) + ' + bottom + 'px)'
+      };
+      var haveRefs = this.state.mapButtonsContainerRef && this.state.mapContainerRef && this.state.appInfosContainerRef;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "plugins-container " + ((_this$props$className = this.props.className) !== null && _this$props$className !== void 0 ? _this$props$className : ""),
+        ref: this.setupTouchEvents
+      }, /*#__PURE__*/React.createElement(AppInfosPortalContext.Provider, {
+        value: this.state.appInfosContainerRef
+      }, /*#__PURE__*/React.createElement(MapButtonPortalContext.Provider, {
+        value: this.state.mapButtonsContainerRef
+      }, /*#__PURE__*/React.createElement(MapContainerPortalContext.Provider, {
+        value: this.state.mapContainerRef
+      }, haveRefs ? this.renderPlugins() : null, haveRefs ? this.props.children : null))), /*#__PURE__*/React.createElement(WindowManager, null), /*#__PURE__*/React.createElement("div", {
+        className: "map-container",
+        ref: this.setMapContainerRef,
+        style: mapContainerStyle
+      }, /*#__PURE__*/React.createElement(ProcessNotifications, null)), /*#__PURE__*/React.createElement("div", {
+        className: "map-buttons-container",
+        ref: this.setButtonContainerRef,
+        style: mapContainerStyle
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "app-infos-container",
+        ref: this.setAppInfosContainerRef,
+        style: mapContainerStyle
+      }));
+    }
+  }]);
+}(React.Component);
+_defineProperty(PluginsContainer, "propTypes", {
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  className: PropTypes.string,
+  mapMargins: PropTypes.object,
+  pluginsConfig: PropTypes.array,
+  theme: PropTypes.object
+});
+export default connect(function (state) {
+  return {
+    // Just to trigger re-render when custom plugins change
+    customPlugins: state.localConfig.customPlugins,
+    mapMargins: state.windows.mapMargins,
+    theme: state.theme.current
+  };
+})(PluginsContainer);