#8106 cesium viewer settings (#8280)

geosolutions-it · Jun 27, 2022 · 44ac4c7 · 44ac4c7
1 parent 79e9098
commit 44ac4c7
Show file tree

Hide file tree

Showing 14 changed files with 192 additions and 11 deletions.
diff --git a/web/client/actions/__tests__/map-test.js b/web/client/actions/__tests__/map-test.js
@@ -50,7 +50,9 @@ import {
     mapPluginLoad,
     MAP_PLUGIN_LOAD,
     orientateMap,
-    ORIENTATION
+    ORIENTATION,
+    updateMapOptions,
+    UPDATE_MAP_OPTIONS
 } from '../map';
 
 
@@ -249,4 +251,11 @@ describe('Test correctness of the map actions', () => {
         expect(retval.type).toEqual(ORIENTATION);
         expect(retval.orientation).toEqual(orientation);
     });
+    it('Update config map action', () => {
+        const configUpdate = { skyAtmosphere: false };
+        const retval = updateMapOptions(configUpdate);
+        expect(retval).toExist();
+        expect(retval.type).toEqual(UPDATE_MAP_OPTIONS);
+        expect(retval.configUpdate).toEqual(configUpdate);
+    });
 });
diff --git a/web/client/actions/map.js b/web/client/actions/map.js
@@ -31,6 +31,7 @@ export const MOUSE_OUT = 'MOUSE_OUT';
 export const MAP_PLUGIN_LOAD = 'MAP:MAP_PLUGIN_LOAD';
 export const ORIENTATION = 'MAP:ORIENTATION';
 export const UPDATE_MAP_VIEW = 'MAP:UPDATE_MAP_VIEW';
