deck.gl 9.2.0-beta.4 → 9.2.1

package/dist/dist.dev.js

@@ -42819,11 +42819,10 @@ void main() {
       const { viewId = null, placement = DEFAULT_PLACEMENT } = widget;
       widget.widgetManager = this;
       widget.deck = this.deck;
-      widget.rootElement = widget.onCreateRootElement();
+      widget.rootElement = widget._onAdd({ deck: this.deck, viewId });
       if (widget.rootElement) {
         this._getContainer(viewId, placement).append(widget.rootElement);
       }
-      widget.onAdd?.({ deck: this.deck, viewId });
       widget.updateHTML();
     }
     /** Destroy an old widget */
@@ -42905,13 +42904,17 @@ void main() {
 
   // ../core/src/lib/widget.ts
   var Widget = class {
-    constructor(props, defaultProps49) {
+    constructor(props) {
       /**
        * The view id that this widget is being attached to. Default `null`.
        * If assigned, this widget will only respond to events occurred inside the specific view that matches this id.
        */
       this.viewId = null;
-      this.props = { ...defaultProps49, ...props };
+      this.props = {
+        // @ts-expect-error `defaultProps` may not exist on constructor
+        ...this.constructor.defaultProps,
+        ...props
+      };
       this.id = this.props.id;
     }
     /** Called to update widget options */
@@ -42937,12 +42940,11 @@ void main() {
         this.onRenderHTML(this.rootElement);
       }
     }
-    // WIDGET LIFECYCLE
     // @note empty method calls have an overhead in V8 but it is very low, ~1ns
     /**
-     * Called to create the root DOM element for this widget
+     * Common utility to create the root DOM element for this widget
      * Configures the top-level styles and adds basic class names for theming
-     * @returns an optional UI element that should be appended to the Deck container
+     * @returns an UI element that should be appended to the Deck container
      */
     onCreateRootElement() {
       const CLASS_NAMES = [
@@ -42959,7 +42961,13 @@ void main() {
       applyStyles(element, this.props.style);
       return element;
     }
-    /** Called after the widget is added to a Deck instance and the DOM rootElement has been created */
+    /** Internal API called by Deck when the widget is first added to a Deck instance */
+    _onAdd(params) {
+      return this.onAdd(params) ?? this.onCreateRootElement();
+    }
+    /** Overridable by subclass - called when the widget is first added to a Deck instance
+     * @returns an optional UI element that should be appended to the Deck container
+     */
     onAdd(params) {
     }
     /** Called when the widget is removed */
@@ -43006,9 +43014,9 @@ void main() {
     left: "0",
     display: "none"
   };
-  var _TooltipWidget = class extends Widget {
+  var TooltipWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _TooltipWidget.defaultProps);
+      super(props);
       this.id = "default-tooltip";
       this.placement = "fill";
       this.className = "deck-tooltip";
@@ -43069,7 +43077,6 @@ void main() {
       }
     }
   };
-  var TooltipWidget = _TooltipWidget;
   TooltipWidget.defaultProps = {
     ...Widget.defaultProps
   };
@@ -102797,9 +102804,9 @@ void main() {
   };
 
   // ../widgets/src/zoom-widget.tsx
-  var _ZoomWidget = class extends Widget {
+  var ZoomWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _ZoomWidget.defaultProps);
+      super(props);
       this.className = "deck-widget-zoom";
       this.placement = "top-left";
       this.viewports = {};
@@ -102863,7 +102870,6 @@ void main() {
       this.deck._onViewStateChange({ viewId, viewState, interactionState: {} });
     }
   };
-  var ZoomWidget = _ZoomWidget;
   ZoomWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "zoom",
@@ -102891,9 +102897,9 @@ void main() {
   };
 
   // ../widgets/src/reset-view-widget.tsx
-  var _ResetViewWidget = class extends Widget {
+  var ResetViewWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _ResetViewWidget.defaultProps);
+      super(props);
       this.className = "deck-widget-reset-view";
       this.placement = "top-left";
       this.setProps(this.props);
@@ -102931,7 +102937,6 @@ void main() {
       this.deck._onViewStateChange({ viewId, viewState: nextViewState, interactionState: {} });
     }
   };
-  var ResetViewWidget = _ResetViewWidget;
   ResetViewWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "reset-view",
@@ -102942,9 +102947,9 @@ void main() {
   };
 
   // ../widgets/src/gimbal-widget.tsx
