or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

brushing.mddata-filtering.mdgeometry-operations.mdindex.mdlegacy-experimental.mdstyling.md
tile.json

tessl/npm-deck-gl--extensions

Plug-and-play extension system providing advanced functionalities for deck.gl layers including brushing, filtering, styling, clipping, collision detection, masking, and terrain rendering capabilities.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@deck.gl/extensions@9.1.x

To install, run

npx @tessl/cli install tessl/npm-deck-gl--extensions@9.1.0

index.mddocs/

Deck.gl Extensions

Deck.gl Extensions provides a collection of plug-and-play extension classes that enhance deck.gl layers with advanced functionalities including interactive brushing, data filtering, high-precision calculations, styling, clipping, collision detection, masking, and terrain rendering capabilities.

Package Information

  • Package Name: @deck.gl/extensions
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @deck.gl/extensions

Core Imports

import { 
  BrushingExtension, 
  DataFilterExtension, 
  PathStyleExtension,
  FillStyleExtension,
  ClipExtension,
  CollisionFilterExtension,
  MaskExtension,
  Fp64Extension,
  _TerrainExtension,
  project64
} from "@deck.gl/extensions";

// Import types
import type {
  BrushingExtensionProps,
  DataFilterExtensionProps,
  DataFilterExtensionOptions,
  PathStyleExtensionProps,
  PathStyleExtensionOptions,
  FillStyleExtensionProps,
  FillStyleExtensionOptions,
  ClipExtensionProps,
  CollisionFilterExtensionProps,
  MaskExtensionProps,
  TerrainExtensionProps,
  TerrainModuleProps
} from "@deck.gl/extensions";

For CommonJS:

const { 
  BrushingExtension, 
  DataFilterExtension, 
  PathStyleExtension,
  FillStyleExtension,
  ClipExtension,
  CollisionFilterExtension,
  MaskExtension,
  Fp64Extension,
  _TerrainExtension,
  project64
} = require("@deck.gl/extensions");

Basic Usage

import { ScatterplotLayer } from "@deck.gl/layers";
import { BrushingExtension, DataFilterExtension } from "@deck.gl/extensions";

// Add brushing capability to a layer
const layer = new ScatterplotLayer({
  id: "points",
  data: myData,
  extensions: [new BrushingExtension()],
  getPosition: d => d.coordinates,
  getRadius: 100,
  brushingEnabled: true,
  brushingRadius: 50000
});

// Add data filtering with custom filter range
const filteredLayer = new ScatterplotLayer({
  id: "filtered-points", 
  data: myData,
  extensions: [new DataFilterExtension({ filterSize: 1 })],
  getPosition: d => d.coordinates,
  getFilterValue: d => d.value,
  filterRange: [0, 100],
  filterEnabled: true
});

Architecture

Deck.gl Extensions is built around the LayerExtension system from @deck.gl/core:

  • Extension Classes: Each extension inherits from LayerExtension and provides specific functionality
  • Shader Integration: Extensions inject custom shader modules for GPU-based processing
  • Attribute Management: Extensions add custom attributes to layers' attribute managers
  • Prop System: Extensions define typed props interfaces for configuration
  • WebGL/WebGPU Support: Extensions work with both rendering backends

Capabilities

Interactive Brushing

GPU-based brushing functionality that shows/hides objects based on pointer position, enabling interactive data exploration.

class BrushingExtension extends LayerExtension {
  static extensionName: 'BrushingExtension';
  constructor();
}

interface BrushingExtensionProps<DataT = any> {
  getBrushingTarget?: Accessor<DataT, [number, number]>;
  brushingEnabled?: boolean;
  brushingTarget?: 'source' | 'target' | 'source_target' | 'custom';
  brushingRadius?: number;
}

Interactive Brushing

Data Filtering

Advanced GPU-based filtering system that shows/hides objects based on numeric values and categories, with support for soft filtering transitions.

class DataFilterExtension extends LayerExtension<Required<DataFilterExtensionOptions>> {
  static extensionName: 'DataFilterExtension';
  constructor(opts?: DataFilterExtensionOptions);
}

