qwc2 2026.9.17 → 2026.9.30

package/components/AttributeTableWidget.js

@@ -9,9 +9,11 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof 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 _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 _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 _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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 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; }
@@ -35,9 +37,12 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 import React from 'react';
 import { connect } from 'react-redux';
+import { featureCollection } from '@turf/helpers';
+import intersect from '@turf/intersect';
 import FileSaver from 'file-saver';
 import isEmpty from 'lodash.isempty';
 import PropTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
 import { LayerRole, addLayerFeatures, removeLayer, refreshLayer } from '../actions/layers';
 import { zoomToExtent, zoomToPoint } from '../actions/map';
 import { setCurrentTask, setCurrentTaskBlocked } from '../actions/task';
@@ -52,11 +57,14 @@ import TextInput from '../components/widgets/TextInput';
 import ConfigUtils from '../utils/ConfigUtils';
 import CoordinatesUtils from '../utils/CoordinatesUtils';
 import { FeatureCache, KeyValCache, parseExpression, getFeatureTemplate } from '../utils/EditingUtils';
+import { defaultHighlightStyle } from '../utils/FeatureStyles';
 import LayerUtils from '../utils/LayerUtils';
 import LocaleUtils from '../utils/LocaleUtils';
 import MapUtils from '../utils/MapUtils';
 import MiscUtils from '../utils/MiscUtils';
 import VectorLayerUtils from '../utils/VectorLayerUtils';
+import MapSelection from './MapSelection';
+import ButtonBar from './widgets/ButtonBar';
 import ComboBox from './widgets/ComboBox';
 import FeaturesTable from './widgets/FeaturesTable';
 import MenuButton from './widgets/MenuButton';
@@ -66,12 +74,79 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
     var _this;
     _classCallCheck(this, AttributeTableWidget);
     _this = _callSuper(this, AttributeTableWidget, [props]);
+    _defineProperty(_this, "filterFunctions", {
+      '~': function _(attr, filterVal) {
+        return String(attr).toLowerCase().includes(filterVal);
+      },
+      '=': function _(attr, filterVal) {
+        return String(attr).toLowerCase() === filterVal;
+      },
+      '!=': function _(attr, filterVal) {
+        return String(attr).toLowerCase() !== filterVal;
+      },
+      '>': function _(attr, filterVal) {
+        return Number(attr) > Number(filterVal);
+      },
+      '>=': function _(attr, filterVal) {
+        return Number(attr) >= Number(filterVal);
+      },
+      '<': function _(attr, filterVal) {
+        return Number(attr) < Number(filterVal);
+      },
+      '<=': function _(attr, filterVal) {
+        return Number(attr) <= Number(filterVal);
+      }
+    });
     _defineProperty(_this, "rowIsDisabled", function (idx) {
       return _this.state.changedFeatureIdx !== null && _this.state.changedFeatureIdx !== idx;
     });
