@deck.gl/widgets 9.1.11 → 9.2.0-alpha.1

package/dist/screenshot-widget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screenshot-widget.d.ts","sourceRoot":"","sources":["../src/screenshot-widget.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,yBAAsB;AAG1D,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAEnD,0CAA0C;AAC1C,MAAM,MAAM,qBAAqB,GAAG,eAAe,GAAG;IACpD,8DAA8D;IAC9D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,WAAW,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IACzC,4DAA4D;IAC5D,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF;;;GAGG;AACH,qBAAa,gBAAiB,SAAQ,UAAU,CAAC,qBAAqB,CAAC;IACrE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAQlD;IAEF,SAAS,SAA4B;IACrC,SAAS,EAAE,eAAe,CAAc;gBAE5B,KAAK,GAAE,qBAA0B;IAK7C,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,qBAAqB,CAAC;IAK9C,YAAY;IAaZ,WAAW;IAYX,sEAAsE;IACtE,sBAAsB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAK/D,0BAA0B;IAC1B,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;CAMzD"}
+{"version":3,"file":"screenshot-widget.d.ts","sourceRoot":"","sources":["../src/screenshot-widget.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAC,MAAM,EAAE,WAAW,EAAC,MAAM,eAAe,CAAC;AAGlD,0CAA0C;AAC1C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG;IAChD,8DAA8D;IAC9D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,WAAW,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IACzC,4DAA4D;IAC5D,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF;;;GAGG;AACH,qBAAa,gBAAiB,SAAQ,MAAM,CAAC,qBAAqB,CAAC;IACjE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAQlD;IAEF,SAAS,SAA4B;IACrC,SAAS,EAAE,eAAe,CAAc;gBAE5B,KAAK,GAAE,qBAA0B;IAK7C,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,qBAAqB,CAAC;IAK9C,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IAW5C,WAAW;IAYX,sEAAsE;IACtE,sBAAsB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAK/D,0BAA0B;IAC1B,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;CAMzD"}

package/dist/screenshot-widget.js

@@ -1,18 +1,14 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
-// deck.gl
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-/* global document */
-import { WidgetImpl } from "./widget-impl.js";
 import { render } from 'preact';
-import { IconButton } from "./components.js";
+import { Widget } from '@deck.gl/core';
+import { IconButton } from "./lib/components/icon-button.js";
 /**
  * A button widget that captures a screenshot of the current canvas and downloads it as a (png) file.
  * @note only captures canvas contents, not HTML DOM or CSS styles
  */
-export class ScreenshotWidget extends WidgetImpl {
+export class ScreenshotWidget extends Widget {
     constructor(props = {}) {
-        super({ ...ScreenshotWidget.defaultProps, ...props });
+        super(props, ScreenshotWidget.defaultProps);
         this.className = 'deck-widget-screenshot';
         this.placement = 'top-left';
         this.placement = props.placement ?? this.placement;
@@ -21,11 +17,8 @@ export class ScreenshotWidget extends WidgetImpl {
         this.placement = props.placement ?? this.placement;
         super.setProps(props);
     }
-    onRenderHTML() {
-        const element = this.element;
-        if (!element)
-            return;
-        render(_jsx(IconButton, { className: "deck-widget-camera", label: this.props.label, onClick: this.handleClick.bind(this) }), element);
+    onRenderHTML(rootElement) {
+        render(_jsx(IconButton, { className: "deck-widget-camera", label: this.props.label, onClick: this.handleClick.bind(this) }), rootElement);
     }
     handleClick() {
         // Allow user to override the capture logic
@@ -52,7 +45,7 @@ export class ScreenshotWidget extends WidgetImpl {
     }
 }
 ScreenshotWidget.defaultProps = {
-    ...WidgetImpl.defaultProps,
+    ...Widget.defaultProps,
     id: 'screenshot',
     placement: 'top-left',
     label: 'Screenshot',

package/dist/screenshot-widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"screenshot-widget.js","sourceRoot":"","sources":["../src/screenshot-widget.tsx"],"names":[],"mappings":";AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAEpC,qBAAqB;AACrB,OAAO,EAAC,UAAU,EAAkB,yBAAsB;AAC1D,OAAO,EAAI,MAAM,EAAC,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAC,UAAU,EAAC,wBAAqB;AAiBxC;;;GAGG;AACH,MAAM,OAAO,gBAAiB,SAAQ,UAAiC;IAcrE,YAAY,QAA+B,EAAE;QAC3C,KAAK,CAAC,EAAC,GAAG,gBAAgB,CAAC,YAAY,EAAE,GAAG,KAAK,EAAC,CAAC,CAAC;QAJtD,cAAS,GAAG,wBAAwB,CAAC;QACrC,cAAS,GAAoB,UAAU,CAAC;QAItC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;IACrD,CAAC;IAED,QAAQ,CAAC,KAAqC;QAC5C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;QACnD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAED,YAAY;QACV,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,MAAM,CACJ,KAAC,UAAU,IACT,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC,EACF,OAAO,CACR,CAAC;IACJ,CAAC;IAED,WAAW;QACT,2CAA2C;QAC3C,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;YACzB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YAC3B,OAAO;QACT,CAAC;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACpE,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IAED,sEAAsE;IACtE,sBAAsB,CAAC,WAAmB;QACxC,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,CAAC;QACtC,OAAO,MAAM,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,CAAC;IAED,0BAA0B;IAC1B,eAAe,CAAC,OAAe,EAAE,QAAgB;QAC/C,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACzC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;QACpB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;;AA5DM,6BAAY,GAAoC;IACrD,GAAG,UAAU,CAAC,YAAY;IAC1B,EAAE,EAAE,YAAY;IAChB,SAAS,EAAE,UAAU;IACrB,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,gBAAgB;IAC1B,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAU;CACtB,AARkB,CAQjB"}
+{"version":3,"file":"screenshot-widget.js","sourceRoot":"","sources":["../src/screenshot-widget.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,MAAM,EAAC,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAC,MAAM,EAAc,MAAM,eAAe,CAAC;AAClD,OAAO,EAAC,UAAU,EAAC,wCAAqC;AAgBxD;;;GAGG;AACH,MAAM,OAAO,gBAAiB,SAAQ,MAA6B;IAcjE,YAAY,QAA+B,EAAE;QAC3C,KAAK,CAAC,KAAK,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;QAJ9C,cAAS,GAAG,wBAAwB,CAAC;QACrC,cAAS,GAAoB,UAAU,CAAC;QAItC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;IACrD,CAAC;IAED,QAAQ,CAAC,KAAqC;QAC5C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;QACnD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAED,YAAY,CAAC,WAAwB;QACnC,MAAM,CACJ,KAAC,UAAU,IACT,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC,EACF,WAAW,CACZ,CAAC;IACJ,CAAC;IAED,WAAW;QACT,2CAA2C;QAC3C,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;YACzB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YAC3B,OAAO;QACT,CAAC;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACpE,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IAED,sEAAsE;IACtE,sBAAsB,CAAC,WAAmB;QACxC,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,CAAC;QACtC,OAAO,MAAM,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,CAAC;IAED,0BAA0B;IAC1B,eAAe,CAAC,OAAe,EAAE,QAAgB;QAC/C,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACzC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;QACpB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;;AA1DM,6BAAY,GAAoC;IACrD,GAAG,MAAM,CAAC,YAAY;IACtB,EAAE,EAAE,YAAY;IAChB,SAAS,EAAE,UAAU;IACrB,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,gBAAgB;IAC1B,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAU;CACtB,AARkB,CAQjB"}

package/dist/splitter-widget.d.ts

@@ -0,0 +1,32 @@
+import { Widget, WidgetProps } from '@deck.gl/core';
+/** Properties for the SplitterWidget */
+export type SplitterWidgetProps = WidgetProps & {
+    /** The view id for the first (resizable) view */
+    viewId1: string;
+    /** The view id for the second view */
+    viewId2: string;
+    /** Orientation of the splitter: vertical (default) or horizontal */
+    orientation?: 'vertical' | 'horizontal';
+    /** The initial split percentage (0 to 1) for the first view, default 0.5 */
+    initialSplit?: number;
+    /** Callback invoked when the splitter is dragged with the new split value */
+    onChange?: (newSplit: number) => void;
+    /** Callback invoked when dragging starts */
+    onDragStart?: () => void;
+    /** Callback invoked when dragging ends */
+    onDragEnd?: () => void;
+};
+/**
+ * A draggable splitter widget that appears as a vertical or horizontal line
+ * across the deck.gl canvas. It positions itself based on the split percentage
+ * of the first view and provides callbacks when dragged.
+ */
+export declare class SplitterWidget extends Widget<SplitterWidgetProps> {
+    static defaultProps: Required<SplitterWidgetProps>;
+    className: string;
+    placement: "fill";
+    constructor(props: SplitterWidgetProps);
+    setProps(props: Partial<SplitterWidgetProps>): void;
+    onRenderHTML(rootElement: HTMLElement): void;
+}
+//# sourceMappingURL=splitter-widget.d.ts.map

package/dist/splitter-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitter-widget.d.ts","sourceRoot":"","sources":["../src/splitter-widget.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAC,MAAM,EAAE,WAAW,EAAC,MAAM,eAAe,CAAC;AAElD,wCAAwC;AACxC,MAAM,MAAM,mBAAmB,GAAG,WAAW,GAAG;IAC9C,iDAAiD;IACjD,OAAO,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;;GAIG;AACH,qBAAa,cAAe,SAAQ,MAAM,CAAC,mBAAmB,CAAC;IAC7D,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAUhD;IAEF,SAAS,SAA0B;IACnC,SAAS,SAAmB;gBAEhB,KAAK,EAAE,mBAAmB;IAKtC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC;IAI5C,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;CAqB7C"}

package/dist/splitter-widget.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+// SplitterWidget.tsx
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { render } from 'preact';
+import { useState, useRef } from 'preact/hooks';
+import { Widget } from '@deck.gl/core';
+/**
+ * A draggable splitter widget that appears as a vertical or horizontal line
+ * across the deck.gl canvas. It positions itself based on the split percentage
+ * of the first view and provides callbacks when dragged.
+ */
+export class SplitterWidget extends Widget {
+    constructor(props) {
+        // No placement prop is used.
+        super(props, SplitterWidget.defaultProps);
+        this.className = 'deck-widget-splitter';
+        this.placement = 'fill';
+    }
+    setProps(props) {
+        super.setProps(props);
+    }
+    onRenderHTML(rootElement) {
+        // Ensure the widget container fills the deck.gl canvas.
+        // TODO - Move styling to CSS
+        rootElement.style.position = 'absolute';
+        rootElement.style.top = '0';
+        rootElement.style.left = '0';
+        rootElement.style.width = '100%';
+        rootElement.style.height = '100%';
+        rootElement.style.margin = '0px';
+        render(_jsx(Splitter, { orientation: this.props.orientation, initialSplit: this.props.initialSplit, onChange: this.props.onChange, onDragStart: this.props.onDragStart, onDragEnd: this.props.onDragEnd }), rootElement);
+    }
+}
+SplitterWidget.defaultProps = {
+    ...Widget.defaultProps,
+    id: 'splitter-widget',
+    viewId1: '',
+    viewId2: '',
+    orientation: 'vertical',
+    initialSplit: 0.5,
+    onChange: () => { },
+    onDragStart: () => { },
+    onDragEnd: () => { }
+};
+/**
+ * A functional component that renders a draggable splitter line.
+ * It computes its position based on the provided split percentage and
+ * updates it during mouse drag events.
+ */
+function Splitter({ orientation, initialSplit, onChange, onDragStart, onDragEnd }) {
+    const [split, setSplit] = useState(initialSplit);
+    const dragging = useRef(false);
+    const containerRef = useRef(null);
+    const handleDragStart = (event) => {
+        dragging.current = true;
+        onDragStart?.();
+        document.addEventListener('mousemove', handleDragging);
+        document.addEventListener('mouseup', handleDragEnd);
+        event.preventDefault();
+    };
+    const handleDragging = (event) => {
+        if (!dragging.current || !containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        let newSplit;
+        if (orientation === 'vertical') {
+            newSplit = (event.clientX - rect.left) / rect.width;
+        }
+        else {
+            newSplit = (event.clientY - rect.top) / rect.height;
+        }
+        // Clamp newSplit between 5% and 95%
+        newSplit = Math.min(Math.max(newSplit, 0.05), 0.95);
+        setSplit(newSplit);
+        onChange?.(newSplit);
+    };
+    const handleDragEnd = (event) => {
+        if (!dragging.current)
+            return;
+        dragging.current = false;
+        onDragEnd?.();
+        document.removeEventListener('mousemove', handleDragging);
+        document.removeEventListener('mouseup', handleDragEnd);
+    };
+    // The splitter line style based on orientation and the current split percentage.
+    const splitterStyle = orientation === 'vertical'
+        ? {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: `${split * 100}%`,
+            width: '4px',
+            cursor: 'col-resize',
+            background: '#ccc',
+            zIndex: 10,
+            pointerEvents: 'auto',
+            boxShadow: 'inset -1px 0 0 white, inset 1px 0 0 white'
+        }
+        : {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: `${split * 100}%`,
+            height: '4px',
+            cursor: 'row-resize',
+            background: '#ccc',
+            zIndex: 10,
+            pointerEvents: 'auto',
+            boxShadow: 'inset -1px 0 0 white, inset 1px 0 0 white'
+        };
+    // Container style to fill the entire deck.gl canvas.
+    const containerStyle = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+    };
+    return (_jsx("div", { ref: containerRef, style: containerStyle, children: _jsx("div", { style: splitterStyle, onMouseDown: handleDragStart }) }));
+}
+//# sourceMappingURL=splitter-widget.js.map

package/dist/splitter-widget.js.map

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

package/dist/stats-widget.d.ts

@@ -0,0 +1,36 @@
+import { Widget, WidgetPlacement, WidgetProps } from '@deck.gl/core';
+import type { Stats, Stat } from '@probe.gl/stats';
+export declare const DEFAULT_FORMATTERS: Record<string, (stat: Stat) => string>;
+export type StatsWidgetProps = WidgetProps & {
+    type?: 'deck' | 'luma' | 'device' | 'custom';
+    /** Stats object to visualize. */
+    stats?: Stats;
+    /** Title shown in the header of the pop-up. Defaults to stats.id. */
+    title?: string;
+    /** How many redraws to wait between updates. */
+    framesPerUpdate?: number;
+    /** Custom formatters for stat values. */
+    formatters?: Record<string, string | ((stat: Stat) => string)>;
+    /** Whether to reset particular stats after each update. */
+    resetOnUpdate?: Record<string, boolean>;
+};
+/** Displays probe.gl stats in a floating pop-up. */
+export declare class StatsWidget extends Widget<StatsWidgetProps> {
+    static defaultProps: Required<StatsWidgetProps>;
+    className: string;
+    placement: WidgetPlacement;
+    private _counter;
+    private _formatters;
+    private _resetOnUpdate;
+    collapsed: boolean;
+    _stats: Stats;
+    constructor(props?: StatsWidgetProps);
+    setProps(props: Partial<StatsWidgetProps>): void;
+    onAdd(): void;
+    onRenderHTML(rootElement: HTMLElement): void;
+    onRedraw(): void;
+    protected _getStats(): Stats;
+    protected _toggleCollapsed: () => void;
+    protected _getLines(stat: Stat): string[];
+}
+//# sourceMappingURL=stats-widget.d.ts.map

package/dist/stats-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stats-widget.d.ts","sourceRoot":"","sources":["../src/stats-widget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,eAAe,EAAE,WAAW,EAAC,MAAM,eAAe,CAAC;AAGnE,OAAO,KAAK,EAAC,KAAK,EAAE,IAAI,EAAC,MAAM,iBAAiB,CAAC;AAgBjD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAMrE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,iCAAiC;IACjC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC;IAC/D,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC,CAAC;AAEF,oDAAoD;AACpD,qBAAa,WAAY,SAAQ,MAAM,CAAC,gBAAgB,CAAC;IACvD,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAS7C;IAEF,SAAS,SAAuB;IAChC,SAAS,EAAiB,eAAe,CAAC;IAE1C,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,WAAW,CAAyC;IAC5D,OAAO,CAAC,cAAc,CAA0B;IAChD,SAAS,EAAE,OAAO,CAAQ;IAC1B,MAAM,EAAE,KAAK,CAAC;gBAEF,KAAK,GAAE,gBAAqB;IAQxC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI;IAehD,KAAK,IAAI,IAAI;IAKb,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IAqC5C,QAAQ,IAAI,IAAI;IAQhB,SAAS,CAAC,SAAS,IAAI,KAAK;IAmB5B,SAAS,CAAC,gBAAgB,QAAO,IAAI,CAGnC;IAEF,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE;CAK1C"}

package/dist/stats-widget.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { Widget } from '@deck.gl/core';
+import { luma } from '@luma.gl/core';
+import { render } from 'preact';
+const RIGHT_ARROW = '\u25b6';
+const DOWN_ARROW = '\u2b07';
+const DEFAULT_COUNT_FORMATTER = (stat) => `${stat.name}: ${stat.count}`;
+function formatTime(time) {
+    return time < 1000 ? `${time.toFixed(2)}ms` : `${(time / 1000).toFixed(2)}s`;
+}
+function formatMemory(bytes) {
+    const mb = bytes / 1e6;
+    return `${mb.toFixed(1)} MB`;
+}
+export const DEFAULT_FORMATTERS = {
+    count: DEFAULT_COUNT_FORMATTER,
+    averageTime: (stat) => `${stat.name}: ${formatTime(stat.getAverageTime())}`,
+    totalTime: (stat) => `${stat.name}: ${formatTime(stat.time)}`,
+    fps: (stat) => `${stat.name}: ${Math.round(stat.getHz())}fps`,
+    memory: (stat) => `${stat.name}: ${formatMemory(stat.count)}`
+};
+/** Displays probe.gl stats in a floating pop-up. */
+export class StatsWidget extends Widget {
+    constructor(props = {}) {
+        super(props, StatsWidget.defaultProps);
+        this.className = 'deck-widget-stats';
+        this.placement = 'top-left';
+        this._counter = 0;
+        this.collapsed = true;
+        this._toggleCollapsed = () => {
+            this.collapsed = !this.collapsed;
+            this.updateHTML();
+        };
+        this._formatters = { ...DEFAULT_FORMATTERS };
+        this.setProps(props);
+        this._resetOnUpdate = { ...this.props.resetOnUpdate };
+        this._stats = this.props.stats;
+    }
+    setProps(props) {
+        super.setProps(props);
+        this._stats = this._getStats();
+        if (props.formatters) {
+            for (const name in props.formatters) {
+                const f = props.formatters[name];
+                this._formatters[name] =
+                    typeof f === 'string' ? DEFAULT_FORMATTERS[f] || DEFAULT_COUNT_FORMATTER : f;
+            }
+        }
+        if (props.resetOnUpdate) {
+            this._resetOnUpdate = { ...props.resetOnUpdate };
+        }
+    }
+    onAdd() {
+        this._stats = this._getStats();
+        this.updateHTML();
+    }
+    onRenderHTML(rootElement) {
+        const stats = this._stats;
+        const collapsed = this.collapsed;
+        const title = this.props.title || stats?.id || 'Stats';
+        const items = [];
+        if (!collapsed && stats) {
+            stats.forEach(stat => {
+                const lines = this._getLines(stat);
+                if (this._resetOnUpdate && this._resetOnUpdate[stat.name]) {
+                    stat.reset();
+                }
+                lines.forEach((line, i) => {
+                    items.push(_jsx("div", { style: { whiteSpace: 'pre' }, children: line }, `${stat.name}-${i}`));
+                });
+            });
+        }
+        render(_jsxs("div", { className: "deck-widget-stats-container", style: { cursor: 'default' }, children: [_jsxs("div", { className: "deck-widget-stats-header", style: { cursor: 'pointer', pointerEvents: 'auto' }, onClick: this._toggleCollapsed, children: [collapsed ? RIGHT_ARROW : DOWN_ARROW, " ", title] }), !collapsed && _jsx("div", { className: "deck-widget-stats-content deck-widget-common", children: items })] }), rootElement);
+    }
+    onRedraw() {
+        const framesPerUpdate = Math.max(1, this.props.framesPerUpdate || 1);
+        if (this._counter++ % framesPerUpdate === 0) {
+            console.log('Redrawing stats widget');
+            this.updateHTML();
+        }
+    }
+    _getStats() {
+        switch (this.props.type) {
+            case 'deck':
+                // @ts-expect-error stats is protected
+                return this.deck?.stats;
+            case 'luma':
+                return Array.from(luma.stats.stats.values())[0];
+            case 'device':
+                // @ts-expect-error is protected
+                const device = this.deck?.device;
+                const stats = device?.statsManager.stats.values();
+                return stats ? Array.from(stats)[0] : undefined;
+            case 'custom':
+                return this.props.stats;
+            default:
+                throw new Error(`Unknown stats type: ${this.props.type}`);
+        }
+    }
+    _getLines(stat) {
+        const formatter = this._formatters[stat.name] || this._formatters[stat.type || ''] || DEFAULT_COUNT_FORMATTER;
+        return formatter(stat).split('\n');
+    }
+}
+StatsWidget.defaultProps = {
+    ...Widget.defaultProps,
+    type: 'deck',
+    stats: undefined,
+    title: 'Stats',
+    framesPerUpdate: 1,
+    formatters: {},
+    resetOnUpdate: {},
+    id: 'stats'
+};
+//# sourceMappingURL=stats-widget.js.map

package/dist/stats-widget.js.map

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

package/dist/stylesheet.css

@@ -35,7 +35,7 @@
   flex-direction: column;
 }
 
-/* Common button styles */
+/* Common button background styles */
 .deck-widget-button-group button,
 .deck-widget-button button {
   width: calc(var(--button-size, 28px) - 2px);
@@ -79,7 +79,7 @@
   border-bottom-left-radius: 0;
 }
 
-/* Icon button styles */
+/* Icon button foreground styles */
 .deck-widget button .deck-widget-icon {
   background-color: var(--button-icon-idle, #616166);
   background-position: 50%;
@@ -116,6 +116,16 @@
   );
 }
 
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.deck-widget.deck-widget-loading button.deck-widget-spinner-icon .deck-widget-icon {
+  animation: spin 1s linear infinite;
+}
+
 .deck-pseudo-fullscreen {
   height: 100% !important;
   left: 0 !important;
@@ -152,10 +162,117 @@
 .deck-widget.deck-widget-screenshot button.deck-widget-camera .deck-widget-icon {
   mask-image: var(
     --icon-camera,
-    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l74-80h240l74 80h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Zm0-80h640v-480H638l-73-80H395l-73 80H160v480Zm320-240Z"/></svg>')
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -960 960 960" fill="black"><path d="M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l74-80h240l74 80h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Zm0-80h640v-480H638l-73-80H395l-73 80H160v480Zm320-240Z"/></svg>')
   );
   -webkit-mask-image: var(
     --icon-camera,
-    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l74-80h240l74 80h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Zm0-80h640v-480H638l-73-80H395l-73 80H160v480Zm320-240Z"/></svg>')
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -960 960 960" fill="black"><path d="M480-260q75 0 127.5-52.5T660-440q0-75-52.5-127.5T480-620q-75 0-127.5 52.5T300-440q0 75 52.5 127.5T480-260Zm0-80q-42 0-71-29t-29-71q0-42 29-71t71-29q42 0 71 29t29 71q0 42-29 71t-71 29ZM160-120q-33 0-56.5-23.5T80-200v-480q0-33 23.5-56.5T160-760h126l74-80h240l74 80h126q33 0 56.5 23.5T880-680v480q0 33-23.5 56.5T800-120H160Zm0-80h640v-480H638l-73-80H395l-73 80H160v480Zm320-240Z"/></svg>')
+  );
+}
+
+/* Theme widget styles */
+.deck-widget.deck-widget-theme button.deck-widget-sun .deck-widget-icon {
+  mask-image: var(
+    --icon-sun,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="black" stroke="black"><g ><circle cx="12" cy="12" r="6" /><line x1="12" y1="1" x2="12" y2="3" /><line x1="12" y1="21" x2="12" y2="23" /><line x1="4.22" y1="4.22" x2="5.64" y2="5.64" /><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" /><line x1="1" y1="12" x2="3" y2="12" /><line x1="21" y1="12" x2="23" y2="12" /><line x1="4.22" y1="19.78" x2="5.64" y2="18.36" /><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" /></g></svg>')
   );
 }
+
+.deck-widget.deck-widget-theme button.deck-widget-moon .deck-widget-icon {
+  mask-image: var(
+    --icon-moon,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" ><circle cx="12" cy="12" r="6" fill="black" mask="url(%23moon-mask)" /><mask id="moon-mask" viewBox="0 0 24 24" ><rect x="0" y="0" width="24" height="24" fill="white" /><circle cx="24" cy="10" r="12" fill="black"/></mask></svg>')
+  );
+  -webbit-mask-image: var(
+    --icon-moon,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"><circle x="12" cy="12" r="6" /></svg>')
+  );
+}
+
+/* Reset view styles */
+.deck-widget.deck-widget-reset-view button.deck-widget-reset-focus .deck-widget-icon {
+  mask-image: var(
+    --icon-camera,
+      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M480-320v-100q0-25 17.5-42.5T540-480h100v60H540v100h-60Zm60 240q-25 0-42.5-17.5T480-140v-100h60v100h100v60H540Zm280-240v-100H720v-60h100q25 0 42.5 17.5T880-420v100h-60ZM720-80v-60h100v-100h60v100q0 25-17.5 42.5T820-80H720Zm111-480h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"/></svg>')
+  );
+  -webkit-mask-image: var(
+    --icon-camera,
+      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M480-320v-100q0-25 17.5-42.5T540-480h100v60H540v100h-60Zm60 240q-25 0-42.5-17.5T480-140v-100h60v100h100v60H540Zm280-240v-100H720v-60h100q25 0 42.5 17.5T880-420v100h-60ZM720-80v-60h100v-100h60v100q0 25-17.5 42.5T820-80H720Zm111-480h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"/></svg>')
+  );
+}
+ 
+/* Timeline widget styles */
+.deck-widget.deck-widget-timeline {
+  display: flex;
+  align-items: center;
+  pointer-events: 'auto';
+}
+
+.deck-widget.deck-widget-timeline .timeline-slider {
+  margin: 0 8px;
+  flex: 1;
+  pointer-events: 'auto';
+  cursor: pointer;
+}
+
+.deck-widget.deck-widget-timeline button.timeline-play-pause {
+  background: var(--button-background, #fff);
+  border: var(--button-inner-stroke, unset);
+  border-radius: var(--button-corner-radius, 4px);
+  width: var(--button-size, 28px);
+  height: var(--button-size, 28px);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  pointer-events: 'auto';
+}
+
+.deck-widget-spinner-icon {
+  mask-image: var(
+    --loading-icon, 
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" ><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>')
+  );
+  -webkit-mask-image: var(
+    --loading-icon,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" ><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>')
+  );
+}
+
+.deck-widget .deck-widget-scale {
+  background-color: var(--button-icon-idle, #616166);
+  background-position: 50%;
+  display: block;
+}
+
+.deck-widget .deck-widget-geolocate {
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+/**
+ * Reusable styles for widgets
+ */
+.deck-widget-common {
+  font-family:
+    'SF Mono',
+    /* macOS */
+    'Menlo',
+    /* macOS */
+    'Consolas',
+    /* Windows */
+    'DejaVu Sans Mono',
+    /* Linux */
+    'Liberation Mono',
+    /* Linux */
+    monospace;
+  background-color: var(--button-background, #fff);
+  color: #333;
+}
+
+.deck-widget-stats-container {
+  font-size: 0.7rem;
+  /* Approximately 14px */
+  line-height: 1.6;
+}

package/dist/theme-widget.d.ts

@@ -0,0 +1,31 @@
+import { Widget, WidgetProps, WidgetPlacement } from '@deck.gl/core';
+import type { DeckWidgetTheme } from "./themes.js";
+export type ThemeWidgetProps = WidgetProps & {
+    /** Widget positioning within the view. Default 'top-left'. */
+    placement?: WidgetPlacement;
+    /** Tooltip message when dark mode is selected. */
+    lightModeLabel?: string;
+    /** Styles for light mode theme */
+    lightModeTheme?: DeckWidgetTheme;
+    /** Tooltip message when light mode is selected. */
+    darkModeLabel?: string;
+    /** Styles for dark mode theme */
+    darkModeTheme?: DeckWidgetTheme;
+    /** Initial theme mode. 'auto' reads the browser default setting */
+    initialThemeMode?: 'auto' | 'light' | 'dark';
+};
+export declare class ThemeWidget extends Widget<ThemeWidgetProps> {
+    static defaultProps: Required<ThemeWidgetProps>;
+    className: string;
+    placement: WidgetPlacement;
+    themeMode: 'light' | 'dark';
+    constructor(props?: ThemeWidgetProps);
+    setProps(props: Partial<ThemeWidgetProps>): void;
+    onRenderHTML(rootElement: HTMLElement): void;
+    onAdd(): void;
+    _handleClick(): void;
+    _setThemeMode(themeMode: 'light' | 'dark'): void;
+    /** Read browser preference */
+    _getInitialThemeMode(): 'light' | 'dark';
+}
+//# sourceMappingURL=theme-widget.d.ts.map

package/dist/theme-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-widget.d.ts","sourceRoot":"","sources":["../src/theme-widget.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,MAAM,EAAE,WAAW,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAInE,OAAO,KAAK,EAAC,eAAe,EAAC,oBAAiB;AAG9C,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,8DAA8D;IAC9D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kCAAkC;IAClC,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iCAAiC;IACjC,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;CAC9C,CAAC;AAEF,qBAAa,WAAY,SAAQ,MAAM,CAAC,gBAAgB,CAAC;IACvD,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAS7C;IAEF,SAAS,SAAuB;IAChC,SAAS,EAAE,eAAe,CAAc;IACxC,SAAS,EAAE,OAAO,GAAG,MAAM,CAAU;gBAEzB,KAAK,GAAE,gBAAqB;IAOxC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,gBAAgB,CAAC;IAoBzC,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IAc5C,KAAK;IAKL,YAAY;IAKZ,aAAa,CAAC,SAAS,EAAE,OAAO,GAAG,MAAM;IAgBzC,8BAA8B;IAC9B,oBAAoB,IAAI,OAAO,GAAG,MAAM;CAQzC"}