Normalize viewState on MapController initialization + add normalize f…

…lag (default true) (visgl#5727)

docs/api-reference/core/map-controller.md

@@ -38,6 +38,7 @@ Supports all [Controller options](/docs/api-reference/core/controller.md#options
 
 - `dragMode` - default `'pan'` (drag to pan, shift/ctrl + drag to rotate)
 - `keyboard` - arrow keys to pan, arrow keys with shift/ctrl down to rotate, +/- to zoom
+- `normalize` - normalize viewport props to fit map height into viewport. Default `true`
 
 ## Custom MapController
 

modules/core/src/controllers/map-controller.js

@@ -72,7 +72,10 @@ export class MapState extends ViewState {
     /** Pitch when current perspective rotate operation started */
     startPitch,
     /** Zoom when current zoom operation started */
-    startZoom
+    startZoom,
+
+    /** Normalize viewport props to fit map height into viewport. Default `true` */
+    normalize
   } = {}) {
     assert(Number.isFinite(longitude)); // `longitude` must be supplied
     assert(Number.isFinite(latitude)); // `latitude` must be supplied
@@ -90,7 +93,8 @@ export class MapState extends ViewState {
       maxZoom,
       minZoom,
       maxPitch,
-      minPitch
+      minPitch,
+      normalize
     });
 
     this._state = {
@@ -356,7 +360,11 @@ export class MapState extends ViewState {
     const {maxPitch, minPitch, pitch} = props;
     props.pitch = clamp(pitch, minPitch, maxPitch);
 
-    Object.assign(props, normalizeViewportProps(props));
+    // Normalize viewport props to fit map height into viewport
+    const {normalize = true} = props;
+    if (normalize) {
+      Object.assign(props, normalizeViewportProps(props));
+    }
 
     return props;
   }
@@ -435,6 +443,24 @@ export default class MapController extends Controller {
     super(MapState, props);
   }
 
+  setProps(props) {
+    const oldProps = this.controllerStateProps;
+
+    super.setProps(props);
+
+    const dimensionChanged = !oldProps || oldProps.height !== props.height;
+    if (dimensionChanged) {
+      // Dimensions changed, normalize the props
+      this.updateViewport(
+        new this.ControllerState({
+          makeViewport: this.makeViewport,
+          ...this.controllerStateProps,
+          ...this._state
+        })
+      );
+    }
+  }
+
   _getTransitionProps(opts) {
     // Enables Transitions on double-tap and key-down events.
     return opts

modules/core/src/lib/deck.js

@@ -769,7 +769,9 @@ export default class Deck {
       this.viewState = {...this.viewState, [params.viewId]: viewState};
       if (!this.props.viewState) {
         // Apply internal view state
-        this.viewManager.setProps({viewState: this.viewState});
+        if (this.viewManager) {
+          this.viewManager.setProps({viewState: this.viewState});
+        }
       }
     }
   }

modules/core/src/lib/view-manager.js

@@ -237,7 +237,9 @@ export default class ViewManager {
 
   _onViewStateChange(viewId, event) {
     event.viewId = viewId;
-    this._eventCallbacks.onViewStateChange(event);
+    if (this._eventCallbacks.onViewStateChange) {
+      this._eventCallbacks.onViewStateChange(event);
+    }
   }
 
   _createController(view, props) {

test/modules/core/controllers/custom-controller.spec.js

@@ -1,5 +1,6 @@
 import test from 'tape-catch';
 import {Controller} from '@deck.gl/core';
+import ViewState from '@deck.gl/core/controllers/view-state';
 
 class MockEventManager {
   constructor() {
@@ -21,7 +22,7 @@ class MockEventManager {
 
 class TestController extends Controller {
   constructor(props) {
-    super({}, props);
+    super(ViewState, props);
     this.events = ['press', 'wheel'];
   }
 }

test/modules/core/controllers/view-states.spec.js

@@ -2,7 +2,11 @@ import test from 'tape-catch';
 import {MapController, OrbitController, FirstPersonController} from '@deck.gl/core';
 
 test('MapViewState', t => {
-  const MapViewState = new MapController({}).ControllerState;
+  const MapViewState = new MapController({
+    longitude: 0,
+    latitude: 0,
+    zoom: 0
+  }).ControllerState;
 
   const viewState = new MapViewState({
     width: 800,
@@ -17,8 +21,22 @@ test('MapViewState', t => {
   t.is(viewportProps.pitch, 0, 'added default pitch');
   t.is(viewportProps.longitude, 178, 'props are normalized');
   t.not(viewportProps.latitude, 36, 'props are normalized');
+  t.not(viewportProps.zoom, 0, 'props are normalized');
 
   const viewState2 = new MapViewState({
+    width: 800,
+    height: 600,
+    longitude: -182,
+    latitude: 36,
+    zoom: 0,
+    bearing: 180,
+    normalize: false
+  });
+  const viewportProps2 = viewState2.getViewportProps();
+
+  t.is(viewportProps2.zoom, 0, 'props are not normalized');
+
+  const viewState3 = new MapViewState({
     width: 800,
     height: 600,
     longitude: -160,
@@ -27,7 +45,7 @@ test('MapViewState', t => {
     bearing: -30
   });
 
-  const transitionViewportProps = viewState2.shortestPathFrom(viewState);
+  const transitionViewportProps = viewState3.shortestPathFrom(viewState);
   t.is(transitionViewportProps.longitude, 200, 'found shortest path for longitude');
   t.is(transitionViewportProps.bearing, 330, 'found shortest path for bearing');