[ts] ScatterplotLayer (visgl#6803)

forestofrain · Apr 21, 2022 · e53c63b · e53c63b
1 parent 12546f9
commit e53c63b
Show file tree

Hide file tree

Showing 10 changed files with 132 additions and 42 deletions.
diff --git a/modules/core/src/index.ts b/modules/core/src/index.ts
@@ -105,3 +105,13 @@ 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 {LayerContext} from './lib/layer-manager';
+export type {
+  LayerProps,
+  CompositeLayerProps,
+  Accessor,
+  LayerData,
+  Unit,
+  Position,
+  Color
+} from './types/layer-props';
diff --git a/modules/core/src/lib/layer.ts b/modules/core/src/lib/layer.ts
@@ -157,8 +157,8 @@ const defaultProps = {
 export default abstract class Layer<
   PropsT extends LayerProps = LayerProps
 > extends Component<PropsT> {
-  static defaultProps = defaultProps;
-  static layerName = 'Layer';
+  static defaultProps: any = defaultProps;
+  static layerName: string = 'Layer';
 
   toString(): string {
     const className = (this.constructor as typeof Layer).layerName || this.constructor.name;
@@ -174,9 +174,7 @@ export default abstract class Layer<
     const worldPosition = getWorldPosition(xyz, {
       viewport,
       modelMatrix: this.props.modelMatrix,
-      // @ts-ignore coordinateOrigin cannot be undefined after merging with default prop
       coordinateOrigin: this.props.coordinateOrigin,
-      // @ts-ignore coordinateSystem cannot be undefined after merging with default prop
       coordinateSystem: this.props.coordinateSystem
     });
     const [x, y, z] = worldToPixels(worldPosition, viewport.pixelProjectionMatrix);
@@ -207,9 +205,7 @@ export default abstract class Layer<
     return projectPosition(xyz, {
       viewport,
       modelMatrix: this.props.modelMatrix,
-      // @ts-ignore coordinateOrigin cannot be undefined after merging with default prop
       coordinateOrigin: this.props.coordinateOrigin,
-      // @ts-ignore coordinateSystem cannot be undefined after merging with default prop
       coordinateSystem: this.props.coordinateSystem,
       ...params
     });
@@ -251,12 +247,12 @@ export default abstract class Layer<
 
   /** Returns true if using shader-based WGS84 longitude wrapping */
   get wrapLongitude(): boolean {
-    return this.props.wrapLongitude || false;
+    return this.props.wrapLongitude;
   }
 
   /** Returns true if the layer is visible in the picking pass */
   isPickable(): boolean {
-    return (this.props.pickable && this.props.visible) || false;
+    return this.props.pickable && this.props.visible;
   }
 
   /** Returns an array of models used by this layer, can be overriden by layer subclass */
@@ -391,7 +387,6 @@ export default abstract class Layer<
   abstract initializeState(context: LayerContext): void;
 
   getShaders(shaders: any): any {
-    // @ts-ignore (TS2532) extensions is always defined after merging with default props
     for (const extension of this.props.extensions) {
       shaders = mergeShaders(shaders, extension.getShaders.call(this, extension));
     }
@@ -774,7 +769,7 @@ export default abstract class Layer<
     /* eslint-disable accessor-pairs */
     Object.defineProperty(this.state, 'attributeManager', {
       get: () => {
-        log.deprecated('layer.state.attributeManager', 'layer.getAttributeManager()');
+        log.deprecated('layer.state.attributeManager', 'layer.getAttributeManager()')();
         return attributeManager;
       }
     });
@@ -793,7 +788,6 @@ export default abstract class Layer<
     this.initializeState(this.context as LayerContext);
 
     // Initialize extensions
-    // @ts-ignore (TS2532) extensions is always defined after merging with default props
     for (const extension of this.props.extensions) {
       extension.initializeState.call(this, this.context, extension);
     }
@@ -875,7 +869,6 @@ export default abstract class Layer<
         }
       }
       // Execute extension updates
-      // @ts-ignore (TS2532) extensions is always defined after merging with default props
       for (const extension of this.props.extensions) {
         extension.updateState.call(this, updateParams, extension);
       }
@@ -902,7 +895,6 @@ export default abstract class Layer<
     // Call subclass lifecycle method
     this.finalizeState(this.context as LayerContext);
     // Finalize extensions
-    // @ts-ignore (TS2532) extensions is always defined after merging with default props
     for (const extension of this.props.extensions) {
       extension.finalizeState.call(this, extension);
     }
@@ -927,7 +919,7 @@ export default abstract class Layer<
     // @ts-ignore (TS2339) internalState is alwasy defined when this method is called
     this.props = this.internalState.propsInTransition || currentProps;
 
-    const opacity = this.props.opacity as number;
+    const opacity = this.props.opacity;
     // apply gamma to opacity to make it visually "linear"
     uniforms.opacity = Math.pow(opacity, 1 / 2.2);
 
@@ -949,7 +941,6 @@ export default abstract class Layer<
         const opts = {moduleParameters, uniforms, parameters, context};
 
         // extensions
-        // @ts-ignore (TS2532) extensions is always defined after merging with default props
         for (const extension of this.props.extensions) {
           extension.draw.call(this, opts, extension);
         }

diff --git a/modules/core/src/lifecycle/component.ts b/modules/core/src/lifecycle/component.ts
@@ -35,6 +35,7 @@ export default class Component<PropsT extends ComponentProps> {
   parent: Component<any> | null;
   context: LayerContext | null;
   state: Record<string, any> | null;
+  // @ts-expect-error (TS2344) PropsT does not extend LayerProps
   internalState: LayerState<PropsT> | null;
 
   constructor(...propObjects: Partial<PropsT>[]) {

diff --git a/modules/core/src/passes/pick-layers-pass.ts b/modules/core/src/passes/pick-layers-pass.ts
@@ -122,7 +122,7 @@ export default class PickLayersPass extends LayersPass {
   }
 
   protected shouldDrawLayer(layer: Layer): boolean {
-    return (layer.props.pickable as boolean) && layer.props.operation === OPERATION.DRAW;
+    return layer.props.pickable && layer.props.operation === OPERATION.DRAW;
   }
 
   protected getModuleParameters() {

diff --git a/modules/core/src/types/layer-props.ts b/modules/core/src/types/layer-props.ts
@@ -5,6 +5,8 @@ import type {NumericArray} from './types';
 import type {PickingInfo} from '../lib/picking/pick-info';
 import type {MjolnirEvent} from 'mjolnir.js';
 
+import type {Buffer} from '@luma.gl/webgl';
+
 export type LayerData<T> =
   | Iterable<T>
   | {
@@ -13,15 +15,62 @@ export type LayerData<T> =
     };
 
 export type AccessorContext<T> = {
+  /** The index of the current iteration */
   index: number;
+  /** The value of the `data` prop */
   data: LayerData<T>;
+  /** A pre-allocated array. The accessor function can optionally fill data into this array and return it,
+   * instead of creating a new array for every object. In some browsers this improves performance significantly
+   * by reducing garbage collection. */
   target: number[];
 };
 
-export type Accessor<In, Out> = Out | ((object: In, objectInfo: AccessorContext<In>) => Out);
+/** Either a uniform value for all objects, or a function that returns a value for each object. */
+export type Accessor<In, Out> =
+  | Out
+  | ((
+      /** The current element in the data stream.
+       * If `data` is an array or an iterable, the element of the current iteration is used.
+       * If `data` is a non-iterable object, this argument is always `null`. */
+      object: In,
+      /** Contextual information of the current element. */
+      objectInfo: AccessorContext<In>
+    ) => Out);
+
+/** A position in the format of `[lng, lat, alt?]` or `[x, y, z?]` depending on the coordinate system.
+ * See https://deck.gl/docs/developer-guide/coordinate-systems#positions
+ */
+export type Position = [number, number] | [number, number, number] | Float32Array | Float64Array;
+
+/** A color in the format of `[r, g, b, a?]` */
+export type Color =
+  | [number, number, number]
+  | [number, number, number, number]
+  | Uint8Array
+  | Uint8ClampedArray;
 
-// TODO
-type BinaryAttribute = any;
+/** The unit of dimensions.
+ * See https://deck.gl/docs/developer-guide/coordinate-systems#dimensions
+ */
+export type Unit = 'meters' | 'common' | 'pixels';
+
+/** Supply binary buffers directly to the layer */
+type BinaryAttribute =
+  | Buffer
+  | {
+      buffer?: Buffer;
+      value?: NumericArray;
+      /** A WebGL data type, see [vertexAttribPointer](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/vertexAttribPointer#parameters). */
+      type?: number;
+      /** The number of elements per vertex attribute. */
+      size?: number;
+      /** Offset of the first vertex attribute into the buffer, in bytes. */
+      offset?: number;
+      /** The offset between the beginning of consecutive vertex attributes, in bytes. */
+      stride?: number;
+      /** Whether data values should be normalized. Note that all color attributes in deck.gl layers are normalized by default. */
+      normalized?: boolean;
+    };
 
 /**
  * Base Layer prop types
@@ -56,7 +105,7 @@ export type LayerProps<DataType = any> = {
   /**
    * Custom implementation to fetch and parse content from URLs.
    */
-  fetch?: (
+  fetch: (
     url: string,
     context: {
       propName: string;
@@ -73,43 +122,43 @@ export type LayerProps<DataType = any> = {
   /**
    * The purpose of the layer
    */
-  operation?: 'draw' | 'mask';
+  operation: 'draw' | 'mask';
   /**
    * If the layer should be rendered. Default true.
    */
-  visible?: boolean;
+  visible: boolean;
   /**
    * If the layer can be picked on pointer events. Default false.
    */
-  pickable?: boolean;
+  pickable: boolean;
   /**
    * Opacity of the layer, between 0 and 1. Default 1.
    */
-  opacity?: number;
+  opacity: number;
   /**
    * The coordinate system of the data. Default to COORDINATE_SYSTEM.LNGLAT in a geospatial view or COORDINATE_SYSTEM.CARTESIAN in a non-geospatial view.
    */
-  coordinateSystem?: CoordinateSystem;
+  coordinateSystem: CoordinateSystem;
   /**
    * The coordinate origin of the data.
    */
-  coordinateOrigin?: [number, number, number];
+  coordinateOrigin: [number, number, number];
   /**
    * A 4x4 matrix to transform local coordianates to the world space.
    */
   modelMatrix?: NumericArray;
   /**
    * (Geospatial only) normalize geometries that cross the 180th meridian. Default false.
    */
-  wrapLongitude?: boolean;
+  wrapLongitude: boolean;
   /**
    * The format of positions, default 'XYZ'.
    */
-  positionFormat?: 'XYZ' | 'XY';
+  positionFormat: 'XYZ' | 'XY';
   /**
    * The format of colors, default 'RGBA'.
    */
-  colorFormat?: 'RGBA' | 'RGB';
+  colorFormat: 'RGBA' | 'RGB';
   /**
    * Override the WebGL parameters used to draw this layer. See https://luma.gl/modules/gltools/docs/api-reference/parameter-setting#parameters
    */
@@ -121,7 +170,7 @@ export type LayerProps<DataType = any> = {
   /**
    * Add additional functionalities to this layer.
    */
-  extensions?: any[];
+  extensions: any[];
   /**
    * Add support for additional data formats.
    */
@@ -138,15 +187,15 @@ export type LayerProps<DataType = any> = {
   /**
    * Enable GPU-based object highlighting. Default false.
    */
-  autoHighlight?: boolean;
+  autoHighlight: boolean;
   /**
    * The index of the data object to highlight. If unspecified, the currently hoverred object is highlighted.
    */
-  highlightedObjectIndex?: number | null;
+  highlightedObjectIndex: number | null;
   /**
    * The color of the highlight.
    */
-  highlightColor?: number[] | ((pickingInfo: PickingInfo) => number[]);
+  highlightColor: number[] | ((pickingInfo: PickingInfo) => number[]);
 
   /**
    * Called when remote data is fetched and parsed.

diff --git a/modules/core/src/utils/assert.ts b/modules/core/src/utils/assert.ts
@@ -1,7 +1,7 @@
 // Replacement for the external assert method to reduce bundle size
 // Note: We don't use the second "message" argument in calling code,
 // so no need to support it here
-export default function assert(condition: unknown, message?: string): void {
+export default function assert(condition: any, message?: string): asserts condition {
   if (!condition) {
     throw new Error(message || 'deck.gl: assertion failed.');
   }

diff --git a/modules/layers/src/index.ts b/modules/layers/src/index.ts
@@ -37,3 +37,6 @@ export {default as SolidPolygonLayer} from './solid-polygon-layer/solid-polygon-
 // Experimental layer exports
 export {default as _MultiIconLayer} from './text-layer/multi-icon-layer/multi-icon-layer';
 export {default as _TextBackgroundLayer} from './text-layer/text-background-layer/text-background-layer';
+
+// Types
+export type {ScatterplotLayerProps} from './scatterplot-layer/scatterplot-layer';
diff --git a/...-layer/scatterplot-layer-fragment.glsl.js → ...-layer/scatterplot-layer-fragment.glsl.ts b/...-layer/scatterplot-layer-fragment.glsl.js → ...-layer/scatterplot-layer-fragment.glsl.ts
diff --git a/...ot-layer/scatterplot-layer-vertex.glsl.js → ...ot-layer/scatterplot-layer-vertex.glsl.ts b/...ot-layer/scatterplot-layer-vertex.glsl.js → ...ot-layer/scatterplot-layer-vertex.glsl.ts