fix viewport transition bugs (visgl#1875)

jrzimmerman · May 30, 2018 · 1c8079f · 1c8079f
1 parent 3b3c3af
commit 1c8079f
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 41 deletions.
diff --git 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
@@ -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
@@ -3,6 +3,7 @@
   <head>
     <meta charset='UTF-8' />
     <title>react-map-gl Interaction Example</title>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
     <link rel="stylesheet" type="text/css" href="app.css" />
   </head>
   <body>

diff --git 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,19 +30,19 @@ export default class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      viewport: {
+      viewState: {
         latitude: 37.7751,
         longitude: -122.4193,
         zoom: 11,
         bearing: 0,
         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,61 +56,63 @@ 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
+      }
     });
   }
 
   _onStyleChange(style) {
     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 (
-      <ViewportController
-        viewportState={MapState}
-        {...viewport}
-        onViewportChange={this._onViewportChange.bind(this)}
-        transitionInterpolator={new ViewportFlyToInterpolator()}
-        transitionDuration={transitionDuration}
-        transitionInterruption={this._interruptionStyle}
-      >
-        <StaticMap
-          {...viewport}
-          {...settings}
-          mapStyle="mapbox://styles/mapbox/dark-v9"
-          onViewportChange={this._onViewportChange}
-          dragToRotate={false}
-          mapboxApiAccessToken={token}
-        />
+      <div>
+        <DeckGL
+          viewState={viewState}
+          controller={MapController}
+          onViewStateChange={this._onViewStateChange}
+        >
+          <StaticMap
+            {...viewState}
+            mapStyle="mapbox://styles/mapbox/dark-v9"
+            dragToRotate={false}
+            mapboxApiAccessToken={token}
+          />
+        </DeckGL>
+
         <ControlPanel
           containerComponent={this.props.containerComponent}
           onViewportChange={this._easeTo.bind(this)}
           interruptionStyles={interruptionStyles}
           onStyleChange={this._onStyleChange.bind(this)}
         />
-      </ViewportController>
+      </div>
     );
   }
 }
diff --git a/test/apps/viewport-transitions/index.html b/test/apps/viewport-transitions/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset='UTF-8' />
     <title>deck.gl example</title>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
     <style>
       body {margin: 0; padding: 0; overflow: hidden;}
     </style>