Completed first release of a plugin architecture for the Viewer (incl…

web/client/examples/viewer/app.jsx

@@ -8,7 +8,6 @@
 var React = require('react');
 
 var {Provider} = require('react-redux');
-var Viewer = require('./containers/Viewer');
 
 var {loadMapConfig} = require('../../actions/config');
 var {loadLocale} = require('../../actions/locale');
@@ -18,23 +17,25 @@ var LocaleUtils = require('../../utils/LocaleUtils');
 
 var Debug = require('../../components/development/Debug');
 
-var store = require('./stores/viewerstore');
-
-ConfigUtils.loadConfiguration().then(() => {
-    const { configUrl, legacy } = ConfigUtils.getUserConfiguration('config', 'json');
-    store.dispatch(loadMapConfig(configUrl, legacy));
-
-    let locale = LocaleUtils.getUserLocale();
-    store.dispatch(loadLocale('../../translations', locale));
-});
 
 require.ensure(['./plugins'], (require) => {
     var plugins = require('./plugins');
+    var store = require('./stores/viewerstore')(plugins.reducers);
+    var Viewer = require('./containers/Viewer')(plugins.actions);
+
+
+    ConfigUtils.loadConfiguration().then(() => {
+        const { configUrl, legacy } = ConfigUtils.getUserConfiguration('config', 'json');
+        store.dispatch(loadMapConfig(configUrl, legacy));
+
+        let locale = LocaleUtils.getUserLocale();
+        store.dispatch(loadLocale('../../translations', locale));
+    });
 
     React.render(
         <Debug store={store}>
             <Provider store={store}>
-                {() => <Viewer plugins={plugins}/>}
+                {() => <Viewer plugins={plugins.components}/>}
             </Provider>
         </Debug>,
         document.getElementById('container')

web/client/examples/viewer/containers/Viewer.jsx

@@ -16,10 +16,6 @@ var ConfigUtils = require('../../../utils/ConfigUtils');
 var {loadLocale} = require('../../../actions/locale');
 
 var {changeMapView, clickOnMap, changeMousePointer} = require('../../../actions/map');
-var {getFeatureInfo, changeMapInfoState, purgeMapInfoResults} = require('../../../actions/mapInfo');
-var {activatePanel} = require('../actions/floatingPanel');
-
-var {changeLayerProperties} = require('../../../actions/config');
 
 var VMap = require('../components/Map');
 var Localized = require('../../../components/I18N/Localized');
@@ -98,25 +94,22 @@ var Viewer = React.createClass({
     }
 });
 
-module.exports = connect((state) => {
-    return {
-        mapConfig: state.mapConfig,
-        messages: state.locale ? state.locale.messages : null,
-        locale: state.locale ? state.locale.current : null,
-        mapInfo: state.mapInfo ? state.mapInfo : {enabled: false, responses: [], requests: []},
-        floatingPanel: state.floatingPanel ? state.floatingPanel : {activeKey: ""},
-        localeError: state.locale && state.locale.loadingError ? state.locale.loadingError : undefined
-    };
-}, dispatch => {
-    return bindActionCreators(assign({}, {
-        loadLocale: loadLocale.bind(null, '../../translations'),
-        changeMapView,
-        getFeatureInfo,
-        changeMapInfoState,
-        purgeMapInfoResults,
-        clickOnMap,
-        activatePanel,
-        changeMousePointer,
-        changeLayerProperties
-    }), dispatch);
-})(Viewer);
+module.exports = (actions) => {
+    return connect((state) => {
+        return {
+            mapConfig: state.mapConfig,
+            messages: state.locale ? state.locale.messages : null,
+            locale: state.locale ? state.locale.current : null,
+            mapInfo: state.mapInfo ? state.mapInfo : {enabled: false, responses: [], requests: []},
+            floatingPanel: state.floatingPanel ? state.floatingPanel : {activeKey: ""},
+            localeError: state.locale && state.locale.loadingError ? state.locale.loadingError : undefined
+        };
+    }, dispatch => {
+        return bindActionCreators(assign({}, {
+            loadLocale: loadLocale.bind(null, '../../translations'),
+            changeMapView,
+            clickOnMap,
+            changeMousePointer
+        }, actions), dispatch);
+    })(Viewer);
+};

web/client/examples/viewer/plugins/index.jsx

@@ -3,31 +3,52 @@ var LangSelector = require('../../../components/I18N/LangSelector');
 var BackgroundSwitcherTool = require("../components/BackgroundSwitcherTool");
 var ViewerFloatingPanel = require("../components/ViewerFloatingPanel");
 var GetFeatureInfo = require("../components/GetFeatureInfo");
+
+var mapInfo = require('../../../reducers/mapInfo');
+var floatingPanel = require('../reducers/floatingPanel');
+
+
+var {getFeatureInfo, changeMapInfoState, purgeMapInfoResults} = require('../../../actions/mapInfo');
+var {activatePanel} = require('../actions/floatingPanel');
+
+var {changeLayerProperties} = require('../../../actions/config');
+
+
 var React = require('react');
 
-module.exports = (props) => {
-    return [
-        <About key="about"/>,
-        <LangSelector key="langSelector" currentLocale={props.locale} onLanguageChange={props.loadLocale}/>,
-        <ViewerFloatingPanel key="floatingPanel"
-            layers={props.mapConfig.layers}
-            propertiesChangeHandler={props.changeLayerProperties}
-            activeKey={props.floatingPanel.activeKey}
-            onActivateItem={props.activatePanel}/>,
-        <BackgroundSwitcherTool key="backgroundSwitcher" layers={props.mapConfig.layers} propertiesChangeHandler={props.changeLayerProperties}/>,
-        <GetFeatureInfo
-            key="getFeatureInfo"
-            enabled={props.mapInfo.enabled}
-            htmlResponses={props.mapInfo.responses}
-            btnIcon="info-sign"
-            mapConfig={props.mapConfig}
-            actions={{
-                getFeatureInfo: props.getFeatureInfo,
-                changeMapInfoState: props.changeMapInfoState,
-                purgeMapInfoResults: props.purgeMapInfoResults,
-                changeMousePointer: props.changeMousePointer
-            }}
-            clickedMapPoint={props.mapInfo.clickPoint}
-        />
-    ];
+module.exports = {
+    components: (props) => {
+        return [
+            <About key="about"/>,
+            <LangSelector key="langSelector" currentLocale={props.locale} onLanguageChange={props.loadLocale}/>,
+            <ViewerFloatingPanel key="floatingPanel"
+                layers={props.mapConfig.layers}
+                propertiesChangeHandler={props.changeLayerProperties}
+                activeKey={props.floatingPanel.activeKey}
+                onActivateItem={props.activatePanel}/>,
+            <BackgroundSwitcherTool key="backgroundSwitcher" layers={props.mapConfig.layers} propertiesChangeHandler={props.changeLayerProperties}/>,
+            <GetFeatureInfo
+                key="getFeatureInfo"
+                enabled={props.mapInfo.enabled}
+                htmlResponses={props.mapInfo.responses}
+                btnIcon="info-sign"
+                mapConfig={props.mapConfig}
+                actions={{
+                    getFeatureInfo: props.getFeatureInfo,
+                    changeMapInfoState: props.changeMapInfoState,
+                    purgeMapInfoResults: props.purgeMapInfoResults,
+                    changeMousePointer: props.changeMousePointer
+                }}
+                clickedMapPoint={props.mapInfo.clickPoint}
+            />
+        ];
+    },
+    reducers: {mapInfo, floatingPanel},
+    actions: {
+        getFeatureInfo,
+        changeMapInfoState,
+        purgeMapInfoResults,
+        activatePanel,
+        changeLayerProperties
+    }
 };

web/client/examples/viewer/stores/viewerstore.js

@@ -8,16 +8,15 @@
 var {combineReducers} = require('redux');
 
 var mapConfig = require('../../../reducers/config');
-var mapInfo = require('../../../reducers/mapInfo');
 var locale = require('../../../reducers/locale');
-var floatingPanel = require('../reducers/floatingPanel');
 var DebugUtils = require('../../../utils/DebugUtils');
+var assign = require('object-assign');
 
-const reducers = combineReducers({
-    mapConfig,
-    locale,
-    mapInfo,
-    floatingPanel
-});
-
-module.exports = DebugUtils.createDebugStore(reducers, {});
+module.exports = (reducers) => {
+    const reducersObj = assign({}, reducers, {
+        mapConfig,
+        locale
+    });
+    const allReducers = combineReducers(reducersObj);
+    return DebugUtils.createDebugStore(allReducers, {});
+};