@deck.gl-community/widgets 9.2.5 → 9.3.1-alpha.0

package/dist/widgets/settings-widget.js

@@ -0,0 +1,148 @@
+var _a;
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+/** @jsxImportSource preact */
+import { Widget } from '@deck.gl/core';
+import { render } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { SettingsPanelContent } from "../widget-panels/settings-panel.js";
+import { IconButton, makeTextIcon } from "../widget-components/icon-button.js";
+const PANE_STYLE = {
+    position: 'absolute',
+    top: 'calc(100% + 8px)',
+    left: 0,
+    width: '380px',
+    maxHeight: 'min(460px, calc(100vh - 60px))',
+    borderRadius: '8px',
+    border: '1px solid rgba(71, 85, 105, 0.55)',
+    background: 'rgba(15, 23, 42, 0.94)',
+    color: 'rgba(241, 245, 249, 0.98)',
+    boxShadow: '0 12px 32px rgba(2, 6, 23, 0.55)',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+    pointerEvents: 'auto',
+    zIndex: 20,
+    '--button-background': 'rgba(30, 41, 59, 0.92)',
+    '--button-background-hover': 'rgba(15, 23, 42, 0.9)',
+    '--button-inner-stroke': '1px solid rgba(100, 116, 139, 0.72)',
+    '--button-corner-radius': '8px',
+    '--button-text': 'rgba(241, 245, 249, 0.98)',
+    '--button-icon-idle': 'rgba(203, 213, 225, 0.92)',
+    '--button-icon-hover': 'rgba(125, 211, 252, 0.98)',
+    '--button-backdrop-filter': 'blur(10px)',
+    '--container-background': 'rgba(15, 23, 42, 0.98)',
+    '--menu-item-hover': 'rgba(51, 65, 85, 0.82)'
+};
+const HEADER_STYLE = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderBottom: '1px solid rgba(100, 116, 139, 0.45)',
+    padding: '10px 12px'
+};
+const SETTINGS_BUTTON_ICON = makeTextIcon('⚙', 24, 36);
+function stopPropagation(event) {
+    event.stopPropagation();
+}
+const DEFAULT_SETTINGS_WIDGET_SCHEMA = { sections: [] };
+const DEFAULT_SETTINGS_WIDGET_STATE = {};
+function SettingsWidgetView({ label, schema, settings, onSettingsChange }) {
+    const containerRef = useRef(null);
+    const [isPaneOpen, setIsPaneOpen] = useState(false);
+    useEffect(() => {
+        if (isPaneOpen && typeof document !== 'undefined') {
+            const handleDocumentPointerDown = (event) => {
+                if (!containerRef.current || !event.target) {
+                    return;
+                }
+                if (!containerRef.current.contains(event.target)) {
+                    setIsPaneOpen(false);
+                }
+            };
+            document.addEventListener('pointerdown', handleDocumentPointerDown);
+            return () => {
+                document.removeEventListener('pointerdown', handleDocumentPointerDown);
+            };
+        }
+        return undefined;
+    }, [isPaneOpen]);
+    return (_jsxs("div", { ref: containerRef, style: { position: 'relative', pointerEvents: 'auto' }, children: [_jsx(IconButton, { icon: SETTINGS_BUTTON_ICON, title: label, className: isPaneOpen ? 'deck-widget-button-active' : '', onClick: () => setIsPaneOpen((previous) => !previous) }), isPaneOpen && (_jsxs("div", { role: "dialog", "aria-label": schema.title ?? label, style: PANE_STYLE, onPointerDown: (event) => stopPropagation(event), onMouseDown: (event) => stopPropagation(event), onWheel: (event) => stopPropagation(event), onClick: (event) => stopPropagation(event), children: [_jsxs("div", { style: HEADER_STYLE, children: [_jsx("div", { style: { fontSize: '13px', fontWeight: 700 }, children: schema.title ?? label }), _jsx("button", { type: "button", onClick: () => setIsPaneOpen(false), style: {
+                                    border: 0,
+                                    borderRadius: '4px',
+                                    padding: '2px 6px',
+                                    background: 'rgba(51, 65, 85, 0.8)',
+                                    color: 'inherit',
+                                    cursor: 'pointer',
+                                    fontSize: '14px',
+                                    lineHeight: 1
+                                }, title: "Close settings", "aria-label": "Close settings", children: "\u00D7" })] }), _jsx(SettingsPanelContent, { schema: schema, settings: settings, onSettingsChange: onSettingsChange })] }))] }));
+}
+export class SettingsWidget extends Widget {
+    static defaultProps = {
+        ...Widget.defaultProps,
+        id: 'settings',
+        placement: 'top-left',
+        label: 'Settings',
+        schema: DEFAULT_SETTINGS_WIDGET_SCHEMA,
+        settings: DEFAULT_SETTINGS_WIDGET_STATE,
+        onSettingsChange: undefined
+    };
+    className = 'deck-widget-settings';
+    placement = _a.defaultProps.placement;
+    #label = _a.defaultProps.label;
+    #schema = _a.defaultProps.schema;
+    #settings = _a.defaultProps.settings;
+    #onSettingsChange = _a.defaultProps.onSettingsChange;
+    #rootElement = null;
+    constructor(props = {}) {
+        super({ ..._a.defaultProps, ...props });
+        if (props.placement !== undefined) {
+            this.placement = props.placement;
+        }
+        if (props.label !== undefined) {
+            this.#label = props.label;
+        }
+        if (props.schema !== undefined) {
+            this.#schema = props.schema;
+        }
+        if (props.settings !== undefined) {
+            this.#settings = props.settings;
+        }
+        if (props.onSettingsChange !== undefined) {
+            this.#onSettingsChange = props.onSettingsChange;
+        }
+    }
+    setProps(props) {
+        if (props.placement !== undefined) {
+            this.placement = props.placement;
+        }
+        if (props.label !== undefined) {
+            this.#label = props.label;
+        }
+        if (props.schema !== undefined) {
+            this.#schema = props.schema;
+        }
+        if (props.settings !== undefined) {
+            this.#settings = props.settings;
+        }
+        if (props.onSettingsChange !== undefined) {
+            this.#onSettingsChange = props.onSettingsChange;
+        }
+        super.setProps(props);
+    }
+    onRenderHTML(rootElement) {
+        this.#rootElement = rootElement;
+        const className = ['deck-widget', this.className, this.props.className]
+            .filter(Boolean)
+            .join(' ');
+        rootElement.className = className;
+        render(_jsx(SettingsWidgetView, { label: this.#label, schema: this.#schema, settings: this.#settings, onSettingsChange: this.#onSettingsChange }), rootElement);
+    }
+    onRemove() {
+        if (this.#rootElement) {
+            render(null, this.#rootElement);
+        }
+    }
+}
+_a = SettingsWidget;
+//# sourceMappingURL=settings-widget.js.map

package/dist/widgets/settings-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-widget.js","sourceRoot":"","sources":["../../src/widgets/settings-widget.tsx"],"names":[],"mappings":"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"}

package/dist/widgets/view-manager-utils.d.ts

@@ -6,6 +6,6 @@ export type DeckWithViewManager = Deck & {
         viewState?: any;
     };
 };
-export declare function hasViewManager(deck: Deck | null): deck is DeckWithViewManager;
+export declare function hasViewManager(deck: Deck | null | undefined): deck is DeckWithViewManager;
 export declare function cloneViewState(value: unknown): Record<string, unknown>;
 //# sourceMappingURL=view-manager-utils.d.ts.map

package/dist/widgets/view-manager-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view-manager-utils.d.ts","sourceRoot":"","sources":["../../src/widgets/view-manager-utils.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,eAAe,CAAC;AAElD,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG;IACvC,WAAW,CAAC,EAAE;QACZ,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,QAAQ,GAAG,IAAI,CAAC;QAC7C,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,GAAG,CAAC;QAClC,SAAS,CAAC,EAAE,GAAG,CAAC;KACjB,CAAC;CACH,CAAC;AAEF,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,IAAI,mBAAmB,CAE7E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAKtE"}
+{"version":3,"file":"view-manager-utils.d.ts","sourceRoot":"","sources":["../../src/widgets/view-manager-utils.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,eAAe,CAAC;AAElD,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG;IACvC,WAAW,CAAC,EAAE;QACZ,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,QAAQ,GAAG,IAAI,CAAC;QAC7C,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,GAAG,CAAC;QAClC,SAAS,CAAC,EAAE,GAAG,CAAC;KACjB,CAAC;CACH,CAAC;AAEF,wBAAgB,cAAc,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,IAAI,mBAAmB,CAEzF;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAKtE"}

package/dist/widgets/view-manager-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-manager-utils.js","sourceRoot":"","sources":["../../src/widgets/view-manager-utils.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,+BAA+B;AAC/B,oCAAoC;AAYpC,MAAM,UAAU,cAAc,CAAC,IAAiB;IAC9C,OAAO,OAAO,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,aAAa,IAAI,IAAI,CAAC,CAAC;AAC5E,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAc;IAC3C,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QACvC,OAAO,EAAC,GAAI,KAAiC,EAAC,CAAC;IACjD,CAAC;IACD,OAAO,EAAE,CAAC;AACZ,CAAC"}
+{"version":3,"file":"view-manager-utils.js","sourceRoot":"","sources":["../../src/widgets/view-manager-utils.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,+BAA+B;AAC/B,oCAAoC;AAYpC,MAAM,UAAU,cAAc,CAAC,IAA6B;IAC1D,OAAO,OAAO,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,aAAa,IAAI,IAAI,CAAC,CAAC;AAC5E,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAAc;IAC3C,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QACvC,OAAO,EAAC,GAAI,KAAiC,EAAC,CAAC;IACjD,CAAC;IACD,OAAO,EAAE,CAAC;AACZ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deck.gl-community/widgets",
-  "version": "9.2.5",
+  "version": "9.3.1-alpha.0",
   "description": "UI widgets for deck.gl",
   "license": "MIT",
   "publishConfig": {
@@ -32,10 +32,11 @@
     "test-watch": "vitest"
   },
   "dependencies": {
-    "@deck.gl/core": "~9.2.8",
+    "@deck.gl/core": "~9.3.0",
+    "@probe.gl/stats": "^4.1.1",
     "@turf/helpers": "^6.5.0",
     "preact": "^10.17.0",
     "supercluster": "^8.0.1"
   },
-  "gitHead": "c6b0f45b1e7f9916c1b79a43c39b839a8096c163"
+  "gitHead": "dd572a3491cb15a6ff2f0008e93ae1dc38962b06"
 }

package/src/{widgets → graph-widgets}/long-press-button.tsx

@@ -1,6 +1,7 @@
 // deck.gl-community
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
+/** @jsxImportSource preact */
 
 import {Component, type ComponentChildren} from 'preact';
 

package/src/{widgets → graph-widgets}/pan-widget.tsx

@@ -1,11 +1,12 @@
 // deck.gl-community
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
+/** @jsxImportSource preact */
 
 import {render} from 'preact';
 import type {JSX} from 'preact';
 import {LongPressButton} from './long-press-button';
-import {cloneViewState, hasViewManager} from './view-manager-utils';
+import {cloneViewState, hasViewManager} from '../widgets/view-manager-utils';
 import {
   Widget,
   type Deck,
@@ -14,13 +15,6 @@ import {
   type WidgetProps
 } from '@deck.gl/core';
 
-export type PanWidgetProps = WidgetProps & {
-  viewId?: string | null;
-  placement?: WidgetPlacement;
-  /** Amount in screen pixels to pan by when a button is pressed. */
-  step?: number;
-};
-
 const WRAPPER_STYLE: Partial<CSSStyleDeclaration> = {
   position: 'absolute',
   display: 'flex',
@@ -47,6 +41,13 @@ const NAVIGATION_BUTTON_STYLE: JSX.CSSProperties = {
   pointerEvents: 'auto'
 };
 
+export type PanWidgetProps = WidgetProps & {
+  viewId?: string | null;
+  placement?: WidgetPlacement;
+  /** Amount in screen pixels to pan by when a button is pressed. */
+  step?: number;
+};
+
 export class PanWidget extends Widget<PanWidgetProps> {
   static override defaultProps = {
     id: 'pan',
@@ -60,7 +61,7 @@ export class PanWidget extends Widget<PanWidgetProps> {
 
   placement: WidgetPlacement = 'top-left';
   className = 'deck-widget-pan';
-  deck?: Deck | null = null;
+
   step: number;
 
   constructor(props: PanWidgetProps = {}) {
@@ -91,7 +92,7 @@ export class PanWidget extends Widget<PanWidgetProps> {
   }
 
   override onRemove(): void {
-    this.deck = null;
+    this.deck = undefined;
   }
 
   override onRenderHTML(rootElement: HTMLElement): void {
@@ -142,20 +143,30 @@ export class PanWidget extends Widget<PanWidgetProps> {
     return deck.getViewports();
   }
 
-  private getViewState(viewport: Viewport): any {
+  private getViewportViewState(viewport: Viewport): Record<string, unknown> {
     const deck = this.deck;
-    const viewManager = hasViewManager(deck) ? deck.viewManager : null;
-    const viewId = this.viewId || viewport.id;
-    if (viewManager) {
+    if (deck && hasViewManager(deck)) {
+      const viewId = this.viewId || viewport.id;
       try {
-        return {...viewManager.getViewState(viewId)};
-      } catch (err) {
-        return cloneViewState(viewManager.viewState);
+        return cloneViewState(deck.viewManager?.getViewState(viewId));
+      } catch {
+        return cloneViewState(deck.viewManager?.viewState);
       }
     }
+
     return cloneViewState(viewport);
   }
 
+  private updateViewState(viewport: Viewport, nextViewState: Record<string, unknown>): void {
+    if (!this.deck) {
+      return;
+    }
+
+    const viewId = this.viewId || viewport.id || 'default-view';
+    // @ts-expect-error Using private method until a public alternative is available
+    this.deck._onViewStateChange({viewId, viewState: nextViewState, interactionState: {}});
+  }
+
   private handlePan(deltaX: number, deltaY: number) {
     if (!this.deck) {
       return;
@@ -170,13 +181,9 @@ export class PanWidget extends Widget<PanWidgetProps> {
           viewport.height / 2 + deltaY
         ];
 
-        const viewState = this.getViewState(viewport);
+        const viewState = this.getViewportViewState(viewport);
         const panUpdate = viewport.panByPosition(center, nextPixel);
-        const nextViewState = {...viewState, ...panUpdate};
-        const viewId = this.viewId || viewport.id || 'default-view';
-
-        // @ts-ignore Using private method until a public alternative is available
-        this.deck._onViewStateChange({viewId, viewState: nextViewState, interactionState: {}});
+        this.updateViewState(viewport, {...viewState, ...panUpdate});
       }
     }
   }

package/src/{widgets → graph-widgets}/zoom-range-widget.tsx

@@ -1,11 +1,12 @@
 // deck.gl-community
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
+/** @jsxImportSource preact */
 
 import {render} from 'preact';
 import type {JSX} from 'preact';
 import {LongPressButton} from './long-press-button';
-import {cloneViewState, hasViewManager} from './view-manager-utils';
+import {cloneViewState, hasViewManager} from '../widgets/view-manager-utils';
 import {
   Widget,
   type Deck,
@@ -14,14 +15,6 @@ import {
   type WidgetProps
 } from '@deck.gl/core';
 
-export type ZoomRangeWidgetProps = WidgetProps & {
-  viewId?: string | null;
-  placement?: WidgetPlacement;
-  minZoom?: number;
-  maxZoom?: number;
-  step?: number;
-};
-
 const WRAPPER_STYLE: Partial<CSSStyleDeclaration> = {
   position: 'absolute',
   display: 'flex',
@@ -58,6 +51,14 @@ const VERTICAL_SLIDER_STYLE: JSX.CSSProperties = {
   width: '10px'
 };
 
+export type ZoomRangeWidgetProps = WidgetProps & {
+  viewId?: string | null;
+  placement?: WidgetPlacement;
+  minZoom?: number;
+  maxZoom?: number;
+  step?: number;
+};
+
 export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
   static override defaultProps = {
     id: 'zoom-range',
@@ -75,7 +76,7 @@ export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
 
   placement: WidgetPlacement = 'top-left';
   className = 'deck-widget-zoom-range';
-  deck?: Deck | null = null;
+
   step: number;
   currentZoom = 0;
   inferredMinZoom: number | null = null;
@@ -109,7 +110,7 @@ export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
   }
 
   override onRemove(): void {
-    this.deck = null;
+    this.deck = undefined;
   }
 
   override onRenderHTML(rootElement: HTMLElement): void {
@@ -181,7 +182,7 @@ export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
   }
 
   override onViewportChange(viewport: Viewport): void {
-    const viewState = this.getViewState(viewport);
+    const viewState = this.getViewportViewState(viewport);
     const zoom = Number(viewState?.zoom);
     if (Number.isFinite(zoom)) {
       this.currentZoom = zoom;
@@ -232,28 +233,40 @@ export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
     return deck.getViewports();
   }
 
-  private getViewState(viewport: Viewport): any {
+  private getViewportViewState(viewport: Viewport): Record<string, unknown> {
     const deck = this.deck;
-    const viewManager = hasViewManager(deck) ? deck.viewManager : null;
-    const viewId = this.viewId || viewport.id;
-    if (viewManager) {
+    if (deck && hasViewManager(deck)) {
+      const viewId = this.viewId || viewport.id;
       try {
-        return {...viewManager.getViewState(viewId)};
-      } catch (err) {
-        return cloneViewState(viewManager.viewState);
+        return cloneViewState(deck.viewManager?.getViewState(viewId));
+      } catch {
+        return cloneViewState(deck.viewManager?.viewState);
       }
     }
+
     return cloneViewState(viewport);
   }
 
+  private updateViewState(viewport: Viewport, nextViewState: Record<string, unknown>): void {
+    if (!this.deck) {
+      return;
+    }
+
+    const viewId = this.viewId || viewport.id || 'default-view';
+    // @ts-expect-error Using private method until a public alternative is available
+    this.deck._onViewStateChange({viewId, viewState: nextViewState, interactionState: {}});
+  }
+
   private handleZoomDelta(delta: number) {
     const {minZoom, maxZoom} = this.getZoomBounds();
 
     for (const viewport of this.getTargetViewports()) {
-      const viewState = this.getViewState(viewport);
+      const viewState = this.getViewportViewState(viewport);
       const baseZoom = Number(viewState.zoom);
       const current = Number.isFinite(baseZoom) ? baseZoom : this.currentZoom;
       const nextZoom = Math.max(minZoom, Math.min(maxZoom, current + delta));
+      this.currentZoom = nextZoom;
+      this.updateHTML();
       this.updateViewState(viewport, {...viewState, zoom: nextZoom});
     }
   }
@@ -263,21 +276,10 @@ export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
     const nextZoom = Math.max(minZoom, Math.min(maxZoom, zoom));
 
     for (const viewport of this.getTargetViewports()) {
-      const viewState = this.getViewState(viewport);
+      const viewState = this.getViewportViewState(viewport);
+      this.currentZoom = nextZoom;
+      this.updateHTML();
       this.updateViewState(viewport, {...viewState, zoom: nextZoom});
     }
   }
-
-  private updateViewState(viewport: Viewport, viewState: any) {
-    if (!this.deck) {
-      return;
-    }
-
-    const viewId = this.viewId || viewport.id || 'default-view';
-    this.currentZoom = Number(viewState.zoom) || this.currentZoom;
-    this.updateHTML();
-
-    // @ts-ignore Using private method until a public alternative is available
-    this.deck._onViewStateChange({viewId, viewState, interactionState: {}});
-  }
 }

package/src/{widgets → html-overlay-widgets}/html-overlay-item.tsx

@@ -1,6 +1,7 @@
 // deck.gl-community
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
+/** @jsxImportSource preact */
 
 import type {ComponentChildren, JSX} from 'preact';
 

package/src/{widgets → html-overlay-widgets}/html-overlay-widget.tsx

@@ -1,6 +1,7 @@
 // deck.gl-community
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
+/** @jsxImportSource preact */
 
 import {
   cloneElement,
@@ -8,7 +9,8 @@ import {
   toChildArray,
   Fragment,
   type ComponentChildren,
-  type VNode
+  type VNode,
+  type JSX
 } from 'preact';
 import type {Deck, Viewport, WidgetPlacement, WidgetProps} from '@deck.gl/core';
 import {Widget} from '@deck.gl/core';
@@ -22,6 +24,14 @@ export type HtmlOverlayWidgetProps = WidgetProps & {
   zIndex?: number;
   /** Items to render; defaults to the supplied children. */
   items?: ComponentChildren;
+  /** Create an overlay root for custom rendering. */
+  onCreateOverlay?: (container: HTMLElement) => unknown;
+  /** Render into a previously created overlay root. */
+  onRenderOverlay?: (
+    overlayRoot: unknown,
+    element: JSX.Element | null,
+    container: HTMLElement
+  ) => void;
 };
 
 const ROOT_STYLE: Partial<CSSStyleDeclaration> = {
@@ -49,8 +59,9 @@ export class HtmlOverlayWidget<
 
   placement: WidgetPlacement = 'fill';
   className = 'deck-widget-html-overlay';
-  deck?: Deck | null = null;
   protected viewport: Viewport | null = null;
+  protected overlayRoot: unknown = null;
+  protected overlayRootInitialized = false;
 
   constructor(props: PropsT = {} as PropsT) {
     super({...HtmlOverlayWidget.defaultProps, ...props});
@@ -72,8 +83,10 @@ export class HtmlOverlayWidget<
   }
 
   override onRemove(): void {
-    this.deck = null;
+    this.deck = undefined;
     this.viewport = null;
+    this.overlayRoot = null;
+    this.overlayRootInitialized = false;
   }
 
   override onViewportChange(viewport: Viewport): void {
@@ -142,14 +155,24 @@ export class HtmlOverlayWidget<
     Object.assign(rootElement.style, ROOT_STYLE, {zIndex: `${this.props.zIndex ?? 1}`});
 
     const viewport = this.getViewport();
-    if (!viewport) {
-      render(null, rootElement);
+    const element = viewport
+      ? (() => {
+          const overlayItems = this.getOverlayItems(viewport);
+          const renderedItems = this.projectItems(overlayItems, viewport);
+          return <Fragment>{renderedItems}</Fragment>;
+        })()
+      : null;
+
+    const {onRenderOverlay, onCreateOverlay} = this.props;
+    if (onRenderOverlay) {
+      if (!this.overlayRootInitialized) {
+        this.overlayRoot = onCreateOverlay?.(rootElement) ?? null;
+        this.overlayRootInitialized = true;
+      }
+      onRenderOverlay(this.overlayRoot, element, rootElement);
       return;
     }
 
-    const overlayItems = this.getOverlayItems(viewport);
-    const renderedItems = this.projectItems(overlayItems, viewport);
-
-    render(<Fragment>{renderedItems}</Fragment>, rootElement);
+    render(element, rootElement);
   }
 }

package/src/{widgets → html-overlay-widgets}/html-tooltip-widget.tsx

@@ -1,6 +1,7 @@
 // deck.gl-community
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
+/** @jsxImportSource preact */
 
 import type {ComponentChildren, VNode} from 'preact';
 import type {PickingInfo, WidgetProps, Viewport} from '@deck.gl/core';