qwc2 2025.10.16 → 2025.10.24

package/components/LocationRecorder.js

@@ -0,0 +1,138 @@
+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 _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 2015 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 ReactDOM from 'react-dom';
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import LocaleUtils from '../utils/LocaleUtils';
+import Icon from './Icon';
+import { BottomToolPortalContext } from './PluginsContainer';
+import NumberInput from './widgets/NumberInput';
+import './style/LocationRecorder.css';
+var LocationRecorder = /*#__PURE__*/function (_React$Component) {
+  function LocationRecorder(props) {
+    var _this;
+    _classCallCheck(this, LocationRecorder);
+    _this = _callSuper(this, LocationRecorder, [props]);
+    _defineProperty(_this, "state", {
+      recording: false,
+      interval: 1
+    });
+    _defineProperty(_this, "toggleRecording", function () {
+      if (_this.state.recording) {
+        _this.stopRecording();
+      } else {
+        _this.props.drawInteraction.abortDrawing();
+        _this.props.drawInteraction.setActive(false);
+        // Re-add overlay to map, removed by setActive(false), to ensure traced feature is visibile
+        _this.props.drawInteraction.getOverlay().setMap(_this.props.map);
+        _this.setState({
+          recording: true
+        });
+        if (!navigator.geolocation) {
+          _this.stopRecording();
+          /* eslint-disable-next-line */
+          console.error("Geolocation not supported");
+        } else {
+          _this.props.drawInteraction.appendCoordinates([_this.props.locatePosition]);
+          if (_this.props.geomType === "Point") {
+            _this.stopRecording();
+          } else {
+            _this.pollInterval = setInterval(function () {
+              _this.props.drawInteraction.appendCoordinates([_this.props.locatePosition]);
+            }, _this.state.interval * 1000);
+          }
+        }
+      }
+    });
+    _defineProperty(_this, "stopRecording", function () {
+      _this.setState({
+        recording: false
+      }, _this.finishDrawing);
+      clearInterval(_this.pollInterval);
+    });
+    _defineProperty(_this, "finishDrawing", function () {
+      _this.props.drawInteraction.finishDrawing();
+      _this.props.drawInteraction.setActive(true);
+    });
+    _this.pollInterval = null;
+    return _this;
+  }
+  _inherits(LocationRecorder, _React$Component);
+  return _createClass(LocationRecorder, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.stopRecording();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      if (!this.props.locateEnabled || !this.props.locatePosition) {
+        return null;
+      }
+      var buttonClasses = classNames({
+        button: true,
+        pressed: this.state.recording
+      });
+      return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
+        className: "LocationRecorder"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "screenshot"
+      }), /*#__PURE__*/React.createElement("button", {
+        className: buttonClasses,
+        onClick: this.toggleRecording
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: this.state.recording ? "square" : "circle_full"
+      }), /*#__PURE__*/React.createElement("span", null, this.state.recording ? LocaleUtils.tr("locationrecorder.stop") : LocaleUtils.tr("locationrecorder.record"))), /*#__PURE__*/React.createElement(NumberInput, {
+        decimals: 1,
+        max: 30,
+        min: 0.5,
+        mobile: true,
+        onChange: function onChange(value) {
+          return _this2.setState({
+            interval: value
+          });
+        },
+        step: 0.5,
+        suffix: "s",
+        value: this.state.interval
+      })), this.context);
+    }
+  }]);
+}(React.Component);
+_defineProperty(LocationRecorder, "contextType", BottomToolPortalContext);
+_defineProperty(LocationRecorder, "propTypes", {
+  drawInteraction: PropTypes.object,
+  geomType: PropTypes.string,
+  locateEnabled: PropTypes.bool,
+  locatePosition: PropTypes.array,
+  map: PropTypes.object
+});
+export default connect(function (state) {
+  return {
+    locateEnabled: ["ENABLED", "FOLLOWING"].includes(state.locate.state),
+    locatePosition: state.locate.mapPos
+  };
+})(LocationRecorder);

package/components/PickFeature.js

@@ -31,6 +31,9 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React from 'react';
 import { connect } from 'react-redux';
 import isEmpty from 'lodash.isempty';
+import ol from 'openlayers';
+import pointInPolygon from 'point-in-polygon';
+import polygonIntersectTest from 'polygon-intersect-test';
 import PropTypes from 'prop-types';
 import { v4 as uuidv4 } from 'uuid';
 import { LayerRole, addLayerFeatures, clearLayer } from '../actions/layers';
