From 49ba48b7fba4633e5e7b303114810c3a70e78dcf Mon Sep 17 00:00:00 2001 From: David Quartey <42542676+DavidQuartz@users.noreply.github.com> Date: Mon, 5 Sep 2022 09:03:02 +0000 Subject: [PATCH] fix style editor in maps (#1170) (#1172) Co-authored-by: stefano bovio --- .../client/js/epics/datasetscatalog.js | 5 +-- .../client/js/epics/layersettings.js | 5 +-- .../client/js/epics/visualstyleeditor.js | 5 +-- .../js/selectors/__tests__/mapsave-test.js | 29 +++++++++++++++ .../client/js/selectors/mapsave.js | 36 +++++++++++++++++++ .../client/js/selectors/resource.js | 2 +- .../client/js/utils/LayoutUtils.js | 12 +++++++ 7 files changed, 87 insertions(+), 7 deletions(-) create mode 100644 geonode_mapstore_client/client/js/selectors/__tests__/mapsave-test.js create mode 100644 geonode_mapstore_client/client/js/selectors/mapsave.js create mode 100644 geonode_mapstore_client/client/js/utils/LayoutUtils.js diff --git a/geonode_mapstore_client/client/js/epics/datasetscatalog.js b/geonode_mapstore_client/client/js/epics/datasetscatalog.js index a4ca6e9140..cd729da615 100644 --- a/geonode_mapstore_client/client/js/epics/datasetscatalog.js +++ b/geonode_mapstore_client/client/js/epics/datasetscatalog.js @@ -10,6 +10,7 @@ import { SET_CONTROL_PROPERTY } from '@mapstore/framework/actions/controls'; import { updateMapLayout, UPDATE_MAP_LAYOUT } from '@mapstore/framework/actions/maplayout'; import { mapLayoutSelector } from '@mapstore/framework/selectors/maplayout'; import { getConfigProp } from "@mapstore/framework/utils/ConfigUtils"; +import { LayoutSections } from "@js/utils/LayoutUtils"; /** * @module epics/datasetcatalog @@ -22,7 +23,7 @@ export const gnUpdateDatasetsCatalogMapLayout = (action$, store) => action$.ofType(UPDATE_MAP_LAYOUT, SET_CONTROL_PROPERTY) .filter(() => store.getState()?.controls?.datasetsCatalog?.enabled) .filter(({ source }) => { - return source !== 'DatasetsCatalog'; + return source !== LayoutSections.PANEL; }) .map(({ layout }) => { const mapLayout = getConfigProp('mapLayout') || { left: { sm: 300, md: 500, lg: 600 }, right: { md: 658 }, bottom: { sm: 30 } }; @@ -35,7 +36,7 @@ export const gnUpdateDatasetsCatalogMapLayout = (action$, store) => right: mapLayout.right.md } }); - return { ...action, source: 'DatasetsCatalog' }; // add an argument to avoid infinite loop. + return { ...action, source: LayoutSections.PANEL }; // add an argument to avoid infinite loop. }); export default { diff --git a/geonode_mapstore_client/client/js/epics/layersettings.js b/geonode_mapstore_client/client/js/epics/layersettings.js index dff3714bdb..c1a33743c9 100644 --- a/geonode_mapstore_client/client/js/epics/layersettings.js +++ b/geonode_mapstore_client/client/js/epics/layersettings.js @@ -10,6 +10,7 @@ import { updateMapLayout, UPDATE_MAP_LAYOUT } from '@mapstore/framework/actions/ import { mapLayoutSelector } from '@mapstore/framework/selectors/maplayout'; import { getConfigProp } from "@mapstore/framework/utils/ConfigUtils"; import { SHOW_SETTINGS } from '@mapstore/framework/actions/layers'; +import { LayoutSections } from "@js/utils/LayoutUtils"; /** * @module epics/layersetting */ @@ -21,7 +22,7 @@ export const gnUpdateLayerSettingsMapLayout = (action$, store) => action$.ofType(UPDATE_MAP_LAYOUT, SHOW_SETTINGS) .filter(() => store.getState()?.layers?.settings?.expanded) .filter(({ source }) => { - return source !== 'LayerSettings'; + return source !== LayoutSections.PANEL; }) .map(({ layout }) => { const mapLayout = getConfigProp('mapLayout') || { left: { sm: 300, md: 500, lg: 600 }, right: { md: 658 }, bottom: { sm: 30 } }; @@ -34,7 +35,7 @@ export const gnUpdateLayerSettingsMapLayout = (action$, store) => left: mapLayout.left.sm } }); - return { ...action, source: 'LayerSettings' }; // add an argument to avoid infinite loop. + return { ...action, source: LayoutSections.PANEL }; // add an argument to avoid infinite loop. }); export default { diff --git a/geonode_mapstore_client/client/js/epics/visualstyleeditor.js b/geonode_mapstore_client/client/js/epics/visualstyleeditor.js index 9eaa7dc99b..692788e5a6 100644 --- a/geonode_mapstore_client/client/js/epics/visualstyleeditor.js +++ b/geonode_mapstore_client/client/js/epics/visualstyleeditor.js @@ -25,6 +25,7 @@ import { getStyleProperties } from '@js/api/geonode/style'; import { updateMapLayout, UPDATE_MAP_LAYOUT } from '@mapstore/framework/actions/maplayout'; import { mapLayoutSelector } from '@mapstore/framework/selectors/maplayout'; import { getConfigProp } from "@mapstore/framework/utils/ConfigUtils"; +import { LayoutSections } from "@js/utils/LayoutUtils"; /** * @module epics/visualstyleeditor @@ -166,7 +167,7 @@ export const gnUpdateVisualStyleEditorMapLayout = (action$, store) => action$.ofType(UPDATE_MAP_LAYOUT, SET_CONTROL_PROPERTY) .filter(() => store.getState()?.controls?.visualStyleEditor?.enabled) .filter(({ source }) => { - return source !== 'VisualStyleEditor'; + return source !== LayoutSections.PANEL; }) .map(({ layout }) => { const mapLayout = getConfigProp('mapLayout') || { left: { sm: 300, md: 500, lg: 600 }, right: { md: 658 }, bottom: { sm: 30 } }; @@ -179,7 +180,7 @@ export const gnUpdateVisualStyleEditorMapLayout = (action$, store) => left: mapLayout.left.md } }); - return { ...action, source: 'VisualStyleEditor' }; // add an argument to avoid infinite loop. + return { ...action, source: LayoutSections.PANEL }; // add an argument to avoid infinite loop. }); export default { diff --git a/geonode_mapstore_client/client/js/selectors/__tests__/mapsave-test.js b/geonode_mapstore_client/client/js/selectors/__tests__/mapsave-test.js new file mode 100644 index 0000000000..02343f6458 --- /dev/null +++ b/geonode_mapstore_client/client/js/selectors/__tests__/mapsave-test.js @@ -0,0 +1,29 @@ +/* + * Copyright 2021, 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 expect from 'expect'; +import { + mapSaveSelector +} from '../mapsave'; + +describe('mapsave selector', () => { + it('should keep the available styles property', () => { + const state = { + map: { + present: {} + }, + layers: { + flat: [{ id: '01', availableStyles: [{ name: 'style' }] }] + } + }; + const data = mapSaveSelector(state); + expect(data.map.layers[0].availableStyles).toEqual([ + { name: 'style' } + ]); + }); +}); diff --git a/geonode_mapstore_client/client/js/selectors/mapsave.js b/geonode_mapstore_client/client/js/selectors/mapsave.js new file mode 100644 index 0000000000..32b24ff17e --- /dev/null +++ b/geonode_mapstore_client/client/js/selectors/mapsave.js @@ -0,0 +1,36 @@ +/* + * 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 { mapSaveSelector as msMapSaveSelector } from '@mapstore/framework/selectors/mapsave'; +import { layersSelector } from '@mapstore/framework/selectors/layers'; + +/* + * this map save selector is extending the default properties available in the final map data blob + * eg. availableStyles property + */ +export const mapSaveSelector = (state) => { + const layersState = layersSelector(state); + const { map, ...data } = msMapSaveSelector(state); + return { + ...data, + map: { + ...map, + layers: (map?.layers || []).map((layer) => { + const layerState = layersState.find((lState) => lState.id === layer.id); + if (layerState) { + const { availableStyles } = layerState; + return { + ...layer, + availableStyles + }; + } + return layer; + }) + } + }; +}; diff --git a/geonode_mapstore_client/client/js/selectors/resource.js b/geonode_mapstore_client/client/js/selectors/resource.js index 42f0138264..48a65e470f 100644 --- a/geonode_mapstore_client/client/js/selectors/resource.js +++ b/geonode_mapstore_client/client/js/selectors/resource.js @@ -7,7 +7,7 @@ */ import { mapSelector } from '@mapstore/framework/selectors/map'; -import { mapSaveSelector } from '@mapstore/framework/selectors/mapsave'; +import { mapSaveSelector } from '@js/selectors/mapsave'; import { compareMapChanges } from '@mapstore/framework/utils/MapUtils'; import { currentStorySelector } from '@mapstore/framework/selectors/geostory'; import { originalDataSelector } from '@mapstore/framework/selectors/dashboard'; diff --git a/geonode_mapstore_client/client/js/utils/LayoutUtils.js b/geonode_mapstore_client/client/js/utils/LayoutUtils.js new file mode 100644 index 0000000000..a949d2c97f --- /dev/null +++ b/geonode_mapstore_client/client/js/utils/LayoutUtils.js @@ -0,0 +1,12 @@ +/* + * 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. + */ + +export const LayoutSections = { + // we need a constant to prevent infinite loop in the epics that update the layout + PANEL: 'PANEL' +};