@deck.gl/widgets 9.1.12 → 9.2.0-alpha.2

package/dist/theme-widget.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { log, _deepEqual as deepEqual, _applyStyles as applyStyles } from '@deck.gl/core';
+import { Widget } from '@deck.gl/core';
+import { render } from 'preact';
+// import {useCallback} from 'preact/hooks';
+import { IconButton } from "./lib/components/icon-button.js";
+import { LightGlassTheme, DarkGlassTheme } from "./themes.js";
+export class ThemeWidget extends Widget {
+    constructor(props = {}) {
+        super(props, ThemeWidget.defaultProps);
+        this.className = 'deck-widget-theme';
+        this.placement = 'top-left';
+        this.themeMode = 'dark';
+        this.placement = props.placement ?? this.placement;
+        this.themeMode = this._getInitialThemeMode();
+    }
+    // eslint-disable-next-line complexity
+    setProps(props) {
+        const { lightModeTheme, darkModeTheme } = this.props;
+        this.placement = props.placement ?? this.placement;
+        super.setProps(props);
+        // Update if current theme definition changed
+        switch (this.themeMode) {
+            case 'light':
+                if (props.lightModeTheme && !deepEqual(props.lightModeTheme, lightModeTheme, 1)) {
+                    this._setThemeMode('light');
+                }
+                break;
+            case 'dark':
+                if (props.darkModeTheme && !deepEqual(props.darkModeTheme, darkModeTheme, 1)) {
+                    this._setThemeMode('dark');
+                }
+                break;
+        }
+    }
+    onRenderHTML(rootElement) {
+        const { lightModeLabel, darkModeLabel } = this.props;
+        // const onClick = useCallback(this._handleClick.bind(this), [this._handleClick]);
+        render(_jsx(IconButton, { onClick: this._handleClick.bind(this), label: this.themeMode === 'dark' ? darkModeLabel : lightModeLabel, className: this.themeMode === 'dark' ? 'deck-widget-moon' : 'deck-widget-sun' }), rootElement);
+    }
+    onAdd() {
+        // Note: theme styling is applied in here onAdd() once DOM element is created
+        this._setThemeMode(this.themeMode);
+    }
+    _handleClick() {
+        const newThemeMode = this.themeMode === 'dark' ? 'light' : 'dark';
+        this._setThemeMode(newThemeMode);
+    }
+    _setThemeMode(themeMode) {
+        this.themeMode = themeMode;
+        const container = this.rootElement?.closest('.deck-widget-container');
+        if (container) {
+            const themeStyle = themeMode === 'dark' ? this.props.darkModeTheme : this.props.lightModeTheme;
+            applyStyles(container, themeStyle);
+            const label = this.themeMode === 'dark' ? this.props.darkModeLabel : this.props.lightModeLabel;
+            log.log(1, `Switched theme to ${label}`, themeStyle);
+            this.updateHTML();
+        }
+    }
+    /** Read browser preference */
+    _getInitialThemeMode() {
+        const { initialThemeMode } = this.props;
+        return initialThemeMode === 'auto'
+            ? window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light'
+            : initialThemeMode;
+    }
+}
+ThemeWidget.defaultProps = {
+    ...Widget.defaultProps,
+    id: 'theme',
+    placement: 'top-left',
+    lightModeLabel: 'Light Mode',
+    lightModeTheme: LightGlassTheme,
+    darkModeLabel: 'Dark Mode',
+    darkModeTheme: DarkGlassTheme,
+    initialThemeMode: 'auto'
+};
+//# sourceMappingURL=theme-widget.js.map

package/dist/theme-widget.js.map

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

package/dist/themes.d.ts

