From 1c8079f9eff48fd222b3dda365247621c0bb2026 Mon Sep 17 00:00:00 2001 From: Xiaoji Chen Date: Wed, 30 May 2018 15:52:14 -0700 Subject: [PATCH] fix viewport transition bugs (#1875) --- modules/core/src/controllers/controller.js | 10 ++- .../src/controllers/transition-manager.js | 3 + .../viewport-transitions-flyTo/index.html | 1 + .../viewport-transitions-flyTo/src/app.js | 72 ++++++++++--------- test/apps/viewport-transitions/index.html | 1 + 5 files changed, 46 insertions(+), 41 deletions(-) diff --git a/modules/core/src/controllers/controller.js b/modules/core/src/controllers/controller.js index 3bad52d12c5..9a6e0d79053 100644 --- a/modules/core/src/controllers/controller.js +++ b/modules/core/src/controllers/controller.js @@ -151,7 +151,7 @@ export default class Controller { this.toggleEvents(this.events, true); } - this.transitionManager.processViewStateChange(props); + this.transitionManager.processViewStateChange(this.controllerStateProps); // TODO - make sure these are not reset on every setProps const { @@ -217,14 +217,12 @@ export default class Controller { // const changed = Object.keys(viewState).some(key => oldViewState[key] !== viewState[key]); if (changed) { + const oldViewState = this.controllerState ? this.controllerState.getViewportProps() : null; if (this.onViewportChange) { - const viewport = this.controllerState.getViewport - ? this.controllerState.getViewport() - : null; - this.onViewportChange(viewState, interactionState, viewport); + this.onViewportChange(viewState, interactionState, oldViewState); } if (this.onViewStateChange) { - this.onViewStateChange({viewState, interactionState}); + this.onViewStateChange({viewState, interactionState, oldViewState}); } } diff --git a/modules/core/src/controllers/transition-manager.js b/modules/core/src/controllers/transition-manager.js index 7e4c618f251..120867dbe10 100644 --- a/modules/core/src/controllers/transition-manager.js +++ b/modules/core/src/controllers/transition-manager.js @@ -161,6 +161,9 @@ export default class TransitionManager { if (this.props.onViewportChange) { this.props.onViewportChange(this.propsInTransition, {inTransition: true}); } + if (this.props.onViewStateChange) { + this.props.onViewStateChange({viewState: this.propsInTransition}, {inTransition: true}); + } } } diff --git a/test/apps/viewport-transitions-flyTo/index.html b/test/apps/viewport-transitions-flyTo/index.html index 3e542913814..839307bcf2b 100644 --- a/test/apps/viewport-transitions-flyTo/index.html +++ b/test/apps/viewport-transitions-flyTo/index.html @@ -3,6 +3,7 @@ react-map-gl Interaction Example + diff --git a/test/apps/viewport-transitions-flyTo/src/app.js b/test/apps/viewport-transitions-flyTo/src/app.js index e433a0e1580..ed1fac5200a 100644 --- a/test/apps/viewport-transitions-flyTo/src/app.js +++ b/test/apps/viewport-transitions-flyTo/src/app.js @@ -1,10 +1,10 @@ /* global window */ import React, {Component} from 'react'; import {StaticMap} from 'react-map-gl'; -import {experimental} from 'deck.gl'; +import DeckGL, {MapController, experimental} from 'deck.gl'; import ControlPanel from './control-panel'; -const {ViewportFlyToInterpolator, TRANSITION_EVENTS, ViewportController, MapState} = experimental; +const {ViewportFlyToInterpolator, TRANSITION_EVENTS} = experimental; const token = process.env.MapboxAccessToken; // eslint-disable-line const interruptionStyles = [ @@ -30,7 +30,7 @@ export default class App extends Component { constructor(props) { super(props); this.state = { - viewport: { + viewState: { latitude: 37.7751, longitude: -122.4193, zoom: 11, @@ -38,11 +38,11 @@ export default class App extends Component { pitch: 0, width: 500, height: 500 - }, - transitionDuration: 0 + } }; this._interruptionStyle = TRANSITION_EVENTS.BREAK; this._resize = this._resize.bind(this); + this._onViewStateChange = this._onViewStateChange.bind(this); } componentDidMount() { @@ -56,20 +56,27 @@ export default class App extends Component { _resize() { this.setState({ - viewport: { - ...this.state.viewport, + viewState: { + ...this.state.viewState, width: this.props.width || window.innerWidth, - height: this.props.height || window.innerHeight, - transitionDuration: 0 + height: this.props.height || window.innerHeight } }); } _easeTo({longitude, latitude}) { this.setState({ - viewport: {...this.state.viewport, longitude, latitude, zoom: 11, pitch: 0, bearing: 0}, - transitionDuration: 8000, - viewportToggled: !this.state.viewportToggled + viewState: { + ...this.state.viewState, + longitude, + latitude, + zoom: 11, + pitch: 0, + bearing: 0, + transitionDuration: 8000, + transitionInterpolator: new ViewportFlyToInterpolator(), + transitionInterruption: this._interruptionStyle + } }); } @@ -77,40 +84,35 @@ export default class App extends Component { this._interruptionStyle = style; } - _onViewportChange(viewport) { - this.setState({ - viewport: {...this.state.viewport, ...viewport}, - transitionDuration: 0 - }); + _onViewStateChange({viewState}) { + this.setState({viewState}); } render() { - const {viewport, settings, transitionDuration} = this.state; + const {viewState} = this.state; return ( - - +
+ + + + - +
); } } diff --git a/test/apps/viewport-transitions/index.html b/test/apps/viewport-transitions/index.html index 2296a456179..3e958063b5f 100644 --- a/test/apps/viewport-transitions/index.html +++ b/test/apps/viewport-transitions/index.html @@ -3,6 +3,7 @@ deck.gl example +