-  var _GimbalWidget = class extends Widget {
+  var GimbalWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _GimbalWidget.defaultProps);
+      super(props);
       this.className = "deck-widget-gimbal";
       this.placement = "top-left";
       this.viewports = {};
@@ -103079,7 +103084,6 @@ void main() {
       return viewManager;
     }
   };
-  var GimbalWidget = _GimbalWidget;
   GimbalWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "gimbal",
@@ -103104,9 +103108,9 @@ void main() {
   }
 
   // ../widgets/src/compass-widget.tsx
-  var _CompassWidget = class extends Widget {
+  var CompassWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _CompassWidget.defaultProps);
+      super(props);
       this.className = "deck-widget-compass";
       this.placement = "top-left";
       this.viewports = {};
@@ -103180,7 +103184,6 @@ void main() {
       }
     }
   };
-  var CompassWidget = _CompassWidget;
   CompassWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "compass",
@@ -103191,9 +103194,9 @@ void main() {
   };
 
   // ../widgets/src/scale-widget.tsx
-  var _ScaleWidget = class extends Widget {
+  var ScaleWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _ScaleWidget.defaultProps);
+      super(props);
       this.className = "deck-widget-scale";
       this.placement = "bottom-left";
       // The pixel width of the scale line (computed from a candidate distance)
@@ -103291,7 +103294,6 @@ void main() {
     handleClick() {
     }
   };
-  var ScaleWidget = _ScaleWidget;
   ScaleWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "scale",
@@ -103753,9 +103755,9 @@ void main() {
 
   // ../widgets/src/geocoder-widget.tsx
   var CURRENT_LOCATION2 = "current";
-  var _GeocoderWidget = class extends Widget {
+  var GeocoderWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _GeocoderWidget.defaultProps);
+      super(props);
       this.className = "deck-widget-geocoder";
       this.placement = "top-left";
       this.geocodeHistory = new GeocoderHistory({});
@@ -103871,7 +103873,6 @@ void main() {
       this.viewports[viewport.id] = viewport;
     }
   };
-  var GeocoderWidget = _GeocoderWidget;
   GeocoderWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "geocoder",
@@ -103905,9 +103906,9 @@ void main() {
   }
 
   // ../widgets/src/fullscreen-widget.tsx
-  var _FullscreenWidget = class extends Widget {
+  var FullscreenWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _FullscreenWidget.defaultProps);
+      super(props);
       this.className = "deck-widget-fullscreen";
       this.placement = "top-left";
       this.fullscreen = false;
@@ -103977,7 +103978,6 @@ void main() {
       this.getContainer()?.classList.toggle("deck-pseudo-fullscreen");
     }
   };
-  var FullscreenWidget = _FullscreenWidget;
   FullscreenWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "fullscreen",
@@ -103989,9 +103989,9 @@ void main() {
   };
 
   // ../widgets/src/splitter-widget.tsx
-  var _SplitterWidget = class extends Widget {
+  var SplitterWidget = class extends Widget {
     constructor(props) {
-      super(props, _SplitterWidget.defaultProps);
+      super(props);
       this.className = "deck-widget-splitter";
       this.placement = "fill";
     }
@@ -104020,7 +104020,6 @@ void main() {
       );
     }
   };
-  var SplitterWidget = _SplitterWidget;
   SplitterWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "splitter-widget",
@@ -104153,9 +104152,9 @@ void main() {
   }
 
   // ../widgets/src/view-selector-widget.tsx
-  var _ViewSelectorWidget = class extends Widget {
+  var ViewSelectorWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _ViewSelectorWidget.defaultProps);
+      super(props);
       this.className = "deck-widget-view-selector";
       this.placement = "top-left";
       this.handleSelectMode = (viewMode) => {
@@ -104189,7 +104188,6 @@ void main() {
       );
     }
   };
-  var ViewSelectorWidget = _ViewSelectorWidget;
   ViewSelectorWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "view-selector",
@@ -104274,9 +104272,9 @@ void main() {
   ];
 
   // ../widgets/src/info-widget.tsx
-  var _InfoWidget = class extends Widget {
+  var InfoWidget = class extends Widget {
     constructor(props) {
-      super(props, _InfoWidget.defaultProps);
+      super(props);
       this.className = "deck-widget-info";
       this.placement = "fill";
       this.setProps(this.props);
@@ -104411,7 +104409,6 @@ void main() {
       });
     }
   };
