qwc2 2026.7.18 → 2026.7.29

package/components/IdentifyViewer.js

@@ -37,7 +37,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import axios from 'axios';
 import clone from 'clone';
-import DOMPurify from 'dompurify';
 import FileSaver from 'file-saver';
 import JSZip from 'jszip';
 import isEmpty from 'lodash.isempty';
@@ -1164,12 +1163,7 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
       return _this.parsedContent(text);
     });
     _defineProperty(_this, "parsedContent", function (text) {
-      text = DOMPurify.sanitize(text, {
-        ADD_ATTR: ['target'],
-        ADD_TAGS: ["iframe"],
-        FORCE_BODY: true,
-        ALLOW_UNKNOWN_PROTOCOLS: true
-      }).replace('&#10;', '<br />');
+      text = MiscUtils.sanitizeHtml(text).replace('&#10;', '<br />');
       var options = {
         replace: function replace(node) {
           if (node.name === "a") {

package/components/LayerInfoWindow.js

@@ -22,7 +22,6 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 import React from 'react';
 import { connect } from 'react-redux';
-import DOMPurify from 'dompurify';
 import PropTypes from 'prop-types';
 import { setActiveLayerInfo } from '../actions/layerinfo';
 import ResizeableWindow from '../components/ResizeableWindow';
@@ -45,7 +44,7 @@ var LayerInfoWindow = /*#__PURE__*/function (_React$Component) {
       if (content) {
         return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, title, ":"), html ? /*#__PURE__*/React.createElement("td", {
           dangerouslySetInnerHTML: {
-            __html: MiscUtils.addLinkAnchors(DOMPurify.sanitize(content))
+            __html: MiscUtils.addLinkAnchors(MiscUtils.sanitizeHtml(content))
           }
         }) : /*#__PURE__*/React.createElement("td", null, content));
       }

package/components/LocationRecorder.js

@@ -45,7 +45,7 @@ var LocationRecorder = /*#__PURE__*/function (_React$Component) {
       } 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
+        // Re-add overlay to map, removed by setActive(false), to ensure traced feature is visible
         _this.props.drawInteraction.getOverlay().setMap(_this.props.map);
         _this.setState({
           recording: true

package/components/PickFeature.js

@@ -94,7 +94,7 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
         };
         if (newState.pendingQueries === 0) {
           if (newState.pickResults.length === 1) {
-            _this.props.featurePicked(newState.pickResults[0].layer, newState.pickResults[0].feature, newState.pickResults[0].mapName);
+            _this.props.featurePicked(newState.pickResults[0].layer, newState.pickResults[0].feature, newState.pickResults[0].mapName, state.mapPos);
             newState.pickResults = null;
             newState.pickGeom = null;
           } else if (newState.pickResults.length === 0) {
@@ -237,6 +237,7 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
           return {
             pickResults: pickResults,
             clickPos: clickPos,
+            mapPos: [maxX, maxY],
             pendingQueries: queryWmsLayers.length,
             reqId: reqId
           };
@@ -261,7 +262,7 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
           return /*#__PURE__*/React.createElement("div", {
             key: key,
             onClick: function onClick() {
-              return _this3.props.featurePicked(entry.layer, entry.feature, entry.mapName);
+              return _this3.props.featurePicked(entry.layer, entry.feature, entry.mapName, _this3.state.mapPos);
             },
             onMouseOut: function onMouseOut() {
               return _this3.clearHighlight(key, entry.feature);
@@ -330,6 +331,7 @@ _defineProperty(PickFeature, "defaultState", {
   pickGeom: null,
   pickResults: null,
   clickPos: null,
+  mapPos: null,
   highlightedFeature: null,
   pendingQueries: 0,
   reqId: null

package/components/ResizeableWindow.js

@@ -319,7 +319,7 @@ var ResizeableWindow = /*#__PURE__*/function (_React$Component) {
       }, _this.renderTitleBar(), /*#__PURE__*/React.createElement("div", {
         className: "resizeable-window-body"
       }, _this.portalNode ? /*#__PURE__*/React.createElement("div", {
-        className: "resizeable-window-portal-container"
+        className: "resizeable-window-portal-container resizeable-window-portal-container-detached"
       }, /*#__PURE__*/React.createElement(portals.OutPortal, {
         node: _this.portalNode
       })) : _this.props.children)), _this.state.externalWindow.document.body);

package/components/SearchBox.js

@@ -36,7 +36,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import axios from 'axios';
 import classnames from 'classnames';
-import DOMPurify from 'dompurify';
 import isEmpty from 'lodash.isempty';
 import pointInPolygon from 'point-in-polygon';
 import polygonIntersectTest from 'polygon-intersect-test';
@@ -410,7 +409,7 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       }) : null, /*#__PURE__*/React.createElement("span", {
         className: "searchbox-result-label",
         dangerouslySetInnerHTML: {
-          __html: DOMPurify.sanitize(result.text).replace(/<br\s*\/>/ig, ' ')
+          __html: MiscUtils.sanitizeHtml(result.text).replace(/<br\s*\/>/ig, ' ')
         },
         title: (_result$label = result.label) !== null && _result$label !== void 0 ? _result$label : result.text
       }), result.externalLink ? /*#__PURE__*/React.createElement(Icon, {
@@ -468,7 +467,7 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       }) : null, /*#__PURE__*/React.createElement("span", {
         className: "searchbox-result-label",
         dangerouslySetInnerHTML: {
-          __html: DOMPurify.sanitize(result.text).replace(/<br\s*\/>/ig, ' ')
+          __html: MiscUtils.sanitizeHtml(result.text).replace(/<br\s*\/>/ig, ' ')
         },
         title: (_result$label3 = result.label) !== null && _result$label3 !== void 0 ? _result$label3 : result.text
       }), result.theme && addThemes ? /*#__PURE__*/React.createElement(Icon, {
@@ -501,7 +500,7 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       }) : null), _this.state.activeLayerInfo === key ? /*#__PURE__*/React.createElement("div", {
         className: "searchbox-result-abstract",
         dangerouslySetInnerHTML: {
-          __html: MiscUtils.addLinkAnchors(DOMPurify.sanitize(((_result$layer = result.layer) === null || _result$layer === void 0 ? void 0 : _result$layer["abstract"]) || "")) || LocaleUtils.tr("search.nodescription")
+          __html: MiscUtils.addLinkAnchors(MiscUtils.sanitizeHtml(((_result$layer = result.layer) === null || _result$layer === void 0 ? void 0 : _result$layer["abstract"]) || "")) || LocaleUtils.tr("search.nodescription")
         },
         disabled: true,
         key: key + ":abstract",
@@ -533,13 +532,14 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React.createElement("span", {
         className: "searchbox-result-label",
         dangerouslySetInnerHTML: {
-          __html: DOMPurify.sanitize(result.text).replace(/<br\s*\/>/ig, ' ')
+          __html: MiscUtils.sanitizeHtml(result.text).replace(/<br\s*\/>/ig, ' ')
         },
         title: (_result$label5 = result.label) !== null && _result$label5 !== void 0 ? _result$label5 : result.text
       }), result.theme && addThemes ? /*#__PURE__*/React.createElement(Icon, {
         icon: "plus",
         onClick: function onClick(ev) {
-          return _this.addThemeLayers(result.layer);
+          MiscUtils.killEvent(ev);
+          _this.addThemeLayers(result.layer);
         },
         title: LocaleUtils.tr("themeswitcher.addtotheme")
       }) : null);

package/components/ServiceInfoWindow.js

@@ -21,10 +21,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  */
 
 import React from 'react';
-import { connect } from 'react-redux';
-import DOMPurify from 'dompurify';
 import PropTypes from 'prop-types';
-import { setActiveServiceInfo } from '../actions/serviceinfo';
 import ResizeableWindow from '../components/ResizeableWindow';
 import LocaleUtils from '../utils/LocaleUtils';
 import MiscUtils from '../utils/MiscUtils';
@@ -42,15 +39,12 @@ var ServiceInfoWindow = /*#__PURE__*/function (_React$Component) {
       if (content) {
         return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, title, ":"), html ? /*#__PURE__*/React.createElement("td", {
           dangerouslySetInnerHTML: {
-            __html: MiscUtils.addLinkAnchors(DOMPurify.sanitize(content))
+            __html: MiscUtils.addLinkAnchors(MiscUtils.sanitizeHtml(content))
           }
         }) : /*#__PURE__*/React.createElement("td", null, content));
       }
       return null;
     });
-    _defineProperty(_this, "onClose", function () {
-      _this.props.setActiveServiceInfo(null);
-    });
     return _this;
   }
   _inherits(ServiceInfoWindow, _React$Component);
@@ -82,7 +76,7 @@ var ServiceInfoWindow = /*#__PURE__*/function (_React$Component) {
         initialX: this.props.layerInfoGeometry.initialX,
         initialY: this.props.layerInfoGeometry.initialY,
         initiallyDocked: this.props.layerInfoGeometry.initiallyDocked,
-        onClose: this.onClose,
+        onClose: this.props.onClose,
         title: LocaleUtils.tr("serviceinfo.title")
       }, /*#__PURE__*/React.createElement("div", {
         className: "service-info-window-body"
@@ -98,14 +92,7 @@ var ServiceInfoWindow = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 _defineProperty(ServiceInfoWindow, "propTypes", {
   layerInfoGeometry: PropTypes.object,
-  service: PropTypes.object,
-  setActiveServiceInfo: PropTypes.func
+  onClose: PropTypes.func,
+  service: PropTypes.object
 });
-var selector = function selector(state) {
-  return {
-    service: state.serviceinfo.service
-  };
-};
-export default connect(selector, {
-  setActiveServiceInfo: setActiveServiceInfo
-})(ServiceInfoWindow);
+export default ServiceInfoWindow;

package/components/ThemeList.js

@@ -29,7 +29,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import axios from 'axios';
 import { remove as removeDiacritics } from 'diacritics';
-import DOMPurify from 'dompurify';
 import isEmpty from 'lodash.isempty';
 import PropTypes from 'prop-types';
 import { setActiveLayerInfo } from '../actions/layerinfo';
@@ -180,7 +179,7 @@ var ThemeList = /*#__PURE__*/function (_React$Component) {
         }, item.description ? /*#__PURE__*/React.createElement("div", {
           className: "theme-item-description",
           dangerouslySetInnerHTML: {
-            __html: DOMPurify.sanitize(item.description)
+            __html: MiscUtils.sanitizeHtml(item.description)
           }
         }) : null, /*#__PURE__*/React.createElement("img", {
           className: "theme-item-thumbnail",

package/components/map3d/Map3D.js

@@ -148,6 +148,8 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
         zoomToObject: function zoomToObject(objectId) {},
         objectIsVisible: function objectIsVisible(objectId) {},
         objectContainsPoints: function objectContainsPoints(object) {},
+        addObjectAddedListener: function addObjectAddedListener(callback) {},
+        removeObjectAddedListener: function removeObjectAddedListener(callback) {},
         getMap: function getMap() {},
         computeBoundsTree: function computeBoundsTree(object) {},
         setViewToExtent: function setViewToExtent(bounds, angle) {},
@@ -384,6 +386,7 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
         }
         _this2.computeBoundsTree(scene);
         _this2.instance.notifyChange(tiles);
+        _this2.notifyObjectAdded(scene);
       });
       // Show/hide labels when tile visibility changes
       tiles.tiles.addEventListener('tile-visibility-change', function (_ref3) {
@@ -394,6 +397,9 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
           l.labelObject.visible = visible;
           l.labelObject.element.style.display = visible ? 'initial' : 'none';
         });
+        if (visible) {
+          _this2.notifyObjectAdded(scene);
+        }
       });
       tiles.castShadow = true;
       tiles.receiveShadow = true;
@@ -473,6 +479,7 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
         });
       } else {
         _this2.sceneObjectGroup.add(object);
+        _this2.notifyObjectAdded(object);
         callback === null || callback === void 0 || callback();
       }
       _this2.objectMap[objectId] = object;