+export const UPDATE_MAP_OPTIONS = 'MAP:UPDATE_MAP_OPTIONS';
 
 
 /**
@@ -254,6 +255,11 @@ export const updateMapView = (data) => ({
     data
 });
 
+export const updateMapOptions = (configUpdate) => ({
+    type: UPDATE_MAP_OPTIONS,
+    configUpdate
+});
+
 /**
  * Actions for map
  * @name actions.map

diff --git a/web/client/components/map/cesium/Map.jsx b/web/client/components/map/cesium/Map.jsx
@@ -195,6 +195,19 @@ class CesiumMap extends React.Component {
             };
             this.setView(position);
         }
+
+        if (prevProps && (this.props.mapOptions.showSkyAtmosphere !== prevProps?.mapOptions?.showSkyAtmosphere)) {
+            this.map.scene.skyAtmosphere.show = this.props.mapOptions.showSkyAtmosphere;
+        }
+        if (prevProps && (this.props.mapOptions.showGroundAtmosphere !== prevProps?.mapOptions?.showGroundAtmosphere)) {
+            this.map.scene.globe.showGroundAtmosphere = this.props.mapOptions.showGroundAtmosphere;
+        }
+        if (prevProps && (this.props.mapOptions.enableFog !== prevProps?.mapOptions?.enableFog)) {
+            this.map.scene.fog.enabled = this.props.mapOptions.enableFog;
+        }
+        if (prevProps && (this.props.mapOptions.depthTestAgainstTerrain !== prevProps?.mapOptions?.depthTestAgainstTerrain)) {
+            this.map.scene.globe.depthTestAgainstTerrain = this.props.mapOptions.depthTestAgainstTerrain;
+        }
     }
 
     componentWillUnmount() {

diff --git a/web/client/configs/localConfig.json b/web/client/configs/localConfig.json
@@ -27,6 +27,10 @@
       "cesium": {
           "flyTo": true,
           "navigationTools": true,
+          "showSkyAtmosphere": true,
+          "showGroundAtmosphere": false,
+          "enableFog": false,
+          "depthTestAgainstTerrain": false,
           "terrainProvider": {
               "type": "ellipsoid"
           }

diff --git a/web/client/plugins/Map.jsx b/web/client/plugins/Map.jsx
@@ -10,14 +10,14 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect, createPlugin } from '../utils/PluginsUtils';
 import { loadFont } from '../utils/AgentUtils';
-import assign from 'object-assign';
 import Spinner from 'react-spinkit';
 import './map/css/map.css';
 import Message from '../components/I18N/Message';
 import ConfigUtils from '../utils/ConfigUtils';
 import { setMapResolutions, mapPluginLoad } from '../actions/map';
 import { isString } from 'lodash';
 import selector from './map/selector';
+import MapSettings from './map/mapsettings/MapSettings';
 import mapReducer from "../reducers/map";
 import layersReducer from "../reducers/layers";
 import drawReducer from "../reducers/draw";
@@ -326,9 +326,9 @@ class MapPlugin extends React.Component {
         return tool[this.props.mapType] || tool;
     };
 
-    getMapOptions = () => {
+    getConfigMapOptions = () => {
         return this.props.mapOptions && this.props.mapOptions[this.props.mapType] ||
-            ConfigUtils.getConfigProp("defaultMapOptions") && ConfigUtils.getConfigProp("defaultMapOptions")[this.props.mapType];
+            ConfigUtils.getConfigProp("defaultMapOptions") && ConfigUtils.getConfigProp("defaultMapOptions")[this.props.mapType] || {};
     };
 
     renderLayers = () => {
@@ -404,7 +404,7 @@ class MapPlugin extends React.Component {
                     {...this.props.options}
                     projectionDefs={this.props.projectionDefs}
                     {...this.props.map}
-                    mapOptions={assign({}, mapOptions, this.getMapOptions())}
+                    mapOptions={{...this.getConfigMapOptions(), ...mapOptions}}
                     zoomControl={this.props.zoomControl}
                     onResolutionsChange={this.props.onResolutionsChange}
                     errorPanel={ErrorPanel}
@@ -471,5 +471,11 @@ export default createPlugin('Map', {
         maptype: mapTypeReducer,
         additionallayers: additionalLayersReducer
     },
-    epics: mapEpics
+    epics: mapEpics,
+    containers: {
+        Settings: () => ({
+            tool: <MapSettings />,
+            position: 2
+        })
+    }
 });
diff --git a/web/client/plugins/Settings.jsx b/web/client/plugins/Settings.jsx
@@ -10,7 +10,8 @@ import './settings/css/settings.css';
 
 import assign from 'object-assign';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { cloneElement } from 'react';
+import { castArray } from 'lodash';
 import { Col, FormGroup, Glyphicon, Panel, Row } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import { ActionCreators } from 'redux-undo';
@@ -118,8 +119,10 @@ class SettingsButton extends React.Component {
         return Object.keys(settingsFirst)
             .filter(this.isEnabled)
             .map((setting) => settingsFirst[setting])
-            // TODO: here every item (item.tool) we emit should have a "key" property
-            .concat(this.props.items.map((item) => item.tool))
+            .concat(this.props.items.map((item) =>
+                castArray(item.tool)
+                    .map((tool, idx) => cloneElement(tool, { ...item.cfg, key: `${item.name}-${idx}` }))
+            ))
             .concat(
                 Object.keys(settingsLast)
                     .filter(this.isEnabled)

diff --git a/web/client/plugins/map/mapsettings/MapSettings.jsx b/web/client/plugins/map/mapsettings/MapSettings.jsx
@@ -0,0 +1,84 @@
+/*
+ * Copyright 2022, GeoSolutions Sas.
+ * 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 { connect } from 'react-redux';
+import { FormGroup, Checkbox, ControlLabel } from 'react-bootstrap';
+import Message from '../../../components/I18N/Message';
+import { createSelector } from 'reselect';
+import { updateMapOptions } from '../../../actions/map';
+import ConfigUtils from '../../../utils/ConfigUtils';
+
+import { mapSelector } from '../../../selectors/map';
+import { mapTypeSelector, isCesium as isCesiumSelector } from '../../../selectors/maptype';
+
+const mapStateToProps = createSelector(
+    mapSelector,
+    mapTypeSelector,
+    isCesiumSelector,
+    (map, mapType, isCesium) => ( { map, mapType, isCesium })
+);
+
+const actions = {
+    updateConfigAction: updateMapOptions
+};
+
+const Component = ({
+    map,
+    mapType,
+    isCesium,
+    updateConfigAction,
+    mapOptions: defaultMapOptions
+}) => {
+
+    const mapOptions = {
+        ...(defaultMapOptions && defaultMapOptions[mapType]
+            || ConfigUtils.getConfigProp("defaultMapOptions") && ConfigUtils.getConfigProp("defaultMapOptions")[mapType] || {}),
+        ...map?.mapOptions
+    };
+
+    const handleConfigUpdate = (options, key) => {
+        updateConfigAction({[key]: !options[key]});
+    };
+
+    return isCesium ? (
+        <form>
+            <FormGroup>
+                <ControlLabel>
+                    <Message msgId="map.settings.title" />
+                </ControlLabel>
+            </FormGroup>
+            <Checkbox
+                checked={mapOptions.showSkyAtmosphere}
+                onChange={() => handleConfigUpdate(mapOptions, 'showSkyAtmosphere')}
+            >
+                <Message msgId="map.settings.skyAtmosphere" />
+            </Checkbox>
+            <Checkbox
+                checked={mapOptions.showGroundAtmosphere}
+                onChange={() => handleConfigUpdate(mapOptions, 'showGroundAtmosphere')}
+            >
+                <Message msgId="map.settings.groundAtmosphere" />
+            </Checkbox>
+            <Checkbox
+                checked={mapOptions.enableFog}
+                onChange={() => handleConfigUpdate(mapOptions, 'enableFog')}
+            >
+                <Message msgId="map.settings.fog" />
+            </Checkbox>
+            <Checkbox
+                checked={mapOptions.depthTestAgainstTerrain}
+                onChange={() => handleConfigUpdate(mapOptions, 'depthTestAgainstTerrain')}
+            >
+                <Message msgId="map.settings.depthTest" />
+            </Checkbox>
+        </form>
+    ) : null;
+};
+
+export default connect(mapStateToProps, actions)(Component);
diff --git a/web/client/reducers/__tests__/map-test.js b/web/client/reducers/__tests__/map-test.js
@@ -9,7 +9,7 @@ import expect from 'expect';
 
 import { round } from 'lodash';
 import mapConfig from '../map';
-import { changeMapLimits, PAN_TO, SET_MAP_RESOLUTIONS } from '../../actions/map';
+import { updateMapOptions, changeMapLimits, PAN_TO, SET_MAP_RESOLUTIONS } from '../../actions/map';
 
 describe('Test the map reducer', () => {
     it('returns original state on unrecognized action', () => {
@@ -274,4 +274,16 @@ describe('Test the map reducer', () => {
         const state = mapConfig({}, action);
         expect(state.orientate).toEqual(orientation);
     });
+
+    it('Updates scene config', () => {
+        const action = updateMapOptions({
+            skyAtmosphere: false
+        });
+        let state = mapConfig({
+            mapOptions: {
+                skyAtmosphere: true
+            }
+        }, action);
+        expect(state.mapOptions.skyAtmosphere).toBe(false);
+    });
 });
diff --git a/web/client/reducers/map.js b/web/client/reducers/map.js
@@ -23,7 +23,8 @@ import {
     REGISTER_EVENT_LISTENER,
     UNREGISTER_EVENT_LISTENER,
     ORIENTATION,
-    UPDATE_MAP_VIEW
+    UPDATE_MAP_VIEW,
+    UPDATE_MAP_OPTIONS
 } from '../actions/map';
 
 import assign from 'object-assign';
@@ -169,6 +170,14 @@ function mapConfig(state = {eventListeners: {}}, action) {
                 }
             }
         };
+    case UPDATE_MAP_OPTIONS:
+        return {
+            ...state,
+            mapOptions: {
+                ...state.mapOptions,
+                ...action.configUpdate
+            }
+        };
     default:
         return state;
     }

diff --git a/web/client/translations/data.de-DE.json b/web/client/translations/data.de-DE.json
@@ -460,6 +460,13 @@
             "renderingErrorTitle": "Renderfehler",
             "renderingErrorMessage": "<p>Das Rendern der Karte wurde gestoppt und dies kann verschiedene Gründe haben: </p><ul><li>Der angewendete Stil enthält einige Regeln oder Variablen, die von den Funktionen nicht unterstützt werden</li>< li>Die Ebene ist nicht richtig konfiguriert</li></ul><p>Sie können Änderungen am Ebenenstil vornehmen und dann auf die Schaltfläche 'Karte neu laden' klicken. <br/> Weitere Informationen finden Sie in der folgenden Meldung:< /p>",
             "reloadMap": "Karte neu laden",
+            "settings": {
+              "title": "Karteneinstellungen",
+              "skyAtmosphere": "Himmelsatmosphäre zeigen",
+              "groundAtmosphere": "Atmosphäre auf dem Gelände anzeigen",
+              "fog": "Nebel anzeigen",
+              "depthTest": "Tiefentest gegen Gelände aktivieren"
+            },
             "thumbnailError": {
                 "error403": "Sie haben keine Berechtigung um Miniaturansichten hochzuladen",
                 "error404": "Es gab einen Fehler während der Erstellung der Miniaturansicht",

diff --git a/web/client/translations/data.en-US.json b/web/client/translations/data.en-US.json
@@ -422,6 +422,13 @@
             "renderingErrorTitle": "Rendering error",
             "renderingErrorMessage": "<p>The map rendering has stopped and this could be due for different reasons: </p><ul><li>The applied style contains some rules or variables not supported by the features</li><li>The layer is not properly configured</li></ul><p>You can apply changes to the layer style and then click on 'Reload map' button. <br/> See the message below for addition information:</p>",
             "reloadMap": "Reload map",
+            "settings": {
+              "title": "Map settings",
+              "skyAtmosphere": "Show sky atmosphere",
+              "groundAtmosphere": "Show ground atmosphere",
+              "fog": "Show fog",
+              "depthTest": "Enable depth test against terrain"
+            },
             "thumbnailError": {
                 "error403": "You are not allowed to update the thumbnail",
                 "error404": "An error occurred while creating the thumbnail",

diff --git a/web/client/translations/data.es-ES.json b/web/client/translations/data.es-ES.json
@@ -422,6 +422,13 @@
             "renderingErrorTitle": "Error de procesamiento",
             "renderingErrorMessage": "<p>La representación del mapa se detuvo y esto podría deberse a diferentes razones: </p><ul><li>El estilo aplicado contiene algunas reglas o variables que no son compatibles con las características</li>< li>La capa no está configurada correctamente</li></ul><p>Puede aplicar cambios al estilo de la capa y luego hacer clic en el botón 'Recargar mapa'. <br/> Consulte el mensaje a continuación para obtener información adicional:< /p>",
             "reloadMap": "Recargar mapa",
+            "settings": {
+              "title": "Configuración del mapa",
+              "skyAtmosphere": "Mostrar la atmósfera del cielo",
+              "groundAtmosphere": "Mostrar la atmósfera de la superficie",
+              "fog": "Mostrar niebla",
+              "depthTest": "Activar depthTest contra el terreno"
+            },
             "thumbnailError": {
                 "error403": "Error al modificar la miniatura",
                 "error404": "Error al crear la miniatura",

diff --git a/web/client/translations/data.fr-FR.json b/web/client/translations/data.fr-FR.json
@@ -422,6 +422,13 @@
             "renderingErrorTitle": "Erreur de rendu",
             "renderingErrorMessage": "<p>Le rendu de la carte s'est arrêté et cela peut être dû à différentes raisons : </p><ul><li>Le style appliqué contient des règles ou des variables non prises en charge par les fonctionnalités</li>< li>Le calque n'est pas correctement configuré</li></ul><p>Vous pouvez appliquer des modifications au style de calque, puis cliquer sur le bouton 'Recharger la carte'. <br/> Consultez le message ci-dessous pour plus d'informations :< /p>",
             "reloadMap": "Recharger la carte",
+            "settings": {
+              "title": "Paramètres de la carte",
+              "skyAtmosphere": "Afficher l'atmosphère du ciel",
+              "groundAtmosphere": "Montrer l'atmosphère du terrain",
+              "fog": "Afficher le brouillard",
+              "depthTest": "Activer le depthTest sur le terrain"
+            },
             "thumbnailError": {
                 "error403": "Une erreur est survenue lors de la suppression de la vignette",
                 "error404": "Une erreur est survenue lors de la création de la vignette",

diff --git a/web/client/translations/data.it-IT.json b/web/client/translations/data.it-IT.json
@@ -422,6 +422,13 @@
             "renderingErrorTitle": "Errore di rendering",
             "renderingErrorMessage": "<p>Il rendering della mappa si è interrotto e ciò potrebbe essere dovuto a diversi motivi: </p><ul><li>Lo stile applicato contiene alcune regole o variabili non supportate dalle features</li>< li>Il livello non è configurato correttamente</li></ul><p>Puoi applicare le modifiche allo stile del layer e poi prenere il pulsante 'Ricarica mappa'. <br/> Per ulteriori informazioni:< /p>",
             "reloadMap": "Ricarica mappa",
+            "settings": {
+              "title": "Impostazioni della mappa",
+              "skyAtmosphere": "Mostra l'atmosfera del cielo",
+              "groundAtmosphere": "Mostra l'atmosfera del terreno",
+              "fog": "Mostra nebbia",
+              "depthTest": "Abilita il depthTest sul terreno"
+            },
             "thumbnailError": {
                 "error403": "Non disponi dei permessi per aggiornare la thumbnail",
                 "error404": "Non è stato possibile creare la thumbnail sul server",