qwc2 2026.8.14 → 2026.8.21

package/components/IdentifyViewer.js

@@ -414,22 +414,25 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_this, "setHighlightedFeatures", function (features) {
-      if (isEmpty(features) && _this.props.highlightAllResults) {
-        var resultTree = _this.state.selectedLayer !== '' ? _defineProperty({}, _this.state.selectedLayer, _this.state.resultTree[_this.state.selectedLayer]) : _this.state.resultTree;
-        features = Object.values(resultTree).flat();
+      if (isEmpty(features)) {
+        if (!isEmpty(_this.state.tableSelection)) {
+          features = Object.values(_this.state.tableSelection).map(function (sel) {
+            return Object.values(sel);
+          }).flat();
+        } else if (_this.props.highlightAllResults) {
+          var resultTree = _this.state.selectedLayer !== '' ? _defineProperty({}, _this.state.selectedLayer, _this.state.resultTree[_this.state.selectedLayer]) : _this.state.resultTree;
+          features = Object.values(resultTree).flat();
+        }
       }
-      features = (features || []).filter(function (feature) {
-        return feature.type.toLowerCase() === "feature";
-      }).map(function (feature) {
-        var newFeature = _objectSpread(_objectSpread({}, feature), {}, {
-          properties: {}
-        });
-        // Ensure selection style is used
-        delete newFeature.styleName;
-        delete newFeature.styleOptions;
-        return newFeature;
-      });
       if (!isEmpty(features)) {
+        features = features.filter(function (f) {
+          return f.geometry;
+        }).map(function (f) {
+          return {
+            id: f.id,
+            geometry: f.geometry
+          };
+        });
         var layer = {
           id: "__identifyviewerhighlight",
           role: LayerRole.SELECTION
@@ -882,18 +885,30 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
           features: features,
           fields: Object.values(fields),
           hideIdColumn: true,
-          highlightFeatures: _this.setHighlightedFeatures,
+          hoverChanged: _this.setHoveredFeature,
           renderField: _this.renderTableField,
           selectionChanged: function selectionChanged(sel) {
-            return _this.setState(function (state) {
-              return {
-                tableSelection: _objectSpread(_objectSpread({}, state.tableSelection), {}, _defineProperty({}, layerid, sel))
-              };
-            });
+            return _this.setTableSelection(sel, layerid);
           }
         }) : null);
       }));
     });
+    _defineProperty(_this, "setTableSelection", function (sel, layerid) {
+      _this.setState(function (state) {
+        var newTableSelection = _objectSpread({}, state.tableSelection);
+        if (!isEmpty(sel)) {
+          newTableSelection[layerid] = sel;
+        } else {
+          delete newTableSelection[layerid];
+        }
+        return {
+          tableSelection: newTableSelection
+        };
+      });
+    });
+    _defineProperty(_this, "setHoveredFeature", function (feature) {
+      _this.setHighlightedFeatures(feature ? [feature] : null);
+    });
     _defineProperty(_this, "renderTableField", function (feature, field) {
       return _this.attribValue(feature.properties[field.name], field.name, feature.layername, feature);
     });

package/components/QtDesignerForm.js

@@ -244,7 +244,7 @@ var QtDesignerForm = /*#__PURE__*/function (_React$Component) {
       var attr = widget.attribute || {};
       var fieldname = widget.name.replace(/kvrel__/, '').split("__")[isRelWidget ? 1 : 0];
       var field = fields[fieldname];
-      var constraints = (field === null || field === void 0 ? void 0 : field.constraints) || {};
+      var constraints = _objectSpread({}, field === null || field === void 0 ? void 0 : field.constraints);
       constraints.readOnly = _this.props.readOnly || constraints.readOnly === true || String(prop.readOnly) === "true" || String(prop.enabled) === "false" || disabled;
       constraints.required = !constraints.readOnly && (constraints.required || String(prop.required) === "true");
       constraints.placeholder = prop.placeholderText || constraints.placeholder || "";

package/components/ResizeableWindow.js

@@ -451,6 +451,9 @@ var ResizeableWindow = /*#__PURE__*/function (_React$Component) {
         });
         externalWindow.document.querySelector(':root').style.setProperty('--topbar-height', document.querySelector(':root').style.getPropertyValue('--topbar-height'));
         externalWindow.document.querySelector(':root').style.setProperty('--bottombar-height', document.querySelector(':root').style.getPropertyValue('--bottombar-height'));