-  var InfoWidget = _InfoWidget;
   InfoWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "info",
@@ -104465,9 +104462,9 @@ void main() {
   // ../widgets/src/context-menu-widget.tsx
   var MOUSE_BUTTON_RIGHT = 2;
   var MOUSE_WHICH_RIGHT = 3;
-  var _ContextMenuWidget = class extends Widget {
+  var ContextMenuWidget = class extends Widget {
     constructor(props) {
-      super(props, _ContextMenuWidget.defaultProps);
+      super(props);
       this.className = "deck-widget-context-menu";
       this.placement = "fill";
       this.pickInfo = null;
@@ -104525,7 +104522,6 @@ void main() {
       this.setProps({ visible: false });
     }
   };
-  var ContextMenuWidget = _ContextMenuWidget;
   ContextMenuWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "context",
@@ -104539,9 +104535,9 @@ void main() {
   };
 
   // ../widgets/src/timeline-widget.tsx
-  var _TimelineWidget = class extends Widget {
+  var TimelineWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _TimelineWidget.defaultProps);
+      super(props);
       this.id = "timeline";
       this.className = "deck-widget-timeline";
       this.placement = "bottom-left";
@@ -104623,7 +104619,6 @@ void main() {
       this.updateHTML();
     }
   };
-  var TimelineWidget = _TimelineWidget;
   TimelineWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "timeline",
@@ -104638,9 +104633,9 @@ void main() {
   };
 
   // ../widgets/src/screenshot-widget.tsx
-  var _ScreenshotWidget = class extends Widget {
+  var ScreenshotWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _ScreenshotWidget.defaultProps);
+      super(props);
       this.className = "deck-widget-screenshot";
       this.placement = "top-left";
       this.setProps(this.props);
@@ -104686,7 +104681,6 @@ void main() {
       link.click();
     }
   };
-  var ScreenshotWidget = _ScreenshotWidget;
   ScreenshotWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "screenshot",
@@ -104765,9 +104759,9 @@ void main() {
   };
 
   // ../widgets/src/theme-widget.tsx
-  var _ThemeWidget = class extends Widget {
+  var ThemeWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _ThemeWidget.defaultProps);
+      super(props);
       this.className = "deck-widget-theme";
       this.placement = "top-left";
       this.themeMode = "dark";
@@ -104833,7 +104827,6 @@ void main() {
       return initialThemeMode === "auto" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : initialThemeMode;
     }
   };
-  var ThemeWidget = _ThemeWidget;
   ThemeWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "theme",
@@ -104847,9 +104840,9 @@ void main() {
   };
 
   // ../widgets/src/loading-widget.tsx
-  var _LoadingWidget = class extends Widget {
+  var LoadingWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _LoadingWidget.defaultProps);
+      super(props);
       this.className = "deck-widget-loading";
       this.placement = "top-left";
       this.loading = true;
@@ -104885,7 +104878,6 @@ void main() {
     handleClick() {
     }
   };
-  var LoadingWidget = _LoadingWidget;
   LoadingWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "loading",
@@ -104895,9 +104887,9 @@ void main() {
   };
 
   // ../widgets/src/fps-widget.tsx
-  var _FpsWidget = class extends Widget {
+  var FpsWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _FpsWidget.defaultProps);
+      super(props);
       this.className = "deck-widget-fps";
       this.placement = "top-left";
       this._lastFps = -1;
@@ -104935,7 +104927,6 @@ void main() {
       return Math.round(this.deck?.metrics.fps ?? 0);
     }
   };
-  var FpsWidget = _FpsWidget;
   FpsWidget.defaultProps = {
     ...Widget.defaultProps,
     id: "fps",
@@ -104962,9 +104953,9 @@ void main() {
     fps: (stat) => `${stat.name}: ${Math.round(stat.getHz())}fps`,
     memory: (stat) => `${stat.name}: ${formatMemory(stat.count)}`
   };
-  var _StatsWidget = class extends Widget {
+  var StatsWidget = class extends Widget {
     constructor(props = {}) {
-      super(props, _StatsWidget.defaultProps);
+      super(props);
       this.className = "deck-widget-stats";
       this.placement = "top-left";
       this._counter = 0;
@@ -105063,7 +105054,6 @@ void main() {
       return formatter(stat).split("\n");
     }
   };
-  var StatsWidget = _StatsWidget;
   StatsWidget.defaultProps = {
     ...Widget.defaultProps,
     type: "deck",