@@ -121,29 +124,40 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       var _this2 = this;
       if (this.state.pickGeom && this.state.pickGeom !== prevState.pickGeom) {
-        var queryLayers = [];
+        var queryWmsLayers = [];
+        var queryVectorLayers = [];
         if (this.props.layerFilter) {
-          queryLayers = [this.props.layers.find(function (l) {
+          queryWmsLayers = [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);
+          queryWmsLayers = IdentifyUtils.getQueryLayers(this.props.layers, this.props.map);
+          queryVectorLayers = this.props.layers.filter(function (layer) {
+            return layer.visibility && LayerRole.USERLAYER && (layer.type === 'vector' || layer.type === 'wfs');
+          });
         }
-        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];
-              }
+        if (this.props.layerFilterFunc) {
+          queryWmsLayers = queryWmsLayers.filter(this.props.layerFilterFunc);
+          queryVectorLayers = queryVectorLayers.filter(this.props.layerFilterFunc);
+        }
+        if (isEmpty(queryWmsLayers) && isEmpty(queryVectorLayers)) {
+          return;
+        }
+        this.setState(function (state) {
+          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 reqId = uuidv4();
+          var getPixelFromCoordinate = MapUtils.getHook(MapUtils.GET_PIXEL_FROM_COORDINATES_HOOK);
+          var clickPos = getPixelFromCoordinate([maxX, maxY], false);
+          if (!isEmpty(queryWmsLayers)) {
+            queryWmsLayers.forEach(function (layer) {
               var request = null;
               if (_this2.props.pickGeomType === 'Point') {
                 var _this2$props$layerFil;
@@ -159,14 +173,58 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
                 return _this2.handleIdentifyResponse(response, reqId, layer, request.params.info_format);
               });
             });
-            return {
-              pickResults: {},
-              clickPos: clickPos,
-              pendingQueries: queryLayers.length,
-              reqId: reqId
-            };
-          });
-        }
+          }
+          var pickResults = {};
+          if (!isEmpty(queryVectorLayers)) {
+            var olMap = MapUtils.getHook(MapUtils.GET_MAP);
+            var layerMap = queryVectorLayers.reduce(function (res, layer) {
+              return _objectSpread(_objectSpread({}, res), {}, _defineProperty({}, layer.id, layer));
+            }, {});
+            var format = new ol.format.GeoJSON();
+            if (_this2.props.pickGeomType === 'Point') {
+              olMap.forEachFeatureAtPixel(clickPos, function (feature, layer) {
+                var _layer$get;
+                var layerid = layer === null || layer === void 0 || (_layer$get = layer.get) === null || _layer$get === void 0 ? void 0 : _layer$get.call(layer, 'id');
+                if (layerid in layerMap) {
+                  var featureObj = format.writeFeatureObject(feature);
+                  var layername = layerMap[layerid].name;
+                  pickResults[layername] = pickResults[layername] || [];
+                  pickResults[layername].push(featureObj);
+                }
+              });
+            } else if (_this2.props.pickGeomType === 'Polygon') {
+              var extent = ol.extent.boundingExtent(coordinates[0]);
+              olMap.getLayers().forEach(function (layer) {
+                if (!(layer.get('id') in layerMap)) {
+                  return;
+                }
+                layer.getSource().forEachFeatureIntersectingExtent(extent, function (feature) {
+                  var intersects = false;
+                  if (feature.getGeometry().getType() === "Point") {
+                    intersects = pointInPolygon(feature.getGeometry().getCoordinates(), coordinates[0]);
+                  } else if (feature.getGeometry().getType() === "LineString") {
+                    intersects = true; // TODO
+                  } else if (feature.getGeometry().getType() === "Polygon") {
+                    intersects = polygonIntersectTest(feature.getGeometry().getCoordinates()[0], coordinates[0]);
+                  }
+                  if (!intersects) {
+                    return;
+                  }
+                  var featureObj = format.writeFeatureObject(feature);
+                  var layername = layerMap[layer.get('id')].name;
+                  pickResults[layername] = pickResults[layername] || [];
+                  pickResults[layername].push(featureObj);
+                });
+              });
+            }
+          }
+          return {
+            pickResults: pickResults,
+            clickPos: clickPos,
+            pendingQueries: queryWmsLayers.length,
+            reqId: reqId
+          };
+        });
       }
     }
   }, {
@@ -186,6 +244,7 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
             layername = _ref6[0],
             features = _ref6[1];
           return features.map(function (feature) {
+            var _feature$displayname;
             return /*#__PURE__*/React.createElement("div", {
               key: layername + ":" + feature.id,
               onClickCapture: function onClickCapture() {
@@ -197,7 +256,7 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
               onMouseOver: function onMouseOver() {
                 return _this3.highlightFeature(layername, feature);
               }
-            }, layername + ": " + feature.displayname);
+            }, layername + ": " + ((_feature$displayname = feature.displayname) !== null && _feature$displayname !== void 0 ? _feature$displayname : feature.id));
           });
         }) : /*#__PURE__*/React.createElement("div", {
           className: "pick-feature-menu-querying"
@@ -240,6 +299,8 @@ _defineProperty(PickFeature, "propTypes", {
     url: PropTypes.string,
     name: PropTypes.string
   }),
+  /** Optional: Filter function to restrict pick layers */
+  layerFilterFunc: PropTypes.func,
   layers: PropTypes.array,
   map: PropTypes.object,
   /** Pick geometry type: Point, Polygon, ... (default: Point) */

package/components/PluginsContainer.js

@@ -40,6 +40,7 @@ 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);
+export var BottomToolPortalContext = /*#__PURE__*/React.createContext(null);
 var PluginsContainer = /*#__PURE__*/function (_React$Component) {
   function PluginsContainer() {
     var _this;
@@ -51,7 +52,8 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "state", {
       mapButtonsContainerRef: null,
       mapContainerRef: null,
-      appInfosContainerRef: null
+      appInfosContainerRef: null,
+      bottomToolContainerRef: null
     });
     _defineProperty(_this, "renderPlugins", function () {
       var device = ConfigUtils.isMobile() ? 'mobile' : 'desktop';
@@ -134,6 +136,11 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
         appInfosContainerRef: el
       });
     });
