qwc2 2026.8.13 → 2026.8.21

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/MenuButton.js

@@ -28,13 +28,15 @@ var MenuButton = /*#__PURE__*/function (_React$Component) {
       popup: false,
       selected: null
     });
-    _defineProperty(_this, "onMenuClicked", function () {
+    _defineProperty(_this, "onMenuClicked", function (ev) {
       if (!_this.props.disabled) {
-        _this.setState(function (state) {
-          return {
-            popup: !state.popup
-          };
-        });
+        if (!_this.state.selected || !ev.currentTarget.querySelector('.menubutton-button-content').contains(ev.target)) {
+          _this.setState(function (state) {
+            return {
+              popup: !state.popup
+            };
+          });
+        }
       }
     });
     _defineProperty(_this, "onButtonClicked", function () {
@@ -44,8 +46,6 @@ var MenuButton = /*#__PURE__*/function (_React$Component) {
         _this.setState({
           popup: false
         });
-      } else {
-        _this.onMenuClicked();
       }
     });
     _defineProperty(_this, "onChildClicked", function (ev, child) {
@@ -111,6 +111,7 @@ var MenuButton = /*#__PURE__*/function (_React$Component) {
         className: classes
       }, /*#__PURE__*/React.createElement("div", {
         className: buttonClassnames,
+        onClick: this.onMenuClicked,
         onKeyDown: MiscUtils.checkKeyActivate,
         ref: function ref(el) {
           _this2.el = el;
@@ -120,8 +121,7 @@ var MenuButton = /*#__PURE__*/function (_React$Component) {
         className: "menubutton-button-content",
         onClick: this.onButtonClicked
       }, buttonContents), /*#__PURE__*/React.createElement("span", {
-        className: "menubotton-button-arrow",
-        onClick: this.onMenuClicked
+        className: "menubotton-button-arrow"
       }, /*#__PURE__*/React.createElement(Icon, {
         icon: "chevron-down"
       })), this.props.tooltip ? /*#__PURE__*/React.createElement("span", {

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/icons/public.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 24 24"
+   enable-background="new 0 0 1000 1000"
+   xml:space="preserve"
+   id="svg10"
+   sodipodi:docname="public.svg"
+   width="24"
+   height="24"
+   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><defs
+   id="defs14" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1172"
+   id="namedview12"
+   showgrid="true"
+   inkscape:zoom="15.104"
+   inkscape:cx="17.545021"
+   inkscape:cy="20.292638"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="g8"
+   inkscape:showpageshadow="2"
+   inkscape:pagecheckerboard="0"
+   inkscape:deskcolor="#d1d1d1"><inkscape:grid
+     type="xygrid"
+     id="grid821"
+     originx="0"
+     originy="0"
+     spacingy="1"
+     spacingx="1"
+     units="px" /></sodipodi:namedview>
+<metadata
+   id="metadata2"> Svg Vector Icons : http://www.onlinewebfonts.com/icon <rdf:RDF><cc:Work
+     rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+       rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata>
+<g
+   id="g8"
+   transform="translate(0,-976)"><path
+     id="path4"
+     style="stroke-width:0.00890515"
+     d="m 12,982.4707 c -1.447087,0 -2.6207179,1.17365 -2.6207179,2.62072 0,0.96214 0.518379,1.80295 1.2911829,2.25851 -1.2543529,0.36766 -2.3875996,1.23637 -2.8337839,2.45879 -0.2319085,-0.0991 -0.4710048,-0.18357 -0.7137728,-0.25355 0.9617368,-0.5705 1.6057828,-1.61736 1.6065213,-2.81675 0,-1.80885 -1.4659728,-3.27483 -3.274832,-3.27483 -1.8088591,0 -3.274832,1.46598 -3.274832,3.27483 0,1.20267 0.6490386,2.2537 1.615044,2.82313 C 1.8004602,990.14614 0.04729618,991.7456 9.5281617e-5,993.9763 -0.00546872,994.27795 0.23322998,994.52786 0.53489228,994.53453 H 10.374303 c 0.300549,-0.007 0.540362,-0.25658 0.534796,-0.55823 -0.02179,-1.02952 -0.400043,-1.92529 -0.9971499,-2.64842 h 4.1910169 c -0.604313,0.72313 -0.990281,1.61891 -1.012066,2.64842 -0.0056,0.30163 0.233135,0.55158 0.534797,0.55823 h 9.839411 c 0.300549,-0.0109 0.540363,-0.2566 0.534797,-0.55823 -0.04732,-2.23657 -1.771795,-3.84033 -3.786192,-4.42113 0.961737,-0.57054 1.607914,-1.61741 1.608652,-2.81675 0,-1.80885 -1.468103,-3.27483 -3.276962,-3.27483 -1.808859,0 -3.274832,1.46598 -3.274832,3.27483 0,1.20261 0.649039,2.25368 1.615044,2.82313 -0.242685,0.0711 -0.483027,0.1573 -0.715903,0.25782 -0.438011,-1.23111 -1.562927,-2.10732 -2.833786,-2.4737 0.76939,-0.4564 1.284202,-1.29473 1.284792,-2.25425 0,-1.44707 -1.173631,-2.62072 -2.620718,-2.62072 z" /></g>
+</svg>

package/package.json

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