Porting fixes from 2017.03.01 branch (#1860)

* Fixes for 3D (#1851) * Fix #1849 removing zoom button from cesium navigator * Fix #1848 moving the globe switcher in the correct place * Fix #1845 removed unnecessary control (#1846) * Added epic to switch tutorial (#1854) * Fix #1837 filter click events on 3D mobile (#1858) to avoid issues when you are using cesium with multitouch. * Removed zoom step from 3D tutorial (#1859)
geosolutions-it · May 22, 2017 · cad2cac · cad2cac
1 parent 36bb29f
commit cad2cac
Show file tree

Hide file tree

Showing 22 changed files with 238 additions and 88 deletions.
diff --git a/web/client/actions/__tests__/tutorial-test.js b/web/client/actions/__tests__/tutorial-test.js
@@ -34,13 +34,15 @@ describe('Test the tutorial actions', () => {
     });
 
     it('setupTutorial', () => {
+        const id = 'id';
         const steps = 'steps';
         const style = 'style';
         const checkbox = 'checkbox';
         const defaultStep = 'defaultStep';
-        const retval = setupTutorial(steps, style, checkbox, defaultStep);
+        const retval = setupTutorial(id, steps, style, checkbox, defaultStep);
         expect(retval).toExist();
         expect(retval.type).toBe(SETUP_TUTORIAL);
+        expect(retval.id).toBe(id);
         expect(retval.steps).toBe(steps);
         expect(retval.style).toBe(style);
         expect(retval.checkbox).toBe(checkbox);

diff --git a/web/client/actions/tutorial.js b/web/client/actions/tutorial.js
@@ -20,9 +20,10 @@ function startTutorial() {
     };
 }
 
-function setupTutorial(steps, style, checkbox, defaultStep) {
+function setupTutorial(id, steps, style, checkbox, defaultStep) {
     return {
         type: SETUP_TUTORIAL,
+        id,
         steps,
         style,
         checkbox,

diff --git a/web/client/components/map/cesium/Map.jsx b/web/client/components/map/cesium/Map.jsx
@@ -6,6 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 var Cesium = require('../../../libs/cesium');
+const Rx = require('rxjs');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var ConfigUtils = require('../../../utils/ConfigUtils');
@@ -69,10 +70,7 @@ let CesiumMap = React.createClass({
         map.imageryLayers.removeAll();
         map.camera.moveEnd.addEventListener(this.updateMapInfoState);
         this.hand = new Cesium.ScreenSpaceEventHandler(map.scene.canvas);
-        this.hand.setInputAction((movement) => {
-            this.onClick(map, movement);
-        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-
+        this.subscribeClickEvent(map);
         this.hand.setInputAction(throttle(this.onMouseMove.bind(this), 500), Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 
         map.camera.setView({
@@ -90,11 +88,7 @@ let CesiumMap = React.createClass({
         if (this.props.mapOptions.navigationTools) {
             this.cesiumNavigation = window.CesiumNavigation;
             if (this.cesiumNavigation) {
-                this.cesiumNavigation.navigationInitialization(this.props.id, map, {
-                    enableZoomControls: false,
-                    enableDistanceLegend: false,
-                    enableCompassOuterRing: false
-                });
+                this.cesiumNavigation.navigationInitialization(this.props.id, map);
             }
         }
     },
@@ -108,11 +102,12 @@ let CesiumMap = React.createClass({
         return false;
     },
     componentWillUnmount() {
+        this.clickStream$.complete();
+        this.pauserStream$.complete();
         this.hand.destroy();
         this.map.destroy();
     },
     onClick(map, movement) {
-
         if (this.props.onClick && movement.position !== null) {
             const cartesian = map.camera.pickEllipsoid(movement.position, map.scene.globe.ellipsoid);
             let cartographic = ClickUtils.getMouseXYZ(map, movement) || cartesian && Cesium.Cartographic.fromCartesian(cartesian);
@@ -236,6 +231,54 @@ let CesiumMap = React.createClass({
             this.map.camera.setView(position);
         }
     },
+    subscribeClickEvent(map) {
+        const samePosition = (m1, m2) => m1 && m2 && m1.x === m2.x && m1.y === m2.y;
+        const types = {
+            LEFT_UP: Cesium.ScreenSpaceEventType.LEFT_UP,
+            LEFT_DOWN: Cesium.ScreenSpaceEventType.LEFT_DOWN,
+            LEFT_CLICK: Cesium.ScreenSpaceEventType.LEFT_CLICK,
+            PINCH_START: Cesium.ScreenSpaceEventType.PINCH_START,
+            PINCH_END: Cesium.ScreenSpaceEventType.PINCH_END,
+            PINCH_MOVE: Cesium.ScreenSpaceEventType.PINCH_MOVE
+        };
+        const clickStream$ = new Rx.Subject();
+        const pauserStream$ = new Rx.Subject();
+        Object.keys(types).forEach((type) => this.hand.setInputAction((movement) => {
+            pauserStream$.next({type: types[type], movement});
+            clickStream$.next({type: types[type], movement});
+        }, types[type]));
+
+        /*
+         * trigger onClick only when LEFT_CLICK that follow a LEFT_DOWN at the same position.
+         * Every other mouse event before the LEFT_CLICK will not trigger the onClick function (happens with multitouch devices from cesium).
+         * If a pinch event is ended, wait to start listening left clicks. This to skip the LEFT_UP,LEFT_DOWN, LEFT_CLICK sequence that cesium triggers after a pinch end,
+         * that othewise can not be distinguished from a normal click event.
+         */
+        pauserStream$
+          .filter( ev => ev.type === types.PINCH_END )
+          .switchMap( () => Rx.Observable.of(true).concat(Rx.Observable.of(false).delay(500)))
+          .startWith(false)
+          .switchMap(paused => {
+              // pause is realized by mapping the click stream or an infinite stream
+              return paused ? Rx.Observable.never() : clickStream$;
+          })
+          .filter( ev => ev.type === types.LEFT_DOWN )
+          .switchMap(({movement}) =>
+              clickStream$
+                .filter( ev => ev.type === types.LEFT_CLICK )
+                .takeUntil(
+                    Rx.Observable.timer(500).merge(
+                        clickStream$
+                            .filter( ev =>
+                                ev.type !== types.LEFT_UP && ev.type !== types.LEFT_CLICK
+                                || ev.type === types.LEFT_UP && !samePosition(movement && movement.position, ev.movement && ev.movement.position)
+                            )
+                    )
+                )
+            ).subscribe(({movement}) => this.onClick(map, movement));
+        this.clickStream$ = clickStream$;
+        this.pauserStream$ = pauserStream$;
+    },
     updateMapInfoState() {
         const center = this.getCenter();
         const zoom = this.getZoomFromHeight(center.height);

diff --git a/web/client/components/maps/modals/MetadataModal.jsx b/web/client/components/maps/modals/MetadataModal.jsx
@@ -291,9 +291,7 @@ const MetadataModal = React.createClass({
     },
     isMetadataChanged() {
         return this.props.map && (
-            this.props.map.description !== undefined &&
             this.props.metadata.description !== this.props.map.description ||
-            this.props.map.name !== undefined &&
             this.props.metadata.name !== this.props.map.name
         );
     },

diff --git a/web/client/components/tutorial/Tutorial.jsx b/web/client/components/tutorial/Tutorial.jsx
@@ -77,7 +77,7 @@ const Tutorial = React.createClass({
         return {
             toggle: false,
             status: 'run',
-            preset: 'map',
+            preset: 'default_tutorial',
             presetList: {},
             introPosition: (window.innerHeight - 348) / 2,
             rawSteps: [],
@@ -121,7 +121,7 @@ const Tutorial = React.createClass({
     componentWillMount() {
         let rawSteps = this.props.rawSteps.length > 0 ? this.props.rawSteps : this.props.presetList[this.props.preset] || [];
         let checkbox = this.props.showCheckbox ? <div id="tutorial-intro-checkbox-container"><input type="checkbox" id="tutorial-intro-checkbox" className="tutorial-tooltip-intro-checkbox" onChange={this.props.actions.onDisable}/><span><I18N.Message msgId={"tutorial.checkbox"}/></span></div> : <div id="tutorial-intro-checkbox-container"/>;
-        this.props.actions.onSetup(rawSteps, this.props.introStyle, checkbox, this.props.defaultStep);
+        this.props.actions.onSetup('default', rawSteps, this.props.introStyle, checkbox, this.props.defaultStep);
     },
     componentWillUpdate(newProps) {
         if (this.props.steps.length > 0) {

diff --git a/web/client/components/tutorial/__tests__/Tutorial-test.jsx b/web/client/components/tutorial/__tests__/Tutorial-test.jsx
@@ -87,7 +87,7 @@ describe("Test the Tutorial component", () => {
         expect(cmp).toExist();
 
         expect(spySetup).toHaveBeenCalled();
-        expect(spySetup).toHaveBeenCalledWith([], {}, <div id="tutorial-intro-checkbox-container"/>, {});
+        expect(spySetup).toHaveBeenCalledWith('default', [], {}, <div id="tutorial-intro-checkbox-container"/>, {});
 
         const domNode = ReactDOM.findDOMNode(cmp);
         expect(domNode).toExist();
@@ -120,7 +120,7 @@ describe("Test the Tutorial component", () => {
         expect(cmp).toExist();
 
         expect(spySetup).toHaveBeenCalled();
-        expect(spySetup).toHaveBeenCalledWith(presetList.test, {}, <div id="tutorial-intro-checkbox-container"><input type="checkbox" id="tutorial-intro-checkbox" className="tutorial-tooltip-intro-checkbox" onChange={cmp.props.actions.onDisable}/><span><I18N.Message msgId={"tutorial.checkbox"}/></span></div>, {});
+        expect(spySetup).toHaveBeenCalledWith('default', presetList.test, {}, <div id="tutorial-intro-checkbox-container"><input type="checkbox" id="tutorial-intro-checkbox" className="tutorial-tooltip-intro-checkbox" onChange={cmp.props.actions.onDisable}/><span><I18N.Message msgId={"tutorial.checkbox"}/></span></div>, {});
 
         const domNode = ReactDOM.findDOMNode(cmp);
         expect(domNode).toExist();
@@ -164,7 +164,7 @@ describe("Test the Tutorial component", () => {
         expect(cmp).toExist();
 
         expect(spySetup).toHaveBeenCalled();
-        expect(spySetup).toHaveBeenCalledWith(rawSteps, {}, <div id="tutorial-intro-checkbox-container"/>, {});
+        expect(spySetup).toHaveBeenCalledWith('default', rawSteps, {}, <div id="tutorial-intro-checkbox-container"/>, {});
 
         const domNode = ReactDOM.findDOMNode(cmp);
         expect(domNode).toExist();

diff --git a/web/client/epics/tutorial.js b/web/client/epics/tutorial.js
@@ -7,8 +7,13 @@
  */
 
 const Rx = require('rxjs');
-const {START_TUTORIAL, closeTutorial} = require('../actions/tutorial');
+const {START_TUTORIAL, closeTutorial, setupTutorial} = require('../actions/tutorial');
+const {CHANGE_MAP_VIEW} = require('../actions/map');
 const {TOGGLE_3D} = require('../actions/globeswitcher');
+const preset = require('../plugins/tutorial/preset');
+const defaultRegex = /\/(viewer)\/(\w+)\/(\d+)/;
+const findMapType = path => path.match(defaultRegex) && path.replace(defaultRegex, "$2");
+import { UPDATE_LOCATION } from 'react-router-redux';
 
 /**
  * Closes the tutorial if 3D button has been toggled
@@ -22,12 +27,37 @@ const closeTutorialEpic = (action$) =>
         .audit(() => action$.ofType(TOGGLE_3D))
         .switchMap( () => Rx.Observable.of(closeTutorial()));
 
+/**
+ * Setup new steps based on the current maptype
+ * @memberof epics.tutorial
+ * @param {external:Observable} action$ manages `UPDATE_LOCATION`
+ * @return {external:Observable}
+ */
+
+const switchTutorialEpic = (action$, store) =>
+    action$.ofType(UPDATE_LOCATION)
+        .audit(() => action$.ofType(CHANGE_MAP_VIEW))
+        .filter(action =>
+            action.payload
+            && action.payload.pathname
+            && action.payload.pathname.match(defaultRegex))
+        .switchMap( (action) => {
+            const path = findMapType(action.payload.pathname);
+            const browser = store.getState().browser;
+            const mobile = browser && browser.mobile ? '_mobile' : '';
+            return Rx.Observable.of(preset[path + mobile + '_tutorial'] ?
+                setupTutorial(path + mobile, preset[path + mobile + '_tutorial']) :
+                setupTutorial('default' + mobile, preset['default' + mobile + '_tutorial'])
+            );
+        });
+
 /**
  * Epics for Tutorial
  * @name epics.tutorial
  * @type {Object}
  */
 
 module.exports = {
-    closeTutorialEpic
+    closeTutorialEpic,
+    switchTutorialEpic
 };
diff --git a/web/client/libs/cesium-navigation/cesium-navigation.css b/web/client/libs/cesium-navigation/cesium-navigation.css
@@ -137,7 +137,8 @@
     height: 95px;
     fill: #68ADFE;
 }
-#distanceLegendDiv > .navigation-controls > div:nth-child(2) {
+/*#distanceLegendDiv > > div:nth-child(2) {*/
+#distanceLegendDiv .navigation-controls {
     display: none;
 }
 

diff --git a/web/client/localConfig.json b/web/client/localConfig.json
@@ -78,7 +78,7 @@
             }, "Home", "TOC", {
                 "name": "Tutorial",
                 "cfg": {
-                    "preset": "mapMobile"
+                    "preset": "default_mobile_tutorial"
                 }
             }, {
                 "name": "Settings",

diff --git a/web/client/plugins/GlobeViewSwitcher.jsx b/web/client/plugins/GlobeViewSwitcher.jsx
@@ -40,7 +40,7 @@ module.exports = {
     GlobeViewSwitcherPlugin: assign(GlobeViewSwitcher, {
         Toolbar: {
             name: '3d',
-            position: 5,
+            position: 10,
             alwaysVisible: true,
             tool: true,
             priority: 1

diff --git a/web/client/plugins/Tutorial.jsx b/web/client/plugins/Tutorial.jsx
@@ -16,7 +16,7 @@ const I18N = require('../components/I18N/I18N');
 const {Glyphicon} = require('react-bootstrap');
 const {createSelector} = require('reselect');
 const {tutorialSelector} = require('../selectors/tutorial');
-const {closeTutorialEpic} = require('../epics/tutorial');
+const {closeTutorialEpic, switchTutorialEpic} = require('../epics/tutorial');
 
 /*
     //////////////////////////
@@ -217,6 +217,7 @@ module.exports = {
         tutorial: require('../reducers/tutorial')
     },
     epics: {
-        closeTutorialEpic
+        closeTutorialEpic,
+        switchTutorialEpic
     }
 };
diff --git a/web/client/plugins/tutorial/preset.js b/web/client/plugins/tutorial/preset.js
@@ -7,7 +7,9 @@
  */
 
 module.exports = {
-    map: require('./preset/map'),
-    home: require('./preset/home'),
-    mapMobile: require('./preset/mapMobile')
+    default_tutorial: require('./preset/default_tutorial'),
+    default_mobile_tutorial: require('./preset/default_mobile_tutorial'),
+    home_tutorial: require('./preset/home_tutorial'),
+    cesium_tutorial: require('./preset/cesium_tutorial'),
+    cesium_mobile_tutorial: require('./preset/cesium_mobile_tutorial')
 };
diff --git a/...ient/plugins/tutorial/preset/mapMobile.js → ...tutorial/preset/cesium_mobile_tutorial.js b/...ient/plugins/tutorial/preset/mapMobile.js → ...tutorial/preset/cesium_mobile_tutorial.js
@@ -11,31 +11,29 @@ const I18N = require('../../../components/I18N/I18N');
 const CesiumTooltip = require('../../../components/tutorial/steps/CesiumTooltip');
 
 module.exports = [
-    // remove comment to enable intro/autostart
-    /*{
-        translation: 'intro',
+    {
+        translation: 'introCesium',
         selector: '#intro-tutorial'
-    },*/
+    },
+    {
+        title: <I18N.Message msgId="tutorial.cesium.title"/>,
+        text: <CesiumTooltip touch={true}/>,
+        selector: '#map .cesium-viewer'
+    },
     {
         translation: 'drawerMenu',
         selector: '#drawer-menu-button'
     },
+    {
+        translation: 'home',
+        selector: '#home-button'
+    },
     {
         translation: 'searchButton',
         selector: '#search-help'
     },
     {
         translation: 'burgerMenu',
         selector: '#mapstore-burger-menu'
-    },
-    {
-        title: <I18N.Message msgId="tutorial.cesium.title"/>,
-        text: <CesiumTooltip touch={true}/>,
-        selector: '#map .cesium-viewer',
-        position: 'bottom'
-    },
-    {
-        translation: 'home',
-        selector: '#home-button'
     }
 ];