+    _defineProperty(_this, "setBottomToolContanerRef", function (el) {
+      _this.setState({
+        bottomToolContainerRef: el
+      });
+    });
     _defineProperty(_this, "setButtonContainerRef", function (el) {
       _this.setState({
         mapButtonsContainerRef: el
@@ -190,7 +197,7 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
         right: 'calc(' + right + 'px)',
         bottom: 'calc(var(--bottombar-height) + ' + bottom + 'px)'
       };
-      var haveRefs = this.state.mapButtonsContainerRef && this.state.mapContainerRef && this.state.appInfosContainerRef;
+      var haveRefs = this.state.mapButtonsContainerRef && this.state.mapContainerRef && this.state.appInfosContainerRef && this.state.bottomToolContainerRef;
       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
@@ -200,7 +207,9 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
         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", {
+      }, /*#__PURE__*/React.createElement(BottomToolPortalContext.Provider, {
+        value: this.state.bottomToolContainerRef
+      }, 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
@@ -212,6 +221,10 @@ var PluginsContainer = /*#__PURE__*/function (_React$Component) {
         className: "app-infos-container",
         ref: this.setAppInfosContainerRef,
         style: mapContainerStyle
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "map-bottom-tool-container",
+        ref: this.setBottomToolContanerRef,
+        style: mapContainerStyle
       }));
     }
   }]);

package/components/map/OlLayer.js

