Skip to content

Commit

Permalink
Adapt style editor component to fit inside the dataset style editor p…
Browse files Browse the repository at this point in the history
…age (#537)
  • Loading branch information
allyoucanmap authored Oct 18, 2021
1 parent 039764d commit f0e977b
Show file tree
Hide file tree
Showing 16 changed files with 790 additions and 32 deletions.
35 changes: 35 additions & 0 deletions geonode_mapstore_client/client/js/actions/visualstyleeditor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/*
* Copyright 2020, 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 REQUEST_DATASET_AVAILABLE_STYLES = 'GEONODE:REQUEST_DATASET_AVAILABLE_STYLES';
export const CREATE_GEONODE_STYLE = 'GEONODE:CREATE_GEONODE_STYLE';
export const DELETE_GEONODE_STYLE = 'GEONODE:DELETE_GEONODE_STYLE';

export function requestDatasetAvailableStyles(layer, options) {
return {
type: REQUEST_DATASET_AVAILABLE_STYLES,
layer,
options
};
}

export function createGeoNodeStyle(title, options) {
return {
type: CREATE_GEONODE_STYLE,
title,
options
};
}

export function deleteGeoNodeStyle(styleName, options) {
return {
type: DELETE_GEONODE_STYLE,
styleName,
options
};
}
4 changes: 3 additions & 1 deletion geonode_mapstore_client/client/js/apps/gn-map.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { connect } from 'react-redux';
import { getConfigProp, setConfigProp } from '@mapstore/framework/utils/ConfigUtils';
import { loadPrintCapabilities } from '@mapstore/framework/actions/print';
import { setControlProperty } from '@mapstore/framework/actions/controls';
import { changeMapInfoFormat } from '@mapstore/framework/actions/mapInfo';
import StandardApp from '@mapstore/framework/components/app/StandardApp';
import withExtensions from '@mapstore/framework/components/app/withExtensions';

Expand Down Expand Up @@ -182,7 +183,8 @@ document.addEventListener('DOMContentLoaded', function() {
setControlProperty.bind(null, 'toolbar', 'expanded', false),
...(resourceId !== undefined
? [ requestResourceConfig.bind(null, geoNodePageConfig.resourceType || ResourceTypes.MAP, resourceId) ]
: [])
: []),
changeMapInfoFormat.bind(null, 'application/json')
]
},
withExtensions(StandardApp));
Expand Down
57 changes: 41 additions & 16 deletions geonode_mapstore_client/client/js/epics/gnresource.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,12 @@ import {
import { configureMap } from '@mapstore/framework/actions/config';
import {
browseData,
selectNode,
showSettings
selectNode
} from '@mapstore/framework/actions/layers';
import { toggleStyleEditor } from '@mapstore/framework/actions/styleeditor';
import {
updateStatus,
initStyleService
} from '@mapstore/framework/actions/styleeditor';
import {
setNewResource,
setResourceType,
Expand Down Expand Up @@ -59,18 +61,34 @@ import {
ResourceTypes
} from '@js/utils/ResourceUtils';
import { canAddResource } from '@js/selectors/resource';
import { updateAdditionalLayer } from '@mapstore/framework/actions/additionallayers';
import { STYLE_OWNER_NAME } from '@mapstore/framework/utils/StyleEditorUtils';
import StylesAPI from '@mapstore/framework/api/geoserver/Styles';
import { styleServiceSelector } from '@mapstore/framework/selectors/styleeditor';
import { updateStyleService } from '@mapstore/framework/api/StyleEditor';

const resourceTypes = {
[ResourceTypes.DATASET]: {
resourceObservable: (pk, options) => {
const { page } = options || {};
return Observable.defer(() => axios.all([
getNewMapConfiguration(),
getDatasetByPk(pk)
]))
return Observable.defer(() =>
axios.all([
getNewMapConfiguration(),
getDatasetByPk(pk)
])
.then((response) => {
const [mapConfig, gnLayer] = response;
const newLayer = resourceToLayerConfig(gnLayer);
return StylesAPI.getStylesInfo({
baseUrl: options?.styleService?.baseUrl,
styles: [newLayer.defaultStyle]
}).then((availableStyles) => {
return [mapConfig, gnLayer, { ...newLayer, availableStyles }];
});
})
)
.switchMap((response) => {
const [mapConfig, gnLayer] = response;
const newLayer = resourceToLayerConfig(gnLayer);
const [mapConfig, gnLayer, newLayer] = response;
const {minx, miny, maxx, maxy } = newLayer?.bbox?.bounds || {};
const extent = newLayer?.bbox?.bounds && [minx, miny, maxx, maxy ];
return Observable.of(
Expand Down Expand Up @@ -98,11 +116,9 @@ const resourceTypes = {
: []),
...(page === 'dataset_edit_style_viewer'
? [
showSettings(newLayer.id, 'layers', {
opacity: newLayer.opacity || 1
}),
setControlProperty('layersettings', 'activeTab', 'style'),
toggleStyleEditor(null, true)
setControlProperty('visualStyleEditor', 'enabled', true),
updateAdditionalLayer(newLayer.id, STYLE_OWNER_NAME, 'override', {}),
updateStatus('edit')
]
: [])
);
Expand Down Expand Up @@ -279,7 +295,7 @@ export const gnViewerRequestResourceConfig = (action$, store) =>
loadingResourceConfig(false)
);
}

const styleService = styleServiceSelector(state);
return Observable.concat(
Observable.of(
...getResetActions(),
Expand All @@ -293,11 +309,20 @@ export const gnViewerRequestResourceConfig = (action$, store) =>
.catch(() => {
return Observable.empty();
}),
...(styleService?.baseUrl
? [Observable.defer(() => updateStyleService({
styleService
}))
.switchMap((updatedStyleService) => {
return Observable.of(initStyleService(updatedStyleService));
})]
: []),
resourceObservable(action.pk, {
...action.options,
// set the pending changes as the new data fro maps, dashboards and geostories
// if undefined the returned data will be used
data: pendingChanges?.data
data: pendingChanges?.data,
styleService: styleServiceSelector(state)
}),
Observable.of(
...(pendingChanges?.resource ? [updateResourceProperties(pendingChanges.resource)] : []),
Expand Down
102 changes: 102 additions & 0 deletions geonode_mapstore_client/client/js/epics/visualstyleeditor.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
/*
* 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 { Observable } from 'rxjs';
import { getDatasetByName } from '@js/api/geonode/v2';
import { updateNode } from '@mapstore/framework/actions/layers';
import { updateStatus } from '@mapstore/framework/actions/styleeditor';
import { setControlProperty } from '@mapstore/framework/actions/controls';
import { updateAdditionalLayer } from '@mapstore/framework/actions/additionallayers';
import { STYLE_OWNER_NAME } from '@mapstore/framework/utils/StyleEditorUtils';
import StylesAPI from '@mapstore/framework/api/geoserver/Styles';
import { styleServiceSelector } from '@mapstore/framework/selectors/styleeditor';
import {
CREATE_GEONODE_STYLE,
DELETE_GEONODE_STYLE,
REQUEST_DATASET_AVAILABLE_STYLES
} from '@js/actions/visualstyleeditor';

export const gnRequestDatasetAvailableStyles = (action$, store) =>
action$.ofType(REQUEST_DATASET_AVAILABLE_STYLES)
.switchMap((action) => {
if (action?.layer?.availableStyles && !action?.options?.forceUpdate) {
return Observable.of(
setControlProperty('visualStyleEditor', 'enabled', true),
updateAdditionalLayer(action.layer.id, STYLE_OWNER_NAME, 'override', {}),
updateStatus('edit')
);
}
const state = store.getState();
const styleService = action?.options?.styleService || styleServiceSelector(state);
return Observable.concat(
Observable.of(setControlProperty('visualStyleEditor', 'enabled', true)),
Observable.defer(() => getDatasetByName(action?.layer?.name))
.switchMap((gnLayer) => {
return Observable.defer(() => StylesAPI.getStylesInfo({
baseUrl: styleService?.baseUrl,
styles: (gnLayer?.styles || []).map((style) => ({
title: style.sld_title,
name: style.workspace ? `${style.workspace}:${style.name}` : style.name
}))
}))
.switchMap((availableStyles) => {
return Observable.of(
updateNode(action.layer.id, 'layer', { availableStyles }),
updateAdditionalLayer(action.layer.id, STYLE_OWNER_NAME, 'override', {}),
updateStatus('edit')
);
});
})
);
});

export const gnCreateStyle = (action$) =>
action$.ofType(CREATE_GEONODE_STYLE)
.switchMap(() => {
return Observable.empty();
/*
const state = store.getState();
const styleService = action?.options?.styleService || styleServiceSelector(state);
const editorMetadata = {
msStyleJSON: null,
msEditorType: 'visual'
};
const metadata = {
title: action.title,
description: '',
...editorMetadata
};
return Observable.defer(
() => StylesAPI.createStyle({
baseUrl: styleService?.baseUrl,
code: '@mode \'Flat\'; @styleTitle \'' + action.title + '\'; \n* {\n\tfill: #ff0000;\n}\n',
format: 'css',
styleName: 'geonode:' + action.title.toLowerCase().replace(/\W/g, '') + '_' + Math.random(),
metadata
})
)
.switchMap(() => {
return Observable.empty();
});
*/
});

export const gnDeleteStyle = (action$) =>
action$.ofType(DELETE_GEONODE_STYLE)
.switchMap(() => {
return Observable.empty();
});

export default {
gnCreateStyle,
gnDeleteStyle,
gnRequestDatasetAvailableStyles
};
Loading

0 comments on commit f0e977b

Please sign in to comment.