qwc2/components/StandardApp.js

QGIS Web Client

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 _createForOfIteratorHelper(r,e){var t="undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(!t){if(Array.isArray(r)||(t=_unsupportedIterableToArray(r))||e&&r&&"number"==typeof r.length){t&&(r=t);var _n=0,F=function F(){};return{s:F,n:function n(){return _n>=r.length?{done:!0}:{done:!1,value:r[_n++]}},e:function e(r){throw r},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,u=!1;return{s:function s(){t=t.call(r)},n:function n(){var r=t.next();return a=r.done,r},e:function e(r){u=!0,o=r},f:function f(){try{a||null==t["return"]||t["return"]()}finally{if(u)throw 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}}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t["return"]&&(u=t["return"](),Object(u)!==u))return}finally{if(o)throw n}}return a}}function _arrayWithHoles(r){if(Array.isArray(r))return r}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")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
 * Copyright 2016 GeoSolutions Sas
 * Copyright 2016-2024 Sourcepole AG
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree.
 */import React from"react";import{Provider,connect}from"react-redux";import axios from"axios";import deepmerge from"deepmerge";import{register as olProj4Register}from"ol/proj/proj4";import Proj4js from"proj4";import PropTypes from"prop-types";import{localConfigLoaded,setStartupParameters,setColorScheme}from"../actions/localConfig";import{loadLocale}from"../actions/locale";import{setCurrentTask}from"../actions/task";import{themesLoaded,setCurrentTheme}from"../actions/theme";import{NotificationType,showNotification,setBottombarHeight,setTopbarHeight}from"../actions/windows";import ReducerIndex from"../reducers/index";import{createStore}from"../stores/StandardStore";import ConfigUtils from"../utils/ConfigUtils";import CoordinatesUtils from"../utils/CoordinatesUtils";import LocaleUtils from"../utils/LocaleUtils";import MapUtils from"../utils/MapUtils";import MiscUtils from"../utils/MiscUtils";import{UrlParams,resolvePermaLink}from"../utils/PermaLinkUtils";import ThemeUtils from"../utils/ThemeUtils";import PluginsContainer from"./PluginsContainer";import"./style/App.css";import"./style/DefaultColorScheme.css";var CSRF_TOKEN=MiscUtils.getCsrfToken();if(CSRF_TOKEN){axios.interceptors.request.use(function(config){if(["POST","PUT","PATCH","DELETE"].includes(config.method.toUpperCase())){config.headers["X-CSRF-TOKEN"]=CSRF_TOKEN}return config},function(error){return Promise.reject(error)})}var AppContainerComponent=/*#__PURE__*/function(_React$Component){function AppContainerComponent(props){var _this;_classCallCheck(this,AppContainerComponent);_this=_callSuper(this,AppContainerComponent,[props]);_defineProperty(_this,"loadThemes",function(){_this.themesLoaded=true;var _this$props$startupCo=_this.props.startupConfig,state=_this$props$startupCo.state,permalinkInvalid=_this$props$startupCo.permalinkInvalid;var params=_objectSpread({},_this.props.startupConfig.params);// Clone as changed below
// Warn if permalink key is invalid
if(permalinkInvalid){_this.props.showNotification("missingtheme",LocaleUtils.tr("app.missingpermalink"),NotificationType.WARN,true)}// Load themes.json
axios.get("themes.json").then(function(response){var _this$props$appConfig,_this$props$appConfig2,_theme;var themes=response.data.themes||{};(_this$props$appConfig=(_this$props$appConfig2=_this.props.appConfig).themePreprocessor)===null||_this$props$appConfig===void 0||_this$props$appConfig.call(_this$props$appConfig2,themes);_this.props.themesLoaded(themes);var theme=ThemeUtils.getThemeById(themes,params.t);if((!theme||theme.restricted)&&!ConfigUtils.getConfigProp("dontLoadDefaultTheme")){if(params.t){_this.props.showNotification("missingtheme",LocaleUtils.tr("app.missingtheme",params.t),NotificationType.WARN,true);params.l=undefined}var defaultTheme=Object.fromEntries(_this.props.defaultUrlParams.split("&").map(function(x){return x.split("=")})).t||themes.defaultTheme;theme=ThemeUtils.getThemeById(themes,defaultTheme);params.t=defaultTheme}if(theme){var _params$bl;// Compute initial view
var initialView=params.v;var initialExtent=null;if(params.c&&params.s!==undefined){var coords=params.c.split(/[;,]/g).map(function(x){return parseFloat(x)||0});var scales=theme.scales||themes.defaultScales;var zoom=MapUtils.computeZoom(scales,params.s);if(coords.length===2){var p=CoordinatesUtils.reproject(coords,params.crs||theme.mapCrs,theme.bbox.crs);var bounds=theme.bbox.bounds;// Only accept c if it is within the theme bounds
if(bounds[0]<=p[0]&&p[0]<=bounds[2]&&bounds[1]<=p[1]&&p[1]<=bounds[3]){initialExtent={center:coords,zoom:zoom,crs:params.crs||theme.mapCrs}}else{initialExtent={center:[0.5*(bounds[0]+bounds[2]),0.5*(bounds[1]+bounds[3])],zoom:zoom,crs:theme.bbox.crs}}}}else if(params.e){var _bounds=params.e.split(/[;,]/g).map(function(x){return parseFloat(x)||0});if(CoordinatesUtils.isValidExtent(_bounds)){initialExtent={bounds:_bounds,crs:params.crs||theme.mapCrs}}}var layerParams=params.l!==undefined?params.l.split(",").filter(function(entry){return entry}):null;if(layerParams&&ConfigUtils.getConfigProp("urlReverseLayerOrder")){layerParams.reverse()}_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,initialView)}var task=ConfigUtils.getConfigProp("startupTask");if(task&&!((_theme=theme)!==null&&_theme!==void 0&&(_theme=_theme.config)!==null&&_theme!==void 0&&_theme.startupTask)){var mapClickAction=ConfigUtils.getPluginConfig(task.key).mapClickAction;_this.props.setCurrentTask(task.key,task.mode,mapClickAction)}})});_this.themesLoaded=false;// Set initial bottom/topbar height to zero in case not topbar/bottombar is enabled
// The components will set the proper height if and when initialized
props.setTopbarHeight(0);props.setBottombarHeight(0);return _this}_inherits(AppContainerComponent,_React$Component);return _createClass(AppContainerComponent,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;window.addEventListener("QWC2ApiReady",function(){var _window$qwc;// Warn about non-existing plugins
var plugins=_objectSpread(_objectSpread({},_this2.props.appConfig.pluginsDef.plugins),(_window$qwc=window.qwc2)===null||_window$qwc===void 0?void 0:_window$qwc.__customPlugins);var mode=ConfigUtils.isMobile()?"mobile":"desktop";_this2.props.localConfig.plugins[mode].filter(function(entry){return!plugins[entry.name+"Plugin"]}).forEach(function(entry){// eslint-disable-next-line
console.warn("Non-existing plugin: "+entry.name)})})}},{key:"componentDidUpdate",value:function componentDidUpdate(){// The map component needs to have finished loading before theme initialization can proceed
if(this.props.haveMapSize&&!this.themesLoaded){this.loadThemes()}}},{key:"render",value:function render(){var _window$qwc2;// Ensure translations and config are loaded
if(!this.props.haveLocale||!this.props.localConfig.plugins||!this.props.localConfig.startupParams){return null}var plugins=_objectSpread(_objectSpread({},this.props.appConfig.pluginsDef.plugins),(_window$qwc2=window.qwc2)===null||_window$qwc2===void 0?void 0:_window$qwc2.__customPlugins);var pluginsConfig=this.props.localConfig.plugins;var appPluginConfig=_objectSpread({},this.props.appConfig.pluginsDef.cfg);// Inject plugins available in 3d view to View3D plugin configuration
appPluginConfig.View3DPlugin=_objectSpread(_objectSpread({},appPluginConfig.View3DPlugin),{},{plugins:Object.entries(plugins).reduce(function(res,_ref){var _plugin$WrappedCompon;var _ref2=_slicedToArray(_ref,2),key=_ref2[0],plugin=_ref2[1];if((_plugin$WrappedCompon=plugin.WrappedComponent)!==null&&_plugin$WrappedCompon!==void 0&&_plugin$WrappedCompon.availableIn3D||plugin.availableIn3D){return _objectSpread(_objectSpread({},res),{},_defineProperty({},key,plugin))}return res},{})});return/*#__PURE__*/React.createElement(PluginsContainer,{plugins:plugins,pluginsAppConfig:appPluginConfig,pluginsConfig:pluginsConfig})}}])}(React.Component);_defineProperty(AppContainerComponent,"propTypes",{appConfig:PropTypes.object,defaultUrlParams:PropTypes.string,haveLocale:PropTypes.bool,haveMapSize:PropTypes.bool,localConfig:PropTypes.object,setBottombarHeight:PropTypes.func,setCurrentTask:PropTypes.func,setCurrentTheme:PropTypes.func,setTopbarHeight:PropTypes.func,showNotification:PropTypes.func,startupConfig:PropTypes.object,themesLoaded:PropTypes.func});var AppContainer=connect(function(state){var _state$localConfig$us;return{customPlugins:state.localConfig.customPlugins,// Unused, just to ensure component reacts when custom plugins change
haveLocale:state.locale.current!==null,haveMapSize:state.map.size!==null,defaultUrlParams:((_state$localConfig$us=state.localConfig.user_infos)===null||_state$localConfig$us===void 0?void 0:_state$localConfig$us.default_url_params)||"",localConfig:state.localConfig}},{themesLoaded:themesLoaded,setCurrentTask:setCurrentTask,setCurrentTheme:setCurrentTheme,showNotification:showNotification,setTopbarHeight:setTopbarHeight,setBottombarHeight:setBottombarHeight})(AppContainerComponent);var StandardApp=/*#__PURE__*/function(_React$Component2){function StandardApp(props){var _this3;_classCallCheck(this,StandardApp);_this3=_callSuper(this,StandardApp,[props]);_defineProperty(_this3,"state",{startupConfig:null});_defineProperty(_this3,"computeVh",function(){// https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
document.documentElement.style.setProperty("--vh",window.innerHeight*0.01+"px")});_defineProperty(_this3,"init",function(){// Save initial params and clear URL
var initialParams=UrlParams.getParams();UrlParams.clear();// Load config.json
var configParams=Object.entries(initialParams).reduce(function(res,_ref3){var _ref4=_slicedToArray(_ref3,2),key=_ref4[0],value=_ref4[1];if(key.startsWith("config:")){res[key.slice(7)]=value}return res},{});ConfigUtils.loadConfiguration(configParams).then(function(config){var _window$QWC2PluginCon,_window$QWC2PluginCon2,_window$QWC2PluginCon3;// Merge common config into mobile/desktop config
var renameTaskButtons=function renameTaskButtons(res,entry){var key=entry.name+(entry.name==="TaskButton"?"#"+(entry.cfg||{}).task:"");return _objectSpread(_objectSpread({},res),{},_defineProperty({},key,entry))};var commonConfig=[].concat(_toConsumableArray(config.plugins.common||[]),_toConsumableArray(((_window$QWC2PluginCon=window.QWC2PluginConfig)===null||_window$QWC2PluginCon===void 0?void 0:_window$QWC2PluginCon.common)||[])).reduce(renameTaskButtons,{});var desktopConfig=[].concat(_toConsumableArray(config.plugins.desktop||[]),_toConsumableArray(((_window$QWC2PluginCon2=window.QWC2PluginConfig)===null||_window$QWC2PluginCon2===void 0?void 0:_window$QWC2PluginCon2.desktop)||[]));var mobileConfig=[].concat(_toConsumableArray(config.plugins.mobile||[]),_toConsumableArray(((_window$QWC2PluginCon3=window.QWC2PluginConfig)===null||_window$QWC2PluginCon3===void 0?void 0:_window$QWC2PluginCon3.mobile)||[]));config.plugins.desktop=Object.values(deepmerge(commonConfig,desktopConfig.reduce(renameTaskButtons,{})));config.plugins.mobile=Object.values(deepmerge(commonConfig,mobileConfig.reduce(renameTaskButtons,{})));delete config.plugins.common;// Store whether to show plugin in 2d/3d mode
var plugins=_this3.props.appConfig.pluginsDef.plugins;config.plugins.mobile.forEach(function(entry){var plugin=plugins[entry.name+"Plugin"];if(plugin){var _plugin$WrappedCompon2;var component=(_plugin$WrappedCompon2=plugin.WrappedComponent)!==null&&_plugin$WrappedCompon2!==void 0?_plugin$WrappedCompon2:plugin;entry.availableIn3D=component.availableIn3D===true;entry.availableIn2D=component.availableIn2D===true||component.availableIn2D===undefined}});config.plugins.desktop.forEach(function(entry){var plugin=plugins[entry.name+"Plugin"];if(plugin){var _plugin$WrappedCompon3;var component=(_plugin$WrappedCompon3=plugin.WrappedComponent)!==null&&_plugin$WrappedCompon3!==void 0?_plugin$WrappedCompon3:plugin;entry.availableIn3D=component.availableIn3D===true;entry.availableIn2D=component.availableIn2D===true||component.availableIn2D===undefined}});// Add projections from config
var _iterator=_createForOfIteratorHelper(config.projections||[]),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var proj=_step.value;if(Proj4js.defs(proj.code)===undefined){Proj4js.defs(proj.code,proj.proj)}CoordinatesUtils.setCrsLabels(_defineProperty({},proj.code,proj.label))}}catch(err){_iterator.e(err)}finally{_iterator.f()}olProj4Register(Proj4js);StandardApp.store.dispatch(localConfigLoaded(config));// Load locale
var defaultLocale=_this3.props.appConfig.getDefaultLocale?_this3.props.appConfig.getDefaultLocale():"";StandardApp.store.dispatch(loadLocale(_this3.props.appConfig.defaultLocaleData,defaultLocale));// Set color scheme
var storedColorScheme=ConfigUtils.havePlugin("Settings")?localStorage.getItem("qwc2-color-scheme"):null;var colorScheme=initialParams.style||storedColorScheme||ConfigUtils.getConfigProp("defaultColorScheme");StandardApp.store.dispatch(setColorScheme(colorScheme));// Resolve permalink and restore settings
resolvePermaLink(initialParams,function(params,state,success){StandardApp.store.dispatch(setStartupParameters(params,state));_this3.setState({startupConfig:{params:params,state:state,permalinkInvalid:!success}})})})});var initialState=_this3.props.appConfig.initialState||{};StandardApp.store=createStore(ReducerIndex.reducers,initialState,_this3.props.appConfig.actionLogger);_this3.init();_this3.touchY=null;return _this3}_inherits(StandardApp,_React$Component2);return _createClass(StandardApp,[{key:"componentDidMount",value:function componentDidMount(){window.addEventListener("resize",this.computeVh);this.computeVh()}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("resize",this.computeVh)}},{key:"render",value:function render(){if(!this.state.startupConfig){return null}return/*#__PURE__*/React.createElement(Provider,{store:StandardApp.store},/*#__PURE__*/React.createElement(AppContainer,{appConfig:this.props.appConfig,startupConfig:this.state.startupConfig}))}}])}(React.Component);_defineProperty(StandardApp,"store",null);_defineProperty(StandardApp,"propTypes",{appConfig:PropTypes.object});export{StandardApp as default};