@@ -252,7 +252,8 @@ _defineProperty(OlLayer, "propTypes", {
   refreshLayer: PropTypes.func,
   setLayerLoading: PropTypes.func,
   swipe: PropTypes.number,
-  zIndex: PropTypes.number
+  zIndex: PropTypes.number,
+  zoomToExtent: PropTypes.func
 });
 export default connect(function () {
   return {};

package/components/map3d/HeightProfile3D.js

@@ -102,6 +102,8 @@ var HeightProfilePrintDialog = /*#__PURE__*/function (_React$PureComponent) {
     value: function componentDidMount() {
       var templatePath = MiscUtils.resolveAssetsPath(this.props.templatePath);
       this.externalWindow = window.open(templatePath, LocaleUtils.tr("heightprofile.title"), "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes");
+      // Inherit API
+      this.externalWindow.qwc2 = window.qwc2;
       this.externalWindow.addEventListener('load', this.setWindowContent, false);
       this.externalWindow.addEventListener('resize', this.windowResized, false);
       window.addEventListener('beforeunload', this.closePrintWindow);

package/components/style/App.css

@@ -169,6 +169,20 @@ button.button > div.spinner {
     height: 1.5em;
 }
 
+button.selected {
+    position: relative;
+}
+button.selected:after {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 3px;
+    background-color: var(--color-active);
+    border-top: 1px solid var(--border-color);
+    content: "";
+}
+
 div.controlgroup {
     display: flex;
     align-items: center;

package/components/style/AttributeTableWidget.css

@@ -182,7 +182,7 @@ table.attribtable-table td > div.TextInput > pre {
     min-height: 2em;
 }
 
-table.attribtable-table td > *:disabled,
+table.attribtable-table tr.row-disabled td > *:disabled,
 table.attribtable-table tr.row-disabled,
 table.attribtable-table tr.row-disabled * {
     color: var(--text-color-disabled);

package/components/style/FeatureAttributesWindow.css

@@ -0,0 +1,16 @@
+div.feature-attributes-body table {
+    width: 100%;
+}
+
+div.feature-attributes-body table td:first-child {
+    width: 25%
+}
+
+div.feature-attributes-body table td:last-child {
+    width: 1%;
+}
+
+div.feature-attributes-body table td > input {
+    min-width: 0;
+    width: 100%;
+}

package/components/style/IdentifyViewer.css

@@ -76,6 +76,7 @@ div.identify-body div.identify-result-frame:hover {
 
 div.identify-body .identify-result-title {
     background-color: var(--list-section-bg-color);
+    color: var(--list-section-text-color);
     padding: 0.25em;
     font-weight: bold;
     flex: 0 0 auto;
@@ -94,6 +95,10 @@ div.identify-body .identify-result-title > span.icon {
     flex: 0 0 auto;
 }
 
+span.identify-result-checkbox {
+    background-color: white;
+}
+
 div.identify-body .identify-result-title > span:not(:first-child) {
     margin-left: 0.5em;
 }

package/components/style/LocationRecorder.css

@@ -0,0 +1,10 @@
+div.LocationRecorder {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25em 0.5em;
+    background-color: var(--container-bg-color);
+    box-shadow: 0px -2px 4px rgba(136, 136, 136, 0.5);
+    border-bottom: 1px solid rgba(136, 136, 136, 0.5);
+    column-gap: 0.25em;
+    order: 1;
+}

package/components/style/NumericInputWindow.css

@@ -8,4 +8,11 @@ div.numeric-input-widget-body > table input {
 
 div.numeric-input-widget-body > table tr:hover {
     background-color: var(--list-item-bg-color-hover);
+}
+
+div.numeric-input-widget-body > table td:nth-child(1),
+div.numeric-input-widget-body > table td:nth-child(2),
+div.numeric-input-widget-body > table td:nth-child(4),
+div.numeric-input-widget-body > table td:nth-child(6) {
+    width: 1%;
 }

package/components/style/PluginsContainer.css

@@ -25,6 +25,22 @@ div.app-infos-container {
     row-gap: 0.25em;
 }
 
+div.map-bottom-tool-container {
+    z-index: 3;
+    position: absolute;
+    pointer-events: none;
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    align-content: flex-start;
+    justify-content: flex-start;
+    margin-bottom: -1px;
+}
+
+div.map-bottom-tool-container > * {
+    pointer-events: initial;
+}
+
 div.app-info {
     z-index: 1;
     color: var(--panel-text-color);

package/components/widgets/LayerCatalogWidget.js

@@ -38,6 +38,7 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
     _this = _callSuper(this, LayerCatalogWidget, [props]);
     _defineProperty(_this, "state", {
       catalog: [],
+      filteredCatalog: null,
       filter: ""
     });
     _defineProperty(_this, "toggleLayerListEntry", function (path) {
@@ -64,6 +65,35 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
         };
       });
     });
+    _defineProperty(_this, "setFilter", function (text) {
+      _this.setState(function (state) {
+        if (!text) {
+          return {
+            filter: text,
+            filteredCatalog: null
+          };
+        }
+        var filter = new RegExp(removeDiacritics(text).replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&"), "i");
+        var _filterCatalogEntry = function filterCatalogEntry(res, entry) {
+          if (entry.sublayers) {
+            var newEntry = _objectSpread(_objectSpread({}, entry), {}, {
+              sublayers: entry.sublayers.reduce(_filterCatalogEntry, []),
+              expanded: true
+            });
+            return newEntry.sublayers.length > 0 ? [].concat(_toConsumableArray(res), [newEntry]) : res;
+          } else if (removeDiacritics(entry.title).match(filter)) {
+            return [].concat(_toConsumableArray(res), [entry]);
+          } else {
+            return res;
+          }
+        };
+        var filteredCatalog = state.catalog.reduce(_filterCatalogEntry, []);
+        return {
+          filter: text,
+          filteredCatalog: filteredCatalog
+        };
+      });
+    });
     _defineProperty(_this, "addServiceLayer", function (entry) {
       var asGroup = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       if (entry.resource) {
@@ -116,19 +146,14 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
     }
   }, {
     key: "renderCatalogEntry",
-    value: function renderCatalogEntry(entry, filter, path) {
+    value: function renderCatalogEntry(entry, path) {
       var _this2 = this;
-      var level = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-      var idx = arguments.length > 4 ? arguments[4] : undefined;
+      var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      var idx = arguments.length > 3 ? arguments[3] : undefined;
       var hasSublayers = !isEmpty(entry.sublayers);
       var sublayers = hasSublayers ? entry.sublayers.map(function (sublayer, i) {
-        return _this2.renderCatalogEntry(sublayer, filter, [].concat(_toConsumableArray(path), [i]), level + 1, i);
+        return _this2.renderCatalogEntry(sublayer, [].concat(_toConsumableArray(path), [i]), level + 1, i);
       }) : [];
-      if (sublayers.filter(function (item) {
-        return item;
-      }).length === 0 && filter && !removeDiacritics(entry.title).match(filter)) {
-        return null;
-      }
       var type = entry.resource ? entry.resource.slice(0, entry.resource.indexOf(":")) : entry.type;
       var key = (entry.resource || entry.type + ":" + entry.name) + ":" + idx;
       var indentSize = !this.props.levelBasedIndentSize && level > 0 ? 1.5 : level;
@@ -164,8 +189,8 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
-      var filter = new RegExp(removeDiacritics(this.state.filter).replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&"), "i");
+      var _this$state$filteredC,
+        _this3 = this;
       var emptyEntry = null;
       if (isEmpty(this.state.catalog) && this.props.pendingRequests === 0) {
         emptyEntry = /*#__PURE__*/React.createElement("div", {
@@ -177,15 +202,14 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
         }, LocaleUtils.tr("importlayer.loading"));
       }
       var filterplaceholder = LocaleUtils.tr("importlayer.filter");
+      var catalog = (_this$state$filteredC = this.state.filteredCatalog) !== null && _this$state$filteredC !== void 0 ? _this$state$filteredC : this.state.catalog;
       return /*#__PURE__*/React.createElement("div", {
         className: "layer-catalog-widget"
       }, /*#__PURE__*/React.createElement(InputContainer, {
         className: "layer-catalog-widget-filter"
       }, /*#__PURE__*/React.createElement("input", {
         onChange: function onChange(ev) {
-          return _this3.setState({
-            filter: ev.target.value
-          });
+          return _this3.setFilter(ev.target.value);
         },
         placeholder: filterplaceholder,
         role: "input",
@@ -201,8 +225,8 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
         role: "suffix"
       })), /*#__PURE__*/React.createElement("div", {
         className: "layer-catalog-widget-body"
-      }, this.state.catalog.map(function (entry, idx) {
-        return _this3.renderCatalogEntry(entry, filter, [idx], 0, idx);
+      }, catalog.map(function (entry, idx) {
+        return _this3.renderCatalogEntry(entry, [idx], 0, idx);
       }), emptyEntry));
     }
   }]);

package/components/widgets/NavBar.js

@@ -21,6 +21,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  */
 
 import React from 'react';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import LocaleUtils from '../../utils/LocaleUtils';
 import Icon from '../Icon';
@@ -40,7 +41,11 @@ var NavBar = /*#__PURE__*/function (_React$Component) {
           key: idx
         }, "...");
       }
-      var className = "button" + (page === _this.props.currentPage ? " pressed" : "");
+      var className = classNames({
+        button: true,
+        pressed: page === _this.props.currentPage,
+        selected: _this.props.selectedPages.includes(page)
+      });
       return /*#__PURE__*/React.createElement("button", {
         className: className,
         disabled: _this.props.disabled,
@@ -116,9 +121,11 @@ _defineProperty(NavBar, "propTypes", {
   pageChanged: PropTypes.func,
   pageSize: PropTypes.number,
   pageSizeChanged: PropTypes.func,
-  pageSizes: PropTypes.array
+  pageSizes: PropTypes.array,
+  selectedPages: PropTypes.array
 });
 _defineProperty(NavBar, "defaultProps", {
-  pageSizes: [10, 25, 50, 100]
+  pageSizes: [10, 25, 50, 100],
+  selectedPages: []
 });
 export { NavBar as default };