Panel Manager

PanelManager mounts PanelComponent instances into a plain HTML element without creating a Deck instance.

Usage

A PanelManager mounts panel-module UI such as direct Panel instances, real PanelContainer instances, ToolbarComponent, and ToastComponent.

For overlays owned by deck.gl's widget lifecycle, use the adapters in @deck.gl-community/widgets. For permanent chrome and pinnable panels around a deck.gl canvas, use PanelManager with contentElement and mount deck.gl inside that content host.

import {PanelManager} from '@deck.gl-community/panels';

const panelManager = new PanelManager({
  parentElement: document.getElementById('app') as HTMLElement
});

panelManager.setProps({
  components: []
});

Styling

PanelManager ensures that the base panel CSS is available in the document.

• If deck widget CSS has not been loaded, PanelManager injects a deck-theme-compatible stylesheet automatically.
• If deck widget CSS is already present, PanelManager does not inject another copy.

This lets standalone panel apps render with the expected light/dark theme styles without importing deck.gl styles manually. When the same panels are used through @deck.gl-community/widgets, they inherit the existing deck.gl widget styling and theming instead.

Types

type PanelManagerProps = {
  parentElement: HTMLElement;
  components?: (PanelComponent | null | undefined)[];
  contentElement?: HTMLElement;
  deck?: unknown | null;
  className?: string;
};

Constructor

new PanelManager({
  parentElement,
  contentElement,
  components,
  deck,
  className
});

Methods

getComponents(): PanelComponent[];
setProps(props: {
  components?: (PanelComponent | null | undefined)[];
}): void;
addDefault(component: PanelComponent): void;
finalize(): void;
onRedraw(params: {
  viewports: Array<{id: string; x: number; y: number; width: number; height: number}>;
  layers: unknown[];
}): void;
onHover(info: {viewport?: {id?: string}}, event: MjolnirPointerEvent): void;
onEvent(
  eventHandlerProp: 'onClick' | 'onDrag' | 'onDragStart' | 'onDragEnd',
  info: {viewport?: {id?: string}},
  event: MjolnirGestureEvent
): void;

Remarks

• Adds deck-widget-container to the supplied host root so existing panel theme inference continues to work.
• Reconciles components by id and type, preserving mounted instances and routing same-type updates through each component's setProps.
• Supports the normal placement buckets: top-left, top-right, bottom-left, bottom-right, and fill.
• Honors _container when a component points at an explicit HTMLElement.
• Can optionally forward redraw, viewport, hover, and gesture hooks when paired with a real deck instance or another runtime that can supply equivalent event data.
• Does not make deck-coupled widget adapters useful on its own; controls that fundamentally depend on view-state mutation, redraws, or picking still need those inputs.

Canvas chrome

Pass optional contentElement, an application-created direct child of parentElement, to enable permanent chrome and pinnable panels. The manager arranges this canvas host alongside docked panels inside the outer boundary, preserving the application's positioning of parentElement. Omit it to retain overlay-only behavior; docked chrome stays hidden.

Declarative lifecycle

Supply components in the constructor to mount the initial UI in one expression. Later setProps({components}) calls replace that list. null and undefined entries are ignored, so conditional entries can stay inline. [] removes every declarative component; omitting components leaves the list unchanged. Components added with addDefault are independent of that list.

The manager observes its parent for size changes when ResizeObserver is available. Overlay placement hosts follow the available area automatically; applications do not need an observer just to reposition panels. Canvas chrome also observes its content region. The renderer still needs to follow contentElement size through its own resize support. All manager-owned observers are disconnected by finalize().

Only components is mutable through setProps. Recreate the manager to change its host configuration. See state and updates for a complete reconciliation example.