@@ -583,7 +590,7 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
       var changed = false;
       if (options.visibility !== prevOptions.visibility || options.opacity !== (prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.opacity)) {
         var _objectTree$options$p2;
-        // Visibile if object is visibile and parents also
+        // Visible if object is visible and parents also
         var isVisible = options.opacity > 0 && options.visibility;
         for (var curId = options.parent; isVisible && curId !== undefined; curId = objectTree[curId].parent) {
           isVisible && (isVisible = objectTree[curId].visibility);
@@ -647,6 +654,11 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
         }
       });
     });
+    _defineProperty(_this2, "notifyObjectAdded", function (obj) {
+      _this2.objectAddedListeners.forEach(function (listener) {
+        return listener(obj);
+      });
+    });
     _defineProperty(_this2, "loadTilesetStyle", function (objectId, url) {
       var applyTilesetStyle = function applyTilesetStyle(styleurl) {
         var tiles3d = _this2.objectMap[objectId];
@@ -690,7 +702,7 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
       var objectTree = _this2.state.sceneContext.objectTree;
       var options = objectTree[objectId];
       var isVisible = options.opacity > 0 && options.visibility;
-      for (var curId = options.parent; isVisible && curId !== undefined; curId = objectTree[curId].parent) {
+      for (var curId = options.parent; isVisible && curId !== undefined && objectTree[curId]; curId = objectTree[curId].parent) {
         isVisible && (isVisible = objectTree[curId].visibility);
       }
       return isVisible;
@@ -1302,6 +1314,7 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
     _this2.sceneObjectGroup = null;
     _this2.objectMap = {};
     _this2.tilesetStyles = {};
+    _this2.objectAddedListeners = [];
     _this2.state.sceneContext.eventDispatcher = new EventDispatcher();
     _this2.state.sceneContext.addLayer = _this2.addLayer;
     _this2.state.sceneContext.getLayer = _this2.getLayer;
@@ -1314,6 +1327,14 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
     _this2.state.sceneContext.getSceneObject = _this2.getSceneObject;
     _this2.state.sceneContext.removeSceneObject = _this2.removeSceneObject;
     _this2.state.sceneContext.updateSceneObject = _this2.updateSceneObject;
+    _this2.state.sceneContext.addObjectAddedListener = function (callback) {
+      return _this2.objectAddedListeners.push(callback);
+    };
+    _this2.state.sceneContext.removeObjectAddedListener = function (callback) {
+      _this2.objectAddedListeners = _this2.objectAddedListeners.filter(function (cb) {
+        return cb !== callback;
+      });
+    };
     _this2.state.sceneContext.zoomToObject = _this2.zoomToObject;
     _this2.state.sceneContext.objectIsVisible = _this2.objectIsVisible;
     _this2.state.sceneContext.objectContainsPoints = _this2.objectContainsPoints;

package/components/map3d/utils/OrbitControls3D.js

@@ -79,12 +79,13 @@ var OrbitControls3D = /*#__PURE__*/function (_MapControls) {
     key: "disconnect",
     value: function disconnect() {
       this.animationId = null;
-      _superPropGet(OrbitControls3D, "disconnect", this, 3)([]);
       this.enabled = false;
       this.sceneContext.scene.view.setControls(null);
       this.domElement.removeEventListener('pointerdown', this.stopAnimations);
       this.domElement.removeEventListener('wheel', this.stopAnimations);
       this.removeEventListener('change', this.updateControlsTarget);
+      _superPropGet(OrbitControls3D, "disconnect", this, 3)([]);
+      this.domElement = null;
     }
   }, {
     key: "setView",

package/components/style/ResizeableWindow.css

@@ -16,6 +16,16 @@ div.resizeable-window-portal-container > div {
     height: 100%;
 }
 
+div.resizeable-window-portal-container-detached {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 2.5em;
+    padding: 0.25em;
+    background-color: var(--container-bg-color);
+}
+
 div.resizeable-window-contents {
     display: flex;
     flex-direction: column;

package/components/widgets/ColorButton.js

@@ -29,6 +29,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { ColorPicker } from '@vtaits/react-color-picker';
 import '@vtaits/react-color-picker/index.css';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import MiscUtils from '../../utils/MiscUtils';
 import './style/ColorButton.css';
@@ -41,26 +42,36 @@ var ColorButton = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, ColorButton);
     _this = _callSuper(this, ColorButton, [props]);
     _defineProperty(_this, "state", {
-      colors: defaultColors
+      colors: defaultColors,
+      pickerPos: null,
+      hexStr: null
     });
     _defineProperty(_this, "togglePicker", function (ev) {
-      if (!_this.state.pickerVisible) {
-        document.addEventListener('click', _this.checkClosePicker);
-      } else {
-        document.removeEventListener('click', _this.checkClosePicker);
+      if (_this.menuContainer) {
+        // Should not happen...
+        _this.menuContainer.parentElement.removeChild(_this.menuContainer);
+        _this.menuContainer = null;
       }
-      ev.stopPropagation();
-      _this.setState(function (state) {
-        return {
-          hexStr: null,
-          pickerVisible: !state.pickerVisible
-        };
+      _this.menuContainer = ev.view.document.createElement("div");
+      _this.menuContainer.className = "colorbutton-picker-container";
+      ev.view.document.body.appendChild(_this.menuContainer);
+      _this.menuContainer.addEventListener('click', function (ev2) {
+        if (ev2.currentTarget === ev2.target) {
+          _this.setState({
+            pickerPos: null,
+            hexStr: null
+          }, function () {
+            _this.menuContainer.parentElement.removeChild(_this.menuContainer);
+            _this.menuContainer = null;
+          });
+        }
       });
-    });
-    _defineProperty(_this, "checkClosePicker", function (ev) {
-      if (_this.pickerEl && !_this.pickerEl.contains(ev.target)) {
-        _this.togglePicker(ev);
-      }
+      var rect = ev.currentTarget.getBoundingClientRect();
+      _this.setState({
+        hexStr: null,
+        pickerPos: [rect.left + 0.5 * rect.width, rect.bottom]
+      });
+      ev.stopPropagation();
     });
     _defineProperty(_this, "selectColor", function (idx) {
       _this.setState({
@@ -99,11 +110,7 @@ var ColorButton = /*#__PURE__*/function (_React$Component) {
       var newColor = [].concat(_toConsumableArray(_this.props.color.slice(0, 3)), [parseFloat(alpha)]);
       _this.props.onColorChanged(newColor);
     });
-    _this.state = {
-      pickerVisible: false,
-      hexStr: null
-    };
-    _this.pickerEl = null;
+    _this.menuContainer = null;
     _this.state.colors = props.defaultColors;
     return _this;
   }
@@ -112,10 +119,13 @@ var ColorButton = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var pickerStyle = {
-        visibility: this.state.pickerVisible ? 'visible' : 'hidden'
-      };
       var curColor = this.props.color;
+      var pickerStyle = function pickerStyle() {
+        return {
+          left: "calc(".concat(_this2.state.pickerPos[0], "px - 6.5em)"),
+          top: "calc(".concat(_this2.state.pickerPos[1], "px + 0.7em)")
+        };
+      };
       return /*#__PURE__*/React.createElement("div", {
         className: "ColorButton"
       }, /*#__PURE__*/React.createElement("div", {
@@ -127,12 +137,9 @@ var ColorButton = /*#__PURE__*/function (_React$Component) {
         style: {
           backgroundColor: this.cssColor(curColor)
         }
-      })), /*#__PURE__*/React.createElement("div", {
+      })), this.state.pickerPos ? /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
         className: "colorbutton-picker",
-        ref: function ref(el) {
-          _this2.pickerEl = el;
-        },
-        style: pickerStyle
+        style: pickerStyle()
       }, /*#__PURE__*/React.createElement("div", {
         className: "colorbutton-picker-icons"
       }, this.state.colors.map(function (color, idx) {
@@ -156,6 +163,7 @@ var ColorButton = /*#__PURE__*/function (_React$Component) {
         className: "colorbutton-picker-spectrum",
         onDrag: this.changeColor,
         saturationHeight: 150,
+        saturationWidth: null,
         value: this.cssColorRGB(curColor)
       }), /*#__PURE__*/React.createElement("div", {
         className: "colorbutton-picker-input controlgroup"
@@ -182,7 +190,7 @@ var ColorButton = /*#__PURE__*/function (_React$Component) {
         step: "0.1",
         type: "range",
         value: curColor[3]
-      }))) : null)));
+      }))) : null)), this.menuContainer) : null);
     }
   }, {
     key: "cssColor",

package/components/widgets/LayerCatalogWidget.js

@@ -45,10 +45,10 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
       filteredCatalog: null,
       filter: ""
     });