-    _defineProperty(_this, "setSelectedFeatures", function (features) {
+    _defineProperty(_this, "setSelectMode", function (mode) {
+      _this.setState(function (state) {
+        return {
+          selectMode: state.selectMode === mode ? null : mode,
+          selectionGeom: null
+        };
+      });
+    });
+    _defineProperty(_this, "selectFeatures", function (geom) {
+      _this.getFeatures(_this.state, _this.state.loadedLayer, false, geom, function (result) {
+        if (result) {
+          _this.setState(function (state) {
+            if (state.selectMode === 'Point' && result.features.length === 1 && state.selectedFeatures[result.features[0].id]) {
+              /* eslint-disable-next-line no-unused-vars */
+              var _state$selectedFeatur = state.selectedFeatures,
+                _result$features$0$id = result.features[0].id,
+                _ = _state$selectedFeatur[_result$features$0$id],
+                selectedFeatures = _objectWithoutProperties(_state$selectedFeatur, [_result$features$0$id].map(_toPropertyKey));
+              return {
+                selectionGeom: null,
+                selectedFeatures: selectedFeatures
+              };
+            } else {
+              return {
+                selectionGeom: null,
+                selectedFeatures: _objectSpread(_objectSpread({}, state.selectedFeatures), result.features.reduce(function (res, f) {
+                  return _objectSpread(_objectSpread({}, res), {}, _defineProperty({}, f.id, f));
+                }, {}))
+              };
+            }
+          });
+        } else {
+          _this.setState({
+            selectionGeom: null
+          });
+        }
+      });
       _this.setState({
-        selectedFeatures: features
+        selectionGeom: geom
+      });
+    });
+    _defineProperty(_this, "setSelectedFeatures", function (selection) {
+      _this.setState(function (state) {
+        return {
+          selectedFeatures: selection,
+          selectedOnly: state.selectedOnly && !isEmpty(selection)
+        };
       });
     });
     _defineProperty(_this, "setHoveredFeature", function (feature) {
@@ -247,15 +322,34 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
           newState.limitToExtent = state.limitToExtent;
           newState.curEditConfig = editConfig;
           newState.curFields = fields;
+          newState.selectedFeatures = {};
+          newState.selectedOnly = false;
+        }
+        if (newState.selectedOnly) {
+          // Note: if selectedOnly is set, all selected features have already been fetched from the service, no reload is necessary
+          var features = newState.sortField ? Object.values(newState.selectedFeatures).sort(function (f1, f2) {
+            var v1 = String(f1.properties[newState.sortField.field]);
+            var v2 = String(f2.properties[newState.sortField.field]);
+            return v1.localeCompare(v2, undefined, {
+              numeric: true,
+              sensitivity: 'base'
+            }) * newState.sortField.dir;
+          }) : Object.values(newState.selectedFeatures);
+          return {
+            features: features,
+            totFeatureCount: features
+          };
         }
-        newState.selectedFeatures = {};
         newState.loading = true;
-        _this.getFeatures(newState, loadLayer, true, function (result) {
+        _this.getFeatures(newState, loadLayer, true, null, function (result) {
           if (result) {
-            _this.setState(_objectSpread({
-              loading: false,
-              loadedLayer: loadLayer
-            }, result));
+            _this.setState(function (state2) {
+              return _objectSpread({
+                loading: false,
+                loadedLayer: loadLayer,
+                selectedFeatures: _this.filterSelectedFeatures(state2)
+              }, result);
+            });
           } else {
             // eslint-disable-next-line
             alert(LocaleUtils.tr("attribtable.loadfailed"));
@@ -267,7 +361,7 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
         return newState;
       });
     });
-    _defineProperty(_this, "getFeatures", function (state, loadedLayer, paginate, callback) {
+    _defineProperty(_this, "getFeatures", function (state, loadedLayer, paginate, filterGeom, callback) {
       var _state$curEditConfig, _fieldMap$state$filte, _fieldMap$state$sortF, _state$sortField, _this$props$filter$fi, _this$props$filter$fi2, _fieldMap$state$filte2, _fieldMap$state$sortF2, _state$sortField2;
       // If sort or filter field is virtual, query non-paginated features and apply additional sorting/filtering client side
       var fieldMap = (((_state$curEditConfig = state.curEditConfig) === null || _state$curEditConfig === void 0 ? void 0 : _state$curEditConfig.fields) || []).reduce(function (res, field) {
@@ -306,6 +400,22 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
         options.offset = state.currentPage * state.pageSize;
         options.limit = state.pageSize;
       }
+      if (filterGeom) {
+        if (options.filterGeom) {
+          var intersection = intersect(featureCollection([{
+            type: "Feature",
+            properties: {},
+            geometry: options.filterGeom
+          }, {
+            type: "Feature",
+            properties: {},
+            geometry: filterGeom
+          }]));
+          options.filterGeom = intersection !== null && intersection !== void 0 && intersection.geometry ? VectorLayerUtils.geoJSONGeomToWkt(intersection.geometry) : null;
+        } else {
+          options.filterGeom = filterGeom;
+        }
+      }
       _this.props.iface.getFeatures(state.curEditConfig, _this.props.mapCrs, function (result) {
         if (result) {
           var _result$numberMatched;
@@ -322,32 +432,9 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this, "filteredSortedFeatures", function (features, state, fieldMap) {
       var _fieldMap$state$filte3, _fieldMap$state$sortF3, _state$sortField3;
-      var filterFunctions = {
-        '~': function _(attr, filterVal) {
-          return String(attr).toLowerCase().includes(filterVal);
-        },
-        '=': function _(attr, filterVal) {
-          return String(attr).toLowerCase() === filterVal;
-        },
-        '!=': function _(attr, filterVal) {
-          return String(attr).toLowerCase() !== filterVal;
-        },
-        '>': function _(attr, filterVal) {
-          return Number(attr) > Number(filterVal);
-        },
-        '>=': function _(attr, filterVal) {
-          return Number(attr) >= Number(filterVal);
-        },
-        '<': function _(attr, filterVal) {
-          return Number(attr) < Number(filterVal);
-        },
-        '<=': function _(attr, filterVal) {
-          return Number(attr) <= Number(filterVal);
-        }
-      };
       if (state.filterVal && (_fieldMap$state$filte3 = fieldMap[state.filterField]) !== null && _fieldMap$state$filte3 !== void 0 && _fieldMap$state$filte3.expression) {
         var filterVal = state.filterVal.toLowerCase();
-        var test = filterFunctions[state.filterOp];
+        var test = _this.filterFunctions[state.filterOp];
         features = features.filter(function (feature) {
           return test(feature.properties[state.filterField], filterVal);
         });
@@ -359,7 +446,7 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
           value = _ref4[1];
         if ((_fieldMap$field2 = fieldMap[field]) !== null && _fieldMap$field2 !== void 0 && _fieldMap$field2.expression) {
           features = features.filter(function (feature) {
-            return filterFunctions['~'](feature.properties[field], value);
+            return _this.filterFunctions['~'](feature.properties[field], value);
           });
         }
       });
@@ -375,6 +462,31 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
       }
       return features;
     });
+    _defineProperty(_this, "filterSelectedFeatures", function (state) {
+      // Apply client side filtering to selected features...
+      return Object.entries(state.selectedFeatures).reduce(function (res, _ref5) {
+        var _ref6 = _slicedToArray(_ref5, 2),
+          fid = _ref6[0],
+          f = _ref6[1];
+        if (state.filterVal) {
+          var filterVal = state.filterVal.toLowerCase();
+          var test = _this.filterFunctions[state.filterOp];
+          if (!test(f.properties[state.filterField], filterVal)) {
+            return res;
+          }
+        }
+        for (var _i = 0, _Object$entries = Object.entries(state.columnFilters); _i < _Object$entries.length; _i++) {
+          var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+            field = _Object$entries$_i[0],
+            value = _Object$entries$_i[1];
+          var _test = _this.filterFunctions['~'];
+          if (!_test(f.properties[field], value)) {
+            return res;
+          }
+        }
+        return _objectSpread(_objectSpread({}, res), {}, _defineProperty({}, fid, f));
+      }, {});
+    });
     _defineProperty(_this, "updateFilter", function (stateField, val) {
       var newState = {
         filterField: _this.state.filterField,
@@ -463,6 +575,13 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
             deleted: !success ? state.deleteTask.deleted : [].concat(_toConsumableArray(state.deleteTask.deleted), [featureid])
           })
         };
+        if (featureid in state.selectedFeatures) {
+          /* eslint-disable-next-line no-unused-vars */
+          var _state$selectedFeatur2 = state.selectedFeatures,
+            _ = _state$selectedFeatur2[featureid],
+            newSelectedFeatures = _state$selectedFeatur2.newSelectedFeatures;
+          newState.selectedFeatures = newSelectedFeatures;
+        }
         if (isEmpty(newState.deleteTask.pending)) {
           if (!isEmpty(newState.deleteTask.failed)) {
             // eslint-disable-next-line
@@ -528,10 +647,10 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
       }
       var featureData = new FormData();
       featureData.set('feature', JSON.stringify(feature));
-      Object.entries(_this.changedFiles).forEach(function (_ref5) {
-        var _ref6 = _slicedToArray(_ref5, 2),
-          key = _ref6[0],
-          value = _ref6[1];
+      Object.entries(_this.changedFiles).forEach(function (_ref7) {
+        var _ref8 = _slicedToArray(_ref7, 2),
+          key = _ref8[0],
+          value = _ref8[1];
         return featureData.set('file:' + key, value);
       });
       if (_this.state.captchaResponse) {
@@ -552,6 +671,13 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line
         alert(result);
       } else {
+        if (_this.state.selectedFeatures[result.id]) {
+          _this.setState(function (state) {
+            return {
+              selectedFeatures: _objectSpread(_objectSpread({}, state.selectFeatures), {}, _defineProperty({}, result.id, result))
+            };
+          });
+        }
         _this.changedFiles = {};
         var mapPrefix = _this.state.curEditConfig.editDataset.split(".")[0];
         _this.props.refreshLayer(function (layer) {
@@ -585,26 +711,6 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
       });
       _this.props.setCurrentTaskBlocked(false);
     });
-    _defineProperty(_this, "highlightFeatures", function () {
-      var features = [];
-      if (_this.state.hoveredFeature) {
-        features = [_this.state.hoveredFeature];
-      } else if (!isEmpty(_this.state.selectedFeatures)) {
-        features = Object.values(_this.state.selectedFeatures);
-      } else if (_this.state.filterVal) {
-        features = _this.state.features;
-      }
-      var layer = {
-        id: "__attributetablehighlight",
-        role: LayerRole.SELECTION
-      };
-      _this.props.addLayerFeatures(layer, features.map(function (f) {
-        return {
-          id: f.id,
-          geometry: f.geometry
-        };
-      }), true);
-    });
     _defineProperty(_this, "zoomToSelection", function () {
       var collection = {
         type: "FeatureCollection",
@@ -687,20 +793,24 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
         csv: formatCsv,
         xlsx: formatXlsx
       };
-      _this.setState({
-        loading: true
-      });
-      _this.getFeatures(_this.state, _this.state.loadedLayer, false, function (result) {
-        if (result) {
-          formatters[format](result.features);
-        } else {
-          // eslint-disable-next-line
-          alert(LocaleUtils.tr("attribtable.loadfailed"));
-        }
+      if (_this.state.selectedOnly) {
+        formatters[format](_this.state.features);
+      } else {
         _this.setState({
-          loading: false
+          loading: true
         });
-      });
+        _this.getFeatures(_this.state, _this.state.loadedLayer, false, null, function (result) {
+          if (result) {
+            formatters[format](result.features);
+          } else {
+            // eslint-disable-next-line
+            alert(LocaleUtils.tr("attribtable.loadfailed"));
+          }
+          _this.setState({
+            loading: false
+          });
+        });
+      }
     });
     _this.changedFiles = {};
     _this.state = AttributeTableWidget.defaultState;
@@ -708,6 +818,8 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
     _this.attribTableContents = null;
     _this.state.limitToExtent = props.limitToExtent;
     _this.filterWarningShown = false;
+    _this.selectionLayerId = uuidv4();
+    _this.highlightLayerId = uuidv4();
     return _this;
   }
   _inherits(AttributeTableWidget, _React$Component);
@@ -722,18 +834,34 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       // Reload conditions when limited to extent
-      if (this.state.limitToExtent && this.state.loadedLayer && (!prevState.limitToExtent || this.props.mapBbox !== prevProps.mapBbox)) {
-        this.reload({
-          currentPage: 0
-        });
-      } else if (!this.state.limitToExtent && prevState.limitToExtent) {
+      if (this.state.loadedLayer && (this.state.limitToExtent && (!prevState.limitToExtent || this.props.mapBbox !== prevProps.mapBbox) || !this.state.limitToExtent && prevState.limitToExtent || this.state.selectedOnly !== prevState.selectedOnly || this.state.selectedOnly && this.state.selectedFeatures !== prevState.selectedFeatures)) {
         this.reload({
           currentPage: 0
         });
       }
       // Highlight feature
-      if (this.state.features !== prevState.features || this.state.hoveredFeature !== prevState.hoveredFeature || this.state.selectedFeatures !== prevState.selectedFeatures) {
-        this.highlightFeatures();
+      if (this.state.selectedFeatures !== prevState.selectedFeatures || this.state.filterVal && this.state.features !== prevState.features) {
+        var features = [];
+        if (!isEmpty(this.state.selectedFeatures)) {
+          features = Object.values(this.state.selectedFeatures);
+        } else if (this.state.filterVal) {
+          features = this.state.features;
+        }
+        var layer = {
+          id: this.highlightLayerId,
+          role: LayerRole.SELECTION,
+          zIndex: 100000
+        };
+        this.props.addLayerFeatures(layer, features, true);
+      }
+      if (this.state.hoveredFeature !== prevState.hoveredFeature) {
+        var _layer = {
+          id: this.selectionLayerId,
+          role: LayerRole.SELECTION,
+          styleOptions: defaultHighlightStyle(),
+          zIndex: 100001
+        };
+        this.props.addLayerFeatures(_layer, this.state.hoveredFeature ? [this.state.hoveredFeature] : [], true);
       }
       if (this.state.loadedLayer !== prevState.loadedLayer && this.props.showDisplayFieldOnly) {
         this.setState(function (state) {
@@ -746,7 +874,8 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      this.props.removeLayer("__attributetablehighlight");
+      this.props.removeLayer(this.highlightLayerId);
+      this.props.removeLayer(this.selectionLayerId);
     }
   }, {
     key: "render",
@@ -782,6 +911,7 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
         var _fieldConfig$constrai, _fieldConfig$constrai2;
         var primaryKey = curEditConfig.primaryKey;
         table = /*#__PURE__*/React.createElement(FeaturesTable, {
+          allowSelectAll: !isEmpty(this.state.selectedFeatures),
           className: "attribtable-table",
           features: this.state.features,
           fields: this.state.curFields,
@@ -793,8 +923,9 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
           readOnly: readOnly,
           renderField: this.renderField,
           rowIsDisabled: this.rowIsDisabled,
+          selection: this.state.selectedFeatures,
           selectionChanged: this.setSelectedFeatures,
-          showColumnFilters: this.props.showColumnFilters
+          showColumnFilters: !this.state.selectedOnly && this.props.showColumnFilters
         });
         var npages = Math.ceil(this.state.totFeatureCount / this.state.pageSize);
         var pages = [this.state.currentPage];
@@ -805,9 +936,9 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
             pages.unshift(this.state.currentPage - i);
           }
         }
-        for (var _i = 0; _i < 3 + extraright; ++_i) {
-          if (this.state.currentPage + _i < npages - 1) {
-            pages.push(this.state.currentPage - _i + 1);
+        for (var _i2 = 0; _i2 < 3 + extraright; ++_i2) {
+          if (this.state.currentPage + _i2 < npages - 1) {
+            pages.push(this.state.currentPage - _i2 + 1);
           }
         }
         var footbarDisabled = loading || editing;
@@ -822,7 +953,7 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
           }
           valueInput = /*#__PURE__*/React.createElement(ComboBox, {
             className: "attribtable-filter-value",
-            disabled: footbarDisabled,
+            disabled: footbarDisabled || this.state.selectedOnly,
             onChange: function onChange(value) {
               return _this2.updateFilter("filterVal", value);
             },
@@ -838,7 +969,7 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
         } else {
           valueInput = /*#__PURE__*/React.createElement(TextInput, {
             className: "attribtable-filter-value",
-            disabled: footbarDisabled,
+            disabled: footbarDisabled || this.state.selectedOnly,
             onChange: function onChange(value) {
               return _this2.updateFilter("filterVal", value);
             },
@@ -868,7 +999,7 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/React.createElement(Icon, {
           icon: "filter"
         }), /*#__PURE__*/React.createElement(ComboBox, {
-          disabled: footbarDisabled,
+          disabled: footbarDisabled || this.state.selectedOnly,
           onChange: function onChange(value) {
             return _this2.updateFilter("filterField", value);
           },
@@ -889,7 +1020,7 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
           }
           return null;
         })), /*#__PURE__*/React.createElement(ComboBox, {
-          disabled: footbarDisabled,
+          disabled: footbarDisabled || this.state.selectedOnly,
           onChange: function onChange(value) {
             return _this2.updateFilter("filterOp", value);
           },
@@ -908,7 +1039,21 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
           value: "<="
         }, "<="), /*#__PURE__*/React.createElement("div", {
           value: "<"
-        }, "<")), valueInput), this.props.showLimitToExtent ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+        }, "<")), valueInput, /*#__PURE__*/React.createElement("button", {
+          className: "button " + (this.state.selectedOnly ? "pressed" : ""),
+          disabled: isEmpty(this.state.selectedFeatures),
+          onClick: function onClick() {
+            return _this2.setState(function (state) {
+              return {
+                selectedOnly: !state.selectedOnly
+              };
+            });
+          },
+          title: LocaleUtils.tr("attribtable.selectedonly"),
+          type: "button"
+        }, /*#__PURE__*/React.createElement(Icon, {
+          icon: "checked"
+        }))), this.props.showLimitToExtent ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
           checked: this.state.limitToExtent,
           disabled: loading,
           onChange: function onChange(ev) {
@@ -950,26 +1095,26 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
           sitekey: ConfigUtils.getConfigProp("editServiceCaptchaSiteKey")
         }));
       }
-      var editLayers = Object.entries(this.props.editConfigs).map(function (_ref7) {
-        var _ref8 = _slicedToArray(_ref7, 2),
-          wmsName = _ref8[0],
-          serviceConfigs = _ref8[1];
-        return Object.entries(serviceConfigs).map(function (_ref9) {
-          var _ref0 = _slicedToArray(_ref9, 2),
-            layerName = _ref0[0],
-            editConfig = _ref0[1];
+      var editLayers = Object.entries(this.props.editConfigs).map(function (_ref9) {
+        var _ref0 = _slicedToArray(_ref9, 2),
+          wmsName = _ref0[0],
+          serviceConfigs = _ref0[1];
+        return Object.entries(serviceConfigs).map(function (_ref1) {
+          var _ref10 = _slicedToArray(_ref1, 2),
+            layerName = _ref10[0],
+            editConfig = _ref10[1];
           var match = LayerUtils.searchLayer(_this2.props.layers, 'wms_name', wmsName, 'name', layerName);
           var layerTitle = layerName;
           if (match) {
-            var _ref1, _ref10, _match$layer$translat, _match$layer$translat2, _match$sublayer;
-            layerTitle = (_ref1 = (_ref10 = (_match$layer$translat = (_match$layer$translat2 = match.layer.translations) === null || _match$layer$translat2 === void 0 || (_match$layer$translat2 = _match$layer$translat2.layertree) === null || _match$layer$translat2 === void 0 ? void 0 : _match$layer$translat2[layerName]) !== null && _match$layer$translat !== void 0 ? _match$layer$translat : editConfig.layerTitle) !== null && _ref10 !== void 0 ? _ref10 : match === null || match === void 0 || (_match$sublayer = match.sublayer) === null || _match$sublayer === void 0 ? void 0 : _match$sublayer.title) !== null && _ref1 !== void 0 ? _ref1 : layerName;
+            var _ref11, _ref12, _match$layer$translat, _match$layer$translat2, _match$sublayer;
+            layerTitle = (_ref11 = (_ref12 = (_match$layer$translat = (_match$layer$translat2 = match.layer.translations) === null || _match$layer$translat2 === void 0 || (_match$layer$translat2 = _match$layer$translat2.layertree) === null || _match$layer$translat2 === void 0 ? void 0 : _match$layer$translat2[layerName]) !== null && _match$layer$translat !== void 0 ? _match$layer$translat : editConfig.layerTitle) !== null && _ref12 !== void 0 ? _ref12 : match === null || match === void 0 || (_match$sublayer = match.sublayer) === null || _match$sublayer === void 0 ? void 0 : _match$sublayer.title) !== null && _ref11 !== void 0 ? _ref11 : layerName;
           } else {
-            var _this2$props$layers$f, _ref11, _translations$layertr, _translations$layertr2;
+            var _this2$props$layers$f, _ref13, _translations$layertr, _translations$layertr2;
             // Note: geometry-less tables are filtered from the theme sublayers
             var translations = (_this2$props$layers$f = _this2.props.layers.find(function (layer) {
               return layer.wms_name === wmsName;
             })) === null || _this2$props$layers$f === void 0 ? void 0 : _this2$props$layers$f.translations;
-            layerTitle = (_ref11 = (_translations$layertr = translations === null || translations === void 0 || (_translations$layertr2 = translations.layertree) === null || _translations$layertr2 === void 0 ? void 0 : _translations$layertr2[layerName]) !== null && _translations$layertr !== void 0 ? _translations$layertr : editConfig.layerTitle) !== null && _ref11 !== void 0 ? _ref11 : layerName;
+            layerTitle = (_ref13 = (_translations$layertr = translations === null || translations === void 0 || (_translations$layertr2 = translations.layertree) === null || _translations$layertr2 === void 0 ? void 0 : _translations$layertr2[layerName]) !== null && _translations$layertr !== void 0 ? _translations$layertr : editConfig.layerTitle) !== null && _ref13 !== void 0 ? _ref13 : layerName;
           }
           return {
             value: wmsName + "#" + layerName,
@@ -979,9 +1124,23 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
       }).flat().filter(Boolean).sort(function (a, b) {
         return a.title.localeCompare(b.title);
       });
+      var pickButtons = [{
+        key: 'Point',
+        icon: 'pick_point',
+        title: LocaleUtils.tr("attribtable.selectatpoint")
+      }, {
+        key: 'Polygon',
+        icon: 'pick_region',
+        title: LocaleUtils.tr("attribtable.selectinregion")
+      }];
       return /*#__PURE__*/React.createElement("div", {
         className: "AttributeTable"
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement(MapSelection, {
+        active: this.state.selectMode !== null,
+        geomType: this.state.selectMode,
+        geometry: this.state.selectionGeom,
+        geometryChanged: this.selectFeatures
+      }), /*#__PURE__*/React.createElement("div", {
         className: "attribtable-toolbar"
       }, this.props.showLayerSelection ? /*#__PURE__*/React.createElement(ComboBox, {
         disabled: loading || editing,
@@ -1022,7 +1181,12 @@ var AttributeTableWidget = /*#__PURE__*/function (_React$Component) {
         title: LocaleUtils.tr("attribtable.zoomtoselection")
       }, /*#__PURE__*/React.createElement(Icon, {
         icon: "search"
-      })), showEditButton ? /*#__PURE__*/React.createElement("button", {
+      })), /*#__PURE__*/React.createElement(ButtonBar, {
+        active: this.state.selectMode,
+        buttons: pickButtons,
+        disabled: nolayer,
+        onClick: this.setSelectMode
+      }), showEditButton ? /*#__PURE__*/React.createElement("button", {
         className: "button",
         disabled: layerChanged || editing || Object.keys(this.state.selectedFeatures).length !== 1,
         onClick: this.switchToFormEditMode,
@@ -1125,7 +1289,6 @@ _defineProperty(AttributeTableWidget, "defaultState", {
   curEditConfig: null,
   curFields: null,
   features: [],
-  allFeatures: null,
   totFeatureCount: 0,
   selectedFeatures: {},
   hoveredFeature: null,
@@ -1141,7 +1304,10 @@ _defineProperty(AttributeTableWidget, "defaultState", {
   deleteTask: null,
   confirmDelete: false,
   limitToExtent: false,
-  captchaResponse: ''
+  captchaResponse: '',
+  selectMode: null,
+  selectionGeom: null,
+  selectedOnly: false
 });
 export default connect(function (state) {
   return {