Merged master changes

doc/plugins.md

@@ -414,9 +414,9 @@ Allows exporting a selected portion of the map to a variety of formats.
 | Property | Type | Description | Default value |
 |----------|------|-------------|---------------|
 | allowedFormats | `[string]` | Whitelist of allowed export format mimetypes. If empty, supported formats are listed. | `undefined` |
-| allowedScales | `[number]` | List of scales at which to export the map. | `undefined` |
+| allowedScales | `{[number], bool}` | List of scales at which to export the map. If empty, scale can be freely specified. If `false`, the map can only be exported at the current scale. | `undefined` |
 | defaultFormat | `string` | Default export format mimetype. If empty, first available format is used. | `undefined` |
-| defaultScaleFactor | `number` | The factor to apply to the map scale to determine the initial export map scale. | `0.5` |
+| defaultScaleFactor | `number` | The factor to apply to the map scale to determine the initial export map scale (if `allowedScales` is not `false`). | `0.5` |
 | dpis | `[number]` | List of dpis at which to export the map. If empty, the default server dpi is used. | `undefined` |
 | exportExternalLayers | `bool` | Whether to include external layers in the image. Requires QGIS Server 3.x! | `true` |
 | formatConfiguration | `{`<br />`  format: [{`<br />`  name: string,`<br />`  extraQuery: string,`<br />`  formatOptions: string,`<br />`  baseLayer: string,`<br />`}],`<br />`}` | Custom export configuration per format.<br /> If more than one configuration per format is provided, a selection combo will be displayed.<br /> `query` will be appended to the query string (replacing any existing parameters).<br /> `formatOptions` will be passed as FORMAT_OPTIONS.<br /> `baseLayer` will be appended to the LAYERS. | `undefined` |

package.json