-    _defineProperty(_this, "entryClicked", function (entry, path) {
+    _defineProperty(_this, "entryClicked", function (entry, path, asGroup) {
       if (entry.type || entry.resource) {
         var _entry$resource;
-        if (entry.asGroup === true && ((_entry$resource = entry.resource) !== null && _entry$resource !== void 0 ? _entry$resource : entry.type).startsWith("wms")) {
+        if (asGroup === true && ((_entry$resource = entry.resource) !== null && _entry$resource !== void 0 ? _entry$resource : entry.type).startsWith("wms")) {
           if (!isEmpty(entry.sublayers) && entry.resource) {
             _this.checkAddGroup(entry);
           } else {
@@ -165,7 +165,7 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
       var groupUrl = stripQuery(resource.url);
       var _collectSublayers = function collectSublayers(entry) {
         var _entry$resource2;
-        var entryParams = LayerUtils.splitLayerUrlParam((_entry$resource2 = entry.resource) !== null && _entry$resource2 !== void 0 ? _entry$resource2 : "");
+        var entryParams = LayerUtils.splitLayerUrlParam((_entry$resource2 = entry.resource) !== null && _entry$resource2 !== void 0 ? _entry$resource2 : "", true);
         if (isEmpty(entry.sublayers) && stripQuery(entryParams.url) === groupUrl) {
           sublayers[entryParams.name] = entryParams;
         }
@@ -219,7 +219,12 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
               var _filterSublayers = function filterSublayers(sublayers) {
                 return sublayers.map(function (sublayer) {
                   if (sublayer.name in sublayerSubset) {
-                    return _objectSpread(_objectSpread({}, sublayer), sublayerSubset[sublayer.name]);
+                    var _sublayerSubset$subla, _sublayerSubset$subla2;
+                    return _objectSpread(_objectSpread(_objectSpread({}, sublayer), sublayerSubset[sublayer.name]), {}, {
+                      visibility: sublayer.visibility,
+                      opacity: (_sublayerSubset$subla = sublayerSubset[sublayer.name].opacity) !== null && _sublayerSubset$subla !== void 0 ? _sublayerSubset$subla : sublayer.opacity,
+                      style: (_sublayerSubset$subla2 = sublayerSubset[sublayer.name].style) !== null && _sublayerSubset$subla2 !== void 0 ? _sublayerSubset$subla2 : sublayer.style
+                    });
                   } else if (sublayer.sublayers) {
                     return _objectSpread(_objectSpread({}, sublayer), {}, {
                       sublayers: _filterSublayers(sublayer.sublayers)
@@ -280,6 +285,7 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
     key: "renderCatalogEntry",
     value: function renderCatalogEntry(entry, path) {
       var _this2 = this,
+        _entry$asGroup,
         _ref2,
         _entry$resource3;
       var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -291,6 +297,7 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
       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;
+      var asGroup = (_entry$asGroup = entry.asGroup) !== null && _entry$asGroup !== void 0 ? _entry$asGroup : this.props.defaultAsGroupValue;
       return /*#__PURE__*/React.createElement("div", {
         key: key,
         style: {
@@ -308,13 +315,13 @@ var LayerCatalogWidget = /*#__PURE__*/function (_React$PureComponent) {
       }), /*#__PURE__*/React.createElement("span", {
         className: "layer-catalog-widget-entry-contents",
         onClick: function onClick() {
-          return _this2.entryClicked(entry, path);
+          return _this2.entryClicked(entry, path, asGroup);
         },
         onKeyDown: MiscUtils.checkKeyActivate,
         tabIndex: 0
       }, type ? /*#__PURE__*/React.createElement("span", {
         className: "layer-catalog-widget-entry-service"
-      }, type) : null, entry.title), (hasSublayers && !entry.asGroup || entry.asGroup === "option") && ((_ref2 = (_entry$resource3 = entry.resource) !== null && _entry$resource3 !== void 0 ? _entry$resource3 : entry.type) !== null && _ref2 !== void 0 ? _ref2 : "").startsWith("wms") ? /*#__PURE__*/React.createElement(Icon, {
+      }, type) : null, entry.title), (hasSublayers && !asGroup || asGroup === "option") && ((_ref2 = (_entry$resource3 = entry.resource) !== null && _entry$resource3 !== void 0 ? _entry$resource3 : entry.type) !== null && _ref2 !== void 0 ? _ref2 : "").startsWith("wms") ? /*#__PURE__*/React.createElement(Icon, {
         icon: "group",
         onClick: function onClick() {
           return hasSublayers && entry.resource ? _this2.checkAddGroup(entry) : _this2.checkAddServiceLayer(entry, true);
@@ -379,6 +386,7 @@ _defineProperty(LayerCatalogWidget, "propTypes", {
   addLayer: PropTypes.func,
   catalog: PropTypes.array,
   closeWindow: PropTypes.func,
+  defaultAsGroupValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   layers: PropTypes.array,
   levelBasedIndentSize: PropTypes.bool,
   mapCrs: PropTypes.string,

package/components/widgets/TextInput.js

@@ -24,7 +24,6 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 import React from 'react';
 import classNames from 'classnames';
-import DOMPurify from 'dompurify';
 import PropTypes from 'prop-types';
 import { v4 as uuidv4 } from 'uuid';
 import LocaleUtils from '../../utils/LocaleUtils';
@@ -47,7 +46,7 @@ var TextInput = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this, "setDefaultValue", function (value, valueRev, prevValueRef) {
       if (valueRev > prevValueRef) {
-        _this.input.innerHTML = DOMPurify.sanitize((value || "").replaceAll('\n', _this.props.multiline ? '<br />' : ''));
+        _this.input.innerHTML = MiscUtils.sanitizeHtml((value || "").replaceAll('\n', _this.props.multiline ? '<br />' : ''));
       }
     });
     _defineProperty(_this, "storeRef", function (el) {
@@ -87,7 +86,7 @@ var TextInput = /*#__PURE__*/function (_React$Component) {
       _this.input.innerHTML = clearValue;
     });
     _defineProperty(_this, "onChange", function (ev) {
-      var curValue = DOMPurify.sanitize(ev.target.innerText.replace(/<br\s*\/?>$/, '').replace(/\n$/, ''));
+      var curValue = MiscUtils.sanitizeHtml(ev.target.innerText.replace(/<br\s*\/?>$/, '').replace(/\n$/, ''));
       if (!_this.props.multiline) {
         curValue = curValue.replace('\n', '');
       }
@@ -122,7 +121,7 @@ var TextInput = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this, "onMouseDown", function (ev) {
       var el = document.elementFromPoint(ev.clientX, ev.clientY);
-      if ((el === null || el === void 0 ? void 0 : el.nodeName) === 'A' && ev.ctrlKey) {
+      if ((el === null || el === void 0 ? void 0 : el.nodeName) === 'A' && (_this.props.readOnly || _this.props.disabled || ev.ctrlKey)) {
         window.open(el.href, el.target);
       }
     });
@@ -312,7 +311,7 @@ var TextInput = /*#__PURE__*/function (_React$Component) {
         return {
           value: nextProps.value,
           valueRev: state.valueRev + 1,
-          curValue: DOMPurify.sanitize(nextProps.value || ""),
+          curValue: MiscUtils.sanitizeHtml(nextProps.value || ""),
           changed: false
         };
       }

package/components/widgets/style/ColorButton.css

@@ -21,11 +21,16 @@ div.colorbutton-icon > span {
     display: inline-block;
 }
 
+div.colorbutton-picker-container {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 10000;
+}
 div.colorbutton-picker {
-    visibility: hidden;
     position: absolute;
-    left: -5.5em;
-    top: 2.75em;
     background-color: white;
     box-shadow: 0px 0px 5px rgba(136, 136, 136, 1);
     border-radius: 0.25em;
@@ -91,8 +96,14 @@ div.colorbutton-picker-spectrum {
     display: flex;
     height: 150px;
     margin: 0 0.25em;
+    gap: 0.25em;
+}
+
+div.colorbutton-picker-spectrum > div.react-color-picker__saturation-spectrum {
+    flex: 1 1 auto;
 }
 
 div.colorbutton-picker-spectrum > div.react-color-picker__hue-spectrum {
-    margin-left: 0.25em!important;
+    margin-left: 0!important;
+    flex: 0 0 2em;
 }

package/package.json

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

package/plugins/FeatureForm.js

@@ -203,8 +203,7 @@ var FeatureForm = /*#__PURE__*/function (_React$Component) {
       } else if (this.props.theme !== prevProps.theme || !this.props.enabled && prevProps.enabled) {
         this.clearResults();
       }
-      var isAllowedContext = [null, "FeatureForm"].includes(this.props.currentEditContext);
-      if (this.props.enabled && this.state.pendingRequests === 0 && isAllowedContext && !this.props.editContext.changed) {
+      if (this.props.enabled && this.state.pendingRequests === 0 && !this.props.editContext.changed) {
         var clickPoint = this.queryPoint(prevProps);
         if (clickPoint) {
           this.queryFeatures(clickPoint);

package/plugins/HeightProfile.js

@@ -163,6 +163,10 @@ var HeightProfilePrintDialog_ = /*#__PURE__*/function (_React$PureComponent) {
         HIGHLIGHT_LABELSIZE: highlightParams.labelSizes.join(";"),
         HIGHLIGHT_LABEL_DISTANCE: highlightParams.labelDist.join(";"),
         HIGHLIGHT_LABEL_ROTATION: highlightParams.labelRotations.join(";"),
+        HIGHLIGHT_LABELFRAMEBACKGROUNDCOLOR: highlightParams.labelFrameColors.join(";"),
+        HIGHLIGHT_LABELFRAMEOUTLINECOLOR: highlightParams.labelFrameOutlines.join(";"),
+        HIGHLIGHT_LABELFRAMESIZE: highlightParams.labelFrameSizes.join(";"),
+        HIGHLIGHT_LABELFRAMEOUTLINEWIDTH: highlightParams.labelFrameOutlineWidths.join(";"),
         csrf_token: MiscUtils.getCsrfToken()
       }, exportParams);
       var baseUrl = _this.props.theme.url.split("?")[0];