Core application lifecycle management including rendering coordination, layer management, and user interaction handling through the Deck class and related managers.
The main application class that orchestrates the complete deck.gl rendering lifecycle, managing layers, views, effects, and user interactions.
/**
* Main deck.gl application class
* Manages rendering lifecycle, layers, viewports, effects, and user interactions
*/
class Deck {
/** Initialize a new Deck instance */
constructor(props: DeckProps);
/** Update Deck properties and trigger necessary updates */
setProps(props: DeckProps): void;
/** Clean up resources and destroy the Deck instance */
finalize(): void;
/** Force a redraw of all layers */
redraw(reason?: string): void;
/** Check if redraw is needed based on current state */
needsRedraw(opts?: {clearRedrawFlags?: boolean}): boolean;
/** Get the canvas element */
getCanvas(): HTMLCanvasElement | null;
/** Get current active views */
getViews(): View[];
/** Get current viewports for given rectangle */
getViewports(rect?: {x: number; y: number; width: number; height: number}): Viewport[];
/** Pick a single object at given coordinates */
pickObject(opts: PickByPointOptions): PickingInfo | null;
/** Pick multiple objects at given coordinates */
pickMultipleObjects(opts: PickByPointOptions): PickingInfo[];
/** Pick all objects within a rectangular area */
pickObjects(opts: PickByRectOptions): PickingInfo[];
/** Get current metrics for performance monitoring */
getMetrics(): DeckMetrics;
/** Current properties */
readonly props: DeckProps;
/** Whether the deck instance has been initialized */
readonly isInitialized: boolean;
/** User-defined data storage */
userData: Record<string, any>;
}
interface DeckProps {
/** Unique identifier for this Deck instance */
id?: string;
/** Canvas width - number in pixels or CSS string */
width?: string | number | null;
/** Canvas height - number in pixels or CSS string */
height?: string | number | null;
/** Additional CSS styles for the canvas */
style?: Partial<CSSStyleDeclaration> | null;
/** Resolution multiplier for high-DPI displays */
useDevicePixels?: boolean | number;
/** Extra pixels around pointer for picking tolerance */
pickingRadius?: number;
/** List of views defining viewport layouts */
views?: View | View[];
/** Array of layers to render */
layers?: Layer[];
/** Initial view state for first render */
initialViewState?: any;
/** Current view state (controlled mode) */
viewState?: any;
/** View state change handler */
onViewStateChange?: (params: ViewStateChangeParameters) => void;
/** Render loop callback */
onBeforeRender?: (opts: {gl: WebGL2RenderingContext}) => void;
/** Post-render callback */
onAfterRender?: (opts: {gl: WebGL2RenderingContext}) => void;
/** Layer data loading callback */
onLoad?: () => void;
/** Error handler */
onError?: (error: Error) => void;
/** WebGL context parameters */
parameters?: any;
/** List of effects to apply */
effects?: Effect[];
/** Debug mode settings */
debug?: boolean;
/** Performance metrics collection */
_typedArrayManagerProps?: TypedArrayManagerOptions;
/** Custom device for rendering */
device?: Device;
/** WebGL context creation properties */
gl?: WebGL2RenderingContext;
/** Canvas element or selector */
canvas?: HTMLCanvasElement | string;
/** Event handling configuration */
controller?: boolean | ControllerProps;
/** Gesture recognizer options */
recognizers?: RecognizerOptions;
/** Tooltip configuration */
getTooltip?: (info: PickingInfo) => TooltipContent | null;
/** Cursor styling function */
getCursor?: (state: CursorState) => string;
}
interface DeckMetrics {
/** Frames per second */
fps: number;
/** Time spent in setProps (ms) */
setPropsTime: number;
/** Time spent updating attributes (ms) */
updateAttributesTime: number;
/** Number of frames redrawn */
framesRedrawn: number;
/** Time spent picking (ms) */
pickTime: number;
/** Number of pick operations */
pickCount: number;
/** GPU time per frame (ms) */
gpuTime: number;
/** Average GPU time per frame (ms) */
gpuTimePerFrame: number;
/** CPU time per frame (ms) */
cpuTime: number;
/** Average CPU time per frame (ms) */
cpuTimePerFrame: number;
/** Buffer memory usage (bytes) */
bufferMemory: number;
/** Texture memory usage (bytes) */
textureMemory: number;
/** Renderbuffer memory usage (bytes) */
renderbufferMemory: number;
/** Total GPU memory usage (bytes) */
gpuMemory: number;
}Usage Examples:
import { Deck, MapView, COORDINATE_SYSTEM } from "@deck.gl/core";
// Basic Deck setup
const deck = new Deck({
width: 800,
height: 600,
views: [new MapView({id: 'main'})],
initialViewState: {
longitude: -122.4,
latitude: 37.8,
zoom: 12
},
layers: [],
controller: true,
onViewStateChange: ({viewState}) => {
console.log('View changed:', viewState);
}
});
// Update layers
deck.setProps({
layers: [
new ScatterplotLayer({
id: 'points',
data: myData,
getPosition: d => d.coordinates,
getRadius: 100,
coordinateSystem: COORDINATE_SYSTEM.LNGLAT
})
]
});
// Pick objects on click
const pickingInfo = deck.pickObject({
x: 400,
y: 300,
radius: 5
});
if (pickingInfo && pickingInfo.object) {
console.log('Picked object:', pickingInfo.object);
}
// Clean up when done
deck.finalize();Internal manager class that handles layer lifecycle, matching, and updates. Typically not used directly but accessible for advanced use cases.
class LayerManager {
constructor(device: Device, props?: LayerManagerProps);
/** Set new layers and process updates */
setLayers(layers: Layer[], reason?: string): void;
/** Update all layers that need updates */
updateLayers(): void;
/** Get filtered list of layers */
getLayers(opts?: {layerIds?: string[]; viewportIds?: string[]}): Layer[];
/** Check if any layer needs redraw */
needsRedraw(opts?: {clearRedrawFlags?: boolean}): boolean;
/** Mark manager for redraw */
setNeedsRedraw(reason?: string): void;
/** Set active viewport for layers */
activateViewport(viewport: Viewport): void;
/** Current layers */
readonly layers: Layer[];
/** Rendering context */
readonly context: LayerContext;
}
interface LayerContext {
device: Device;
gl: WebGL2RenderingContext;
layerManager: LayerManager;
resourceManager: any;
stats: any;
viewport: Viewport;
renderPass: string;
}Internal renderer that coordinates layer rendering and effects processing.
class DeckRenderer {
constructor(device: Device);
/** Render all layers with effects */
renderLayers(opts: RenderLayersOptions): void;
/** Update renderer properties */
setProps(props: DeckRendererProps): void;
/** Check if renderer needs redraw */
needsRedraw(opts?: {clearRedrawFlags?: boolean}): boolean;
}
interface RenderLayersOptions {
layers: Layer[];
viewports: Viewport[];
views: View[];
effects?: Effect[];
pass?: string;
redrawReason?: string;
}Object picking capabilities for interactive applications.
interface PickByPointOptions {
/** X coordinate in pixels */
x: number;
/** Y coordinate in pixels */
y: number;
/** Picking radius in pixels */
radius?: number;
/** Layers to pick from */
layerIds?: string[];
/** Viewports to pick from */
viewportIds?: string[];
/** Depth test mode */
mode?: 'hover' | 'click';
/** Custom uniforms */
uniforms?: any;
}
interface PickByRectOptions {
/** Left edge of rectangle */
x: number;
/** Top edge of rectangle */
y: number;
/** Rectangle width */
width: number;
/** Rectangle height */
height: number;
/** Layers to pick from */
layerIds?: string[];
/** Viewports to pick from */
viewportIds?: string[];
}
interface PickingInfo {
/** Layer that was picked */
layer: Layer | null;
/** Index of picked object in data array */
index: number;
/** The picked data object */
object: any;
/** X coordinate of pick point */
x: number;
/** Y coordinate of pick point */
y: number;
/** World coordinate of picked point */
coordinate?: [number, number, number];
/** Device pixel coordinates */
devicePixel?: [number, number];
/** Device pixel ratio */
pixelRatio: number;
/** Additional layer-specific info */
[key: string]: any;
}Usage Examples:
// Advanced picking with multiple layers
const pickingInfos = deck.pickMultipleObjects({
x: mouseX,
y: mouseY,
radius: 10,
layerIds: ['points-layer', 'lines-layer']
});
// Rectangle selection
const selectedObjects = deck.pickObjects({
x: selectionRect.x,
y: selectionRect.y,
width: selectionRect.width,
height: selectionRect.height
});
console.log(`Selected ${selectedObjects.length} objects`);
// Performance monitoring
setInterval(() => {
const metrics = deck.getMetrics();
console.log(`FPS: ${metrics.fps}, GPU Memory: ${metrics.gpuMemory}MB`);
}, 1000);