diff --git a/web/client/components/plugins/PluginsContainer.jsx b/web/client/components/plugins/PluginsContainer.jsx index 12be177440..8bf9fcd2c2 100644 --- a/web/client/components/plugins/PluginsContainer.jsx +++ b/web/client/components/plugins/PluginsContainer.jsx @@ -76,7 +76,7 @@ const PluginsContainer = React.createClass({ }, renderPlugins(plugins) { return plugins - .filter((Plugin) => !PluginsUtils.handleExpression(this.props.pluginsState, this.props.plugins && this.props.plugins.requires, Plugin.hide)) + .filter((Plugin) => !PluginsUtils.handleExpression(this.getState, this.props.plugins && this.props.plugins.requires, Plugin.hide)) .map(this.getPluginDescriptor) .filter((Plugin) => Plugin && !Plugin.impl.loadPlugin) .filter(this.filterPlugins) diff --git a/web/client/containers/Embedded.jsx b/web/client/containers/Embedded.jsx index e79d8b05b8..3d31ff61b4 100644 --- a/web/client/containers/Embedded.jsx +++ b/web/client/containers/Embedded.jsx @@ -17,7 +17,7 @@ const ConfigUtils = require('../utils/ConfigUtils'); const PluginsContainer = connect((state) => ({ mode: (urlQuery.mode || (state.browser && state.browser.mobile ? 'mobile' : 'desktop')), pluginsState: state && state.controls || {}, - monitoredState: PluginsUtils.filterState(state, ConfigUtils.getConfigProp('monitorState') || []) + monitoredState: PluginsUtils.getMonitoredState(state, ConfigUtils.getConfigProp('monitorState')) }))(require('../components/plugins/PluginsContainer')); const Embedded = React.createClass({ diff --git a/web/client/containers/MapViewer.jsx b/web/client/containers/MapViewer.jsx index a4fa40e636..c7f44b8de4 100644 --- a/web/client/containers/MapViewer.jsx +++ b/web/client/containers/MapViewer.jsx @@ -19,7 +19,7 @@ const PluginsContainer = connect((state) => ({ pluginsConfig: state.plugins || ConfigUtils.getConfigProp('plugins') || null, mode: (urlQuery.mode || state.mode || (state.browser && state.browser.mobile ? 'mobile' : 'desktop')), pluginsState: state && state.controls || {}, - monitoredState: PluginsUtils.filterState(state, ConfigUtils.getConfigProp('monitorState') || []) + monitoredState: PluginsUtils.getMonitoredState(state, ConfigUtils.getConfigProp('monitorState')) }))(require('../components/plugins/PluginsContainer')); const MapViewer = React.createClass({ diff --git a/web/client/containers/Page.jsx b/web/client/containers/Page.jsx index 39f265940a..be07dd2283 100644 --- a/web/client/containers/Page.jsx +++ b/web/client/containers/Page.jsx @@ -16,7 +16,7 @@ const ConfigUtils = require('../utils/ConfigUtils'); const PluginsContainer = connect((state) => ({ mode: urlQuery.mode || ((urlQuery.mobile || (state.browser && state.browser.mobile)) ? 'mobile' : 'desktop'), - monitoredState: PluginsUtils.filterState(state, ConfigUtils.getConfigProp('monitorState') || []) + monitoredState: PluginsUtils.getMonitoredState(state, ConfigUtils.getConfigProp('monitorState')) }))(require('../components/plugins/PluginsContainer')); const Page = React.createClass({ diff --git a/web/client/plugins/Locate.jsx b/web/client/plugins/Locate.jsx index f3a704b32b..5f8177e5e2 100644 --- a/web/client/plugins/Locate.jsx +++ b/web/client/plugins/Locate.jsx @@ -39,6 +39,7 @@ require('./locate/locate.css'); module.exports = { LocatePlugin: assign(LocatePlugin, { + disablePluginIf: "{state('mapType') === 'cesium'}", Toolbar: { name: 'locate', position: 2, diff --git a/web/client/plugins/Measure.jsx b/web/client/plugins/Measure.jsx index 5696f5984b..258fc5ffc5 100644 --- a/web/client/plugins/Measure.jsx +++ b/web/client/plugins/Measure.jsx @@ -50,6 +50,7 @@ const Measure = connect( module.exports = { MeasurePlugin: assign(Measure, { + disablePluginIf: "{state('mapType') === 'cesium'}", BurgerMenu: { name: 'measurement', position: 9, diff --git a/web/client/plugins/Print.jsx b/web/client/plugins/Print.jsx index ba6944b8bc..cb7ecf1992 100644 --- a/web/client/plugins/Print.jsx +++ b/web/client/plugins/Print.jsx @@ -356,6 +356,7 @@ const PrintPlugin = connect(selector, { module.exports = { PrintPlugin: assign(PrintPlugin, { + disablePluginIf: "{state('mapType') === 'cesium'}", Toolbar: { name: 'print', position: 7, diff --git a/web/client/plugins/ScaleBox.jsx b/web/client/plugins/ScaleBox.jsx index 1cb4fc9c31..4e996a13ce 100644 --- a/web/client/plugins/ScaleBox.jsx +++ b/web/client/plugins/ScaleBox.jsx @@ -18,7 +18,7 @@ const Message = require('./locale/Message'); const ScaleBox = require("../components/mapcontrols/scale/ScaleBox"); const mapUtils = require('../utils/MapUtils'); - +const assign = require('object-assign'); const selector = createSelector([mapSelector], (map) => ({ currentZoomLvl: map && map.zoom, @@ -30,6 +30,16 @@ const selector = createSelector([mapSelector], (map) => ({ require('./scalebox/scalebox.css'); +const ScaleBoxTool = React.createClass({ + render() { + return (}> + + ); + } +}); + /** * ScaleBox Plugin. Provides a selector for the scale of the map. * @class ScaleBox @@ -42,20 +52,12 @@ require('./scalebox/scalebox.css'); * @prop {Boolean} cfg.useRawInput set true if you want to use an normal html input object * */ -const ScaleBoxPlugin = React.createClass({ - render() { - return (}> - - ); - } -}); - - +const ScaleBoxPlugin = connect(selector, { + onChange: changeZoomLevel +})(ScaleBoxTool); module.exports = { - ScaleBoxPlugin: connect(selector, { - onChange: changeZoomLevel - })(ScaleBoxPlugin), + ScaleBoxPlugin: assign(ScaleBoxPlugin, { + disablePluginIf: "{state('mapType') === 'cesium'}" + }), reducers: {} }; diff --git a/web/client/plugins/ShapeFile.jsx b/web/client/plugins/ShapeFile.jsx index 89f3c55913..0b1b738e10 100644 --- a/web/client/plugins/ShapeFile.jsx +++ b/web/client/plugins/ShapeFile.jsx @@ -50,6 +50,7 @@ module.exports = { resolve(ShapeFilePlugin); }); }, enabler: (state) => state.shapefile && state.shapefile.enabled || state.toolbar && state.toolbar.active === 'shapefile'}, { + disablePluginIf: "{state('mapType') === 'cesium'}", Toolbar: { name: 'shapefile', position: 9, diff --git a/web/client/plugins/ZoomIn.jsx b/web/client/plugins/ZoomIn.jsx index 378bbfc215..e9eeeebd38 100644 --- a/web/client/plugins/ZoomIn.jsx +++ b/web/client/plugins/ZoomIn.jsx @@ -10,6 +10,7 @@ const React = require('react'); const {connect} = require('react-redux'); const {createSelector} = require('reselect'); const {mapSelector} = require('../selectors/map'); + // TODO: make step and glyphicon configurable const selector = createSelector([mapSelector], (map) => ({currentZoom: map && map.zoom, id: "zoomin-btn", step: 1, glyphicon: "plus"})); @@ -38,6 +39,7 @@ const assign = require('object-assign'); module.exports = { ZoomInPlugin: assign(ZoomInButton, { + disablePluginIf: "{state('mapType') === 'cesium'}", Toolbar: { name: "ZoomIn", position: 3, diff --git a/web/client/plugins/ZoomOut.jsx b/web/client/plugins/ZoomOut.jsx index 16f0eb1e0a..73436d5380 100644 --- a/web/client/plugins/ZoomOut.jsx +++ b/web/client/plugins/ZoomOut.jsx @@ -36,6 +36,7 @@ const assign = require('object-assign'); module.exports = { ZoomOutPlugin: assign(ZoomOutButton, { + disablePluginIf: "{state('mapType') === 'cesium'}", Toolbar: { name: "ZoomOut", position: 4, diff --git a/web/client/utils/PluginsUtils.js b/web/client/utils/PluginsUtils.js index fe5745f311..44a5c8c938 100644 --- a/web/client/utils/PluginsUtils.js +++ b/web/client/utils/PluginsUtils.js @@ -11,7 +11,7 @@ const {omit, isObject, head, isArray, isString} = require('lodash'); const {combineReducers} = require('redux'); const {connect} = require('react-redux'); const url = require('url'); - +const defaultMonitoredState = [{name: "mapType", path: 'maptype.mapType'}, {name: "user", path: 'security.user'}]; const {combineEpics} = require('redux-observable'); const {memoize, get} = require('lodash'); @@ -66,6 +66,13 @@ const handleExpression = (state, context, expression) => { return expression; }; +const filterDisabledPlugins = (item, state = {}, plugins = {}) => { + const disablePluginIf = item && item.plugin && item.plugin.disablePluginIf || item.cfg.disablePluginIf; + if (disablePluginIf && !(item && item.cfg && item.cfg.skipAutoDisable)) { + return !handleExpression(state, plugins.requires, disablePluginIf); + } + return true; +}; const showIn = (state, requires, cfg, name, id, isDefault) => { return ((id && cfg.showIn && handleExpression(state, requires, cfg.showIn).indexOf(id) !== -1) || (cfg.showIn && handleExpression(state, requires, cfg.showIn).indexOf(name) !== -1) || @@ -130,7 +137,7 @@ const getPluginItems = (state, plugins, pluginsConfig, name, id, isDefault, load plugin: pluginImpl, items: getPluginItems(state, plugins, pluginsConfig, pluginName, null, true, loadedPlugins) }); - }); + }).filter( (item) => filterDisabledPlugins(item, state, plugins) ); }; const getReducers = (plugins) => Object.keys(plugins).map((name) => plugins[name].reducers) @@ -182,6 +189,8 @@ const PluginsUtils = { }, getReducers, filterState, + filterDisabledPlugins, + getMonitoredState: (state, monitorState = []) => filterState(state, defaultMonitoredState.concat(monitorState)), getPlugins: (plugins) => Object.keys(plugins).map((name) => plugins[name]) .reduce((previous, current) => assign({}, previous, omit(current, 'reducers')), {}), /** diff --git a/web/client/utils/__tests__/PluginUtils-test.js b/web/client/utils/__tests__/PluginUtils-test.js index 78a9908996..fdc9d1455a 100644 --- a/web/client/utils/__tests__/PluginUtils-test.js +++ b/web/client/utils/__tests__/PluginUtils-test.js @@ -140,6 +140,25 @@ describe('PluginsUtils', () => { const domElement = ReactDOM.findDOMNode(app); expect(domElement.innerText).toBe("plugintest"); }); + it('handleExpression', () => { + expect(PluginsUtils.handleExpression({state1: "test1"}, {context1: "test2"}, "{state.state1 + ' ' + context.context1}")).toBe("test1 test2"); + }); + it('filterState', () => { + expect(PluginsUtils.filterState({state1: "test1"}, [{name: "A", path: "state1"}]).A).toBe("test1"); + }); + it('filterDisabledPlugins', () => { + expect(PluginsUtils.filterDisabledPlugins( + {plugin: { + disablePluginIf: "{true}" + }}, + {}, + {} + )).toBe(false); + }); + it('getMonitoredState', () => { + expect(PluginsUtils.getMonitoredState({maptype: {mapType: "leaflet"}}).mapType).toBe("leaflet"); + }); + it('handleExpression', () => { expect(PluginsUtils.handleExpression({state1: "test1"}, {context1: "test2"}, "{state.state1 + ' ' + context.context1}")).toBe("test1 test2"); });