qwc2 2026.6.24 → 2026.6.26

package/actions/theme.js

@@ -314,7 +314,9 @@ export function setCurrentTheme(theme, themes) {
   };
 }
 export function setBlankTheme(themes) {
+  var initialExtent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var visibleBgLayer = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   return setCurrentTheme({
     id: ""
-  }, themes);
+  }, themes, false, initialExtent, null, visibleBgLayer);
 }

package/components/SideBar.js

@@ -1,5 +1,4 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _readOnlyError(r) { throw new TypeError('"' + r + '" is read-only'); }
 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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
@@ -28,21 +27,31 @@ import ReactDOM from 'react-dom';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
 import { setCurrentTask } from '../actions/task';
+import { setSplitScreen } from '../actions/windows';
 import Icon from './Icon';
 import { MapContainerPortalContext } from './PluginsContainer';
 import { Swipeable } from './Swipeable';
 import './style/SideBar.css';
 var SideBar = /*#__PURE__*/function (_React$Component) {
   function SideBar(props) {
+    var _props$currentTask;
     var _this;
     _classCallCheck(this, SideBar);
     _this = _callSuper(this, SideBar, [props]);
     _defineProperty(_this, "state", {
-      render: false
+      visible: false,
+      render: false,
+      width: '15em',
+      widthProp: '15em',
+      height: ''
     });
     _defineProperty(_this, "closeClicked", function () {
-      if (_this.props.currentTask.id === _this.props.id) {
+      var _this$props$currentTa;
+      if (_this.props.visible) {
+        _this.props.onHide();
+      } else if (((_this$props$currentTa = _this.props.currentTask) === null || _this$props$currentTa === void 0 ? void 0 : _this$props$currentTa.id) === _this.props.id) {
         _this.props.setCurrentTask(null);
       }
     });
@@ -59,12 +68,16 @@ var SideBar = /*#__PURE__*/function (_React$Component) {
       var startWidth = _this.sidebar.offsetWidth;
       var startMouseX = ev.clientX;
       var sign = _this.props.side === 'left' ? -1 : 1;
+      _this.sidebar.style.transition = 'none';
       var resizeSidebar = function resizeSidebar(event) {
-        _this.sidebar.style.width = startWidth + sign * (startMouseX - event.clientX) + 'px';
+        _this.setState({
+          width: startWidth + sign * (startMouseX - event.clientX) + "px"
+        });
       };
       ev.view.document.body.style.userSelect = 'none';
       ev.view.addEventListener("pointermove", resizeSidebar);
       ev.view.addEventListener("pointerup", function () {
+        _this.sidebar.style.transition = '';
         ev.view.document.body.style.userSelect = '';
         ev.view.removeEventListener("pointermove", resizeSidebar);
       }, {
@@ -75,7 +88,9 @@ var SideBar = /*#__PURE__*/function (_React$Component) {
       var startHeight = _this.sidebar.offsetHeight;
       var startMouseY = ev.clientY;
       var resizeSidebar = function resizeSidebar(event) {
-        _this.sidebar.style.height = Math.max(64, startHeight + (event.clientY - startMouseY)) + 'px';
+        _this.setState({
+          height: Math.max(64, startHeight + (event.clientY - startMouseY)) + "px"
+        });
       };
       ev.view.document.body.style.userSelect = 'none';
       ev.view.addEventListener("pointermove", resizeSidebar);
@@ -86,84 +101,107 @@ var SideBar = /*#__PURE__*/function (_React$Component) {
         once: true
       });
     });
-    _this.state.render = props.currentTask && props.currentTask.id === props.id;
+    _this.state.visible = props.visible || ((_props$currentTask = props.currentTask) === null || _props$currentTask === void 0 ? void 0 : _props$currentTask.id) === props.id;
+    _this.state.render = _this.state.visible;
+    _this.state.width = _this.state.widthProp = props.width;
     _this.sidebar = null;
+    _this.id = uuidv4();
     return _this;
   }
   _inherits(SideBar, _React$Component);
   return _createClass(SideBar, [{
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
-      var newVisible = this.props.currentTask && this.props.currentTask.id === this.props.id;
-      var oldVisible = prevProps.currentTask && prevProps.currentTask.id === prevProps.id;
-      if (newVisible && (!oldVisible || this.props.currentTask.mode !== prevProps.currentTask.mode)) {
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this$props$currentTa2,
+        _prevProps$currentTas,
+        _this2 = this;
+      if (this.state.visible && (!prevState.visible || ((_this$props$currentTa2 = this.props.currentTask) === null || _this$props$currentTa2 === void 0 ? void 0 : _this$props$currentTa2.mode) !== ((_prevProps$currentTas = prevProps.currentTask) === null || _prevProps$currentTas === void 0 ? void 0 : _prevProps$currentTas.mode))) {
         this.setState({
           render: true
         }, function () {
           var _this2$sidebar$queryS, _this2$sidebar$queryS2;
-          // Set focus to first focusable element
-          (_this2$sidebar$queryS = _this2.sidebar.querySelector('[tabindex="0"]')) === null || _this2$sidebar$queryS === void 0 || (_this2$sidebar$queryS2 = _this2$sidebar$queryS.focus) === null || _this2$sidebar$queryS2 === void 0 || _this2$sidebar$queryS2.call(_this2$sidebar$queryS);
+          return (_this2$sidebar$queryS = _this2.sidebar.querySelector('[tabindex="0"]')) === null || _this2$sidebar$queryS === void 0 || (_this2$sidebar$queryS2 = _this2$sidebar$queryS.focus) === null || _this2$sidebar$queryS2 === void 0 ? void 0 : _this2$sidebar$queryS2.call(_this2$sidebar$queryS);
         });
         this.props.onShow(this.props.currentTask.mode);
-      } else if (!newVisible && oldVisible) {
+        if (this.sidebar && this.state.visible && this.props.splitScreen) {
+          this.props.setSplitScreen(this.id, this.props.side, this.sidebar.clientWidth, false);
+        }
+      } else if (!this.state.visible && prevState.visible) {
         this.props.onHide();
         // Hide the element after the transition period (see SideBar.css)
         setTimeout(function () {
-          _this2.setState({
+          return _this2.setState({
             render: false
           });
         }, 300);
+        if (this.props.splitScreen) {
+          this.props.setSplitScreen(this.id, null, null, false);
+        }
       }
       if (!this.props.heightResizeable && prevProps.heightResizeable) {
-        this.sidebar.style.height = '';
+        this.setState({
+          height: ''
+        });
+      }
+      if (this.props.splitScreen && this.state.visible && this.sidebar && this.state.width !== prevState.width) {
+        // Since the sidebar width transition is animated, we cannot measure its width, as it still might be changing
+        // Hence measure the pixel width on a dummy element
+        var div = document.createElement("div");
+        this.sidebar.parentElement.appendChild(div);
+        div.style.width = this.state.width;
+        div.style.minWidth = this.sidebar.style.minWidth;
+        div.style.maxWidth = this.sidebar.style.maxWidth;
+        this.props.setSplitScreen(this.id, this.props.side, div.offsetWidth, false);
+        this.sidebar.parentElement.removeChild(div);
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var visible = this.props.currentTask.id === this.props.id;
-      var render = visible || this.state.render;
       var style = {
-        width: this.props.width,
+        top: this.props.splitScreen ? this.props.topbarHeight + 'px' : undefined,
+        bottom: this.props.splitScreen ? this.props.bottombarHeight + 'px' : undefined,
+        width: this.state.width,
+        height: this.props.splitScreen ? undefined : this.state.height,
         minWidth: this.props.minWidth,
-        zIndex: visible ? 5 : 4
+        maxWidth: this.props.maxWidth,
+        zIndex: this.state.visible ? 5 : 4
       };
       var isLeftSide = this.props.side === "left";
       var classes = classnames({
         "sidebar": true,
-        "sidebar-open": visible,
+        "sidebar-open": this.state.visible,
         "sidebar-left": isLeftSide,
         "sidebar-right": !isLeftSide
       });
       var closeIcon = isLeftSide ? "chevron-left" : "chevron-right";
       var body = null;
       var extra = null;
-      if (render) {
+      if (this.state.visible) {
         body = this.renderRole("body");
         extra = this.renderRole("extra");
       }
-      return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Swipeable, {
+      var result = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Swipeable, {
         delta: 30,
         onSwipedRight: this.closeClicked
       }, /*#__PURE__*/React.createElement("div", {
         className: "".concat(classes, " ").concat(this.props.extraClasses),
         id: this.props.id,
-        inert: !visible,
+        inert: !this.state.visible,
         ref: this.setRef,
         style: style
-      }, /*#__PURE__*/React.createElement("div", {
+      }, this.props.widthResizeable ? /*#__PURE__*/React.createElement("div", {
         className: "sidebar-resize-handle sidebar-resize-handle-" + this.props.side,
         onPointerDown: this.startSidebarResize
-      }), /*#__PURE__*/React.createElement("div", {
+      }) : null, /*#__PURE__*/React.createElement("div", {
         className: "sidebar-titlebar"
-      }, this.state.render ? this.props.extraBeforeContent : null, this.props.icon ? /*#__PURE__*/React.createElement(Icon, {
+      }, this.state.visible ? this.props.extraBeforeContent : null, this.props.icon ? /*#__PURE__*/React.createElement(Icon, {
         className: "sidebar-titlebar-icon",
         icon: this.props.icon,
         size: "large"
       }) : null, /*#__PURE__*/React.createElement("span", {
         className: "sidebar-titlebar-title"
-      }, this.props.title), this.state.render ? this.props.extraTitlebarContent : null, /*#__PURE__*/React.createElement("span", {
+      }, this.props.title), this.state.visible ? this.props.extraTitlebarContent : null, /*#__PURE__*/React.createElement("span", {
         className: "sidebar-titlebar-spacer"
       }), /*#__PURE__*/React.createElement(Icon, {
         className: "sidebar-titlebar-closeicon",
@@ -171,15 +209,31 @@ var SideBar = /*#__PURE__*/function (_React$Component) {
         onClick: this.closeClicked
       })), /*#__PURE__*/React.createElement("div", {
         className: "sidebar-body"
-      }, body), this.props.heightResizeable ? /*#__PURE__*/React.createElement("div", {
+      }, body), this.props.heightResizeable && !this.props.splitScreen ? /*#__PURE__*/React.createElement("div", {
         className: "sidebar-resize-handle-bottom",
         onPointerDown: this.startSidebarBottomResize
-      }) : null)), extra), this.context);
+      }) : null)), extra);
+      return this.props.splitScreen ? result : /*#__PURE__*/ReactDOM.createPortal(result, this.context);
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, state) {
+      var _nextProps$currentTas;
+      var newState = {};
+      if (nextProps.width !== state.widthProp) {
+        newState.widthProp = newState.width = nextProps.width;
+      }
+      var visible = nextProps.visible || ((_nextProps$currentTas = nextProps.currentTask) === null || _nextProps$currentTas === void 0 ? void 0 : _nextProps$currentTas.id) === nextProps.id;
+      if (visible !== state.visible) {
+        newState.visible = visible;
+      }
+      return newState;
     }
   }]);
 }(React.Component);
 _defineProperty(SideBar, "contextType", MapContainerPortalContext);
 _defineProperty(SideBar, "propTypes", {
+  bottombarHeight: PropTypes.number,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   currentTask: PropTypes.object,
   extraBeforeContent: PropTypes.object,
@@ -188,15 +242,22 @@ _defineProperty(SideBar, "propTypes", {
   heightResizeable: PropTypes.bool,
   icon: PropTypes.string,
   id: PropTypes.string.isRequired,
+  maxWidth: PropTypes.string,
   minWidth: PropTypes.string,
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   setCurrentTask: PropTypes.func,
+  setSplitScreen: PropTypes.func,
   side: PropTypes.string,
+  splitScreen: PropTypes.bool,
   title: PropTypes.string,
-  width: PropTypes.string
+  topbarHeight: PropTypes.number,
+  visible: PropTypes.bool,
+  width: PropTypes.string,
+  widthResizeable: PropTypes.bool
 });
 _defineProperty(SideBar, "defaultProps", {
+  widthResizeable: true,
   extraClasses: '',
   onShow: function onShow() {},
   onHide: function onHide() {},
@@ -207,8 +268,11 @@ _defineProperty(SideBar, "defaultProps", {
 });
 export default connect(function (state) {
   return {
-    currentTask: state.task
+    currentTask: state.task,
+    topbarHeight: state.windows.topbarHeight,
+    bottombarHeight: state.windows.bottombarHeight
   };
 }, {
-  setCurrentTask: setCurrentTask
+  setCurrentTask: setCurrentTask,
+  setSplitScreen: setSplitScreen
 })(SideBar);

package/components/StandardApp.js

@@ -166,7 +166,8 @@ var AppContainerComponent = /*#__PURE__*/function (_React$Component) {
           var initialTaskParam = params.task ? JSON.parse(decodeURIComponent(params.task)) : null;
           _this.props.setCurrentTheme(theme, themes, false, initialExtent, layerParams, (_params$bl = params.bl) !== null && _params$bl !== void 0 ? _params$bl : null, state.layers, _this.props.appConfig.themeLayerRestorer, _this.props.appConfig.externalLayerRestorer, initialTaskParam, state.visibilityPreset);
         } else if (ConfigUtils.getConfigProp("dontLoadDefaultTheme")) {
-          _this.props.setBlankTheme(themes);
+          var _params$bl2;
+          _this.props.setBlankTheme(themes, null, (_params$bl2 = params.bl) !== null && _params$bl2 !== void 0 ? _params$bl2 : null);
         } else if (!ConfigUtils.havePlugin("Portal")) {
           _this.props.showNotification("missingdefaulttheme", LocaleUtils.tr("app.missingdefaulttheme", params.t), NotificationType.WARN, true);
         }

package/components/style/SideBar.css

@@ -3,7 +3,7 @@ div.sidebar {
     top: 0;
     max-height: 100%;
     background-color: var(--container-bg-color);
-    transition: transform 0.25s;
+    transition: transform 0.25s, width 0.25s;
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.75);
     display: flex;
     flex-direction: column;

package/package.json

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

package/plugins/SensorThingsTool.js

@@ -231,8 +231,8 @@ var SensorThingsTool = /*#__PURE__*/function (_React$Component) {
        *  }
        */
       currentSensorLocation: null,
-      // automatically add all Datastreams of currently selected Location if true
-      addCurrentLocationDatastreams: false,
+      // automatically add first or all Datastreams of currently selected Location if 'first' or 'all'
+      addCurrentLocationDatastreamsMode: null,
       // show currently selected Location info window if true
       showLocationInfoWindow: false,
       // currently selected Datastreams filter options
@@ -971,7 +971,7 @@ var SensorThingsTool = /*#__PURE__*/function (_React$Component) {
             }
           }, /*#__PURE__*/React.createElement("td", {
             onClickCapture: function onClickCapture() {
-              return _this.addLocation(location);
+              return _this.addBasicLocation(location);
             },
             title: "".concat(location.name, ": ").concat(location.description)
           }, location.name, ": ", location.description), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
@@ -979,7 +979,7 @@ var SensorThingsTool = /*#__PURE__*/function (_React$Component) {
           }, /*#__PURE__*/React.createElement("button", {
             className: "button",
             onClick: function onClick() {
-              return _this.addLocation(location);
+              return _this.addBasicLocation(location);
             },
             title: LocaleUtils.tr("sensorthingstool.addLocation")
           }, /*#__PURE__*/React.createElement(Icon, {
@@ -1032,6 +1032,16 @@ var SensorThingsTool = /*#__PURE__*/function (_React$Component) {
         });
       }
     });
+    _defineProperty(_this, "addBasicLocation", function (location) {
+      // add selected Location
+      _this.addLocation(location);
+      if (_this.props.autoAddFirstDatastream) {
+        // set flag to automatically add first Datastream of selected Location once ready
+        _this.setState({
+          addCurrentLocationDatastreamsMode: 'first'
+        });
+      }
+    });
     _defineProperty(_this, "addFullLocation", function (location) {
       // remove current Datastreams
       _this.removeAllDatastreams();
@@ -1039,7 +1049,7 @@ var SensorThingsTool = /*#__PURE__*/function (_React$Component) {
       _this.addLocation(location);
       // set flag to automatically add all Datastreams of selected Location once ready
       _this.setState({
-        addCurrentLocationDatastreams: true
+        addCurrentLocationDatastreamsMode: 'all'
       });
     });
     _defineProperty(_this, "removeSelectedLocation", function () {
@@ -1129,6 +1139,24 @@ var SensorThingsTool = /*#__PURE__*/function (_React$Component) {
         };
       });
     });
+    _defineProperty(_this, "removeAllLocations", function () {
+      _this.removeAllDatastreams();
+      _this.setState({
+        selectedLocations: {},
+        selectedLocationsOptions: [],
+        currentLocationId: null,
+        currentSensorLocation: null,
+        showLocationInfoWindow: false,
+        currentDatastreamsFilter: {
+          thingId: '-1',
+          sensorId: '-1',
+          observedPropertyId: '-1'
+        },
+        showDatastreamsFilterWindow: false,
+        currentDatastreamId: null,
+        datastreams: {}
+      });
+    });
     _defineProperty(_this, "addSelectedDatastream", function () {
       if (_this.state.currentDatastreamId !== undefined) {
         _this.addDatastream(_this.state.currentDatastreamId);
@@ -1156,8 +1184,37 @@ var SensorThingsTool = /*#__PURE__*/function (_React$Component) {
             // use random color
             color = [Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255)];
           }
+          var periodAdjustment = {};
+          if (_this.props.autoAdjustPeriod.intervalBefore !== undefined) {
+            // find earliest last Observation of all visible Datastreams incl. this one
+            var earliestPeriodEnd = state.datastreams[datastreamId].period.end;
+            state.graph.datastreams.forEach(function (datastream) {
+              if (datastream.observations) {
+                var datastreamInfo = state.datastreams[datastream.id];
+                earliestPeriodEnd = Math.min(datastreamInfo.period.end, earliestPeriodEnd || datastreamInfo.period.end);
+              }
+            });
+            if (earliestPeriodEnd !== null) {
+              periodAdjustment = {
+                // show period from intervalBefore before earliest last Observation up to now
+                x: _objectSpread(_objectSpread({}, state.graph.x), {}, {
+                  min: earliestPeriodEnd - _this.props.autoAdjustPeriod.intervalBefore * 1000,
+                  max: Date.now()
+                }),
+                // NOTE: reset range of y-axes to auto
+                y: _objectSpread(_objectSpread({}, state.graph.y), {}, {
+                  min: null,
+                  max: null
+                }),
+                y2: _objectSpread(_objectSpread({}, state.graph.y2), {}, {
+                  min: null,
+                  max: null
+                })
+              };
+            }
+          }
           return {
-            graph: _objectSpread(_objectSpread({}, state.graph), {}, {
+            graph: _objectSpread(_objectSpread(_objectSpread({}, state.graph), periodAdjustment), {}, {
               datastreams: [].concat(_toConsumableArray(state.graph.datastreams), [{
                 id: datastreamId,
                 observations: null,
@@ -2083,6 +2140,12 @@ var SensorThingsTool = /*#__PURE__*/function (_React$Component) {
         });
       }
     });
+    _defineProperty(_this, "closeMainWindow", function () {
+      if (_this.props.clearAllOnClose) {
+        _this.removeAllLocations();
+      }
+      _this.props.setCurrentTask(null);
+    });
     _defineProperty(_this, "queryAtPoint", function (point) {
       var _this$props$theme$plu;
       _this.setState({
@@ -3022,12 +3085,17 @@ var SensorThingsTool = /*#__PURE__*/function (_React$Component) {
       } else if (prevState.currentSensorLocation && !this.state.currentSensorLocation) {
         this.props.removeLayer("sensorThingsSelection");
       }
-      if (this.state.addCurrentLocationDatastreams && this.state.currentSensorLocation && this.state.currentSensorLocation.id === this.state.currentLocationId) {
-        // add all Datastreams of current Location
-        this.addDatastreams(this.state.currentSensorLocation.datastreams);
+      if (this.state.addCurrentLocationDatastreamsMode !== null && this.state.currentSensorLocation && this.state.currentSensorLocation.id === this.state.currentLocationId) {
+        if (this.state.addCurrentLocationDatastreamsMode === 'first' && this.state.currentSensorLocation.datastreams.length > 0) {
+          // add first Datastream of current Location
+          this.addDatastream(this.state.currentSensorLocation.datastreams[0]);
+        } else {
+          // add all Datastreams of current Location
+          this.addDatastreams(this.state.currentSensorLocation.datastreams);
+        }
         // reset flag
         this.setState({
-          addCurrentLocationDatastreams: false
+          addCurrentLocationDatastreamsMode: null
         });
       }
       if (this.state.currentDatastreamsFilter !== prevState.currentDatastreamsFilter) {
@@ -3085,9 +3153,7 @@ var SensorThingsTool = /*#__PURE__*/function (_React$Component) {
         initialX: 0,
         initialY: 0,
         key: "SensorThingsInfoWindow",
-        onClose: function onClose() {
-          return _this3.props.setCurrentTask(null);
-        },
+        onClose: this.closeMainWindow,
         title: LocaleUtils.tr("sensorthingstool.title"),
         usePortal: false
       }, this.renderBody()), this.renderLocationSelectPopup(), this.renderLocationInfoWindow(), this.renderDatastreamsFilterWindow(), this.renderDatastreamInfoWindow(), this.renderDatastreamTableWindow(), /*#__PURE__*/React.createElement(MapSelection, {
@@ -3108,6 +3174,18 @@ var SensorThingsTool = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 _defineProperty(SensorThingsTool, "propTypes", {
   addLayerFeatures: PropTypes.func,
+  /** Automatically add the first Datastream when selecting a Location in the map. */
+  autoAddFirstDatastream: PropTypes.bool,
+  /** Automatically adjust the visible period when adding a Datastream. Set `null` to disable.
+   * Sets the period begin to `intervalBefore` before the earliest last Observation of all visible Datastreams.
+   * Sets the period end to now.
+   */
+  autoAdjustPeriod: PropTypes.shape({
+    /** Interval in seconds.*/
+    intervalBefore: PropTypes.number
+  }),
+  /** Remove all Locations and Datastreams when closing the main window. */
+  clearAllOnClose: PropTypes.bool,
   currentTask: PropTypes.string,
   map: PropTypes.object,
   /** Map picking tolerance in pixels */
@@ -3133,6 +3211,9 @@ _defineProperty(SensorThingsTool, "propTypes", {
   zoomRectMinSize: PropTypes.object
 });
 _defineProperty(SensorThingsTool, "defaultProps", {
+  autoAddFirstDatastream: false,
+  autoAdjustPeriod: {},
+  clearAllOnClose: false,
   queryTolerance: 16,
   sensorThingsApiUrls: [],
   timeFormats: {

package/plugins/ThemeBrowser.css

@@ -1,5 +1,6 @@
 div.themebrowser-body {
     background-color: var(--list-bg-color);
+    padding: 0.25em;
 }
 
 div.themebrowser-theme-container {
@@ -13,6 +14,7 @@ div.themebrowser-theme-container:not(:last-child) {
 div.themebrowser-theme {
     background-color: var(--button-bg-color);
     color: var(--button-text-color);
+    border-radius: 0.5em;
     font-weight: bold;
     padding: 0 0.5em;
     display: flex;
@@ -65,22 +67,29 @@ div.themebrowser-tree-entry-detailsvisible {
     border-bottom-right-radius: 0;
 }
 
+.themebrowser-tree-entry-plus {
+    transition: transform 0.25s;
+}
+
+.themebrowser-tree-entry-plus-remove {
+    transform: rotate(45deg);
+}
+
 span.themebrowser-tree-entry-title {
-    cursor: pointer;
     padding-left: 0.5em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    flex: 1 1 auto;
 }
 
-span.themebrowser-tree-entry-spacer {
-    flex: 1 1 auto;
-    height: 100%;
+div.themebrowser-tree-entry-transparent > span.themebrowser-tree-entry-title {
+    cursor: ew-resize;
 }
 
-span.themebrowser-tree-entry-arrows {
-    display: none;
+span.themebrowser-tree-entry-opacity {
     cursor: ew-resize;
+    display: none;
 }
 
 span.themebrowser-tree-entry-drag {
@@ -88,8 +97,8 @@ span.themebrowser-tree-entry-drag {
     padding: 0 0.5em;
 }
 
-div.themebrowser-tree-entry:focus > span.themebrowser-tree-entry-arrows,
-div.themebrowser-tree-entry:hover > span.themebrowser-tree-entry-arrows {
+div.themebrowser-tree-entry:focus > span.themebrowser-tree-entry-opacity,
+div.themebrowser-tree-entry:hover > span.themebrowser-tree-entry-opacity {
     display: initial;
 }
 

package/plugins/ThemeBrowser.js

@@ -36,7 +36,7 @@ import { setCurrentTask } from '../actions/task';
 import { setBlankTheme, setCurrentTheme } from '../actions/theme';
 import Icon from '../components/Icon';
 import ImportLayer from '../components/ImportLayer';
-import ResizeableWindow from '../components/ResizeableWindow';
+import SideBar from '../components/SideBar';
 import { Image } from '../components/widgets/Primitives';
 import ConfigUtils from '../utils/ConfigUtils';
 import LayerUtils from '../utils/LayerUtils';
@@ -59,23 +59,9 @@ var ThemeBrowser = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "state", {
       active: false,
       expandedEntries: new ToggleSet(),
-      showDelete: false
-    });
-    _defineProperty(_this, "setRndRef", function (el) {
-      _this.rnd = el;
-      _this.updateWindowSize();
-    });
-    _defineProperty(_this, "updateWindowSize", function () {
-      if (_this.rnd && _this.maxLayerTitleLength !== undefined) {
-        var _sizes$find;
-        var width = _this.maxLayerTitleLength + MiscUtils.convertEmToPx(6.5);
-        var sizes = [200, 300, 500];
-        _this.rnd.updateSize({
-          width: (_sizes$find = sizes.find(function (size) {
-            return size > width;
-          })) !== null && _sizes$find !== void 0 ? _sizes$find : width
-        });
-      }
+      showDelete: false,
+      width: '15em',
+      maxWidth: '50%'
     });
     _defineProperty(_this, "renderThemes", function (group) {
       var _group$items, _group$subdirs;
@@ -103,7 +89,7 @@ var ThemeBrowser = /*#__PURE__*/function (_React$Component) {
           size: "large"
         })) : null);
       });
-      ((_group$subdirs = group.subdirs) !== null && _group$subdirs !== void 0 ? _group$subdirs : []).map(function (subdir) {
+      ((_group$subdirs = group === null || group === void 0 ? void 0 : group.subdirs) !== null && _group$subdirs !== void 0 ? _group$subdirs : []).map(function (subdir) {
         return children.push.apply(children, _toConsumableArray(_this.renderThemes(subdir)));
       });
       return children;
@@ -167,18 +153,20 @@ var ThemeBrowser = /*#__PURE__*/function (_React$Component) {
       var opacity = LayerUtils.computeLayerOpacity(entry);
       var entryClasses = classNames({
         "themebrowser-tree-entry": true,
+        "themebrowser-tree-entry-transparent": entry.visibility && opacity < 255,
         "themebrowser-tree-entry-visible": entry.visibility,
         "themebrowser-tree-entry-inactive": !parentVisibility,
         "themebrowser-tree-entry-detailsvisible": _this.state.expandedEntries.has(layer.id + ":" + entry.name)
       });
+      var plusClasses = classNames({
+        "themebrowser-tree-entry-plus": true,
+        "themebrowser-tree-entry-plus-remove": entry.visibility
+      });
       var entryStyle = {
         backgroundColor: entry.visibility ? "rgb(from var(--border-color) r g b / ".concat(opacity / 255, ")") : '',
         color: entry.visibility && opacity > 96 ? "white" : "var(--border-color)"
       };
-      var spacerStyle = {
-        cursor: entry.opacity < 255 ? 'ew-resize' : ''
-      };
-      _this.maxLayerTitleLength = Math.max(_this.maxLayerTitleLength, _this.measureContext.measureText(entry.title).width + path.length * MiscUtils.convertEmToPx(1));
+      _this.maxLayerTitleLength = Math.max(_this.maxLayerTitleLength, _this.measureContext.measureText(entry.title).width + path.length * MiscUtils.convertEmToPx(1) + MiscUtils.convertEmToPx(6));
       return /*#__PURE__*/React.createElement("div", {
         className: "themebrowser-tree-entry-container",
         "data-id": JSON.stringify({
@@ -197,8 +185,9 @@ var ThemeBrowser = /*#__PURE__*/function (_React$Component) {
         style: entryStyle,
         tabIndex: 0
       }, /*#__PURE__*/React.createElement(Icon, {
-        icon: entry.visibility ? "remove" : "plus",
-        onClick: function onClick() {
+        className: plusClasses,
+        icon: "plus",
+        onPointerDown: function onPointerDown() {
           return _this.toggleEntryVisibility(entry, layer.id, path);
         }
       }), /*#__PURE__*/React.createElement("span", {
@@ -207,16 +196,11 @@ var ThemeBrowser = /*#__PURE__*/function (_React$Component) {
         onPointerDown: function onPointerDown(ev) {
           return _this.toggleEntryExpanded(ev, entry, layer.id, path);
         },
-        tabIndex: 0
-      }, entry.title), /*#__PURE__*/React.createElement("span", {
-        className: "themebrowser-tree-entry-spacer",
-        style: spacerStyle
-      }), /*#__PURE__*/React.createElement(Icon, {
-        className: "themebrowser-tree-entry-arrows",
-        icon: "middle_h"
-      }), /*#__PURE__*/React.createElement("span", {
+        tabIndex: 0,
+        title: entry.title
+      }, entry.title), entry.visibility ? /*#__PURE__*/React.createElement("span", {
         className: "themebrowser-tree-entry-opacity"
-      }), /*#__PURE__*/React.createElement("span", {
+      }, Math.round(opacity / 255 * 100) + "%") : null, /*#__PURE__*/React.createElement("span", {
         className: "themebrowser-tree-entry-drag",
         onKeyDown: function onKeyDown(ev) {
           return _this.onKeySort(ev, layer.id, path);
@@ -313,11 +297,9 @@ var ThemeBrowser = /*#__PURE__*/function (_React$Component) {
         return;
       }
       // Only adjust opacities when dragging from areas other than the opacity arrows icon if entry is not fully opaque
-      if (ev.type === "pointerdown" && entry.opacity === 255 && !ev.target.matches('.themebrowser-tree-entry-arrows')) {
+      if (ev.type === "pointerdown" && entry.opacity === 255 && !ev.target.matches('.themebrowser-tree-entry-opacity')) {
         return;
       }
-      var arrowsEl = ev.currentTarget.getElementsByClassName("themebrowser-tree-entry-arrows")[0];
-      var opacityEl = ev.currentTarget.getElementsByClassName("themebrowser-tree-entry-opacity")[0];
       var startOpacity = LayerUtils.computeLayerOpacity(entry);
       if (ev.type === "keydown" && (ev.key === "ArrowLeft" || ev.key === "ArrowRight")) {
         _this.adjusting = true;
@@ -325,17 +307,12 @@ var ThemeBrowser = /*#__PURE__*/function (_React$Component) {
         var newOpacity = startOpacity;
         var adjustInterval = null;
         var startTimeout = setTimeout(function () {
-          arrowsEl.style.display = 'none';
-          opacityEl.innerText = Math.round(newOpacity / 255 * 100) + "%";
           adjustInterval = setInterval(function () {
             newOpacity = Math.max(0, Math.min(255, newOpacity + delta));
-            opacityEl.innerText = Math.round(newOpacity / 255 * 100) + "%";
             _this.props.changeLayerProperty(layerId, "opacity", newOpacity, path, "children");
           }, 15);
         }, 100);
         ev.view.addEventListener('keyup', function () {
-          arrowsEl.style.display = '';
-          opacityEl.innerText = '';
           clearTimeout(startTimeout);
           clearInterval(adjustInterval);
           _this.adjusting = false;
@@ -348,23 +325,16 @@ var ThemeBrowser = /*#__PURE__*/function (_React$Component) {
         var _newOpacity = startOpacity;
         var computeNewOpacity = function computeNewOpacity(event) {
           _newOpacity = Math.max(0, Math.min(255, startOpacity + (event.clientX - startMouseX)));
-          opacityEl.innerText = Math.round(_newOpacity / 255 * 100) + "%";
           _this.props.changeLayerProperty(layerId, "opacity", _newOpacity, path, "children");
         };
         var resizeOverlay = document.createElement('div');
         resizeOverlay.className = 'themebrowser-resize-overlay';
         ev.view.document.body.appendChild(resizeOverlay);
         ev.view.document.body.style.userSelect = 'none';
-        // ev.view.document.body.style.setProperty('cursor', 'ew-resize', 'important');
-        arrowsEl.style.display = 'none';
-        opacityEl.innerText = Math.round(startOpacity / 255 * 100) + "%";
         ev.view.addEventListener("pointermove", computeNewOpacity);
         ev.view.addEventListener("pointerup", function () {
           ev.view.document.body.removeChild(resizeOverlay);
           ev.view.document.body.style.userSelect = '';
-          // ev.view.document.body.style.removeProperty('cursor');
-          arrowsEl.style.display = '';
-          opacityEl.innerText = '';
           ev.view.removeEventListener("pointermove", computeNewOpacity);
           _this.adjusting = false;
         }, {
@@ -383,7 +353,7 @@ var ThemeBrowser = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this, "onDragStart", function (layer, path) {
       _this.dragging = true;
-      if (layer.role !== LayerRole.THEME) {
+      if (layer.role !== LayerRole.THEME || _this.props.allowRemovingThemeLayers) {
         _this.setState({
           showDelete: true
         });
@@ -417,7 +387,7 @@ var ThemeBrowser = /*#__PURE__*/function (_React$Component) {
       }
     });
     _this.maxLayerTitleLength = undefined;
-    _this.rnd = null;
+    _this.sidebar = null;
     return _this;
   }
   _inherits(ThemeBrowser, _React$Component);
@@ -441,35 +411,35 @@ var ThemeBrowser = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      if (!this.state.active) {
-        return null;
-      }
       this.maxLayerTitleLength = 0;
       this.measureCanvas = document.createElement('canvas');
       this.measureContext = this.measureCanvas.getContext('2d');
       this.measureContext.font = getComputedStyle(document.body).font;
-      var result = /*#__PURE__*/React.createElement(ResizeableWindow, {
-        detachable: false,
-        dockable: "right",
-        hideDockIcon: true,
-        initialHeight: 640,
-        initialWidth: 640,
-        initialX: 0,
-        initialY: 0,
-        initiallyDocked: true,
-        maximizeable: false,
-        onClose: this.onClose,
-        scrollable: true,
-        setRef: this.setRndRef,
-        splitScreenWhenDocked: true,
-        title: LocaleUtils.tr("appmenu.items.ThemeBrowser")
+      var result = /*#__PURE__*/React.createElement(SideBar, {
+        icon: "list-alt",
+        id: "ThemeBrowser",
+        maxWidth: this.props.fillIfWiderThanPerc ? undefined : this.props.maxWidth,
+        onHide: this.onClose,
+        side: this.props.side,
+        splitScreen: true,
+        title: LocaleUtils.tr("appmenu.items.ThemeBrowser"),
+        visible: this.state.active,
+        width: this.state.width
       }, /*#__PURE__*/React.createElement("div", {
         className: "themebrowser-body",
         role: "body"
       }, this.renderThemes(this.props.themes)));
+      var width = this.maxLayerTitleLength + "px";
+      if (this.props.fillIfWiderThanPerc && this.maxLayerTitleLength > window.innerWidth * this.props.fillIfWiderThanPerc / 100) {
+        width = '100%';
+      }
       this.measureCanvas = undefined;
       this.measureContext = undefined;
-      this.updateWindowSize();
+      if (width !== this.state.width) {
+        this.setState({
+          width: width
+        });
+      }
       return result;
     }
   }]);
@@ -477,13 +447,19 @@ var ThemeBrowser = /*#__PURE__*/function (_React$Component) {
 _defineProperty(ThemeBrowser, "propTypes", {
   active: PropTypes.bool,
   activeTheme: PropTypes.string,
+  /** Whether to allow removing theme layers. */
+  allowRemovingThemeLayers: PropTypes.bool,
   /** Whether to display a BBOX dependent legend. Can be `true|false|"theme"`, latter means only for theme layers. */
   bboxDependentLegend: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   changeLayerProperty: PropTypes.func,
   /** Whether to use the fallback logic for drag-and-drop. */
   fallbackDrag: PropTypes.bool,
+  /** Make panel fill screen width if wider than the specified screen width percentage. */
+  fillIfWiderThanPerc: PropTypes.number,
   layers: PropTypes.array,
   map: PropTypes.object,
+  /** Maximum width of panel (ignored `fillIfWiderThanPerc` is set). */
+  maxWidth: PropTypes.string,
   removeLayer: PropTypes.func,
   reorderLayer: PropTypes.func,
   /** Whether to display a scale dependent legend. Can be `true|false|"theme"`, latter means only for theme layers. */
@@ -491,8 +467,13 @@ _defineProperty(ThemeBrowser, "propTypes", {
   setBlankTheme: PropTypes.func,
   setCurrentTask: PropTypes.func,
   setCurrentTheme: PropTypes.func,
+  /** The side of the application on which to display the sidebar. */
+  side: PropTypes.string,
   themes: PropTypes.array
 });
+_defineProperty(ThemeBrowser, "defaultProps", {
+  side: 'right'
+});
 var selector = function selector(state) {
   var _state$theme$current;
   return {

package/utils/LayerUtils.js

@@ -1511,11 +1511,11 @@ var LayerUtils = {
   },
   computeVisibilityPreset: function computeVisibilityPreset(layers) {
     var result = {};
-    var _collectLayerVisibilities = function collectLayerVisibilities(layer, path, parentVisible) {
+    var _collectLayerVisibilities = function collectLayerVisibilities(layer, path) {
       if (layer.sublayers) {
         var istoplevel = !!layer.url;
         layer.sublayers.forEach(function (sublayer) {
-          return _collectLayerVisibilities(sublayer, !istoplevel ? path + layer.name + "/" : "", parentVisible && layer.visibility);
+          return _collectLayerVisibilities(sublayer, !istoplevel ? path + layer.name + "/" : "");
         });
         if (layer.visibility && !istoplevel) {
           result[path + layer.name] = {
@@ -1530,14 +1530,13 @@ var LayerUtils = {
       } else {
         result[path + layer.name] = {
           checked: layer.visibility,
-          style: layer.style,
-          visible: layer.visibility && parentVisible
+          style: layer.style
         };
       }
     };
     layers.forEach(function (layer) {
       if (layer.role === LayerRole.THEME) {
-        _collectLayerVisibilities(layer, "", layer.visibility);
+        _collectLayerVisibilities(layer, "");
       }
     });
     return result;