feat(core): export useful types (#8762)

modules/core/src/controllers/controller.ts

@@ -112,6 +112,7 @@ export type InteractionState = {
 
 /** Parameters passed to the onViewStateChange callback */
 export type ViewStateChangeParameters<ViewStateT = any> = {
+  viewId: string;
   /** The next view state, either from user input or transition */
   viewState: ViewStateT;
   /** Object describing the nature of the view state change */
@@ -385,13 +386,13 @@ export default abstract class Controller<ControllerState extends IViewState<Cont
     if (changed) {
       const oldViewState = this.controllerState && this.controllerState.getViewportProps();
       if (this.onViewStateChange) {
-        this.onViewStateChange({viewState, interactionState: this._interactionState, oldViewState});
+        this.onViewStateChange({viewState, interactionState: this._interactionState, oldViewState, viewId: this.props.id});
       }
     }
   }
 
   private _onTransition(params: {viewState: Record<string, any>, oldViewState: Record<string, any>}) {
-    this.onViewStateChange({...params, interactionState: this._interactionState});
+    this.onViewStateChange({...params, interactionState: this._interactionState, viewId: this.props.id});
   }
 
   private _setInteractionState(newStates: InteractionState) {

modules/core/src/index.ts

@@ -110,11 +110,11 @@ export {compareProps as _compareProps} from './lifecycle/props';
 
 // Types
 export type {CoordinateSystem} from './lib/constants';
-export type {MapViewState} from './views/map-view';
-export type {FirstPersonViewState} from './views/first-person-view';
-export type {OrbitViewState} from './views/orbit-view';
-export type {OrthographicViewState} from './views/orthographic-view';
-export type {GlobeViewState} from './views/globe-view';
+export type {MapViewState, MapViewProps} from './views/map-view';
+export type {FirstPersonViewState, FirstPersonViewProps} from './views/first-person-view';
+export type {OrbitViewState, OrbitViewProps} from './views/orbit-view';
+export type {OrthographicViewState, OrthographicViewProps} from './views/orthographic-view';
+export type {GlobeViewState, GlobeViewProps} from './views/globe-view';
 export type {ChangeFlags} from './lib/layer-state';
 export type {LayersList} from './lib/layer-manager';
 export type {LayerContext} from './lib/layer-manager';
@@ -149,6 +149,11 @@ export type {AmbientLightOptions} from './effects/lighting/ambient-light';
 export type {DirectionalLightOptions} from './effects/lighting/directional-light';
 export type {PointLightOptions} from './effects/lighting/point-light';
 export type {SunLightOptions} from './effects/lighting/sun-light';
+export type {
+  ControllerProps,
+  ViewStateChangeParameters,
+  InteractionState
+} from './controllers/controller';
 
 // INTERNAL, DO NOT USE
 // @deprecated internal do not use

modules/core/src/lib/deck.ts

@@ -192,7 +192,7 @@ export type DeckProps<ViewsT extends ViewOrViews = ViewOrViews> = {
   onResize?: (dimensions: {width: number; height: number}) => void;
   /** Called when the user has interacted with the deck.gl canvas, e.g. using mouse, touch or keyboard. */
   onViewStateChange?: <ViewStateT extends AnyViewStateOf<ViewsT>>(
-    params: ViewStateChangeParameters<ViewStateT> & {viewId: string}
+    params: ViewStateChangeParameters<ViewStateT>
   ) => ViewStateT | null | void;
   /** Called when the user has interacted with the deck.gl canvas, e.g. using mouse, touch or keyboard. */
   onInteractionStateChange?: (state: InteractionState) => void;

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

@@ -47,9 +47,7 @@ export type ViewStateMap<ViewsT extends ViewOrViews> =
 type ViewManagerProps<ViewsT extends ViewOrViews> = {
   views: ViewsT;
   viewState: ViewStateMap<ViewsT>;
-  onViewStateChange?: (
-    params: ViewStateChangeParameters<AnyViewStateOf<ViewsT>> & {viewId: string}
-  ) => void;
+  onViewStateChange?: (params: ViewStateChangeParameters<AnyViewStateOf<ViewsT>>) => void;
   onInteractionStateChange?: (state: InteractionState) => void;
   width?: number;
   height?: number;
@@ -70,7 +68,7 @@ export default class ViewManager<ViewsT extends View[]> {
   private _needsUpdate: string | false;
   private _eventManager: EventManager;
   private _eventCallbacks: {
-    onViewStateChange?: (params: ViewStateChangeParameters & {viewId: string}) => void;
+    onViewStateChange?: (params: ViewStateChangeParameters) => void;
     onInteractionStateChange?: (state: InteractionState) => void;
   };
 
@@ -299,12 +297,6 @@ export default class ViewManager<ViewsT extends View[]> {
     }
   }
 
-  private _onViewStateChange(viewId: string, event: ViewStateChangeParameters) {
-    if (this._eventCallbacks.onViewStateChange) {
-      this._eventCallbacks.onViewStateChange({...event, viewId});
-    }
-  }
-
   private _createController(
     view: View,
     props: {id: string; type: ConstructorOf<Controller<any>>}
@@ -315,7 +307,7 @@ export default class ViewManager<ViewsT extends View[]> {
       timeline: this.timeline,
       eventManager: this._eventManager,
       // Set an internal callback that calls the prop callback if provided
-      onViewStateChange: this._onViewStateChange.bind(this, props.id),
+      onViewStateChange: this._eventCallbacks.onViewStateChange,
       onStateChange: this._eventCallbacks.onInteractionStateChange,
       makeViewport: viewState =>
         this.getView(view.id)?.makeViewport({

modules/core/src/views/first-person-view.ts

@@ -1,4 +1,4 @@
-import View, {CommonViewState} from './view';
+import View, {CommonViewState, CommonViewProps} from './view';
 import FirstPersonViewport from '../viewports/first-person-viewport';
 import FirstPersonController from '../controllers/first-person-controller';
 
@@ -21,7 +21,7 @@ export type FirstPersonViewState = {
   modelMatrix?: number[] | null;
 } & CommonViewState;
 
-type FirstPersonViewProps = {
+export type FirstPersonViewProps = {
   /** Custom projection matrix */
   projectionMatrix?: number[];
   /** Field of view covered by camera, in degrees. Default `75`. */
@@ -32,11 +32,15 @@ type FirstPersonViewProps = {
   far?: number;
   /** Modifier of viewport scale. Corresponds to the number of pixels per meter. Default `1`. */
   focalDistance?: number;
-};
+} & CommonViewProps<FirstPersonViewState>;
 
 export default class FirstPersonView extends View<FirstPersonViewState, FirstPersonViewProps> {
   static displayName = 'FirstPersonView';
 
+  constructor(props: FirstPersonViewProps = {}) {
+    super(props);
+  }
+
   get ViewportType() {
     return FirstPersonViewport;
   }

modules/core/src/views/globe-view.ts

@@ -1,4 +1,4 @@
-import View, {CommonViewState} from './view';
+import View, {CommonViewState, CommonViewProps} from './view';
 import GlobeViewport from '../viewports/globe-viewport';
 import GlobeController from '../controllers/globe-controller';
 
@@ -15,7 +15,7 @@ export type GlobeViewState = {
   maxZoom?: number;
 } & CommonViewState;
 
-type GlobeViewProps = {
+export type GlobeViewProps = {
   /** The resolution at which to turn flat features into 3D meshes, in degrees. Smaller numbers will generate more detailed mesh. Default `10`. */
   resolution?: number;
   /** Scaler for the near plane, 1 unit equals to the height of the viewport. Default to `0.1`. Overwrites the `near` parameter. */
@@ -24,11 +24,15 @@ type GlobeViewProps = {
   farZMultiplier?: number;
   /** Distance of the camera relative to viewport height. Default `1.5`. */
   altitude?: number;
-};
+} & CommonViewProps<GlobeViewState>;
 
 export default class GlobeView extends View<GlobeViewState, GlobeViewProps> {
   static displayName = 'GlobeView';
 
+  constructor(props: GlobeViewProps = {}) {
+    super(props);
+  }
+
   get ViewportType() {
     return GlobeViewport;
   }

modules/core/src/views/map-view.ts

@@ -1,4 +1,4 @@
-import View, {CommonViewState} from './view';
+import View, {CommonViewState, CommonViewProps} from './view';
 import WebMercatorViewport from '../viewports/web-mercator-viewport';
 import MapController from '../controllers/map-controller';
 
@@ -27,7 +27,7 @@ export type MapViewState = {
   position?: number[];
 } & CommonViewState;
 
-type MapViewProps = {
+export type MapViewProps = {
   /** Whether to render multiple copies of the map at low zoom levels. Default `false`. */
   repeat?: boolean;
   /** Scaler for the near plane, 1 unit equals to the height of the viewport. Default to `0.1`. Overwrites the `near` parameter. */
@@ -42,11 +42,15 @@ type MapViewProps = {
   altitude?: number;
   /** Whether to create an orthographic or perspective projection matrix. Default is `false` (perspective projection). */
   orthographic?: boolean;
-};
+} & CommonViewProps<MapViewState>;
 
 export default class MapView extends View<MapViewState, MapViewProps> {
   static displayName = 'MapView';
 
+  constructor(props: MapViewProps = {}) {
+    super(props);
+  }
+
   get ViewportType() {
     return WebMercatorViewport;
   }

modules/core/src/views/orbit-view.ts

@@ -1,4 +1,4 @@
-import View, {CommonViewState} from './view';
+import View, {CommonViewState, CommonViewProps} from './view';
 import OrbitViewport from '../viewports/orbit-viewport';
 import OrbitController from '../controllers/orbit-controller';
 
@@ -21,7 +21,7 @@ export type OrbitViewState = {
   maxRotationX?: number;
 } & CommonViewState;
 
-type OrbitViewProps = {
+export type OrbitViewProps = {
   /** Axis with 360 degrees rotating freedom, either `'Y'` or `'Z'`, default to `'Z'`. */
   orbitAxis?: 'Y' | 'Z';
   /** Custom projection matrix */
@@ -34,7 +34,7 @@ type OrbitViewProps = {
   far?: number;
   /** Whether to create an orthographic or perspective projection matrix. Default is `false` (perspective projection). */
   orthographic?: boolean;
-};
+} & CommonViewProps<OrbitViewState>;
 
 export default class OrbitView extends View<OrbitViewState, OrbitViewProps> {
   static displayName = 'OrbitView';

modules/core/src/views/orthographic-view.ts

@@ -1,4 +1,4 @@
-import View, {CommonViewState} from './view';
+import View, {CommonViewState, CommonViewProps} from './view';
 import OrthographicViewport from '../viewports/orthographic-viewport';
 import OrthographicController from '../controllers/orthographic-controller';
 
@@ -14,18 +14,22 @@ export type OrthographicViewState = {
   maxZoom?: number;
 } & CommonViewState;
 
-type OrthographicViewProps = {
+export type OrthographicViewProps = {
   /** Distance of near clipping plane. Default `0.1`. */
   near?: number;
   /** Distance of far clipping plane. Default `1000`. */
   far?: number;
   /** Whether to use top-left coordinates (`true`) or bottom-left coordinates (`false`). Default `true`. */
   flipY?: boolean;
-};
+} & CommonViewProps<OrthographicViewState>;
 
 export default class OrthographicView extends View<OrthographicViewState, OrthographicViewProps> {
   static displayName = 'OrthographicView';
 
+  constructor(props: OrthographicViewProps = {}) {
+    super(props);
+  }
+
   get ViewportType() {
     return OrthographicViewport;
   }

modules/core/src/views/view.ts

@@ -9,7 +9,7 @@ import type {ConstructorOf} from '../types/types';
 
 export type CommonViewState = TransitionProps;
 
-type CommonViewProps<ViewState> = {
+export type CommonViewProps<ViewState> = {
   /** A unique id of the view. In a multi-view use case, this is important for matching view states and place contents into this view. */
   id?: string;
   /** A relative (e.g. `'50%'`) or absolute position. Default `0`. */
@@ -27,6 +27,8 @@ type CommonViewProps<ViewState> = {
     top?: number | string;
     bottom?: number | string;
   } | null;
+  /** When using multiple views, set this flag to wipe the pixels drawn by other overlaping views */
+  clear?: boolean;
   /** State of the view */
   viewState?:
     | string
@@ -45,7 +47,7 @@ type CommonViewProps<ViewState> = {
 
 export default abstract class View<
   ViewState extends CommonViewState = CommonViewState,
-  ViewProps = {}
+  ViewProps extends CommonViewProps<ViewState> = CommonViewProps<ViewState>
 > {
   id: string;
   abstract get ViewportType(): ConstructorOf<Viewport>;
@@ -62,9 +64,9 @@ export default abstract class View<
     bottom: Position;
   } | null;
 
-  readonly props: Partial<ViewProps> & CommonViewProps<ViewState>;
+  readonly props: ViewProps;
 
-  constructor(props: Partial<ViewProps> & CommonViewProps<ViewState> = {}) {
+  constructor(props: ViewProps) {
     const {id, x = 0, y = 0, width = '100%', height = '100%', padding = null} = props;
 
     // @ts-ignore
@@ -90,7 +92,7 @@ export default abstract class View<
     Object.seal(this);
   }
 
-  equals(view: View<ViewState, ViewProps>): boolean {
+  equals(view: this): boolean {
     if (this === view) {
       return true;
     }

test/modules/core/lib/deck.spec.ts

@@ -165,13 +165,15 @@ test('Deck#auto view state', t => {
     },
 
     onLoad: () => {
-      deck.viewManager._onViewStateChange('default', {
+      deck._onViewStateChange({
+        viewId: 'default',
         viewState: {longitude: 0, latitude: 0, zoom: 11}
       });
       t.is(onViewStateChangeCalled, 1, 'onViewStateChange is called');
       t.is(deck.getViewports()[0].longitude, 0, 'default view state should not change');
 
-      deck.viewManager._onViewStateChange('map', {
+      deck._onViewStateChange({
+        viewId: 'map',
         viewState: {longitude: 1, latitude: 1, zoom: 11}
       });
       t.is(onViewStateChangeCalled, 2, 'onViewStateChange is called');
@@ -181,15 +183,17 @@ test('Deck#auto view state', t => {
       t.is(deck.getViewports()[2].longitude, 1, 'minimap longitude is updated');
       t.is(deck.getViewports()[2].zoom, 12, 'minimap zoom should not change');
 
-      deck.viewManager._onViewStateChange('minimap', {
+      deck._onViewStateChange({
+        viewId: 'minimap',
         viewState: {longitude: 2, latitude: 2, zoom: 12}
       });
       t.is(onViewStateChangeCalled, 3, 'onViewStateChange is called');
       t.is(deck.getViewports()[1].longitude, 1, 'map state should not change');
       t.is(deck.getViewports()[2].longitude, 1, 'minimap state should not change');
 
       deck.setProps({viewState: {longitude: 3, latitude: 3, zoom: 12}});
-      deck.viewManager._onViewStateChange('map', {
+      deck._onViewStateChange({
+        viewId: 'map',
         viewState: {longitude: 1, latitude: 1, zoom: 11}
       });
       t.is(deck.getViewports()[0].longitude, 3, 'external viewState should override internal');