Type improvements (#8628)

modules/core/src/lib/picking/pick-info.ts

@@ -22,21 +22,21 @@ import type Layer from '../layer';
 import type Viewport from '../../viewports/viewport';
 import type {PickedPixel} from './query-object';
 
-export interface PickingInfo {
+export type PickingInfo<DataT = any, ExtraInfo = {}> = ExtraInfo & {
   color: Uint8Array | null;
   layer: Layer | null;
   sourceLayer?: Layer | null;
   viewport?: Viewport;
   index: number;
   picked: boolean;
-  object?: any;
+  object?: DataT;
   x: number;
   y: number;
   pixel?: [number, number];
   coordinate?: number[];
   devicePixel?: [number, number];
   pixelRatio: number;
-}
+};
 
 export interface GetPickingInfoParams {
   info: PickingInfo;

modules/core/src/types/layer-props.ts

@@ -83,12 +83,14 @@ export type TextureSource =
  * * A `Promise` whose resolved value will be used as the value of the `data` prop.
  * * An `AsyncIterable` that yields data in batches. Each batch is expected to be an array of objects.
  * * `string` - a URL to load data from
+ * * `null` - empty data
  */
 export type LayerDataSource<DataType> =
   | LayerData<DataType>
   | string
   | AsyncIterable<DataType[]>
-  | Promise<LayerData<DataType>>;
+  | Promise<LayerData<DataType>>
+  | null;
 
 /**
  * Base Layer prop types

modules/layers/src/bitmap-layer/bitmap-layer.ts

@@ -112,6 +112,23 @@ type _BitmapLayerProps = {
   textureParameters?: SamplerProps | null;
 };
 
+export type BitmapLayerPickingInfo = PickingInfo<
+  null,
+  {
+    bitmap: {
+      /** Size of the original image */
+      size: {
+        width: number;
+        height: number;
+      };
+      /** Hovered pixel uv in 0-1 range */
+      uv: [number, number];
+      /** Hovered pixel in the original image */
+      pixel: [number, number];
+    } | null;
+  }
+>;
+
 /** Render a bitmap at specified boundaries. */
 export default class BitmapLayer<ExtraPropsT extends {} = {}> extends Layer<
   ExtraPropsT & Required<_BitmapLayerProps>
@@ -184,20 +201,15 @@ export default class BitmapLayer<ExtraPropsT extends {} = {}> extends Layer<
     }
   }
 
