Merge 2b2ff4c into e2b76a3

docs/api-reference/deck.md

@@ -121,11 +121,14 @@ Transitions between two viewState objects can also be achieved by providing set
 
 If `initialViewState` is provided, the `Deck` component will track view state changes from any attached `controller` using internal state, with `initialViewState` as its initial view state.
 
+If the `initialViewState` prop changes, the internally tracked view state will be updated to match the new "initial" view state.
+
 Notes:
 
 * The `props.onViewStateChange` callback will still be called, if provided.
 * If `props.viewState` is supplied by the application, the supplied `viewState` will always be used, "shadowing" the `Deck` component's internal `viewState`.
-* In simple applications, use of the `initialViewState` prop can avoid the need track the view state in the application .
+* In simple applications, use of the `initialViewState` prop can avoid the need track the view state in the application.
+* Any new `initialViewState` value is compared shallowly with the previous value. Therefore, it is especially important for React applications to use a constant or component state as the `initialViewState` value, in order to avoid any unexpected "reset" of the camera.
 * One drawback of using `initialViewState` for reactive/functional applications is that the `Deck` component becomes more stateful.
 
 ##### `controller` (Function | Boolean | Object)

examples/gallery/src/viewport-transition.html

@@ -56,13 +56,12 @@
     const deckgl = new DeckGL({
       mapboxApiAccessToken: '<mapbox-access-token>',
       mapStyle: 'mapbox://styles/mapbox/light-v9',
-      viewState: {
+      initialViewState: {
         longitude: CITIES[0].longitude,
         latitude: CITIES[0].latitude,
         zoom: 10
       },
       controller: true,
-      onViewStateChange: ({viewState}) => deckgl.setProps({viewState}),
       layers: [
         new ScatterplotLayer({
           data: CITIES,
@@ -84,11 +83,11 @@
       .attr('id', (d, i) => 'city-' + i)
       .on('change', d => {
         deckgl.setProps({
-          viewState: {
+          initialViewState: {
             longitude: d.longitude,
             latitude: d.latitude,
             zoom: 10,
-            transitionInterpolator: new FlyToInterpolator(),
+            transitionInterpolator: new FlyToInterpolator({speed: 1.5}),
             transitionDuration: 'auto'
           }
         })

examples/playground/src/deck-with-maps.js

@@ -3,31 +3,7 @@ import DeckGL from '@deck.gl/react';
 import {View} from '@deck.gl/core';
 
 export default class DeckWithMaps extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      // NOTE: viewState is re-initialized from jsonProps when those change,
-      // but can be updated independently by the user "panning".
-      viewState: props.initialViewState
-    };
-
-    this._onViewStateChange = this._onViewStateChange.bind(this);
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.initialViewState !== prevProps.initialViewState) {
-      this.setState({viewState: this.props.initialViewState});
-    }
-  }
-
-  _onViewStateChange({viewState}) {
-    // TODO - It would be cool to update the viewState here!
-    this.setState({viewState});
-  }
-
   render() {
-    const {viewState} = this.state;
     const {views = []} = this.props;
 
     const maps = [];
@@ -46,12 +22,7 @@ export default class DeckWithMaps extends Component {
     }
 
     return (
-      <DeckGL
-        id="json-deck"
-        {...this.props}
-        viewState={viewState}
-        onViewStateChange={this._onViewStateChange}
-      >
+      <DeckGL id="json-deck" {...this.props}>
         {maps}
       </DeckGL>
     );

examples/website/3d-tiles/app.js

@@ -30,7 +30,7 @@ export default class App extends PureComponent {
     super(props);
 
     this.state = {
-      viewState: INITIAL_VIEW_STATE,
+      initialViewState: INITIAL_VIEW_STATE,
       attributions: []
     };
 
@@ -50,8 +50,8 @@ export default class App extends PureComponent {
   _centerViewOnTileset(tileset) {
     const {cartographicCenter, zoom} = tileset;
     this.setState({
-      viewState: {
-        ...this.state.viewState,
+      initialViewState: {
+        ...INITIAL_VIEW_STATE,
 
         // Update deck.gl viewState, moving the camera to the new tileset
         longitude: cartographicCenter[0],
@@ -63,11 +63,6 @@ export default class App extends PureComponent {
     });
   }
 
-  // Called by DeckGL when user interacts with the map
-  _onViewStateChange({viewState}) {
-    this.setState({viewState});
-  }
-
   _renderTile3DLayer() {
     return new Tile3DLayer({
       id: 'tile-3d-layer',
@@ -79,19 +74,13 @@ export default class App extends PureComponent {
   }
 
   render() {
-    const {viewState} = this.state;
+    const {initialViewState} = this.state;
     const tile3DLayer = this._renderTile3DLayer();
     const {mapStyle = 'mapbox://styles/uberdata/cive485h000192imn6c6cc8fc'} = this.props;
 
     return (
       <div>
-        <DeckGL
-          layers={[tile3DLayer]}
-          initialViewState={INITIAL_VIEW_STATE}
-          viewState={viewState}
-          onViewStateChange={this._onViewStateChange.bind(this)}
-          controller={true}
-        >
+        <DeckGL layers={[tile3DLayer]} initialViewState={initialViewState} controller={true}>
           <StaticMap mapStyle={mapStyle} mapboxApiAccessToken={MAPBOX_TOKEN} preventStyleDiffing />
         </DeckGL>
       </div>

modules/core/src/lib/deck.js

@@ -127,6 +127,7 @@ const defaultProps = {
 export default class Deck {
   constructor(props) {
     props = Object.assign({}, defaultProps, props);
+    this.props = props;
 
     this.width = 0; // "read-only", auto-updated from canvas
     this.height = 0; // "read-only", auto-updated from canvas
@@ -241,6 +242,7 @@ export default class Deck {
     }
   }
 
+  /* eslint-disable complexity */
   setProps(props) {
     this.stats.get('setProps Time').timeStart();
 
@@ -250,6 +252,10 @@ export default class Deck {
     if ('onLayerClick' in props) {
       log.removed('onLayerClick', 'onClick')();
     }
+    if (props.initialViewState && this.props.initialViewState !== props.initialViewState) {
+      // Overwrite internal view state
+      this.viewState = props.initialViewState;
+    }
 
     props = Object.assign({}, this.props, props);
     this.props = props;
@@ -298,6 +304,7 @@ export default class Deck {
 
     this.stats.get('setProps Time').timeEnd();
   }
+  /* eslint-enable complexity */
 
   // Public API
   // Check if a redraw is needed