CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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
}

Install with Tessl CLI

npx tessl i tessl/npm-deck-gl--extensions
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@deck.gl/extensions@9.1.x
Publish Source
CLI
Badge
tessl/npm-deck-gl--extensions badge