@@ -1,45 +1,74 @@
+/**
+ * A Deck Theme is a set of CSS variables that control CSS styling of the official widgets.
+ */
+export type DeckWidgetTheme = {
+    '--widget-margin'?: string;
+    '--button-size'?: string;
+    '--button-corner-radius'?: string;
+    '--button-background'?: string;
+    '--button-stroke'?: string;
+    '--button-inner-stroke'?: string;
+    '--button-shadow'?: string;
+    '--button-backdrop-filter'?: string;
+    '--button-icon-idle'?: string;
+    '--button-icon-hover'?: string;
+    '--icon-compass-north-color'?: string;
+    '--icon-compass-south-color'?: string;
+};
 export declare const LightTheme: {
-    '--button-background': string;
-    '--button-stroke': string;
-    '--button-inner-stroke': string;
-    '--button-shadow': string;
-    '--button-backdrop-filter': string;
-    '--button-icon-idle': string;
-    '--button-icon-hover': string;
-    '--icon-compass-north-color': string;
-    '--icon-compass-south-color': string;
+    readonly '--widget-margin': "12px";
+    readonly '--button-size': "28px";
+    readonly '--button-corner-radius': "8px";
+    readonly '--button-background': "#fff";
+    readonly '--button-stroke': "rgba(255, 255, 255, 0.3)";
+    readonly '--button-inner-stroke': "unset";
+    readonly '--button-shadow': "0px 0px 8px 0px rgba(0, 0, 0, 0.25)";
+    readonly '--button-backdrop-filter': "unset";
+    readonly '--button-icon-idle': "rgba(97, 97, 102, 1)";
+    readonly '--button-icon-hover': "rgba(24, 24, 26, 1)";
+    readonly '--icon-compass-north-color': "rgb(240, 92, 68)";
+    readonly '--icon-compass-south-color': "rgb(204, 204, 204)";
 };
 export declare const DarkTheme: {
-    '--button-background': string;
-    '--button-stroke': string;
-    '--button-inner-stroke': string;
-    '--button-shadow': string;
-    '--button-backdrop-filter': string;
-    '--button-icon-idle': string;
-    '--button-icon-hover': string;
-    '--icon-compass-north-color': string;
-    '--icon-compass-south-color': string;
+    readonly '--widget-margin': "12px";
+    readonly '--button-size': "28px";
+    readonly '--button-corner-radius': "8px";
+    readonly '--button-background': "rgba(18, 18, 20, 1)";
+    readonly '--button-stroke': "rgba(18, 18, 20, 0.30)";
+    readonly '--button-inner-stroke': "unset";
+    readonly '--button-shadow': "0px 0px 8px 0px rgba(0, 0, 0, 0.25)";
+    readonly '--button-backdrop-filter': "unset";
+    readonly '--button-icon-idle': "rgba(158, 157, 168, 1)";
+    readonly '--button-icon-hover': "rgba(215, 214, 229, 1)";
+    readonly '--icon-compass-north-color': "rgb(240, 92, 68)";
+    readonly '--icon-compass-south-color': "rgb(200, 199, 209)";
 };
 export declare const LightGlassTheme: {
-    '--button-background': string;
-    '--button-stroke': string;
-    '--button-inner-stroke': string;
-    '--button-shadow': string;
-    '--button-backdrop-filter': string;
-    '--button-icon-idle': string;
-    '--button-icon-hover': string;
-    '--icon-compass-north-color': string;
-    '--icon-compass-south-color': string;
+    readonly '--widget-margin': "12px";
+    readonly '--button-size': "28px";
+    readonly '--button-corner-radius': "8px";
+    readonly '--button-background': "rgba(255, 255, 255, 0.6)";
+    readonly '--button-stroke': "rgba(255, 255, 255, 0.3)";
+    readonly '--button-inner-stroke': "1px solid rgba(255, 255, 255, 0.6)";
+    readonly '--button-shadow': "0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset";
+    readonly '--button-backdrop-filter': "blur(4px)";
+    readonly '--button-icon-idle': "rgba(97, 97, 102, 1)";
+    readonly '--button-icon-hover': "rgba(24, 24, 26, 1)";
+    readonly '--icon-compass-north-color': "rgb(240, 92, 68)";
+    readonly '--icon-compass-south-color': "rgb(204, 204, 204)";
 };
 export declare const DarkGlassTheme: {
-    '--button-background': string;
-    '--button-stroke': string;
-    '--button-inner-stroke': string;
-    '--button-shadow': string;
-    '--button-backdrop-filter': string;
-    '--button-icon-idle': string;
-    '--button-icon-hover': string;
-    '--icon-compass-north-color': string;
-    '--icon-compass-south-color': string;
+    readonly '--widget-margin': "12px";
+    readonly '--button-size': "28px";
+    readonly '--button-corner-radius': "8px";
+    readonly '--button-background': "rgba(18, 18, 20, 0.75)";
+    readonly '--button-stroke': "rgba(18, 18, 20, 0.30)";
+    readonly '--button-inner-stroke': "1px solid rgba(18, 18, 20, 0.75)";
+    readonly '--button-shadow': "0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset";
+    readonly '--button-backdrop-filter': "blur(4px)";
+    readonly '--button-icon-idle': "rgba(158, 157, 168, 1)";
+    readonly '--button-icon-hover': "rgba(215, 214, 229, 1)";
+    readonly '--icon-compass-north-color': "rgb(240, 92, 68)";
+    readonly '--icon-compass-south-color': "rgb(200, 199, 209)";
 };
 //# sourceMappingURL=themes.d.ts.map

