@deck.gl/extensions 8.8.0-alpha.6 → 8.8.0-beta.1

package/src/data-filter/{data-filter.js → data-filter.ts}

@@ -24,6 +24,8 @@ import * as aggregator from './aggregator';
 import {readPixelsToArray, clear} from '@luma.gl/core';
 import GL from '@luma.gl/constants';
 
+import type {Layer, LayerContext, Accessor, UpdateParameters} from '@deck.gl/core';
+
 const defaultProps = {
   getFilterValue: {type: 'accessor', value: 0},
   onFilteredItemsChange: {type: 'function', value: null, compare: false},
@@ -35,6 +37,68 @@ const defaultProps = {
   filterTransformColor: true
 };
 
+export type DataFilterExtensionProps<DataT = any> = {
+  /**
+   * Accessor to retrieve the value for each object that it will be filtered by.
+   * Returns either a number (if `filterSize: 1`) or an array of numbers.
+   */
+  getFilterValue?: Accessor<DataT, number | number[]>;
+  /**
+   * Enable/disable the data filter. If the data filter is disabled, all objects are rendered.
+   * @default true
+   */
+  filterEnabled?: boolean;
+  /**
+   * The [min, max] bounds which defines whether an object should be rendered.
+   * If an object's filtered value is within the bounds, the object will be rendered; otherwise it will be hidden.
+   * @default [-1, 1]
+   */
+  filterRange?: [number, number] | [number, number][];
+  /**
+   * If specified, objects will be faded in/out instead of abruptly shown/hidden.
+   * When the filtered value is outside of the bounds defined by `filterSoftRange` but still within the bounds defined by `filterRange`, the object will be rendered as "faded."
+   * @default null
+   */
+  filterSoftRange?: [number, number] | [number, number][] | null;
+  /**
+   * When an object is "faded", manipulate its size so that it appears smaller or thinner. Only works if `filterSoftRange` is specified.
+   * @default true
+   */
+  filterTransformSize?: boolean;
+  /**
+   * When an object is "faded", manipulate its opacity so that it appears more translucent. Only works if `filterSoftRange` is specified.
+   * @default true
+   */
+  filterTransformColor?: boolean;
+  /**
+   * Only called if the `countItems` option is enabled.
+   */
+  onFilteredItemsChange?: (evt: {
+    /** The id of the source layer. */
+    id: string;
+    /** The number of data objects that pass the filter. */
+    count: number;
+  }) => void;
+};
+
+type DataFilterExtensionOptions = {
+  /**
+   * The size of the filter (number of columns to filter by). The data filter can show/hide data based on 1-4 numeric properties of each object.
+   * @default 1
+   */
+  filterSize: number;
+  /**
+   * Use 64-bit precision instead of 32-bit.
+   * @default false
+   */
+  fp64: boolean;
+  /**
+   * If `true`, reports the number of filtered objects with the `onFilteredItemsChange` callback.
+   * @default `false`.
+   */
+  countItems: boolean;
+};
+
 const DATA_TYPE_FROM_SIZE = {
   1: 'float',
   2: 'vec2',
@@ -42,8 +106,16 @@ const DATA_TYPE_FROM_SIZE = {
   4: 'vec4'
 };
 
-export default class DataFilterExtension extends LayerExtension {
-  constructor({filterSize = 1, fp64 = false, countItems = false} = {}) {
+/** Adds GPU-based data filtering functionalities to layers. It allows the layer to show/hide objects based on user-defined properties. */
+export default class DataFilterExtension extends LayerExtension<DataFilterExtensionOptions> {
+  static defaultProps = defaultProps;
+  static extensionName = 'DataFilterExtension';
+
+  constructor({
+    filterSize = 1,
+    fp64 = false,
+    countItems = false
+  }: Partial<DataFilterExtensionOptions> = {}) {
     if (!DATA_TYPE_FROM_SIZE[filterSize]) {
       throw new Error('filterSize out of range');
     }
@@ -51,7 +123,7 @@ export default class DataFilterExtension extends LayerExtension {
     super({filterSize, fp64, countItems});
   }
 
-  getShaders(extension) {
+  getShaders(this: Layer<DataFilterExtensionProps>, extension: this): any {
     const {filterSize, fp64} = extension.opts;
 
     return {
@@ -63,7 +135,7 @@ export default class DataFilterExtension extends LayerExtension {
     };
   }
 
-  initializeState(context, extension) {
+  initializeState(this: Layer<DataFilterExtensionProps>, context: LayerContext, extension: this) {
     const attributeManager = this.getAttributeManager();
     if (attributeManager) {
       attributeManager.add({
@@ -111,16 +183,24 @@ export default class DataFilterExtension extends LayerExtension {
       });
 
       const filterFBO = aggregator.getFramebuffer(gl, useFloatTarget);
-      const filterModel = aggregator.getModel(gl, extension.getShaders(extension), useFloatTarget);
+      const filterModel = aggregator.getModel(
+        gl,
+        extension.getShaders.call(this, extension),
+        useFloatTarget
+      );
       this.setState({filterFBO, filterModel});
     }
   }
 
-  updateState({props, oldProps}) {
+  updateState(
+    this: Layer<DataFilterExtensionProps>,
+    {props, oldProps}: UpdateParameters<Layer<DataFilterExtensionProps>>
+  ) {
     if (this.state.filterModel) {
       const attributeManager = this.getAttributeManager();
       const filterNeedsUpdate =
-        attributeManager.attributes.filterValues.needsUpdate() ||
+        // attributeManager must be defined for filterModel to be set
+        attributeManager!.attributes.filterValues.needsUpdate() ||
         props.filterEnabled !== oldProps.filterEnabled ||
         props.filterRange !== oldProps.filterRange ||
         props.filterSoftRange !== oldProps.filterSoftRange;
@@ -130,13 +210,13 @@ export default class DataFilterExtension extends LayerExtension {
     }
   }
 
-  draw(params, extension) {
+  draw(this: Layer<DataFilterExtensionProps>, params: any, extension: this) {
     const {filterFBO, filterModel, filterNeedsUpdate} = this.state;
     const {onFilteredItemsChange} = this.props;
     if (filterNeedsUpdate && onFilteredItemsChange && filterModel) {
       const {
         attributes: {filterValues, filterIndices}
-      } = this.getAttributeManager();
+      } = this.getAttributeManager()!;
       filterModel.setVertexCount(this.getNumInstances());
 
       const {gl} = this.context;
@@ -166,7 +246,7 @@ export default class DataFilterExtension extends LayerExtension {
     }
   }
 
-  finalizeState() {
+  finalizeState(this: Layer<DataFilterExtensionProps>) {
     const {filterFBO, filterModel} = this.state;
     if (filterFBO) {
       filterFBO.color.delete();
@@ -175,6 +255,3 @@ export default class DataFilterExtension extends LayerExtension {
     }
   }
 }
-
-DataFilterExtension.extensionName = 'DataFilterExtension';
-DataFilterExtension.defaultProps = defaultProps;

package/src/data-filter/{shader-module.js → shader-module.ts}

@@ -1,3 +1,7 @@
+import {_ShaderModule as ShaderModule} from '@deck.gl/core/typed';
+
+import type {DataFilterExtensionProps} from './data-filter';
+
 /*
  * data filter shader module
  */
@@ -63,8 +67,13 @@ uniform bool filter_transformColor;
 varying float dataFilter_value;
 `;
 
-const getUniforms = opts => {
-  if (!opts || !opts.extensions) {
+type DataFilterModuleSettings = {
+  extensions: any[]; // used to detect if layer props are present
+} & DataFilterExtensionProps;
+
+/* eslint-disable camelcase */
+function getUniforms(opts?: DataFilterModuleSettings | {}): Record<string, any> {
+  if (!opts || !('extensions' in opts)) {
     return {};
   }
   const {
@@ -75,29 +84,29 @@ const getUniforms = opts => {
   } = opts;
   const filterSoftRange = opts.filterSoftRange || filterRange;
 
-  const uniforms = Number.isFinite(filterRange[0])
-    ? {
-        filter_min: filterRange[0],
-        filter_softMin: filterSoftRange[0],
-        filter_softMax: filterSoftRange[1],
-        filter_max: filterRange[1]
-      }
-    : {
-        filter_min: filterRange.map(r => r[0]),
-        filter_softMin: filterSoftRange.map(r => r[0]),
-        filter_softMax: filterSoftRange.map(r => r[1]),
-        filter_max: filterRange.map(r => r[1])
-      };
-  uniforms.filter_enabled = filterEnabled;
-  uniforms.filter_useSoftMargin = Boolean(opts.filterSoftRange);
-  uniforms.filter_transformSize = filterEnabled && filterTransformSize;
-  uniforms.filter_transformColor = filterEnabled && filterTransformColor;
-
-  return uniforms;
-};
+  return {
+    ...(Number.isFinite(filterRange[0])
+      ? {
+          filter_min: filterRange[0],
+          filter_softMin: filterSoftRange[0],
+          filter_softMax: filterSoftRange[1],
+          filter_max: filterRange[1]
+        }
+      : {
+          filter_min: filterRange.map(r => r[0]),
+          filter_softMin: filterSoftRange.map(r => r[0]),
+          filter_softMax: filterSoftRange.map(r => r[1]),
+          filter_max: filterRange.map(r => r[1])
+        }),
+    filter_enabled: filterEnabled,
+    filter_useSoftMargin: Boolean(opts.filterSoftRange),
+    filter_transformSize: filterEnabled && filterTransformSize,
+    filter_transformColor: filterEnabled && filterTransformColor
+  };
+}
 
-const getUniforms64 = opts => {
-  if (!opts || !opts.extensions) {
+function getUniforms64(opts?: DataFilterModuleSettings | {}): Record<string, any> {
+  if (!opts || !('extensions' in opts)) {
     return {};
   }
   const uniforms = getUniforms(opts);
@@ -123,7 +132,7 @@ const getUniforms64 = opts => {
     uniforms.filter_max64High = max64High;
   }
   return uniforms;
-};
+}
 
 const inject = {
   'vs:#main-start': `
@@ -151,7 +160,7 @@ const inject = {
   `
 };
 
-export const shaderModule = {
+export const shaderModule: ShaderModule<DataFilterModuleSettings> = {
   name: 'data-filter',
   vs,
   fs,
@@ -159,7 +168,7 @@ export const shaderModule = {
   getUniforms
 };
 
-export const shaderModule64 = {
+export const shaderModule64: ShaderModule<DataFilterModuleSettings> = {
   name: 'data-filter-fp64',
   vs,
   fs,

package/src/fill-style/{fill-style.js → fill-style.ts}

@@ -4,6 +4,15 @@ import GL from '@luma.gl/constants';
 
 import {patternShaders} from './shaders.glsl';
 
+import type {
+  Layer,
+  LayerContext,
+  Accessor,
+  AccessorFunction,
+  Texture,
+  UpdateParameters
+} from '@deck.gl/core';
+
 const defaultProps = {
   fillPatternEnabled: true,
   fillPatternAtlas: null,
@@ -14,6 +23,54 @@ const defaultProps = {
   getFillPatternOffset: {type: 'accessor', value: [0, 0]}
 };
 
+export type FillStyleExtensionProps<DataT = any> = {
+  /** Cheap toggle to enable/disable pattern fill. Requires the `pattern` option to be on.
+   * @default true
+   */
+  fillPatternEnabled?: boolean;
+  /** Sprite image url or texture that packs all your patterns into one layout. */
+  fillPatternAtlas?: Texture;
+  /** Pattern names mapped to pattern definitions, or a url that points to a JSON file. */
+  fillPatternMapping?:
+    | string
+    | Record<
+        string,
+        {
+          /** Left position of the pattern on the atlas */
+          x: number;
+          /** Top position of the pattern on the atlas */
+          y: number;
+          /** Width of the pattern */
+          width: number;
+          /** Height of the pattern */
+          height: number;
+        }
+      >;
+  /**
+   * Whether to treat the patterns as transparency masks.
+   * @default true
+   */
+  fillPatternMask?: boolean;
+  /** Accessor for the name of the pattern. */
+  getFillPattern?: AccessorFunction<DataT, string>;
+  /** Accessor for the scale of the pattern, relative to the original size. If the pattern is 24 x 24 pixels, scale `1` roughly yields 24 meters.
+   * @default 1
+   */
+  getFillPatternScale?: Accessor<DataT, number>;
+  /**
+   * Accessor for the offset of the pattern, relative to the original size. Offset `[0.5, 0.5]` shifts the pattern alignment by half.
+   * @default [0, 0]
+   */
+  getFillPatternOffset?: Accessor<DataT, [number, number]>;
+};
+
+type FillStyleExtensionOptions = {
+  /** If `true`, adds the ability to tile the filled area with a pattern.
+   * @default false
+   */
+  pattern: boolean;
+};
+
 const DEFAULT_TEXTURE_PARAMETERS = {
   [GL.TEXTURE_MIN_FILTER]: GL.LINEAR,
   // GL.LINEAR is the default value but explicitly set it here
@@ -23,16 +80,20 @@ const DEFAULT_TEXTURE_PARAMETERS = {
   [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
 };
 
-export default class FillStyleExtension extends LayerExtension {
-  constructor({pattern = false} = {}) {
+/** Adds selected features to layers that render a "fill", such as the `PolygonLayer` and `ScatterplotLayer`. */
+export default class FillStyleExtension extends LayerExtension<FillStyleExtensionOptions> {
+  static defaultProps = defaultProps;
+  static extensionName = 'FillStyleExtension';
+
+  constructor({pattern = false}: Partial<FillStyleExtensionOptions> = {}) {
     super({pattern});
   }
 
-  isEnabled(layer) {
-    return layer.getAttributeManager() && !layer.state.pathTesselator;
+  isEnabled(layer: Layer<FillStyleExtensionProps>): boolean {
+    return layer.getAttributeManager() !== null && !('pathTesselator' in layer.state);
   }
 
-  getShaders(extension) {
+  getShaders(this: Layer<FillStyleExtensionProps>, extension: this): any {
     if (!extension.isEnabled(this)) {
       return null;
     }
@@ -42,7 +103,7 @@ export default class FillStyleExtension extends LayerExtension {
     };
   }
 
-  initializeState(context, extension) {
+  initializeState(this: Layer<FillStyleExtensionProps>, context: LayerContext, extension: this) {
     if (!extension.isEnabled(this)) {
       return;
     }
@@ -50,7 +111,7 @@ export default class FillStyleExtension extends LayerExtension {
     const attributeManager = this.getAttributeManager();
 
     if (extension.opts.pattern) {
-      attributeManager.add({
+      attributeManager!.add({
         fillPatternFrames: {
           size: 4,
           accessor: 'getFillPattern',
@@ -100,20 +161,24 @@ export default class FillStyleExtension extends LayerExtension {
     });
   }
 
-  updateState({props, oldProps}, extension) {
+  updateState(
+    this: Layer<FillStyleExtensionProps>,
+    {props, oldProps}: UpdateParameters<Layer<FillStyleExtensionProps>>,
+    extension: this
+  ) {
     if (!extension.isEnabled(this)) {
       return;
     }
 
     if (props.fillPatternAtlas && props.fillPatternAtlas !== oldProps.fillPatternAtlas) {
-      extension.loadPatternAtlas.call(this, props);
+      extension.loadPatternAtlas.call(this);
     }
     if (props.fillPatternMapping && props.fillPatternMapping !== oldProps.fillPatternMapping) {
-      extension.loadPatternMapping.call(this, props);
+      extension.loadPatternMapping.call(this);
     }
   }
 
-  draw(params, extension) {
+  draw(this: Layer<FillStyleExtensionProps>, params: any, extension: this) {
     if (!extension.isEnabled(this)) {
       return;
     }
@@ -124,13 +189,14 @@ export default class FillStyleExtension extends LayerExtension {
     });
   }
 
-  finalizeState() {
+  finalizeState(this: Layer<FillStyleExtensionProps>) {
     const {patternTexture, emptyTexture} = this.state;
     patternTexture?.delete();
     emptyTexture?.delete();
   }
 
-  async loadPatternAtlas({fillPatternAtlas, fetch}) {
+  async loadPatternAtlas(this: Layer<FillStyleExtensionProps>) {
+    const {fillPatternAtlas, fetch} = this.props;
     this.state.patternTexture?.delete();
     this.setState({patternTexture: null});
     let image = fillPatternAtlas;
@@ -147,7 +213,8 @@ export default class FillStyleExtension extends LayerExtension {
     this.setState({patternTexture});
   }
 
-  async loadPatternMapping({fillPatternMapping, fetch}) {
+  async loadPatternMapping(this: Layer<FillStyleExtensionProps>) {
+    const {fillPatternMapping, fetch} = this.props;
     this.setState({patternMapping: null});
     let patternMapping = fillPatternMapping;
     if (typeof patternMapping === 'string') {
@@ -157,16 +224,13 @@ export default class FillStyleExtension extends LayerExtension {
       });
     }
     this.setState({patternMapping});
-    this.getAttributeManager().invalidate('getFillPattern');
+    this.getAttributeManager()!.invalidate('getFillPattern');
     this.setNeedsUpdate();
   }
 
-  getPatternFrame(name) {
+  getPatternFrame(this: Layer<FillStyleExtensionProps>, name: string) {
     const {patternMapping} = this.state;
     const def = patternMapping && patternMapping[name];
     return def ? [def.x, def.y, def.width, def.height] : [0, 0, 0, 0];
   }
 }
-
-FillStyleExtension.extensionName = 'FillStyleExtension';
-FillStyleExtension.defaultProps = defaultProps;

package/src/fill-style/{shaders.glsl.js → shaders.glsl.ts}

@@ -1,4 +1,7 @@
 import {project, COORDINATE_SYSTEM} from '@deck.gl/core';
+import type {Viewport, _ShaderModule as ShaderModule, ProjectUniforms} from '@deck.gl/core';
+
+import type {Texture2D} from '@luma.gl/webgl';
 
 /*
  * fill pattern shader module
@@ -69,7 +72,24 @@ const inject = {
   `
 };
 
-function getPatternUniforms(opts = {}, uniforms) {
+type FillStyleModuleSettings =
+  | {
+      viewport: Viewport;
+      fillPatternEnabled?: boolean;
+      fillPatternMask?: boolean;
+    }
+  | {
+      fillPatternTexture: Texture2D;
+    };
+
+/* eslint-disable camelcase */
+function getPatternUniforms(
+  opts: FillStyleModuleSettings | {},
+  uniforms: Record<string, any>
+): Record<string, any> {
+  if (!opts) {
+    return {};
+  }
   if ('fillPatternTexture' in opts) {
     const {fillPatternTexture} = opts;
     return {
@@ -77,9 +97,9 @@ function getPatternUniforms(opts = {}, uniforms) {
       fill_patternTextureSize: [fillPatternTexture.width, fillPatternTexture.height]
     };
   }
-  if (opts.viewport) {
+  if ('viewport' in opts) {
     const {viewport, fillPatternMask = true, fillPatternEnabled = true} = opts;
-    const {project_uCoordinateOrigin, project_uCoordinateSystem} = uniforms;
+    const {project_uCoordinateOrigin, project_uCoordinateSystem} = uniforms as ProjectUniforms;
 
     const coordinateOriginCommon =
       project_uCoordinateSystem === COORDINATE_SYSTEM.CARTESIAN
@@ -95,7 +115,7 @@ function getPatternUniforms(opts = {}, uniforms) {
   return {};
 }
 
-export const patternShaders = {
+export const patternShaders: ShaderModule<FillStyleModuleSettings> = {
   name: 'fill-pattern',
   vs: patternVs,
   fs: patternFs,

package/src/fp64/{fp64.js → fp64.ts}

@@ -21,8 +21,13 @@
 import {LayerExtension, COORDINATE_SYSTEM} from '@deck.gl/core';
 import project64 from './project64';
 
+import type {Layer} from '@deck.gl/core';
+
+/** @deprecated Adds the legacy 64-bit precision to geospatial layers. */
 export default class Fp64Extension extends LayerExtension {
-  getShaders(opts) {
+  static extensionName = 'Fp64Extension';
+
+  getShaders(this: Layer): any {
     const {coordinateSystem} = this.props;
     if (
       coordinateSystem !== COORDINATE_SYSTEM.LNGLAT &&
@@ -36,5 +41,3 @@ export default class Fp64Extension extends LayerExtension {
     };
   }
 }
-
-Fp64Extension.extensionName = 'Fp64Extension';

package/src/fp64/{project64.js → project64.ts}

@@ -18,27 +18,32 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+/* eslint-disable camelcase */
 import {fp64} from '@luma.gl/shadertools';
 const {fp64ify, fp64ifyMatrix4} = fp64;
 import {project, _memoize as memoize} from '@deck.gl/core';
 
+import type {Viewport, _ShaderModule as ShaderModule} from '@deck.gl/core';
 import project64Shader from './project64.glsl';
 
+type Project64ModuleSettings = {
+  viewport: Viewport;
+};
+
 export default {
   name: 'project64',
   dependencies: [project, fp64],
   vs: project64Shader,
   getUniforms
-};
+} as ShaderModule<Project64ModuleSettings>;
 
 // TODO - this module should calculate the 64 bit uniforms
 // It is currently done by project to minimize duplicated work
 
-const DEFAULT_MODULE_OPTIONS = {};
 const getMemoizedUniforms = memoize(calculateUniforms);
 
-function getUniforms(opts = DEFAULT_MODULE_OPTIONS) {
-  if (opts.viewport) {
+function getUniforms(opts?: Project64ModuleSettings | {}): Record<string, any> {
+  if (opts && 'viewport' in opts) {
     const {viewProjectionMatrix, scale} = opts.viewport;
     // We only need to update fp64 uniforms if fp32 projection is being updated
     return getMemoizedUniforms({viewProjectionMatrix, scale});
@@ -46,7 +51,13 @@ function getUniforms(opts = DEFAULT_MODULE_OPTIONS) {
   return {};
 }
 
-function calculateUniforms({viewProjectionMatrix, scale}) {
+function calculateUniforms({
+  viewProjectionMatrix,
+  scale
+}: {
+  viewProjectionMatrix: number[];
+  scale: number;
+}) {
   const glViewProjectionMatrixFP64 = fp64ifyMatrix4(viewProjectionMatrix);
   const scaleFP64 = fp64ify(scale);
 

package/src/index.ts

@@ -8,3 +8,11 @@ export {default as MaskExtension} from './mask/mask';
 
 // Shader module
 export {default as project64} from './fp64/project64';
+
+// Types
+export type {BrushingExtensionProps} from './brushing/brushing';
+export type {DataFilterExtensionProps} from './data-filter/data-filter';
+export type {PathStyleExtensionProps} from './path-style/path-style';
+export type {FillStyleExtensionProps} from './fill-style/fill-style';
+export type {ClipExtensionProps} from './clip/clip';
+export type {MaskExtensionProps} from './mask/mask';

package/src/mask/{mask.js → mask.ts}

@@ -1,17 +1,36 @@
 import {COORDINATE_SYSTEM, LayerExtension, log} from '@deck.gl/core';
 import mask from './shader-module';
 
+import type {Layer} from '@deck.gl/core';
+
 const defaultProps = {
   maskId: ''
 };
 
+export type MaskExtensionProps = {
+  /**
+   * Id of the layer that defines the mask. The mask layer must use the prop `operation: 'mask'`.
+   * Masking is disabled if `maskId` is empty or no valid mask layer with the specified id is found.
+   */
+  maskId?: string;
+  /**
+   * controls whether an object is clipped by its anchor (usually defined by an accessor called `getPosition`, e.g. icon, scatterplot) or by its geometry (e.g. path, polygon).
+   * If not specified, it is automatically deduced from the layer.
+   */
+  maskByInstance?: boolean;
+};
+
+/** Allows layers to show/hide objects by a geofence. */
 export default class MaskExtension extends LayerExtension {
-  getShaders() {
+  static defaultProps = defaultProps;
+  static extensionName = 'MaskExtension';
+
+  getShaders(this: Layer<MaskExtensionProps>): any {
     // Infer by geometry if 'maskByInstance' prop isn't explictly set
-    let maskByInstance = 'instancePositions' in this.getAttributeManager().attributes;
+    let maskByInstance = 'instancePositions' in this.getAttributeManager()!.attributes;
     // Users can override by setting the `maskByInstance` prop
     if ('maskByInstance' in this.props) {
-      maskByInstance = this.props.maskByInstance;
+      maskByInstance = Boolean(this.props.maskByInstance);
     }
     this.state.maskByInstance = maskByInstance;
 
@@ -20,9 +39,10 @@ export default class MaskExtension extends LayerExtension {
     };
   }
 
-  draw({uniforms, context, moduleParameters}) {
+  /* eslint-disable camelcase */
+  draw(this: Layer<MaskExtensionProps>, {uniforms, context, moduleParameters}: any) {
     uniforms.mask_maskByInstance = this.state.maskByInstance;
-    const {maskId} = this.props;
+    const {maskId = ''} = this.props;
     const {maskChannels} = moduleParameters;
     const {viewport} = context;
     if (maskChannels && maskChannels[maskId]) {
@@ -48,6 +68,3 @@ export default class MaskExtension extends LayerExtension {
     }
   }
 }
-
-MaskExtension.extensionName = 'MaskExtension';
-MaskExtension.defaultProps = defaultProps;