interface DataFilterExtensionProps<DataT = any> {
  getFilterValue?: Accessor<DataT, number | number[]>;
  getFilterCategory?: Accessor<DataT, FilterCategory | FilterCategory[]>;
  filterEnabled?: boolean;
  filterRange?: [number, number] | [number, number][];
  filterSoftRange?: [number, number] | [number, number][] | null;
  filterCategories?: FilterCategory[] | FilterCategory[][];
  onFilteredItemsChange?: (evt: {id: string; count: number}) => void;
}

interface DataFilterExtensionOptions {
  categorySize?: 0 | 1 | 2 | 3 | 4;
  filterSize?: 0 | 1 | 2 | 3 | 4;
  fp64?: boolean;
  countItems?: boolean;
}

Data Filtering

Path and Shape Styling

Advanced styling capabilities for path-based and fill-based layers including dash patterns, offsets, and texture patterns.

class PathStyleExtension extends LayerExtension<PathStyleExtensionOptions> {
  static extensionName: 'PathStyleExtension';
  constructor(options?: Partial<PathStyleExtensionOptions>);
}

class FillStyleExtension extends LayerExtension<FillStyleExtensionOptions> {
  static extensionName: 'FillStyleExtension';
  constructor(options?: Partial<FillStyleExtensionOptions>);
}

interface PathStyleExtensionProps<DataT = any> {
  getDashArray?: Accessor<DataT, [number, number]>;
  getOffset?: Accessor<DataT, number>;
  dashJustified?: boolean;
  dashGapPickable?: boolean;
}

interface FillStyleExtensionProps<DataT = any> {
  fillPatternEnabled?: boolean;
  fillPatternAtlas?: string | TextureSource;
  fillPatternMapping?: string | Record<string, PatternFrame>;
  getFillPattern?: AccessorFunction<DataT, string>;
  getFillPatternScale?: Accessor<DataT, number>;
  getFillPatternOffset?: Accessor<DataT, [number, number]>;
}

Path and Shape Styling

Geometry Operations

Clipping, masking, and collision detection capabilities for advanced geometry processing and object visibility control.

class ClipExtension extends LayerExtension {
  static extensionName: 'ClipExtension';
  constructor();
}

class MaskExtension extends LayerExtension {
  static extensionName: 'MaskExtension';
  constructor();
}

class CollisionFilterExtension extends LayerExtension {
  static extensionName: 'CollisionFilterExtension';
  constructor();
}

interface ClipExtensionProps {
  clipBounds?: [number, number, number, number];
  clipByInstance?: boolean;
}

interface MaskExtensionProps {
  maskId?: string;
  maskByInstance?: boolean;
  maskInverted?: boolean;
}

interface CollisionFilterExtensionProps<DataT = any> {
  getCollisionPriority?: Accessor<DataT, number>;
  collisionEnabled: boolean;
  collisionGroup?: string;
  collisionTestProps?: {};
}

Geometry Operations

Legacy and Experimental Features

High-precision calculations and experimental terrain rendering capabilities.

class Fp64Extension extends LayerExtension {
  static extensionName: 'Fp64Extension';
  constructor();
}

class _TerrainExtension extends LayerExtension {
  static extensionName: 'TerrainExtension';
  constructor();
}

// Shader module for 64-bit precision
const project64: ShaderModule<Project64ModuleProps>;

interface TerrainExtensionProps {
  terrainDrawMode?: 'offset' | 'drape';
}

interface Project64ModuleProps {
  viewport: Viewport;
}

Legacy and Experimental

Common Types

type Accessor<DataT, ValueT> = ((d: DataT, info: AccessorContext) => ValueT) | ValueT;

type AccessorFunction<DataT, ValueT> = (d: DataT, info: AccessorContext) => ValueT;

interface AccessorContext {
  index: number;
  data: any;
  target: number[];
}

type FilterCategory = number | string;

interface PatternFrame {
  x: number;
  y: number;
  width: number;
  height: number;
}

interface TextureSource {
  // WebGL texture or image source
}

interface Viewport {
  // Deck.gl viewport object
}