qwc2 2026.4.29 → 2026.5.6

package/actions/theme.js

@@ -53,7 +53,7 @@ export function setThemeLayersList(theme) {
   };
 }
 export function finishThemeSetup(dispatch, theme, themes, layerConfigs, insertPos, permalinkLayers, externalLayerRestorer, visibleBgLayer, initialTheme, initialTask) {
-  var _theme$config;
+  var _theme$config$section, _theme$config, _theme$config2;
   // Create layer
   var themeLayer = ThemeUtils.createThemeLayer(theme, themes);
   var layers = [themeLayer];
@@ -148,7 +148,8 @@ export function finishThemeSetup(dispatch, theme, themes, layerConfigs, insertPo
     type: SWITCHING_THEME,
     switching: false
   });
-  var task = initialTask || (theme === null || theme === void 0 || (_theme$config = theme.config) === null || _theme$config === void 0 ? void 0 : _theme$config.startupTask) || (initialTheme ? ConfigUtils.getConfigProp("startupTask") : null);
+  var section = ConfigUtils.isMobile() ? "mobile" : "desktop";
+  var task = initialTask || ((_theme$config$section = theme === null || theme === void 0 || (_theme$config = theme.config) === null || _theme$config === void 0 || (_theme$config = _theme$config[section]) === null || _theme$config === void 0 ? void 0 : _theme$config.startupTask) !== null && _theme$config$section !== void 0 ? _theme$config$section : theme === null || theme === void 0 || (_theme$config2 = theme.config) === null || _theme$config2 === void 0 ? void 0 : _theme$config2.startupTask) || (initialTheme ? ConfigUtils.getConfigProp("startupTask") : null);
   if (task) {
     var mapClickAction = ConfigUtils.getPluginConfig(task.key).mapClickAction;
     dispatch(setCurrentTask(task.key, task.mode, mapClickAction, task.data));

package/components/AutoEditForm.js

@@ -50,7 +50,9 @@ var AutoEditForm = /*#__PURE__*/function (_React$Component) {
       }
       var input = null;
       var title = field.name + ":";
-      if (field.type === "boolean" || field.type === "bool") {
+      if (constraints.hidden) {
+        return null;
+      } else if (field.type === "boolean" || field.type === "bool") {
         if (_this.props.touchFriendly) {
           var boolvalue = value === "1" || value === "on" || value === "true" || value === true;
           input = /*#__PURE__*/React.createElement(ToggleSwitch, _extends({
@@ -87,12 +89,11 @@ var AutoEditForm = /*#__PURE__*/function (_React$Component) {
           values: constraints.values
         }));
       } else if (field.type === "number") {
-        var precision = constraints.step > 0 ? Math.ceil(-Math.log10(constraints.step)) : 6;
+        var precision = constraints.step > 0 ? Math.ceil(-Math.log10(constraints.step)) : 0;
         input = /*#__PURE__*/React.createElement(NumberInput, {
           decimals: precision,
           max: constraints.max,
           min: constraints.min,
-          mobile: true,
           name: field.id,
           onChange: function onChange(nr) {
             return _this.props.updateField(field.id, nr);

package/components/IdentifyViewer.js

@@ -1155,6 +1155,9 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
         var _window$qwc3;
         var formatter = _Object$values[_i];
         text = formatter(attrName, text, layer, result);
+        if (/*#__PURE__*/React.isValidElement(text)) {
+          return text;
+        }
       }
       text = _this.props.attributeTransform(attrName, text, layer, result);
       text = MiscUtils.addLinkAnchors(text);

package/components/PickFeature.js

@@ -271,7 +271,8 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
             }
           }, entry.layer + ": " + ((_entry$feature$displa = entry.feature.displayname) !== null && _entry$feature$displa !== void 0 ? _entry$feature$displa : entry.feature.id));
         }) : /*#__PURE__*/React.createElement("div", {
-          className: "pick-feature-menu-querying"
+          className: "pick-feature-menu-querying",
+          key: "spinner"
         }, /*#__PURE__*/React.createElement(Spinner, null), LocaleUtils.tr("pickfeature.querying")));
       }
       return [resultsMenu, /*#__PURE__*/React.createElement(MapSelection, {

package/components/widgets/DateTimeInput.js

@@ -54,6 +54,7 @@ var DateTimeInput = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
       var parts = (this.props.value || "T").split("T");
+      parts[1] = (parts[1] || "").replace(/\+[0-9:]+$/, ''); // Strip timezone
       parts[1] = (parts[1] || "").replace(/\.\d+$/, ''); // Strip milliseconds
       return /*#__PURE__*/React.createElement(InputContainer, {
         className: "DateTimeInput"

package/package.json

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

package/plugins/API.js

@@ -401,7 +401,7 @@ var API = /*#__PURE__*/function (_React$Component) {
      * * `name`: An identifier
      * * `fmtFunc`: The formatter function with signature `function(name, value, layer, feature)`
      *
-     * The `fmtFunc` should return a string (which may also be a HTML fragment).
+     * The `fmtFunc` should return a string (which may also be a HTML fragment) or a React element.
      */
     _defineProperty(_this, "addIdentifyAttributeFormatter", function (name, fmtFunc) {
       window.qwc2.__attributeFormatters[name] = fmtFunc;

package/plugins/Cyclomedia.js

@@ -1,4 +1,8 @@
 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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -192,6 +196,10 @@ var Cyclomedia = /*#__PURE__*/function (_React$Component) {
       return "\n            <!DOCTYPE html>\n            <html>\n            <head>\n            <script nonce=\"".concat((_window$__CSP_NONCE__ = window.__CSP_NONCE__) !== null && _window$__CSP_NONCE__ !== void 0 ? _window$__CSP_NONCE__ : '', "\" type=\"text/javascript\" src=\"https://unpkg.com/react@18.3.1/umd/react.production.min.js\"></script>\n            <script nonce=\"").concat((_window$__CSP_NONCE__2 = window.__CSP_NONCE__) !== null && _window$__CSP_NONCE__2 !== void 0 ? _window$__CSP_NONCE__2 : '', "\" type=\"text/javascript\" src=\"https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js\"></script>\n            <script nonce=\"").concat((_window$__CSP_NONCE__3 = window.__CSP_NONCE__) !== null && _window$__CSP_NONCE__3 !== void 0 ? _window$__CSP_NONCE__3 : '', "\" type=\"text/javascript\" src=\"https://streetsmart.cyclomedia.com/api/v").concat(_this.props.cyclomediaVersion, "/StreetSmartApi.js\"></script>\n            <script nonce=\"").concat((_window$__CSP_NONCE__4 = window.__CSP_NONCE__) !== null && _window$__CSP_NONCE__4 !== void 0 ? _window$__CSP_NONCE__4 : '', "\" type=\"text/javascript\">\n            let apiInitialized = false;\n            let initCallback = null;\n            let posCallback = null;\n            let measureCallback = null;\n\n            function initApi() {\n                StreetSmartApi.init({\n                    targetElement: document.getElementById(\"streetsmartApi\"),\n                    username: \"").concat(_this.state.username || undefined, "\",\n                    password: \"").concat(_this.state.password || undefined, "\",\n                    apiKey: \"").concat(_this.props.apikey, "\",\n                    clientId: \"").concat(_this.props.clientId, "\",\n                    loginOauth: ").concat(loginOauth, ",\n                    loginRedirectUri: \"").concat(_this.props.loginRedirectUri, "\",\n                    logoutRedirectUri: \"").concat(_this.props.logoutRedirectUri, "\",\n                    srs: \"").concat(_this.props.projection, "\",\n                    locale: \"").concat(lang, "\",\n                    configurationUrl: 'https://atlas.cyclomedia.com/configuration',\n                    addressSettings: {\n                        locale: \"us\",\n                        database: \"Nokia\"\n                    }\n                }).then(() => {\n                    apiInitialized = true;\n                    if (initCallback) {\n                        initCallback(true);\n                    }\n                }, (e) => {\n                    apiInitialized = false;\n                    if (initCallback) {\n                        initCallback(false, e.message);\n                    }\n                });\n            }\n            function openImage(posStr, crs) {\n                if (!apiInitialized) {\n                    return;\n                }\n                StreetSmartApi.open(posStr, {\n                    viewerType: StreetSmartApi.ViewerType.PANORAMA,\n                    srs: crs,\n                    panoramaViewer: {\n                         closable: false,\n                         maximizable: true,\n                         replace: true,\n                         recordingsVisible: true,\n                         navbarVisible: true,\n                         timeTravelVisible: true,\n                         measureTypeButtonVisible: true,\n                         measureTypeButtonStart: true,\n                         measureTypeButtonToggle: true,\n                     },\n                }).then((result) => {\n                    if (result && result[0]){\n                        window.panoramaViewer = result[0];\n                        window.panoramaViewer.on(StreetSmartApi.Events.panoramaViewer.IMAGE_CHANGE, changeView);\n                        window.panoramaViewer.on(StreetSmartApi.Events.panoramaViewer.VIEW_CHANGE, changeView);\n                        StreetSmartApi.on(StreetSmartApi.Events.measurement.MEASUREMENT_CHANGED, changeMeasurement);\n                        StreetSmartApi.on(StreetSmartApi.Events.measurement.MEASUREMENT_STOPPED, stopMeasurement);\n                    }\n                }).catch((reason) => {\n                    console.log('Failed to create component(s) through API: ' + reason);\n                });\n            }\n            function changeView() {\n                if (posCallback) {\n                    const recording = window.panoramaViewer.getRecording();\n                    const orientation = window.panoramaViewer.getOrientation();\n                    const pos = recording.xyz;\n                    const posData = {\n                        pos: [pos[0], pos[1]],\n                        crs: recording.srs,\n                        yaw: orientation.yaw * Math.PI / 180,\n                        hFov: orientation.hFov * Math.PI / 180.0\n                    }\n                    posCallback(posData);\n                }\n            }\n            function changeMeasurement(e) {\n                measureCallback(e.detail.activeMeasurement);\n            }\n            function stopMeasurement() {\n                measureCallback(null);\n            }\n            function registerCallbacks(_initCallback, _posCallback, _measureCallback) {\n                initCallback = _initCallback;\n                posCallback = _posCallback;\n                measureCallback = _measureCallback;\n            }\n            </script>\n            <style>\n              html, body, #streetsmartApi {height: 100%;}\n            </style>\n            </head>\n            <body style=\"margin: 0\">\n            <div id=\"streetsmartApi\">\n            </div>\n            </body>\n            </html>\n        ");
     });
     _defineProperty(_this, "addRecordingsWFS", function () {
+      // Maximum tile size in map CRS units to avoid exceeding the feature limit per request.
+      // ~1000 m in metric CRS, ~0.01° (≈ 1000 m) in geographic CRS, ~3280 ft in imperial CRS.
+      var crsUnits = CoordinatesUtils.getUnits(_this.props.mapCrs);
+      var MAX_TILE_SIZE = crsUnits === 'degrees' ? 0.01 : crsUnits === 'ft' ? 3280 : 1000;
       var layer = {
         id: 'cyclomedia-recordings',
         type: 'wfs',
@@ -202,38 +210,62 @@ var Cyclomedia = /*#__PURE__*/function (_React$Component) {
             miny = _CoordinatesUtils$rep2[1],
             maxx = _CoordinatesUtils$rep2[2],
             maxy = _CoordinatesUtils$rep2[3];
-          // Cyclomedia WFS only returns up to 3000 points per request. Split bbox in four to reduce chance of hitting the limit
-          var midx = 0.5 * (minx + maxx);
-          var midy = 0.5 * (miny + maxy);
-          var bboxes = [[minx, miny, midx, midy],
-          // Bottom left
-          [midx, miny, maxx, midy],
-          // Bottom right
-          [midx, midy, maxx, maxy],
-          // Top right
-          [minx, midy, midx, maxy] // Top left
-          ];
-          bboxes.forEach(function (bbox) {
-            var bboxstr = bbox.join(",");
-            var reqUrl = "https://atlasapi.cyclomedia.com/api/recording/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=atlas:Recording&srsname=".concat(_this.props.mapCrs, "&bbox=").concat(bboxstr, "&maxFeatures=10000000");
+          var width = maxx - minx;
+          var height = maxy - miny;
+          // Cyclomedia WFS only returns up to 3000 points per request.
+          // Split the bbox into tiles so that no tile exceeds MAX_TILE_SIZE in each dimension.
+          // Each tile is expanded by OVERLAP on every side so that features on tile borders
+          // are reliably included. Duplicate features are removed afterwards via their id.
+          var OVERLAP = MAX_TILE_SIZE * 0.05; // 5 % of tile size
+          var cols = Math.max(1, Math.ceil(width / MAX_TILE_SIZE));
+          var rows = Math.max(1, Math.ceil(height / MAX_TILE_SIZE));
+          var tileW = width / cols;
+          var tileH = height / rows;
+          var tiles = [];
+          for (var row = 0; row < rows; row++) {
+            for (var col = 0; col < cols; col++) {
+              tiles.push([minx + col * tileW - OVERLAP, miny + row * tileH - OVERLAP, minx + (col + 1) * tileW + OVERLAP, miny + (row + 1) * tileH + OVERLAP]);
+            }
+          }
+          var authHeader = "Basic " + btoa(_this.state.username + ":" + _this.state.password);
+          var onError = function onError() {
+            vectorSource.removeLoadedExtent(extent);
+            failure();
+          };
+          var completed = 0;
+          var hasError = false;
+          var allFeatures = [];
+          tiles.forEach(function (tile) {
+            var bboxstr = tile.join(",");
+            var reqUrl = "https://atlasapi.cyclomedia.com/api/recording/wfs?service=WFS&version=1.1.0&request=GetFeature&typename=atlas:Recording&srsname=".concat(_this.props.mapCrs, "&bbox=").concat(bboxstr, "&maxFeatures=10000");
             var xhr = new XMLHttpRequest();
             xhr.open('GET', reqUrl);
-            xhr.setRequestHeader("Authorization", "Basic " + btoa(_this.state.username + ":" + _this.state.password));
-            var onError = function onError() {
-              vectorSource.removeLoadedExtent(extent);
-              failure();
+            xhr.setRequestHeader("Authorization", authHeader);
+            xhr.onerror = function () {
+              if (!hasError) {
+                hasError = true;
+                onError();
+              }
             };
-            xhr.onerror = onError;
             xhr.onload = function () {
+              if (hasError) {
+                return;
+              }
               if (xhr.status === 200) {
                 var features = vectorSource.getFormat().readFeatures(xhr.responseText, {
                   dataProjection: _this.props.mapCrs,
                   featureProjection: projection.getCode()
                 });
-                vectorSource.addFeatures(features);
-                success(features);
+                allFeatures.push.apply(allFeatures, _toConsumableArray(features));
               } else {
+                hasError = true;
                 onError();
+                return;
+              }
+              completed++;
+              if (completed === tiles.length) {
+                vectorSource.addFeatures(allFeatures);
+                success(allFeatures);
               }
             };
             xhr.send();

package/plugins/Editing.js

@@ -532,7 +532,7 @@ var Editing = /*#__PURE__*/function (_React$Component) {
         if (match) {
           var oldvisibility = match.sublayer.visibility;
           if (oldvisibility !== visibility && visibility !== null) {
-            var recurseDirection = !oldvisibility ? "both" : "children";
+            var recurseDirection = !oldvisibility ? "parents" : null;
             _this.props.changeLayerProperty(match.layer.id, "visibility", visibility, match.path, recurseDirection);
           }
           return oldvisibility;

package/plugins/Help.js

@@ -60,8 +60,13 @@ var Help = /*#__PURE__*/function (_React$Component) {
   return _createClass(Help, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.componentDidUpdate({});
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
       var _this2 = this;
-      if (this.props.bodyContentsFragmentUrl) {
+      if (this.props.bodyContentsFragmentUrl && this.props.bodyContentsFragmentUrl !== prevProps.bodyContentsFragmentUrl) {
         axios.get(this.props.bodyContentsFragmentUrl).then(function (response) {
           _this2.setState({
             body: response.data.replace('$VERSION$', process.env.BuildDate)

package/plugins/MapExport.js

@@ -351,6 +351,7 @@ var MapExport = /*#__PURE__*/function (_React$Component) {
       params.WIDTH = width;
       params.HEIGHT = height;
       params.filename = fileName;
+      params.FILTER_GEOM = VectorLayerUtils.geoJSONGeomToWkt(VectorLayerUtils.reprojectGeometry(_this.props.filter.filterGeom, _this.props.map.projection, crs));
 
       // Dimension values
       _this.props.layers.forEach(function (layer) {
@@ -464,15 +465,14 @@ var MapExport = /*#__PURE__*/function (_React$Component) {
           var _layer$mapFormats;
           return layer.type === 'wms' && layer.role > LayerRole.BACKGROUND && ((_layer$mapFormats = layer.mapFormats) === null || _layer$mapFormats === void 0 ? void 0 : _layer$mapFormats.includes("application/dxf"));
         }).reverse().map(function (layer) {
-          var _layer$params$FILTER, _layer$params$FILTER_;
+          var _layer$params$FILTER;
           return {
             layer: layer,
             params: _objectSpread(_objectSpread({}, baseParams), {}, {
               LAYERS: layer.params.LAYERS,
               OPACITIES: layer.params.OPACITIES,
               STYLES: layer.params.STYLES,
-              FILTER: (_layer$params$FILTER = layer.params.FILTER) !== null && _layer$params$FILTER !== void 0 ? _layer$params$FILTER : '',
-              FILTER_GEOM: (_layer$params$FILTER_ = layer.params.FILTER_GEOM) !== null && _layer$params$FILTER_ !== void 0 ? _layer$params$FILTER_ : ''
+              FILTER: (_layer$params$FILTER = layer.params.FILTER) !== null && _layer$params$FILTER !== void 0 ? _layer$params$FILTER : ''
             })
           };
         });
@@ -596,6 +596,7 @@ _defineProperty(MapExport, "propTypes", {
   exportExternalLayers: PropTypes.bool,
   /** Template for the name of the generated files when downloading. Can contain the placeholders `{username}`, `{tenant}`, `{theme}`, `{themeTitle}`, `{timestamp}`. */
   fileNameTemplate: PropTypes.string,
+  filter: PropTypes.object,
   /** Formats to force as available even if the map capabilities report otherwise. Useful if a serviceUrl is defined in a format configuration. */
   forceAvailableFormats: PropTypes.array,
   /** Custom format export configuration. Specify a format mime-type (i.e. `application/dxf`) as key, and an array of one or more configurations as value.
@@ -640,7 +641,8 @@ var selector = function selector(state) {
   return {
     theme: state.theme.current,
     map: state.map,
-    layers: state.layers.flat
+    layers: state.layers.flat,
+    filter: state.layers.filter
   };
 };
 export default connect(selector, {

package/plugins/MapFilter.js

@@ -383,8 +383,10 @@ var MapFilter = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_this, "renderPredefinedFilters", function () {
       var predefinedFilters = _this.collectPredefinedFilters(_this.props.layers);
-      return Object.values(predefinedFilters).map(function (config) {
-        var _config$title, _this$state$filters$c;
+      return Object.values(predefinedFilters).filter(function (filter) {
+        return filter.id in _this.state.filters;
+      }).map(function (config) {
+        var _config$title;
         return /*#__PURE__*/React.createElement("div", {
           className: "map-filter-entry",
           key: config.id
@@ -393,7 +395,7 @@ var MapFilter = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/React.createElement("span", {
           className: "map-filter-entry-title"
         }, (_config$title = config.title) !== null && _config$title !== void 0 ? _config$title : LocaleUtils.tr(config.titlemsgid)), /*#__PURE__*/React.createElement(ToggleSwitch, {
-          active: (_this$state$filters$c = _this.state.filters[config.id]) === null || _this$state$filters$c === void 0 ? void 0 : _this$state$filters$c.active,
+          active: _this.state.filters[config.id].active,
           onChange: function onChange(active) {
             return _this.toggleFilter(config.id, active);
           }

package/plugins/map/EditingSupport.js

@@ -37,7 +37,9 @@ import { setEditContext } from '../../actions/editing';
 import LocationRecorder from '../../components/LocationRecorder';
 import MeasureSwitcher from '../../components/MeasureSwitcher';
 import { BottomToolPortalContext } from '../../components/PluginsContainer';
+import ButtonBar from '../../components/widgets/ButtonBar';
 import FeatureStyles from "../../utils/FeatureStyles";
+import LocaleUtils from '../../utils/LocaleUtils';
 import MeasureUtils from '../../utils/MeasureUtils';
 
 /**
@@ -49,6 +51,7 @@ var EditingSupport = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, EditingSupport);
     _this = _callSuper(this, EditingSupport, [props]);
     _defineProperty(_this, "state", {
+      activeEditTool: 'Node',
       showRecordLocation: false,
       measurements: {
         showmeasurements: false,
@@ -56,6 +59,11 @@ var EditingSupport = /*#__PURE__*/function (_React$Component) {
         areaUnit: 'metric'
       }
     });
+    _defineProperty(_this, "setEditMode", function (action) {
+      _this.setState({
+        activeEditTool: action
+      }, _this.setEditInteraction);
+    });
     _defineProperty(_this, "changeMeasurementState", function (diff) {
       _this.setState(function (state) {
         return {
@@ -95,7 +103,7 @@ var EditingSupport = /*#__PURE__*/function (_React$Component) {
       }
       _this.currentLayer = _this.layers[_this.props.editContext.id];
     });
-    _defineProperty(_this, "addDrawInteraction", function () {
+    _defineProperty(_this, "setDrawInteraction", function () {
       _this.reset();
       _this.setCurrentLayer();
       var geomType = _this.props.editContext.geomType.replace(/Z$/, '');
@@ -126,7 +134,7 @@ var EditingSupport = /*#__PURE__*/function (_React$Component) {
         showRecordLocation: ["Point", "LineString", "MultiPoint", "MultiLineString"].includes(geomType)
       });
     });
-    _defineProperty(_this, "addEditInteraction", function () {
+    _defineProperty(_this, "setEditInteraction", function () {
       var _this$props$editConte;
       _this.reset();
       _this.setCurrentLayer();
@@ -135,26 +143,42 @@ var EditingSupport = /*#__PURE__*/function (_React$Component) {
       _this.currentFeature.on('change', _this.updateMeasurements);
       _this.updateMeasurements();
       _this.currentLayer.getSource().addFeature(_this.currentFeature);
-      var modifyInteraction = new ol.interaction.Modify({
-        features: new ol.Collection([_this.currentFeature]),
-        condition: function condition(event) {
-          return event.originalEvent.buttons === 1;
-        },
-        deleteCondition: function deleteCondition(event) {
-          // delete vertices on SHIFT + click
-          if (event.type === "pointerdown" && ol.events.condition.shiftKeyOnly(event)) {
-            _this.props.map.setIgnoreNextClick(true);
-          }
-          return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
-        },
-        style: FeatureStyles.sketchInteraction()
-      });
-      modifyInteraction.on('modifyend', function () {
-        _this.commitCurrentFeature();
-      }, _this);
-      modifyInteraction.setActive(_this.props.editContext.geomType && _this.props.editContext.permissions.updatable && ((_this$props$editConte = _this.props.editContext.editConfig) === null || _this$props$editConte === void 0 || (_this$props$editConte = _this$props$editConte.permissions) === null || _this$props$editConte === void 0 ? void 0 : _this$props$editConte.updatable) === true && !_this.props.editContext.geomReadOnly && !_this.props.editContext.geomNonZeroZ);
-      _this.props.map.addInteraction(modifyInteraction);
-      _this.interaction = modifyInteraction;
+      if (_this.state.activeEditTool === "Node") {
+        var modifyInteraction = new ol.interaction.Modify({
+          features: new ol.Collection([_this.currentFeature]),
+          condition: function condition(event) {
+            return event.originalEvent.buttons === 1;
+          },
+          deleteCondition: function deleteCondition(event) {
+            // delete vertices on SHIFT + click
+            if (event.type === "pointerdown" && ol.events.condition.shiftKeyOnly(event)) {
+              _this.props.map.setIgnoreNextClick(true);
+            }
+            return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
+          },
+          style: FeatureStyles.sketchInteraction()
+        });
+        modifyInteraction.on('modifyend', _this.commitCurrentFeature);
+        _this.interaction = modifyInteraction;
+        _this.props.map.addInteraction(_this.interaction);
+      } else if (_this.state.activeEditTool === "Transform") {
+        var transformInteraction = new ol.interaction.Transform({
+          stretch: false,
+          keepAspectRatio: function keepAspectRatio(ev) {
+            return ol.events.condition.shiftKeyOnly(ev);
+          },
+          layers: [_this.currentLayer],
+          translateFeature: true,
+          selection: false
+        });
+        transformInteraction.on('rotateend', _this.commitCurrentFeature);
+        transformInteraction.on('translateend', _this.commitCurrentFeature);
+        transformInteraction.on('scaleend', _this.commitCurrentFeature);
+        _this.interaction = transformInteraction;
+        _this.props.map.addInteraction(_this.interaction);
+        _this.interaction.setSelection([_this.currentFeature]);
+      }
+      _this.interaction.setActive(_this.props.editContext.geomType && _this.props.editContext.permissions.updatable && ((_this$props$editConte = _this.props.editContext.editConfig) === null || _this$props$editConte === void 0 || (_this$props$editConte = _this$props$editConte.permissions) === null || _this$props$editConte === void 0 ? void 0 : _this$props$editConte.updatable) === true && !_this.props.editContext.geomReadOnly && !_this.props.editContext.geomNonZeroZ);
     });
     _defineProperty(_this, "updateMeasurements", function () {
       var _this$state$measureme;
@@ -237,16 +261,16 @@ var EditingSupport = /*#__PURE__*/function (_React$Component) {
       } else if (curContext.action === 'Pick' && curContext.feature) {
         // If a feature without geometry was picked, enter draw mode, otherwise enter edit mode
         if (!curContext.feature.geometry && curContext.geomType) {
-          this.addDrawInteraction();
+          this.setDrawInteraction();
         } else {
-          this.addEditInteraction();
+          this.setEditInteraction();
         }
       } else if (curContext.action === 'Draw' && curContext.geomType) {
         // Usually, draw mode starts without a feature, but draw also can start with a pre-set geometry
         if (!(curContext.feature || {}).geometry || prevContext.id === curContext.id && prevContext.geomType !== curContext.geomType) {
-          this.addDrawInteraction();
+          this.setDrawInteraction();
         } else if ((curContext.feature || {}).geometry) {
-          this.addEditInteraction();
+          this.setEditInteraction();
         }
       } else {
         this.reset();
@@ -261,9 +285,28 @@ var EditingSupport = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props$editConte2;
+      var _this$props$editConte2, _this$props$editConte3;
+      var toolbar = null;
       var locationRecorder = null;
       var measureSwitcher = null;
+      if ((_this$props$editConte2 = this.props.editContext.feature) !== null && _this$props$editConte2 !== void 0 && _this$props$editConte2.geometry) {
+        var editButtons = [{
+          key: "Node",
+          tooltip: LocaleUtils.tr("redlining.draw"),
+          icon: "nodetool"
+        }, {
+          key: "Transform",
+          tooltip: LocaleUtils.tr("redlining.transform"),
+          icon: "transformtool"
+        }];
+        toolbar = /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement(ButtonBar, {
+          active: this.state.activeEditTool,
+          buttons: editButtons,
+          key: "ButtonBar",
+          onClick: this.setEditMode,
+          tooltipPos: "top"
+        }), this.context);
+      }
       if (this.state.showRecordLocation && this.props.editContext.geomType) {
         var geomType = this.props.editContext.geomType.replace(/Z$/, '');
         locationRecorder = /*#__PURE__*/React.createElement(LocationRecorder, {
@@ -273,16 +316,15 @@ var EditingSupport = /*#__PURE__*/function (_React$Component) {
           map: this.props.map
         });
       }
-      if (this.props.editContext.action === "Draw" || (_this$props$editConte2 = this.props.editContext.feature) !== null && _this$props$editConte2 !== void 0 && _this$props$editConte2.geometry) {
+      if (this.props.editContext.action === "Draw" || (_this$props$editConte3 = this.props.editContext.feature) !== null && _this$props$editConte3 !== void 0 && _this$props$editConte3.geometry) {
         measureSwitcher = /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement(MeasureSwitcher, {
           changeMeasureState: this.changeMeasurementState,
           geomType: this.props.editContext.geomType,
-          iconSize: "large",
           key: "MeasureSwitcher",
           measureState: this.state.measurements
         }), this.context);
       }
-      return [measureSwitcher, locationRecorder];
+      return [toolbar, measureSwitcher, locationRecorder];
     }
   }]);
 }(React.Component);

package/reducers/layers.js

@@ -150,7 +150,7 @@ export default function layers() {
       }
     case ADD_LAYER:
       {
-        var _action$layer$srcid, _action$layer$visibil, _action$layer$opacity, _action$options, _action$options2;
+        var _action$layer$srcid, _action$layer$visibil, _action$layer$opacity, _ref, _action$options$layer, _action$options, _action$options2, _action$options3;
         var _newLayers2 = (state.flat || []).concat();
         var layerId = action.layer.id || uuidv4();
         var newLayer = _objectSpread(_objectSpread({}, action.layer), {}, {
@@ -161,9 +161,9 @@ export default function layers() {
           queryable: action.layer.queryable || false,
           visibility: (_action$layer$visibil = action.layer.visibility) !== null && _action$layer$visibil !== void 0 ? _action$layer$visibil : true,
           opacity: (_action$layer$opacity = action.layer.opacity) !== null && _action$layer$opacity !== void 0 ? _action$layer$opacity : 255,
-          layertreehidden: action.layer.layertreehidden || action.layer.role > LayerRole.USERLAYER
+          layertreehidden: (_ref = (_action$options$layer = (_action$options = action.options) === null || _action$options === void 0 ? void 0 : _action$options.layertreehidden) !== null && _action$options$layer !== void 0 ? _action$options$layer : action.layer.layertreehidden) !== null && _ref !== void 0 ? _ref : action.layer.role > LayerRole.USERLAYER
         });
-        if ((_action$options = action.options) !== null && _action$options !== void 0 && _action$options.beforeLayerName || (_action$options2 = action.options) !== null && _action$options2 !== void 0 && _action$options2.afterLayerName) {
+        if ((_action$options2 = action.options) !== null && _action$options2 !== void 0 && _action$options2.beforeLayerName || (_action$options3 = action.options) !== null && _action$options3 !== void 0 && _action$options3.afterLayerName) {
           _newLayers2 = LayerUtils.insertLayer(_newLayers2, newLayer, "name", action.options.beforeLayerName || action.options.afterLayerName, action.options.afterLayerName ? true : false);
         } else {
           var inspos = 0;
@@ -315,6 +315,7 @@ export default function layers() {
           return layer.id === _layerId;
         });
         if (idx === -1) {
+          var _action$layer$srcid2;
           var newFeatures = action.features.map(function (f) {
             return _objectSpread(_objectSpread({}, f), {}, {
               id: f.id || (f.properties || {}).id || uuidv4()
@@ -330,7 +331,8 @@ export default function layers() {
             visibility: action.layer.visibility || true,
             opacity: action.layer.opacity || 255,
             layertreehidden: action.layer.layertreehidden || action.layer.role > LayerRole.USERLAYER,
-            bbox: VectorLayerUtils.computeFeaturesBBox(action.features)
+            bbox: VectorLayerUtils.computeFeaturesBBox(action.features),
+            srcid: (_action$layer$srcid2 = action.layer.srcid) !== null && _action$layer$srcid2 !== void 0 ? _action$layer$srcid2 : uuidv4()
           });
           var _inspos = 0;
           for (; _inspos < _newLayers6.length && _newLayer2.role < _newLayers6[_inspos].role; ++_inspos);

package/reducers/task.js

@@ -19,7 +19,8 @@ var defaultState = {
   data: null,
   blocked: false,
   unsetOnMapClick: false,
-  identifyEnabled: true
+  identifyEnabled: true,
+  unblockedIdentifyEnabled: true
 };
 export default function task() {
   var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultState;
@@ -35,13 +36,15 @@ export default function task() {
           mode: action.mode,
           data: action.data,
           unsetOnMapClick: action.unsetOnMapClick,
-          identifyEnabled: action.identifyEnabled
+          identifyEnabled: action.identifyEnabled,
+          unblockedIdentifyEnabled: action.identifyEnabled
         });
       }
     case SET_CURRENT_TASK_BLOCKED:
       {
         return _objectSpread(_objectSpread({}, state), {}, {
-          blocked: action.blocked
+          blocked: action.blocked,
+          identifyEnabled: action.blocked ? false : state.unblockedIdentifyEnabled
         });
       }
     default:

package/utils/EditingInterface.js

@@ -374,7 +374,7 @@ var EditingInterface = {
    * @param editConfig The edit config of the feature dataset
    * @param featureId The feature ID
    * @param mapCrs The CRS of the map, as an EPSG code
-   * @param tables Comma separated string of relation table names
+   * @param tables Comma separated string of relation table references in the form `<table_name>:<fk_name>:<sort_col>`
    * @param editConfigs The theme editConfig block, containing all theme dataset edit configs
    * @param callback Callback invoked with the relation values, taking `{<tablename>: {<relation_values>}}` on success and `{}` on failure
    */

package/utils/LayerUtils.js

@@ -163,7 +163,8 @@ var LayerUtils = {
       type: "separator",
       title: title,
       role: LayerRole.USERLAYER,
-      id: uuidv4()
+      id: uuidv4(),
+      srcid: uuidv4()
     }]);
   },
   createExternalLayerPlaceholder: function createExternalLayerPlaceholder(layerConfig, externalLayers, id) {