+        if (_this.props.colorScheme) {
+          externalWindow.document.querySelector(':root').classList.add(_this.props.colorScheme);
+        }
         // Inherit API
         externalWindow.qwc2 = window.qwc2;
         _this.setState(function (state) {
@@ -534,6 +537,11 @@ var ResizeableWindow = /*#__PURE__*/function (_React$Component) {
         this.props.onGeometryChanged(this.state.geometry);
         WINDOW_GEOMETRIES[this.props.title] = this.state.geometry;
       }
+      if (this.props.colorScheme !== prevProps.colorScheme && this.state.externalWindow) {
+        var externalWindowRoot = this.state.externalWindow.document.querySelector(':root');
+        externalWindowRoot.classList.remove(prevProps.colorScheme);
+        externalWindowRoot.classList.add(this.props.colorScheme);
+      }
       if (this.props.splitScreenWhenDocked && (this.props.visible !== prevProps.visible || this.state.geometry !== prevState.geometry || this.state.externalWindow !== prevState.externalWindow)) {
         if (!this.props.visible && prevProps.visible || this.state.geometry.docked === false && prevState.geometry.docked !== false || this.state.geometry.maximized === true && prevState.geometry.maximized !== true || this.state.externalWindow && !prevState.externalWindow) {
           this.props.setSplitScreen(this.id, null, null, false);
@@ -563,6 +571,7 @@ _defineProperty(ResizeableWindow, "propTypes", {
   bottombarHeight: PropTypes.number,
   busyIcon: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  colorScheme: PropTypes.string,
   detachable: PropTypes.bool,
   dockable: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   extraControls: PropTypes.arrayOf(PropTypes.shape({
@@ -628,6 +637,7 @@ _defineProperty(ResizeableWindow, "defaultProps", {
 });
 export default connect(function (state) {
   return {
+    colorScheme: state.localConfig.colorScheme,
     windowStacking: state.windows.stacking,
     topbarHeight: state.windows.topbarHeight,
     bottombarHeight: state.windows.bottombarHeight,

package/components/map3d/style/Map3D.css

@@ -18,6 +18,7 @@ div.map3d-titlebar > span.icon-remove {
 
 div.map3d-map {
     user-select: none;
+    touch-action: none;
     position: absolute;
     left: 0;
     right: 0;

package/components/style/AttributeTableWidget.css

@@ -36,132 +36,12 @@ div.attribtable-toolbar > * {
 
 div.attribtable-contents {
     flex: 1 1 auto;
+    height: 0;
     background-color: var(--list-bg-color);
-    overflow: auto;
     border: 1px solid var(--border-color);
     position: relative;
 }
 
-table.attribtable-table th {
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    padding: 0;
-    background-color: var(--button-bg-color);
-    color: var(--button-text-color);
-    box-shadow: inset -1px 0 0 var(--border-color),
-                inset 0 -1px 0 var(--border-color);
-    overflow: hidden;
-}
-
-table.attribtable-table th:first-child {
-    position: sticky;
-    left: 0;
-    z-index: 3;
-    width: 2em;
-}
-
-table.attribtable-table th > span {
-    margin: 0 0 -1px -1px;
-    padding: 0.25em;
-    display: flex;
-    align-items: center;
-    position: relative;
-}
-
-table.attribtable-table th > span > span.icon {
-    position: absolute;
-    right: 1px;
-    background-color: var(--button-bg-color);
-    flex: 0 0 auto;
-    margin-left: 0.5em;
-}
-
-span.attribtable-table-headername {
-    flex: 1 1 auto;
-    text-align: left;
-    display: flex;
-    align-items: center;
-}
-
-table.attribtable-table tr:nth-child(even) {
-    background-color: var(--list-item-bg-color-even);
-}
-
-table.attribtable-table tr:hover:not(.row-disabled) {
-    background-color: var(--list-item-bg-color-hover);
-    color: var(--list-item-text-color-hover);
-}
-
-table.attribtable-table td:first-child {
-    background-color: var(--button-bg-color);
-    color: var(--button-text-color);
-    align-items: center;
-    padding: 0.25em 0.5em;
-    background-clip: padding-box;
-    position: sticky;
-    left: 0;
-    z-index: 1;
-    width: 2.5em;
-}
-
-table.attribtable-table td {
-    min-width: 2.5em;;
-}
-
-span.attribtable-table-ldraghandle,
-span.attribtable-table-rdraghandle {
-    touch-action: none;
-    display: block;
-    position: absolute;
-    width: 4px;
-    top: 0;
-    bottom: 0;
-    cursor: ew-resize;
-}
-
-span.attribtable-table-ldraghandle {
-    left: -1px;
-}
-
-span.attribtable-table-rdraghandle {
-    right: 0px;
-}
-
-span.attribtable-table-tdraghandle,
-span.attribtable-table-bdraghandle {
-    touch-action: none;
-    display: block;
-    position: absolute;
-    height: 4px;
-    left: 0;
-    right: 0;
-    cursor: ns-resize;
-}
-
-span.attribtable-table-tdraghandle {
-    top: -1px;
-}
-
-span.attribtable-table-bdraghandle {
-    bottom: 0px;
-}
-
-table.attribtable-table {
-    table-layout: fixed;
-    min-width: 100%;
-}
-
-table.attribtable-table td {
-    border: 1px solid var(--border-color);
-    text-align: center;
-    height: 2em;
-}
-
-table.attribtable-table td:first-child {
-    border-left-width: 0;
-}
-
 table.attribtable-table td > input:not([type=checkbox]),
 table.attribtable-table td > select,
 table.attribtable-table td > div.TextInput,
@@ -219,22 +99,3 @@ body.nsresizing, body.nsresizing * {
     cursor: ns-resize!important;
     user-select: none;
 }
-
-div.attribtable-resize-line-vert,
-div.attribtable-resize-line-horiz {
-    position: absolute;
-    z-index: 2;
-    background-color: var(--border-color);
-}
-
-div.attribtable-resize-line-vert {
-    width: 4px;
-    top: 0;
-    bottom: 0;
-}
-
-div.attribtable-resize-line-horiz {
-    height: 4px;
-    left: 0;
-    right: 0;
-}

package/components/widgets/FeaturesTable.js

@@ -41,7 +41,7 @@ import LocaleUtils from '../../utils/LocaleUtils';
 import MiscUtils from '../../utils/MiscUtils';
 import Icon from '../Icon';
 import './style/FeaturesTable.css';
-var FeaturesTable = /*#__PURE__*/function (_React$Component) {
+var FeaturesTable = /*#__PURE__*/function (_React$PureComponent) {
   function FeaturesTable(props) {
     var _this;
     _classCallCheck(this, FeaturesTable);
@@ -49,7 +49,6 @@ var FeaturesTable = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "state", {
       sortField: null,
       sortedFeatures: null,
-      hoveredFeature: null,
       selectedFeatures: {}
     });
     _defineProperty(_this, "sortBy", function (field) {
@@ -122,11 +121,13 @@ var FeaturesTable = /*#__PURE__*/function (_React$Component) {
         var origin = contentsEl.getBoundingClientRect()[resizeCol ? "left" : "top"];
         var resizeLine = document.createElement('div');
         if (resizeCol) {
-          resizeLine.className = 'attribtable-resize-line-vert';
+          resizeLine.className = 'featurestable-resize-line-vert';
           resizeLine.style.left = resize.anchor - origin + contentsEl.scrollLeft + "px";
+          resizeLine.style.height = contentsEl.scrollHeight + "px";
         } else {
-          resizeLine.className = 'attribtable-resize-line-horiz';
+          resizeLine.className = 'featurestable-resize-line-horiz';
           resizeLine.style.top = resize.anchor - origin + contentsEl.scrollTop + "px";
+          resizeLine.style.width = contentsEl.scrollWidth + "px";
         }
         contentsEl.appendChild(resizeLine);
         var resizeDo = resizeCol ? function (event) {
@@ -207,21 +208,20 @@ var FeaturesTable = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_this, "onFeatureHoverIn", function (feature) {
-      _this.setState({
-        hoveredFeature: feature
-      });
+      _this.hoveredFeature = feature;
+      _this.props.hoverChanged(feature);
     });
     _defineProperty(_this, "onFeatureHoverLeave", function (feature) {
-      _this.setState(function (state) {
-        return {
-          hoveredFeature: state.hoveredFeature === feature ? null : state.hoveredFeature
-        };
-      });
+      if (_this.hoveredFeature === feature) {
+        _this.hoveredFeature = null;
+        _this.props.hoverChanged(null);
+      }
     });
     _this.table = null;
+    _this.hoveredFeature = null;
     return _this;
   }
-  _inherits(FeaturesTable, _React$Component);
+  _inherits(FeaturesTable, _React$PureComponent);
   return _createClass(FeaturesTable, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
@@ -245,9 +245,6 @@ var FeaturesTable = /*#__PURE__*/function (_React$Component) {
           return newState;
         });
       }
-      if (this.state.hoveredFeature !== prevState.hoveredFeature || this.state.selectedFeatures !== prevState.selectedFeatures) {
-        this.props.highlightFeatures(this.state.hoveredFeature ? [this.state.hoveredFeature] : Object.values(this.state.selectedFeatures));
-      }
       if (this.state.selectedFeatures !== prevState.selectedFeatures) {
         var _this$props$selection, _this$props;
         (_this$props$selection = (_this$props = this.props).selectionChanged) === null || _this$props$selection === void 0 || _this$props$selection.call(_this$props, this.state.selectedFeatures);
@@ -259,17 +256,18 @@ var FeaturesTable = /*#__PURE__*/function (_React$Component) {
       var _this$state$sortedFea,
         _this3 = this;
       var features = (_this$state$sortedFea = this.state.sortedFeatures) !== null && _this$state$sortedFea !== void 0 ? _this$state$sortedFea : this.props.features;
-      var fields = this.props.fields;
-      var primaryKey = this.props.primaryKey;
-      var showSelColumn = this.props.allowSelect;
-      var showIdColumn = !this.props.hideIdColumn;
+      var fields = this.props.fields.filter(function (field) {
+        return field.id !== _this3.props.primaryKey;
+      });
       var pkfield = this.props.fields.find(function (field) {
-        return field.name === pkfield;
+        return field.id === _this3.props.primaryKey;
       });
-      var className = classNames({
+      var showSelColumn = this.props.allowSelect;
+      var showIdColumn = !this.props.hideIdColumn;
+      var className = classNames(_defineProperty({
         "featurestable": true,
         "featurestable-selectable": showSelColumn
-      });
+      }, this.props.className, !!this.props.className));
       var selectAll = null;
       if (this.props.allowSelectAll) {
         var icon;
@@ -296,14 +294,14 @@ var FeaturesTable = /*#__PURE__*/function (_React$Component) {
         style: this.props.style
       }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, showSelColumn ? /*#__PURE__*/React.createElement("th", null, selectAll) : null, showIdColumn ? /*#__PURE__*/React.createElement("th", {
         onClick: function onClick() {
-          return _this3.sortBy(primaryKey);
+          return _this3.sortBy(pkfield.name);
         },
         onKeyDown: MiscUtils.checkKeyActivate,
         tabIndex: 0,
         title: pkfield.name
       }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
         className: "featurestable-headername"
-      }, pkfield.name), this.renderSortIndicator(primaryKey), this.renderColumnResizeHandle(showSelColumn, 'r'))) : null, fields.map(function (field, idx) {
+      }, pkfield.name), this.renderSortIndicator(pkfield.name), this.renderColumnResizeHandle(showSelColumn, 'r'))) : null, fields.map(function (field, idx) {
         return /*#__PURE__*/React.createElement("th", {
           key: field.id,
           onClick: function onClick() {
@@ -319,11 +317,11 @@ var FeaturesTable = /*#__PURE__*/function (_React$Component) {
           title: LocaleUtils.tr("attribtable.calculatedfield")
         }) : null), _this3.renderSortIndicator(field.id), idx < fields.length - 1 ? _this3.renderColumnResizeHandle(idx + showSelColumn + showIdColumn, 'r') : null));
       }))), /*#__PURE__*/React.createElement("tbody", null, features.map(function (feature, idx) {
-        var _this3$props$rowIsDis, _this3$props;
+        var _this3$props$rowIsDis, _this3$props, _feature$id2;
         var disabled = _this3.props.readOnly || ((_this3$props$rowIsDis = (_this3$props = _this3.props).rowIsDisabled) === null || _this3$props$rowIsDis === void 0 ? void 0 : _this3$props$rowIsDis.call(_this3$props, idx));
         return /*#__PURE__*/React.createElement("tr", {
           className: disabled && !_this3.props.readOnly ? "row-disabled" : "",
-          key: feature.id,
+          key: (_feature$id2 = feature.id) !== null && _feature$id2 !== void 0 ? _feature$id2 : "new",
           onMouseEnter: function onMouseEnter() {
             return _this3.onFeatureHoverIn(feature);
           },
@@ -335,22 +333,23 @@ var FeaturesTable = /*#__PURE__*/function (_React$Component) {
           onClick: function onClick() {
             return _this3.toggleFeatureSelected(feature);
           }
-        }), _this3.renderRowResizeHandle(idx + 1, 'b'))) : null, showIdColumn ? /*#__PURE__*/React.createElement("td", null, feature.id) : null, fields.map(function (field) {
+        }), _this3.renderRowResizeHandle(idx + 1, 'b'))) : null, showIdColumn ? /*#__PURE__*/React.createElement("td", null, _this3.props.renderField(feature, pkfield, idx, disabled)) : null, fields.map(function (field) {
           return /*#__PURE__*/React.createElement("td", {
             key: field.id
-          }, _this3.props.renderField(feature, field));
+          }, _this3.props.renderField(feature, field, idx, disabled));
         }));
       }))));
     }
   }]);
-}(React.Component);
+}(React.PureComponent);
 _defineProperty(FeaturesTable, "propTypes", {
   allowSelect: PropTypes.bool,
   allowSelectAll: PropTypes.bool,
+  className: PropTypes.string,
   features: PropTypes.array,
   fields: PropTypes.array,
   hideIdColumn: PropTypes.bool,
-  highlightFeatures: PropTypes.func,
+  hoverChanged: PropTypes.func,
   onSort: PropTypes.func,
   primaryKey: PropTypes.string,
   readOnly: PropTypes.bool,

package/components/widgets/TextInput.js

@@ -30,7 +30,6 @@ import LocaleUtils from '../../utils/LocaleUtils';
 import MiscUtils from '../../utils/MiscUtils';
 import Icon from '../Icon';
 import './style/TextInput.css';
-export var TextInputInitContext = /*#__PURE__*/React.createContext(null);
 var TextInput = /*#__PURE__*/function (_React$Component) {
   function TextInput(props) {
     var _this;
@@ -51,10 +50,8 @@ var TextInput = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this, "storeRef", function (el) {
       if (el) {
-        var _this$context, _this$context$notifyR;
         _this.input = el;
         _this.setDefaultValue(_this.state.value, _this.state.valueRev, -1);
-        (_this$context = _this.context) === null || _this$context === void 0 || (_this$context$notifyR = _this$context.notifyReady) === null || _this$context$notifyR === void 0 || _this$context$notifyR.call(_this$context, _this.id);
         if (_this.props.focusOnRef) {
           el.focus();
         }
@@ -224,12 +221,6 @@ var TextInput = /*#__PURE__*/function (_React$Component) {
   }
   _inherits(TextInput, _React$Component);
   return _createClass(TextInput, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$context2, _this$context2$regist;
-      (_this$context2 = this.context) === null || _this$context2 === void 0 || (_this$context2$regist = _this$context2.register) === null || _this$context2$regist === void 0 || _this$context2$regist.call(_this$context2, this.id);
-    }
-  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       this.setDefaultValue(this.state.value, this.state.valueRev, prevState.valueRev);
@@ -313,7 +304,6 @@ var TextInput = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 }(React.Component);
-_defineProperty(TextInput, "contextType", TextInputInitContext);
 _defineProperty(TextInput, "propTypes", {
   addLinkAnchors: PropTypes.bool,
   className: PropTypes.string,

package/components/widgets/style/FeaturesTable.css

@@ -3,6 +3,12 @@ div.featurestable-frame {
     overflow: auto;
     border: 1px solid var(--border-color);
     position: relative;
+    height: 100%;
+}
+
+table.featurestable {
+    table-layout: fixed;
+    min-width: 100%;
 }
 
 table.featurestable th {
@@ -12,11 +18,19 @@ table.featurestable th {
     padding: 0;
     background-color: var(--button-bg-color);
     color: var(--button-text-color);
-    box-shadow: inset -1px 0 0 var(--border-color),
-                inset 0 -1px 0 var(--border-color);
+    border: 1px solid var(--border-color);
     overflow: hidden;
 }
 
+table.featurestable th::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border-bottom: 1px solid var(--border-color);
+}
+
 table.featurestable-selectable th:first-child {
     position: sticky;
     left: 0;
@@ -36,7 +50,6 @@ table.featurestable th > span > span.icon {
     position: absolute;
     right: 1px;
     background-color: var(--button-bg-color);
-    height: 100%;
     flex: 0 0 auto;
     margin-left: 0.5em;
 }
@@ -60,17 +73,28 @@ table.featurestable tr:hover:not(.row-disabled) {
 table.featurestable-selectable td:first-child {
     background-color: var(--button-bg-color);
     color: var(--button-text-color);
-    align-items: center;
     padding: 0.25em 0.5em;
-    background-clip: padding-box;
     position: sticky;
     left: 0;
     z-index: 1;
     width: 2.5em;
 }
 
+table.featurestable-selectable th:first-child::after,
+table.featurestable-selectable td:first-child::after {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border-right: 1px solid var(--border-color);
+}
+
 table.featurestable td {
-    min-width: 2.5em;;
+    min-width: 2.5em;
+    border: 1px solid var(--border-color);
+    text-align: center;
+    height: 2em;
 }
 
 span.featurestable-ldraghandle,
@@ -111,23 +135,26 @@ span.featurestable-bdraghandle {
     bottom: 0px;
 }
 
-table.featurestable {
-    table-layout: fixed;
-    min-width: 100%;
+table.featurestable span.icon-checked::before,
+table.featurestable span.icon-unchecked::before,
+table.featurestable span.icon-tristate::before {
+    background-color: white;
 }
 
-table.featurestable td {
-    border: 1px solid var(--border-color);
-    text-align: center;
-    height: 2em;
+
+div.featurestable-resize-line-vert,
+div.featurestable-resize-line-horiz {
+    position: absolute;
+    z-index: 2;
+    background-color: var(--border-color);
 }
 
-table.featurestable td:first-child {
-    border-left-width: 0;
+div.featurestable-resize-line-vert {
+    width: 4px;
+    top: 0;
 }
 
-table.featurestable span.icon-checked::before,
-table.featurestable span.icon-unchecked::before,
-table.featurestable span.icon-tristate::before {
-    background-color: white;
+div.featurestable-resize-line-horiz {
+    height: 4px;
+    left: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "qwc2",
-    "version": "2026.08.14",
+    "version": "2026.08.21",
     "description": "QGIS Web Client",
     "author": "Sourcepole AG",
     "license": "BSD-2-Clause",