-  getPickingInfo(params: GetPickingInfoParams): PickingInfo {
+  getPickingInfo(params: GetPickingInfoParams): BitmapLayerPickingInfo {
     const {image} = this.props;
-    const info: PickingInfo & {bitmap?: any} = params.info;
+    const info = params.info as BitmapLayerPickingInfo;
 
     if (!info.color || !image) {
       info.bitmap = null;
       return info;
     }
 
-    // TODO shouldn't happen, this is an async prop...
-    if (typeof image === 'string') {
-      throw new Error('string');
-    }
-
     const {width, height} = image as Texture;
 
     // Picking color doesn't represent object index in this layer
@@ -206,12 +218,10 @@ export default class BitmapLayer<ExtraPropsT extends {} = {}> extends Layer<
     // Calculate uv and pixel in bitmap
     const uv = unpackUVsFromRGB(info.color);
 
-    const pixel = [Math.floor(uv[0] * width), Math.floor(uv[1] * height)];
-
     info.bitmap = {
-      size: {width, height}, // Size of bitmap
-      uv, // Floating point precision in 0-1 range
-      pixel // Truncated to integer and scaled to pixel size
+      size: {width, height},
+      uv,
+      pixel: [Math.floor(uv[0] * width), Math.floor(uv[1] * height)]
     };
 
     return info;
@@ -337,7 +347,7 @@ export default class BitmapLayer<ExtraPropsT extends {} = {}> extends Layer<
  * @returns {number[]} uvs
  * https://stackoverflow.com/questions/30242013/glsl-compressing-packing-multiple-0-1-colours-var4-into-a-single-var4-variab
  */
-function unpackUVsFromRGB(color) {
+function unpackUVsFromRGB(color: Uint8Array): [number, number] {
   const [u, v, fracUV] = color;
   const vFrac = (fracUV & 0xf0) / 256;
   const uFrac = (fracUV & 0x0f) / 16;

modules/layers/src/index.ts

@@ -40,7 +40,11 @@ export {default as _TextBackgroundLayer} from './text-layer/text-background-laye
 
 // Types
 export type {ArcLayerProps} from './arc-layer/arc-layer';
-export type {BitmapLayerProps, BitmapBoundingBox} from './bitmap-layer/bitmap-layer';
+export type {
+  BitmapLayerProps,
+  BitmapBoundingBox,
+  BitmapLayerPickingInfo
+} from './bitmap-layer/bitmap-layer';
 export type {ColumnLayerProps} from './column-layer/column-layer';
 export type {ScatterplotLayerProps} from './scatterplot-layer/scatterplot-layer';
 export type {IconLayerProps} from './icon-layer/icon-layer';

modules/layers/src/path-layer/path-layer.ts

@@ -277,24 +277,24 @@ export default class PathLayer<DataT = any, ExtraPropsT extends {} = {}> extends
   getPickingInfo(params: GetPickingInfoParams): PickingInfo {
     const info = super.getPickingInfo(params);
     const {index} = info;
-    const {data} = this.props;
+    const data = this.props.data as any[];
 
     // Check if data comes from a composite layer, wrapped with getSubLayerRow
     if (data[0] && data[0].__source) {
       // index decoded from picking color refers to the source index
-      info.object = (data as any[]).find(d => d.__source.index === index);
+      info.object = data.find(d => d.__source.index === index);
     }
     return info;
   }
 
   /** Override base Layer method */
   disablePickingIndex(objectIndex: number) {
-    const {data} = this.props;
+    const data = this.props.data as any[];
 
     // Check if data comes from a composite layer, wrapped with getSubLayerRow
     if (data[0] && data[0].__source) {
       // index decoded from picking color refers to the source index
-      for (let i = 0; i < (data as any[]).length; i++) {
+      for (let i = 0; i < data.length; i++) {
         if (data[i].__source.index === objectIndex) {
           this._disablePickingIndex(i);
         }

modules/layers/src/solid-polygon-layer/solid-polygon-layer.ts

@@ -289,23 +289,23 @@ export default class SolidPolygonLayer<DataT = any, ExtraPropsT extends {} = {}>
   getPickingInfo(params: GetPickingInfoParams): PickingInfo {
     const info = super.getPickingInfo(params);
     const {index} = info;
-    const {data} = this.props;
+    const data = this.props.data as any[];
 
     // Check if data comes from a composite layer, wrapped with getSubLayerRow
     if (data[0] && data[0].__source) {
       // index decoded from picking color refers to the source index
-      info.object = (data as any[]).find(d => d.__source.index === index);
+      info.object = data.find(d => d.__source.index === index);
     }
     return info;
   }
 
   disablePickingIndex(objectIndex: number) {
-    const {data} = this.props;
+    const data = this.props.data as any[];
 
     // Check if data comes from a composite layer, wrapped with getSubLayerRow
     if (data[0] && data[0].__source) {
       // index decoded from picking color refers to the source index
-      for (let i = 0; i < (data as any[]).length; i++) {
+      for (let i = 0; i < data.length; i++) {
         if (data[i].__source.index === objectIndex) {
           this._disablePickingIndex(i);
         }

modules/layers/src/text-layer/text-layer.ts

@@ -295,7 +295,7 @@ export default class TextLayer<DataT = any, ExtraPropsT extends {} = {}> extends
   getPickingInfo({info}: GetPickingInfoParams): PickingInfo {
     // because `TextLayer` assign the same pickingInfoIndex for one text label,
     // here info.index refers the index of text label in props.data
-    info.object = info.index >= 0 ? this.props.data[info.index] : null;
+    info.object = info.index >= 0 ? (this.props.data as any[])[info.index] : null;
     return info;
   }