@@ -1,6 +1,6 @@
 {
     "name": "qwc2",
-    "version": "2023.10.17-master",
+    "version": "2023.10.23-master",
     "description": "QGIS Web Client 2 core",
     "author": "Sourcepole AG",
     "license": "BSD-2-Clause",

plugins/FeatureSearch.jsx

@@ -13,12 +13,13 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {v1 as uuidv1} from 'uuid';
 import isEmpty from 'lodash.isempty';
+import IdentifyViewer from '../components/IdentifyViewer';
 import SideBar from '../components/SideBar';
+import Spinner from '../components/Spinner';
 import CoordinatesUtils from '../utils/CoordinatesUtils';
 import IdentifyUtils from '../utils/IdentifyUtils';
 import LocaleUtils from '../utils/LocaleUtils';
 import "./style/FeatureSearch.css";
-import IdentifyViewer from '../components/IdentifyViewer';
 
 class FeatureSearch extends React.Component {
     static propTypes = {
@@ -101,7 +102,10 @@ class FeatureSearch extends React.Component {
                     </tbody></table>
                 </fieldset>
                 <div className="feature-search-bar">
-                    <button className="button" disabled={this.state.busy} type="submit">{LocaleUtils.tr("search.search")}</button>
+                    <button className="button" disabled={this.state.busy} type="submit">
+                        {this.state.busy ? (<Spinner />) : null}
+                        {LocaleUtils.tr("search.search")}
+                    </button>
                 </div>
             </form>
         );
@@ -128,7 +132,7 @@ class FeatureSearch extends React.Component {
                 {isEmpty(this.state.searchResults) ? (
                     <div className="feature-search-noresults">{LocaleUtils.tr("featuresearch.noresults")}</div>
                 ) : (
-                    <IdentifyViewer collapsible displayResultTree={false} identifyResults={this.state.searchResults} />
+                    <IdentifyViewer collapsible displayResultTree={false} enableExport identifyResults={this.state.searchResults} />
                 )}
             </div>
         );
@@ -172,7 +176,7 @@ class FeatureSearch extends React.Component {
         });
         params.LAYERS = params.LAYERS.join(",");
         params.FILTER = params.FILTER.join(";");
-        this.setState({busy: true});
+        this.setState({busy: true, searchResults: null});
         axios.get(this.props.theme.featureInfoUrl, {params}).then(response => {
             const results = IdentifyUtils.parseResponse(response.data, null, 'text/xml', null, this.props.map.projection);
             this.setState({busy: false, searchResults: results});

plugins/LocateButton.jsx

@@ -32,21 +32,6 @@ class LocateButton extends React.Component {
     static defaultProps = {
         position: 2
     };
-    constructor(props) {
-        super(props);
-
-        if (!navigator.geolocation) {
-            props.changeLocateState("PERMISSION_DENIED");
-        } else {
-            navigator.geolocation.getCurrentPosition(() => {
-                // OK!
-            }, (err) => {
-                if (err.code === 1) {
-                    props.changeLocateState("PERMISSION_DENIED");
-                }
-            });
-        }
-    }
     onClick = () => {
         if (this.props.locateState === "DISABLED") {
             this.props.changeLocateState("ENABLED");

plugins/MapExport.jsx

@@ -37,11 +37,11 @@ class MapExport extends React.Component {
     static propTypes = {
         /** Whitelist of allowed export format mimetypes. If empty, supported formats are listed. */
         allowedFormats: PropTypes.arrayOf(PropTypes.string),
-        /** List of scales at which to export the map. */
-        allowedScales: PropTypes.arrayOf(PropTypes.number),
+        /** List of scales at which to export the map. If empty, scale can be freely specified. If `false`, the map can only be exported at the current scale. */
+        allowedScales: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.bool]),
         /** Default export format mimetype. If empty, first available format is used. */
         defaultFormat: PropTypes.string,
-        /** The factor to apply to the map scale to determine the initial export map scale.  */
+        /** The factor to apply to the map scale to determine the initial export map scale (if `allowedScales` is not `false`).  */
         defaultScaleFactor: PropTypes.number,
         /** List of dpis at which to export the map. If empty, the default server dpi is used.  */
         dpis: PropTypes.arrayOf(PropTypes.number),
@@ -107,11 +107,12 @@ class MapExport extends React.Component {
         ) {
             if (this.state.pageSize !== null) {
                 this.setState((state) => {
+                    const scale = this.getExportScale(state);
                     const center = this.props.map.center;
                     const mapCrs = this.props.map.projection;
                     const pageSize = this.props.pageSizes[state.pageSize];
-                    const widthm = state.scale * pageSize.width / 1000;
-                    const heightm = state.scale * pageSize.height / 1000;
+                    const widthm = scale * pageSize.width / 1000;
+                    const heightm = scale * pageSize.height / 1000;
                     const {width, height} = MapUtils.transformExtent(mapCrs, center, widthm, heightm);
                     let extent = [center[0] - 0.5 * width, center[1] - 0.5 * height, center[0] + 0.5 * width, center[1] + 0.5 * height];
                     extent = (CoordinatesUtils.getAxisOrder(mapCrs).substr(0, 2) === 'ne' && this.props.theme.version === '1.3.0') ?
@@ -156,7 +157,7 @@ class MapExport extends React.Component {
                 <select onChange={ev => this.setState({scale: ev.target.value})} role="input" value={this.state.scale}>
                     {this.props.allowedScales.map(scale => (<option key={scale} value={scale}>{scale}</option>))}
                 </select>);
-        } else {
+        } else if (this.props.allowedScales !== false) {
             scaleChooser = (
                 <input min="1" onChange={ev => this.setState({scale: ev.target.value})} role="input" type="number" value={this.state.scale} />
             );
@@ -167,7 +168,7 @@ class MapExport extends React.Component {
 
         const mapScale = MapUtils.computeForZoom(this.props.map.scales, this.props.map.zoom);
         let scaleFactor = 1;
-        if (this.state.pageSize === null) {
+        if (this.state.pageSize === null && this.props.allowedScales !== false) {
             scaleFactor = mapScale / this.state.scale;
         }
         const exportParams = LayerUtils.collectPrintParams(this.props.layers, this.props.theme, mapScale, this.props.map.projection, exportExternalLayers);
@@ -213,15 +214,17 @@ class MapExport extends React.Component {
                                     </td>
                                 </tr>
                             ) : null}
-                            <tr>
-                                <td>{LocaleUtils.tr("mapexport.scale")}</td>
-                                <td>
-                                    <InputContainer>
-                                        <span role="prefix">1&nbsp;:&nbsp;</span>
-                                        {scaleChooser}
-                                    </InputContainer>
-                                </td>
-                            </tr>
+                            {scaleChooser ? (
+                                <tr>
+                                    <td>{LocaleUtils.tr("mapexport.scale")}</td>
+                                    <td>
+                                        <InputContainer>
+                                            <span role="prefix">1&nbsp;:&nbsp;</span>
+                                            {scaleChooser}
+                                        </InputContainer>
+                                    </td>
+                                </tr>
+                            ) : null}
                             {this.props.dpis ? (
                                 <tr>
                                     <td>{LocaleUtils.tr("mapexport.resolution")}</td>
@@ -272,7 +275,7 @@ class MapExport extends React.Component {
     };
     renderFrame = () => {
         if (this.state.pageSize !== null) {
-            const px2m =  1 / (this.state.dpi * 39.3701) * this.state.scale;
+            const px2m =  1 / (this.state.dpi * 39.3701) * this.getExportScale(this.state);
             const frame = {
                 width: this.state.width * px2m,
                 height: this.state.height * px2m
@@ -332,6 +335,13 @@ class MapExport extends React.Component {
             height: ''
         });
     };
+    getExportScale = (state) => {
+        if (this.props.allowedScales === false) {
+            return Math.round(MapUtils.computeForZoom(this.props.map.scales, this.props.map.zoom));
+        } else {
+            return state.scale;
+        }
+    };
     bboxSelected = (bbox, crs, pixelsize) => {
         const version = this.props.theme.version;
         let extent = '';
@@ -368,7 +378,7 @@ class MapExport extends React.Component {
 
         if (formatConfiguration) {
             const keyCaseMap = Object.keys(params).reduce((res, key) => ({...res, [key.toLowerCase()]: key}), {});
-            (formatConfiguration.extraQuery || "").split(/[?&]/).forEach(entry => {
+            (formatConfiguration.extraQuery || "").split(/[?&]/).filter(Boolean).forEach(entry => {
                 const [key, value] = entry.split("=");
                 const caseKey = keyCaseMap[key.toLowerCase()] || key;
                 params[caseKey] = (value ?? "");
@@ -392,7 +402,8 @@ class MapExport extends React.Component {
         axios.post(this.props.theme.url, data, config).then(response => {
             this.setState({exporting: false});
             const contentType = response.headers["content-type"];
-            FileSaver.saveAs(new Blob([response.data], {type: contentType}), this.props.theme.name + '.pdf');
+            const ext = this.state.selectedFormat.split(";")[0].split("/").pop();
+            FileSaver.saveAs(new Blob([response.data], {type: contentType}), this.props.theme.name + '.' + ext);
         }).catch(e => {
             this.setState({exporting: false});
             if (e.response) {

plugins/Redlining.jsx

@@ -67,8 +67,13 @@ class Redlining extends React.Component {
         if (prevProps.redlining.geomType !== this.props.redlining.geomType && this.props.redlining.geomType === 'Text' && !this.state.selectText) {
             this.setState({selectText: true});
         }
-        if (!this.props.layers.find(layer => layer.id === this.props.redlining.layer) && this.props.redlining.layer !== 'redlining') {
-            this.props.changeRedliningState({layer: 'redlining', layerTitle: 'Redlining'});
+        if (!this.props.layers.find(layer => layer.id === this.props.redlining.layer)) {
+            const vectorLayers = this.props.layers.filter(layer => layer.type === "vector" && layer.role === LayerRole.USERLAYER && !layer.readonly);
+            if (vectorLayers.length >= 1) {
+                this.props.changeRedliningState({layer: vectorLayers[0].id, layerTitle: vectorLayers[0].title});
+            } else if (this.props.redlining.layer !== 'redlining') {
+                this.props.changeRedliningState({layer: 'redlining', layerTitle: 'Redlining'});
+            }
         }
     }
     componentWillUnmount() {
@@ -139,8 +144,8 @@ class Redlining extends React.Component {
             editButtons.push(plugin.cfg);
         }
         let vectorLayers = this.props.layers.filter(layer => layer.type === "vector" && layer.role === LayerRole.USERLAYER && !layer.readonly);
-        // Ensure list always contains "Redlining" layer
-        if (!vectorLayers.find(layer => layer.id === 'redlining')) {
+        // Ensure list always contains at least a "Redlining" layer
+        if (vectorLayers.length === 0) {
             vectorLayers = [{id: 'redlining', title: 'Redlining'}, ...vectorLayers];
         }
 

plugins/map/LocateSupport.jsx

@@ -85,7 +85,12 @@ class LocateSupport extends React.Component {
     };
     onLocationError = (err) => {
         this.props.onLocateError(err.message);
-        this.props.changeLocateState("DISABLED");
+        // User denied geolocation prompt
+        if (err.code === 1) {
+            this.props.changeLocateState("PERMISSION_DENIED");
+        } else {
+            this.props.changeLocateState("DISABLED");
+        }
     };
     render() {
         return null;

plugins/style/Buttons.css

@@ -16,11 +16,6 @@ button.map-button {
     cursor: pointer;
 }
 
-button.map-button.locate-button-DISABLED {
-    opacity: 0.7;
-    cursor: default;
-}
-
 button.map-button:hover {
     background-color: var(--map-button-hover-bg-color);
     color: var(--map-button-hover-text-color);
@@ -31,6 +26,16 @@ button.map-button-active {
     color: var(--map-button-active-text-color);
 }
 
+button.map-button.locate-button-PERMISSION_DENIED {
+    opacity: 0.7;
+    cursor: default;
+}
+
+button.map-button.locate-button-PERMISSION_DENIED:hover {
+    background-color: var(--map-button-bg-color);
+    color: var(--map-button-text-color);
+}
+
 button.map-button.locate-button-LOCATING,
 button.map-button.locate-button-ENABLED {
     background-color: var(--map-button-text-color);

plugins/style/FeatureSearch.css

@@ -47,6 +47,12 @@ div.feature-search-bar > button {
     width: 100%;
 }
 
+div.feature-search-bar > button > div.Spinner {
+    width: 2em;
+    height: 2em;
+    margin-right: 1em;
+}
+
 div.feature-search-results {
     flex: 1 1 auto;
     overflow-y: auto;

utils/LayerUtils.js

@@ -1089,9 +1089,24 @@ const LayerUtils = {
                     }
                 }
                 if (printBgLayerName) {
-                    params.LAYERS.push(printBgLayerName);
-                    params.OPACITIES.push("255");
-                    params.COLORS.push("");
+                    let match = null;
+                    if (
+                        (match = printBgLayerName.match(/^(\w+):(.*)#([^#]+)$/)) && 
+                        match[1] === "wms"
+                    ) {
+                        const layer = {
+                            type: 'wms',
+                            params: {LAYERS: match[3], OPACITIES: '255'},
+                            url: match[2]
+                        };
+                        LayerUtils.addExternalLayerPrintParams(
+                            layer, params, printCrs, counterRef
+                        );
+                    } else {
+                        params.LAYERS.push(printBgLayerName);
+                        params.OPACITIES.push("255");
+                        params.COLORS.push("");
+                    }
                 }
             } else if (printExternalLayers) {
                 // Inject client-side wms as external layer for print

utils/VectorLayerUtils.js

@@ -87,6 +87,15 @@ const VectorLayerUtils = {
                 let geometry = VectorLayerUtils.reprojectGeometry(
                     feature.geometry, feature.crs || printCrs, printCrs
                 );
+                // Filter degenerate geometries coordinates
+                if (feature.geometry.type === "LineString") {
+                    const filteredCoordinates = geometry.coordinates.filter((item, pos, arr) => {
+                        return pos === 0 || item[0] !== arr[pos - 1][0] || item[1] !== arr[pos - 1][1];
+                    });
+                    if (filteredCoordinates.length < 2) {
+                        continue;
+                    }
+                }
                 if (
                     feature.geometry.type === "LineString" &&
                     !isEmpty(properties.segment_labels)