package/dist/themes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU;;;;;;;;;;CAUtB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;CAUrB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;CAW3B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;CAW1B,CAAC"}
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAE5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,4BAA4B,CAAC,EAAE,MAAM,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAauB,CAAC;AAE/C,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAawB,CAAC;AAE/C,eAAO,MAAM,eAAe;;;;;;;;;;;;;CAckB,CAAC;AAE/C,eAAO,MAAM,cAAc;;;;;;;;;;;;;CAcmB,CAAC"}

package/dist/themes.js

@@ -2,6 +2,9 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 export const LightTheme = {
+    '--widget-margin': '12px',
+    '--button-size': '28px',
+    '--button-corner-radius': '8px',
     '--button-background': '#fff',
     '--button-stroke': 'rgba(255, 255, 255, 0.3)',
     '--button-inner-stroke': 'unset',
@@ -9,10 +12,13 @@ export const LightTheme = {
     '--button-backdrop-filter': 'unset',
     '--button-icon-idle': 'rgba(97, 97, 102, 1)',
     '--button-icon-hover': 'rgba(24, 24, 26, 1)',
-    '--icon-compass-north-color': '#F05C44',
-    '--icon-compass-south-color': '#C2C2CC'
+    '--icon-compass-north-color': 'rgb(240, 92, 68)',
+    '--icon-compass-south-color': 'rgb(204, 204, 204)'
 };
 export const DarkTheme = {
+    '--widget-margin': '12px',
+    '--button-size': '28px',
+    '--button-corner-radius': '8px',
     '--button-background': 'rgba(18, 18, 20, 1)',
     '--button-stroke': 'rgba(18, 18, 20, 0.30)',
     '--button-inner-stroke': 'unset',
@@ -20,10 +26,13 @@ export const DarkTheme = {
     '--button-backdrop-filter': 'unset',
     '--button-icon-idle': 'rgba(158, 157, 168, 1)',
     '--button-icon-hover': 'rgba(215, 214, 229, 1)',
-    '--icon-compass-north-color': '#F05C44',
-    '--icon-compass-south-color': '#C2C2CC'
+    '--icon-compass-north-color': 'rgb(240, 92, 68)',
+    '--icon-compass-south-color': 'rgb(200, 199, 209)'
 };
 export const LightGlassTheme = {
+    '--widget-margin': '12px',
+    '--button-size': '28px',
+    '--button-corner-radius': '8px',
     '--button-background': 'rgba(255, 255, 255, 0.6)',
     '--button-stroke': 'rgba(255, 255, 255, 0.3)',
     '--button-inner-stroke': '1px solid rgba(255, 255, 255, 0.6)',
@@ -31,10 +40,13 @@ export const LightGlassTheme = {
     '--button-backdrop-filter': 'blur(4px)',
     '--button-icon-idle': 'rgba(97, 97, 102, 1)',
     '--button-icon-hover': 'rgba(24, 24, 26, 1)',
-    '--icon-compass-north-color': '#F05C44',
-    '--icon-compass-south-color': '#C2C2CC'
+    '--icon-compass-north-color': 'rgb(240, 92, 68)',
+    '--icon-compass-south-color': 'rgb(204, 204, 204)'
 };
 export const DarkGlassTheme = {
+    '--widget-margin': '12px',
+    '--button-size': '28px',
+    '--button-corner-radius': '8px',
     '--button-background': 'rgba(18, 18, 20, 0.75)',
     '--button-stroke': 'rgba(18, 18, 20, 0.30)',
     '--button-inner-stroke': '1px solid rgba(18, 18, 20, 0.75)',
@@ -42,7 +54,7 @@ export const DarkGlassTheme = {
     '--button-backdrop-filter': 'blur(4px)',
     '--button-icon-idle': 'rgba(158, 157, 168, 1)',
     '--button-icon-hover': 'rgba(215, 214, 229, 1)',
-    '--icon-compass-north-color': '#F05C44',
-    '--icon-compass-south-color': '#C2C2CC'
+    '--icon-compass-north-color': 'rgb(240, 92, 68)',
+    '--icon-compass-south-color': 'rgb(200, 199, 209)'
 };
 //# sourceMappingURL=themes.js.map

package/dist/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAEpC,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,qBAAqB,EAAE,MAAM;IAC7B,iBAAiB,EAAE,0BAA0B;IAC7C,uBAAuB,EAAE,OAAO;IAChC,iBAAiB,EAAE,qCAAqC;IACxD,0BAA0B,EAAE,OAAO;IACnC,oBAAoB,EAAE,sBAAsB;IAC5C,qBAAqB,EAAE,qBAAqB;IAC5C,4BAA4B,EAAE,SAAS;IACvC,4BAA4B,EAAE,SAAS;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,qBAAqB,EAAE,qBAAqB;IAC5C,iBAAiB,EAAE,wBAAwB;IAC3C,uBAAuB,EAAE,OAAO;IAChC,iBAAiB,EAAE,qCAAqC;IACxD,0BAA0B,EAAE,OAAO;IACnC,oBAAoB,EAAE,wBAAwB;IAC9C,qBAAqB,EAAE,wBAAwB;IAC/C,4BAA4B,EAAE,SAAS;IACvC,4BAA4B,EAAE,SAAS;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,qBAAqB,EAAE,0BAA0B;IACjD,iBAAiB,EAAE,0BAA0B;IAC7C,uBAAuB,EAAE,oCAAoC;IAC7D,iBAAiB,EACf,+EAA+E;IACjF,0BAA0B,EAAE,WAAW;IACvC,oBAAoB,EAAE,sBAAsB;IAC5C,qBAAqB,EAAE,qBAAqB;IAC5C,4BAA4B,EAAE,SAAS;IACvC,4BAA4B,EAAE,SAAS;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,qBAAqB,EAAE,wBAAwB;IAC/C,iBAAiB,EAAE,wBAAwB;IAC3C,uBAAuB,EAAE,kCAAkC;IAC3D,iBAAiB,EACf,+EAA+E;IACjF,0BAA0B,EAAE,WAAW;IACvC,oBAAoB,EAAE,wBAAwB;IAC9C,qBAAqB,EAAE,wBAAwB;IAC/C,4BAA4B,EAAE,SAAS;IACvC,4BAA4B,EAAE,SAAS;CACxC,CAAC"}
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAuBpC,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,iBAAiB,EAAE,MAAM;IACzB,eAAe,EAAE,MAAM;IACvB,wBAAwB,EAAE,KAAK;IAC/B,qBAAqB,EAAE,MAAM;IAC7B,iBAAiB,EAAE,0BAA0B;IAC7C,uBAAuB,EAAE,OAAO;IAChC,iBAAiB,EAAE,qCAAqC;IACxD,0BAA0B,EAAE,OAAO;IACnC,oBAAoB,EAAE,sBAAsB;IAC5C,qBAAqB,EAAE,qBAAqB;IAC5C,4BAA4B,EAAE,kBAAkB;IAChD,4BAA4B,EAAE,oBAAoB;CACN,CAAC;AAE/C,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,iBAAiB,EAAE,MAAM;IACzB,eAAe,EAAE,MAAM;IACvB,wBAAwB,EAAE,KAAK;IAC/B,qBAAqB,EAAE,qBAAqB;IAC5C,iBAAiB,EAAE,wBAAwB;IAC3C,uBAAuB,EAAE,OAAO;IAChC,iBAAiB,EAAE,qCAAqC;IACxD,0BAA0B,EAAE,OAAO;IACnC,oBAAoB,EAAE,wBAAwB;IAC9C,qBAAqB,EAAE,wBAAwB;IAC/C,4BAA4B,EAAE,kBAAkB;IAChD,4BAA4B,EAAE,oBAAoB;CACN,CAAC;AAE/C,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,iBAAiB,EAAE,MAAM;IACzB,eAAe,EAAE,MAAM;IACvB,wBAAwB,EAAE,KAAK;IAC/B,qBAAqB,EAAE,0BAA0B;IACjD,iBAAiB,EAAE,0BAA0B;IAC7C,uBAAuB,EAAE,oCAAoC;IAC7D,iBAAiB,EACf,+EAA+E;IACjF,0BAA0B,EAAE,WAAW;IACvC,oBAAoB,EAAE,sBAAsB;IAC5C,qBAAqB,EAAE,qBAAqB;IAC5C,4BAA4B,EAAE,kBAAkB;IAChD,4BAA4B,EAAE,oBAAoB;CACN,CAAC;AAE/C,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,iBAAiB,EAAE,MAAM;IACzB,eAAe,EAAE,MAAM;IACvB,wBAAwB,EAAE,KAAK;IAC/B,qBAAqB,EAAE,wBAAwB;IAC/C,iBAAiB,EAAE,wBAAwB;IAC3C,uBAAuB,EAAE,kCAAkC;IAC3D,iBAAiB,EACf,+EAA+E;IACjF,0BAA0B,EAAE,WAAW;IACvC,oBAAoB,EAAE,wBAAwB;IAC9C,qBAAqB,EAAE,wBAAwB;IAC/C,4BAA4B,EAAE,kBAAkB;IAChD,4BAA4B,EAAE,oBAAoB;CACN,CAAC"}

package/dist/timeline-widget.d.ts

@@ -0,0 +1,59 @@
+import { Widget, type WidgetPlacement } from '@deck.gl/core';
+export type TimelineWidgetProps = {
+    /**
+     * Widget id
+     */
+    id?: string;
+    /**
+     * CSS inline style overrides.
+     */
+    style?: Partial<CSSStyleDeclaration>;
+    /**
+     * Additional CSS class.
+     */
+    className?: string;
+    /**
+     * Widget placement.
+     */
+    placement?: WidgetPlacement;
+    /**
+     * Slider timeRange [min, max].
+     */
+    timeRange?: [number, number];
+    /**
+     * Slider step.
+     */
+    step?: number;
+    /**
+     * Initial slider value.
+     */
+    initialTime?: number;
+    /**
+     * Callback when value changes.
+     */
+    onTimeChange?: (value: number) => void;
+    /**
+     * Play interval in milliseconds.
+     */
+    playInterval?: number;
+};
+export declare class TimelineWidget extends Widget<TimelineWidgetProps> {
+    id: string;
+    className: string;
+    placement: WidgetPlacement;
+    private playing;
+    private timerId;
+    currentTime: number;
+    static defaultProps: Required<TimelineWidgetProps>;
+    constructor(props?: TimelineWidgetProps);
+    setProps(props: Partial<TimelineWidgetProps>): void;
+    onAdd(): void;
+    onRemove(): void;
+    onRenderHTML(rootElement: HTMLElement): void;
+    private handlePlayPause;
+    private handleSliderChange;
+    private start;
+    private stop;
+    private tick;
+}
+//# sourceMappingURL=timeline-widget.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-widget.d.ts","sourceRoot":"","sources":["../src/timeline-widget.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,MAAM,EAAE,KAAK,eAAe,EAAC,MAAM,eAAe,CAAC;AAG3D,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,qBAAa,cAAe,SAAQ,MAAM,CAAC,mBAAmB,CAAC;IAC7D,EAAE,SAAc;IAChB,SAAS,SAA0B;IACnC,SAAS,EAAE,eAAe,CAAiB;IAE3C,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAuB;IACtC,WAAW,EAAE,MAAM,CAAC;IAEpB,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAShD;gBAEU,KAAK,GAAE,mBAAwB;IAK3C,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,mBAAmB,CAAC,GAAG,IAAI;IAKnD,KAAK,IAAI,IAAI;IAKb,QAAQ,IAAI,IAAI;IAIhB,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IAyB5C,OAAO,CAAC,eAAe,CAMrB;IAEF,OAAO,CAAC,kBAAkB,CAMxB;IAEF,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,IAAI;IASZ,OAAO,CAAC,IAAI,CAYV;CACH"}

package/dist/timeline-widget.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { Widget } from '@deck.gl/core';
+import { render } from 'preact';
+export class TimelineWidget extends Widget {
+    constructor(props = {}) {
+        super(props, TimelineWidget.defaultProps);
+        this.id = 'timeline';
+        this.className = 'deck-widget-timeline';
+        this.placement = 'bottom-left';
+        this.playing = false;
+        this.timerId = null;
+        this.handlePlayPause = () => {
+            if (this.playing) {
+                this.stop();
+            }
+            else {
+                this.start();
+            }
+        };
+        this.handleSliderChange = (e) => {
+            const input = e.target;
+            const val = Number(input.value);
+            this.currentTime = val;
+            this.props.onTimeChange(val);
+            this.updateHTML();
+        };
+        this.tick = () => {
+            const [min, max] = this.props.timeRange;
+            let next = this.currentTime + this.props.step;
+            if (next > max) {
+                next = min;
+            }
+            this.currentTime = next;
+            this.props.onTimeChange(next);
+            this.updateHTML();
+            if (this.playing) {
+                this.timerId = window.setTimeout(this.tick, this.props.playInterval);
+            }
+        };
+        this.currentTime = this.props.initialTime ?? this.props.timeRange[0];
+    }
+    setProps(props) {
+        this.placement = props.placement || this.placement;
+        super.setProps(props);
+    }
+    onAdd() {
+        this.playing = false;
+        this.timerId = null;
+    }
+    onRemove() {
+        this.stop();
+    }
+    onRenderHTML(rootElement) {
+        render(_jsxs("div", { style: { display: 'flex', alignItems: 'center', pointerEvents: 'auto' }, children: [_jsx("button", { type: "button", className: "timeline-play-pause", title: this.playing ? 'Pause' : 'Play', onClick: this.handlePlayPause, children: this.playing ? '⏸' : '▶' }), _jsx("input", { type: "range", className: "timeline-slider", min: this.props.timeRange[0], max: this.props.timeRange[1], step: this.props.step, value: this.currentTime, onInput: this.handleSliderChange })] }), rootElement);
+    }
+    start() {
+        this.playing = true;
+        this.updateHTML();
+        this.tick();
+    }
+    stop() {
+        this.playing = false;
+        if (this.timerId !== null) {
+            window.clearTimeout(this.timerId);
+            this.timerId = null;
+        }
+        this.updateHTML();
+    }
+}
+TimelineWidget.defaultProps = {
+    ...Widget.defaultProps,
+    id: 'timeline',
+    placement: 'bottom-left',
+    timeRange: [0, 100],
+    step: 1,
+    initialTime: undefined,
+    onTimeChange: () => { },
+    playInterval: 1000
+};
+//# sourceMappingURL=timeline-widget.js.map

package/dist/timeline-widget.js.map

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

package/dist/view-selector-widget.d.ts

@@ -0,0 +1,33 @@
+import { Widget, type WidgetProps, type WidgetPlacement } from '@deck.gl/core';
+/** The available view modes */
+export type ViewMode = 'single' | 'split-horizontal' | 'split-vertical';
+/** Properties for the ViewSelectorWidget */
+export type ViewSelectorWidgetProps = WidgetProps & {
+    /** Widget positioning within the view. Default 'top-left'. */
+    placement?: WidgetPlacement;
+    /** Tooltip label */
+    label?: string;
+    /** The initial view mode. Defaults to 'single'. */
+    initialViewMode?: ViewMode;
+    /** Callback invoked when the view mode changes */
+    onViewModeChange?: (mode: ViewMode) => void;
+};
+/**
+ * A widget that renders a popup menu for selecting a view mode.
+ * It displays a button with the current view mode icon. Clicking the button
+ * toggles a popup that shows three icons for:
+ * - Single view
+ * - Two views, split horizontally
+ * - Two views, split vertically
+ */
+export declare class ViewSelectorWidget extends Widget<ViewSelectorWidgetProps> {
+    static defaultProps: Required<ViewSelectorWidgetProps>;
+    className: string;
+    placement: WidgetPlacement;
+    viewMode: ViewMode;
+    constructor(props?: ViewSelectorWidgetProps);
+    setProps(props: Partial<ViewSelectorWidgetProps>): void;
+    onRenderHTML(rootElement: HTMLElement): void;
+    handleSelectMode: (viewMode: ViewMode) => void;
+}
+//# sourceMappingURL=view-selector-widget.d.ts.map

package/dist/view-selector-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-selector-widget.d.ts","sourceRoot":"","sources":["../src/view-selector-widget.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAC,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAC,MAAM,eAAe,CAAC;AAG7E,+BAA+B;AAC/B,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,kBAAkB,GAAG,gBAAgB,CAAC;AAExE,4CAA4C;AAC5C,MAAM,MAAM,uBAAuB,GAAG,WAAW,GAAG;IAClD,8DAA8D;IAC9D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF;;;;;;;GAOG;AACH,qBAAa,kBAAmB,SAAQ,MAAM,CAAC,uBAAuB,CAAC;IACrE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,uBAAuB,CAAC,CAUpD;IAEF,SAAS,SAA+B;IACxC,SAAS,EAAE,eAAe,CAAc;IACxC,QAAQ,EAAE,QAAQ,CAAC;gBAEP,KAAK,GAAE,uBAA4B;IAM/C,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,uBAAuB,CAAC;IAKhD,YAAY,CAAC,WAAW,EAAE,WAAW;IAYrC,gBAAgB,aAAc,QAAQ,UAGpC;CACH"}

package/dist/view-selector-widget.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// ViewSelectorWidget.tsx
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { render } from 'preact';
+import { Widget } from '@deck.gl/core';
+import { IconMenu } from "./lib/components/icon-menu.js";
+/**
+ * A widget that renders a popup menu for selecting a view mode.
+ * It displays a button with the current view mode icon. Clicking the button
+ * toggles a popup that shows three icons for:
+ * - Single view
+ * - Two views, split horizontally
+ * - Two views, split vertically
+ */
+export class ViewSelectorWidget extends Widget {
+    constructor(props = {}) {
+        super(props, ViewSelectorWidget.defaultProps);
+        this.className = 'deck-widget-view-selector';
+        this.placement = 'top-left';
+        this.handleSelectMode = (viewMode) => {
+            this.viewMode = viewMode;
+            this.updateHTML();
+        };
+        this.placement = this.props.placement;
+        this.viewMode = this.props.initialViewMode;
+    }
+    setProps(props) {
+        super.setProps(props);
+        this.placement = props.placement ?? this.placement;
+    }
+    onRenderHTML(rootElement) {
+        render(_jsx(IconMenu, { className: "deck-widget-view-selector", menuItems: MENU_ITEMS, initialItem: this.props.initialViewMode, onItemSelected: this.handleSelectMode }), rootElement);
+    }
+}
+ViewSelectorWidget.defaultProps = {
+    ...Widget.defaultProps,
+    id: 'view-selector-widget',
+    placement: 'top-left',
+    label: 'Split View',
+    initialViewMode: 'single',
+    onViewModeChange: (viewMode) => {
+        // eslint-disable-next-line no-console
+        console.log(viewMode);
+    }
+};
+// Define common icon style.
+const ICON_STYLE = { width: '24px', height: '24px' };
+// Define inline SVG icons for each view mode.
+const ICONS = {
+    single: () => (_jsx("svg", { width: "24", height: "24", style: ICON_STYLE, children: _jsx("rect", { x: "4", y: "4", width: "16", height: "16", stroke: "black", fill: "none", strokeWidth: "2" }) })),
+    'split-horizontal': () => (_jsxs("svg", { width: "24", height: "24", style: ICON_STYLE, children: [_jsx("rect", { x: "4", y: "4", width: "16", height: "7", stroke: "black", fill: "none", strokeWidth: "2" }), _jsx("rect", { x: "4", y: "13", width: "16", height: "7", stroke: "black", fill: "none", strokeWidth: "2" })] })),
+    'split-vertical': () => (_jsxs("svg", { width: "24", height: "24", style: ICON_STYLE, children: [_jsx("rect", { x: "4", y: "4", width: "7", height: "16", stroke: "black", fill: "none", strokeWidth: "2" }), _jsx("rect", { x: "13", y: "4", width: "7", height: "16", stroke: "black", fill: "none", strokeWidth: "2" })] }))
+};
+// Define menu items for the popup menu.
+const MENU_ITEMS = [
+    { value: 'single', icon: ICONS.single, label: 'Single View' },
+    { value: 'split-horizontal', icon: ICONS['split-horizontal'], label: 'Split Horizontal' },
+    { value: 'split-vertical', icon: ICONS['split-vertical'], label: 'Split Vertical' }
+];
+//# sourceMappingURL=view-selector-widget.js.map

package/dist/view-selector-widget.js.map

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

package/dist/zoom-widget.d.ts

@@ -1,64 +1,35 @@
-import type { Deck, Viewport, Widget, WidgetPlacement } from '@deck.gl/core';
-export type ZoomWidgetProps = {
-    id?: string;
-    /**
-     * Widget positioning within the view. Default 'top-left'.
-     */
+import { Widget } from '@deck.gl/core';
+import { Viewport, WidgetProps, WidgetPlacement } from '@deck.gl/core';
+export type ZoomWidgetProps = WidgetProps & {
+    /** Widget positioning within the view. Default 'top-left'. */
     placement?: WidgetPlacement;
-    /**
-     * View to attach to and interact with. Required when using multiple views.
-     */
+    /** View to attach to and interact with. Required when using multiple views. */
     viewId?: string | null;
-    /**
-     * Button orientation.
-     */
+    /** Button orientation. */
     orientation?: 'vertical' | 'horizontal';
-    /**
-     * Tooltip message on zoom in button.
-     */
+    /** Tooltip message on zoom in button. */
     zoomInLabel?: string;
-    /**
-     * Tooltip message on zoom out button.
-     */
+    /** Tooltip message on zoom out button. */
     zoomOutLabel?: string;
-    /**
-     * Zoom transition duration in ms. 0 disables the transition
-     */
+    /** Zoom transition duration in ms. 0 disables the transition */
     transitionDuration?: number;
-    /**
-     * CSS inline style overrides.
-     */
-    style?: Partial<CSSStyleDeclaration>;
-    /**
-     * Additional CSS class.
-     */
-    className?: string;
 };
-export declare class ZoomWidget implements Widget<ZoomWidgetProps> {
-    id: string;
-    props: Required<ZoomWidgetProps>;
+export declare class ZoomWidget extends Widget<ZoomWidgetProps> {
+    static defaultProps: Required<ZoomWidgetProps>;
+    className: string;
     placement: WidgetPlacement;
     viewId?: string | null;
     viewports: {
         [id: string]: Viewport;
     };
-    deck?: Deck<any>;
-    element?: HTMLDivElement;
-    static defaultProps: Required<ZoomWidgetProps>;
     constructor(props?: ZoomWidgetProps);
-    onAdd({ deck }: {
-        deck: Deck<any>;
-    }): HTMLDivElement;
-    onRemove(): void;
     setProps(props: Partial<ZoomWidgetProps>): void;
+    onRenderHTML(rootElement: HTMLElement): void;
     onViewportChange(viewport: Viewport): void;
     handleZoom(viewport: Viewport, nextZoom: number): void;
     handleZoomIn(): void;
     handleZoomOut(): void;
-    /**
-     * @todo - move to deck or widget manager
-     */
+    /** @todo - move to deck or widget manager */
     private setViewState;
-    private update;
 }
 //# sourceMappingURL=zoom-widget.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"zoom-widget.d.ts","sourceRoot":"","sources":["../src/zoom-widget.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAI3E,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,qBAAa,UAAW,YAAW,MAAM,CAAC,eAAe,CAAC;IACxD,EAAE,SAAU;IACZ,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC;IACjC,SAAS,EAAE,eAAe,CAAc;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC9B,SAAS,EAAE;QAAC,CAAC,EAAE,EAAE,MAAM,GAAG,QAAQ,CAAA;KAAC,CAAM;IACzC,IAAI,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IACjB,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,eAAe,CAAC,CAU5C;gBAEU,KAAK,GAAE,eAAoB;IAWvC,KAAK,CAAC,EAAC,IAAI,EAAC,EAAE;QAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAA;KAAC,GAAG,cAAc;IAYhD,QAAQ;IAKR,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC;IAqBxC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ;IAInC,UAAU,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM;IAc/C,YAAY;IAMZ,aAAa;IAMb;;OAEG;IACH,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,MAAM;CAqBf"}
+{"version":3,"file":"zoom-widget.d.ts","sourceRoot":"","sources":["../src/zoom-widget.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,MAAM,EAAwC,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAC,QAAQ,EAAE,WAAW,EAAE,eAAe,EAAC,MAAM,eAAe,CAAC;AAKrE,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,8DAA8D;IAC9D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,+EAA+E;IAC/E,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gEAAgE;IAChE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,qBAAa,UAAW,SAAQ,MAAM,CAAC,eAAe,CAAC;IACrD,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,eAAe,CAAC,CAS5C;IAEF,SAAS,SAAsB;IAC/B,SAAS,EAAE,eAAe,CAAc;IACxC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC9B,SAAS,EAAE;QAAC,CAAC,EAAE,EAAE,MAAM,GAAG,QAAQ,CAAA;KAAC,CAAM;gBAE7B,KAAK,GAAE,eAAoB;IAMvC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC;IAMxC,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IAkB5C,gBAAgB,CAAC,QAAQ,EAAE,QAAQ;IAInC,UAAU,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM;IAc/C,YAAY;IAMZ,aAAa;IAMb,6CAA6C;IAC7C,OAAO,CAAC,YAAY;CAIrB"}