@deck.gl/widgets 9.2.0-beta.2 → 9.2.0-beta.3

package/src/reset-view-widget.tsx

@@ -2,22 +2,20 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {WidgetPlacement} from '@deck.gl/core';
+import type {WidgetPlacement, WidgetProps} from '@deck.gl/core';
+import type {ViewStateMap, ViewOrViews} from '@deck.gl/core/src/lib/view-manager';
 import {render} from 'preact';
-import {Widget, WidgetProps} from '@deck.gl/core';
+import {Widget} from '@deck.gl/core';
 import {IconButton} from './lib/components/icon-button';
 
-/** @todo - is the the best we can do? */
-type ViewState = Record<string, unknown>;
-
 /** Properties for the ResetViewWidget */
-export type ResetViewWidgetProps = WidgetProps & {
+export type ResetViewWidgetProps<ViewsT extends ViewOrViews = null> = WidgetProps & {
   /** Widget positioning within the view. Default 'top-left'. */
   placement?: WidgetPlacement;
   /** Tooltip message */
   label?: string;
   /** The initial view state to reset the view to. Defaults to deck.props.initialViewState */
-  initialViewState?: ViewState;
+  initialViewState?: ViewStateMap<ViewsT>;
   /** View to interact with. Required when using multiple views. */
   viewId?: string | null;
 };
@@ -25,26 +23,30 @@ export type ResetViewWidgetProps = WidgetProps & {
 /**
  * A button widget that resets the view state of deck to an initial state.
  */
-export class ResetViewWidget extends Widget<ResetViewWidgetProps> {
+export class ResetViewWidget<ViewsT extends ViewOrViews = null> extends Widget<
+  ResetViewWidgetProps<ViewsT>,
+  ViewsT
+> {
   static defaultProps: Required<ResetViewWidgetProps> = {
     ...Widget.defaultProps,
     id: 'reset-view',
     placement: 'top-left',
     label: 'Reset View',
     initialViewState: undefined!,
-    viewId: undefined!
+    viewId: null
   };
 
   className = 'deck-widget-reset-view';
   placement: WidgetPlacement = 'top-left';
 
-  constructor(props: ResetViewWidgetProps = {}) {
-    super(props, ResetViewWidget.defaultProps);
-    this.placement = props.placement ?? this.placement;
+  constructor(props: ResetViewWidgetProps<ViewsT> = {}) {
+    super(props, ResetViewWidget.defaultProps as Required<ResetViewWidgetProps<ViewsT>>);
+    this.setProps(this.props);
   }
 
-  setProps(props: Partial<ResetViewWidgetProps>) {
+  setProps(props: Partial<ResetViewWidgetProps<ViewsT>>) {
     this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
   }
 
@@ -64,10 +66,10 @@ export class ResetViewWidget extends Widget<ResetViewWidgetProps> {
     this.setViewState(initialViewState);
   }
 
-  setViewState(viewState: ViewState) {
-    const viewId = this.props.viewId || viewState?.id || 'default-view';
+  setViewState(viewState?: ViewStateMap<ViewsT>) {
+    const viewId = (this.props.viewId || 'default-view') as unknown as string;
     const nextViewState = {
-      ...viewState
+      ...(viewId !== 'default-view' ? viewState?.[viewId] : viewState)
       // only works for geospatial?
       // transitionDuration: this.props.transitionDuration,
       // transitionInterpolator: new FlyToInterpolator()

package/src/scale-widget.tsx

@@ -2,14 +2,17 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {WidgetPlacement, Viewport} from '@deck.gl/core';
+import type {WidgetPlacement, Viewport, WidgetProps} from '@deck.gl/core';
 import {render} from 'preact';
-import {Widget, WidgetProps} from '@deck.gl/core';
+import {Widget} from '@deck.gl/core';
 
 export type ScaleWidgetProps = WidgetProps & {
+  /** Widget positioning within the view. Default 'bottom-left'. */
   placement?: WidgetPlacement;
+  /** Label for the scale widget */
   label?: string;
-  onCapture?: (widget: ScaleWidget) => void;
+  /** View to attach to and interact with. Required when using multiple views */
+  viewId?: string | null;
 };
 
 /**
@@ -25,7 +28,7 @@ export class ScaleWidget extends Widget<ScaleWidgetProps> {
     id: 'scale',
     placement: 'bottom-left',
     label: 'Scale',
-    onCapture: undefined!
+    viewId: null
   };
 
   className = 'deck-widget-scale';
@@ -40,11 +43,12 @@ export class ScaleWidget extends Widget<ScaleWidgetProps> {
 
   constructor(props: ScaleWidgetProps = {}) {
     super(props, ScaleWidget.defaultProps);
-    this.placement = props.placement ?? this.placement;
+    this.setProps(this.props);
   }
 
   setProps(props: Partial<ScaleWidgetProps>): void {
     this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
   }
 

package/src/screenshot-widget.tsx

@@ -3,15 +3,17 @@
 // Copyright (c) vis.gl contributors
 
 /* global document */
-import type {WidgetPlacement} from '@deck.gl/core';
+import type {WidgetPlacement, WidgetProps} from '@deck.gl/core';
 import {render} from 'preact';
-import {Widget, WidgetProps} from '@deck.gl/core';
+import {Widget} from '@deck.gl/core';
 import {IconButton} from './lib/components/icon-button';
 
 /** Properties for the ScreenshotWidget */
 export type ScreenshotWidgetProps = WidgetProps & {
   /** Widget positioning within the view. Default 'top-left'. */
   placement?: WidgetPlacement;
+  /** View to attach to and interact with. Required when using multiple views. */
+  viewId?: string | null;
   /** Tooltip message */
   label?: string;
   /** Filename to save to */
@@ -31,6 +33,7 @@ export class ScreenshotWidget extends Widget<ScreenshotWidgetProps> {
     ...Widget.defaultProps,
     id: 'screenshot',
     placement: 'top-left',
+    viewId: null,
     label: 'Screenshot',
     filename: 'screenshot.png',
     imageFormat: 'image/png',
@@ -42,11 +45,12 @@ export class ScreenshotWidget extends Widget<ScreenshotWidgetProps> {
 
   constructor(props: ScreenshotWidgetProps = {}) {
     super(props, ScreenshotWidget.defaultProps);
-    this.placement = props.placement ?? this.placement;
+    this.setProps(this.props);
   }
 
   setProps(props: Partial<ScreenshotWidgetProps>) {
     this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
   }
 

package/src/splitter-widget.tsx

@@ -1,11 +1,10 @@
-// SplitterWidget.tsx
 // deck.gl
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
 import {h, render} from 'preact';
 import {useState, useRef} from 'preact/hooks';
-import {Widget, WidgetProps} from '@deck.gl/core';
+import {Widget, type WidgetProps} from '@deck.gl/core';
 
 /** Properties for the SplitterWidget */
 export type SplitterWidgetProps = WidgetProps & {
@@ -47,7 +46,6 @@ export class SplitterWidget extends Widget<SplitterWidgetProps> {
   placement = 'fill' as const;
 
   constructor(props: SplitterWidgetProps) {
-    // No placement prop is used.
     super(props, SplitterWidget.defaultProps);
   }
 

package/src/stats-widget.tsx

@@ -1,4 +1,8 @@
-import {Widget, WidgetPlacement, WidgetProps} from '@deck.gl/core';
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Widget, type WidgetPlacement, type WidgetProps} from '@deck.gl/core';
 import {luma} from '@luma.gl/core';
 import {render} from 'preact';
 import type {Stats, Stat} from '@probe.gl/stats';
@@ -26,6 +30,11 @@ export const DEFAULT_FORMATTERS: Record<string, (stat: Stat) => string> = {
 };
 
 export type StatsWidgetProps = WidgetProps & {
+  /** Widget positioning within the view. Default 'top-left'. */
+  placement?: WidgetPlacement;
+  /** View to attach to and interact with. Required when using multiple views. */
+  viewId?: string | null;
+  /** Type of stats to display. */
   type?: 'deck' | 'luma' | 'device' | 'custom';
   /** Stats object to visualize. */
   stats?: Stats;
@@ -44,6 +53,8 @@ export class StatsWidget extends Widget<StatsWidgetProps> {
   static defaultProps: Required<StatsWidgetProps> = {
     ...Widget.defaultProps,
     type: 'deck',
+    placement: 'top-left',
+    viewId: null,
     stats: undefined!,
     title: 'Stats',
     framesPerUpdate: 1,
@@ -64,13 +75,14 @@ export class StatsWidget extends Widget<StatsWidgetProps> {
   constructor(props: StatsWidgetProps = {}) {
     super(props, StatsWidget.defaultProps);
     this._formatters = {...DEFAULT_FORMATTERS};
-    this.setProps(props);
     this._resetOnUpdate = {...this.props.resetOnUpdate};
     this._stats = this.props.stats;
+    this.setProps(props);
   }
 
   setProps(props: Partial<StatsWidgetProps>): void {
-    super.setProps(props);
+    this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
     this._stats = this._getStats();
     if (props.formatters) {
       for (const name in props.formatters) {
@@ -82,6 +94,7 @@ export class StatsWidget extends Widget<StatsWidgetProps> {
     if (props.resetOnUpdate) {
       this._resetOnUpdate = {...props.resetOnUpdate};
     }
+    super.setProps(props);
   }
 
   onAdd(): void {
@@ -120,7 +133,7 @@ export class StatsWidget extends Widget<StatsWidgetProps> {
         >
           {collapsed ? RIGHT_ARROW : DOWN_ARROW} {title}
         </div>
-        {!collapsed && <div className="deck-widget-stats-content deck-widget-common">{items}</div>}
+        {!collapsed && <div className="deck-widget-stats-content">{items}</div>}
       </div>,
       rootElement
     );
@@ -129,7 +142,7 @@ export class StatsWidget extends Widget<StatsWidgetProps> {
   onRedraw(): void {
     const framesPerUpdate = Math.max(1, this.props.framesPerUpdate || 1);
     if (this._counter++ % framesPerUpdate === 0) {
-      console.log('Redrawing stats widget');
+      this._stats = this._getStats();
       this.updateHTML();
     }
   }

package/src/stylesheet.css

@@ -93,6 +93,15 @@
   background-color: var(--button-icon-hover, rgb(24, 24, 26));
 }
 
+/* Icon menu styles */
+.deck-widget .deck-widget-icon-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: var(--menu-gap, 4px);
+  z-index: 100;
+}
+
 /* Fullscreen styles */
 .deck-widget.deck-widget-fullscreen button.deck-widget-fullscreen-enter .deck-widget-icon {
   mask-image: var(
@@ -116,16 +125,6 @@
   );
 }
 
-@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;
@@ -215,21 +214,39 @@
   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.deck-widget-timeline .text {
+  color: var(--button-icon-idle, rgb(97, 97, 102));
+}
+
+.deck-widget.deck-widget-timeline .text:hover {
+  color: var(--button-icon-hover, rgb(24, 24, 26));
 }
 
-.deck-widget-spinner-icon {
+/* FPS widget styles */
+
+.deck-widget.deck-widget-fps button {
+  pointer-events: none;
+}
+
+.deck-widget.deck-widget-fps .text {
+  color: var(--button-text, rgb(24, 24, 26));
+  font-family: monospace;
+  font-size: 8px;
+  font-weight: 700;
+}
+
+/* Loading styles */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.deck-widget.deck-widget-loading button.deck-widget-spinner .deck-widget-icon {
+  animation: spin 1s linear infinite;
+}
+
+.deck-widget.deck-widget-loading button.deck-widget-spinner .deck-widget-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>')
@@ -240,21 +257,28 @@
   );
 }
 
+/* Scale styles */
 .deck-widget .deck-widget-scale {
   background-color: var(--button-icon-idle, #616166);
   background-position: 50%;
   display: block;
 }
 
-.deck-widget .deck-widget-geolocate {
+/* Geocoder styles */
+.deck-widget .deck-widget-geocoder {
   pointer-events: auto;
   cursor: pointer;
 }
 
-/**
- * Reusable styles for widgets
- */
-.deck-widget-common {
+/* Stats styles */
+.deck-widget-stats-container {
+  border-radius: var(--button-corner-radius, 4px);
+  display: inline-flex;
+  flex-direction: column;
+  padding: 4px;
+  font-size: 0.7rem;
+  /* Approximately 14px */
+  line-height: 1.6;
   font-family:
     'SF Mono',
     /* macOS */
@@ -268,11 +292,5 @@
     /* Linux */
     monospace;
   background-color: var(--button-background, #fff);
-  color: #333;
-}
-
-.deck-widget-stats-container {
-  font-size: 0.7rem;
-  /* Approximately 14px */
-  line-height: 1.6;
+  color: var(--button-text, rgb(24, 24, 26));
 }

package/src/theme-widget.tsx

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import {log, _deepEqual as deepEqual, _applyStyles as applyStyles} from '@deck.gl/core';
-import {Widget, WidgetProps, WidgetPlacement} from '@deck.gl/core';
+import {Widget, type WidgetProps, type WidgetPlacement} from '@deck.gl/core';
 import {render} from 'preact';
 // import {useCallback} from 'preact/hooks';
 import {IconButton} from './lib/components/icon-button';
@@ -13,6 +13,8 @@ import {LightGlassTheme, DarkGlassTheme} from './themes';
 export type ThemeWidgetProps = WidgetProps & {
   /** Widget positioning within the view. Default 'top-left'. */
   placement?: WidgetPlacement;
+  /** View to attach to and interact with. Required when using multiple views. */
+  viewId?: string | null;
   /** Tooltip message when dark mode is selected. */
   lightModeLabel?: string;
   /** Styles for light mode theme */
@@ -30,6 +32,7 @@ export class ThemeWidget extends Widget<ThemeWidgetProps> {
     ...Widget.defaultProps,
     id: 'theme',
     placement: 'top-left',
+    viewId: null,
     lightModeLabel: 'Light Mode',
     lightModeTheme: LightGlassTheme,
     darkModeLabel: 'Dark Mode',
@@ -43,17 +46,17 @@ export class ThemeWidget extends Widget<ThemeWidgetProps> {
 
   constructor(props: ThemeWidgetProps = {}) {
     super(props, ThemeWidget.defaultProps);
-    this.placement = props.placement ?? this.placement;
     this.themeMode = this._getInitialThemeMode();
+    this.setProps(this.props);
   }
 
   // eslint-disable-next-line complexity
   setProps(props: Partial<ThemeWidgetProps>) {
     const {lightModeTheme, darkModeTheme} = this.props;
     this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
 
-    // Update if current theme definition changed
     switch (this.themeMode) {
       case 'light':
         if (props.lightModeTheme && !deepEqual(props.lightModeTheme, lightModeTheme, 1)) {
@@ -65,6 +68,8 @@ export class ThemeWidget extends Widget<ThemeWidgetProps> {
           this._setThemeMode('dark');
         }
         break;
+      default:
+        log.warn(`Invalid theme mode ${this.themeMode}`)();
     }
   }
 
@@ -102,7 +107,7 @@ export class ThemeWidget extends Widget<ThemeWidgetProps> {
 
       const label =
         this.themeMode === 'dark' ? this.props.darkModeLabel : this.props.lightModeLabel;
-      log.log(1, `Switched theme to ${label}`, themeStyle);
+      log.log(1, `Switched theme to ${label}`, themeStyle)();
 
       this.updateHTML();
     }

package/src/themes.ts

@@ -18,9 +18,12 @@ export type DeckWidgetTheme = {
   '--button-backdrop-filter'?: string;
   '--button-icon-idle'?: string;
   '--button-icon-hover'?: string;
+  '--button-text'?: string;
   // inter-icon color
   '--icon-compass-north-color'?: string;
   '--icon-compass-south-color'?: string;
+  // menu
+  '--menu-gap'?: string;
 };
 
 export const LightTheme = {
@@ -34,8 +37,10 @@ export const LightTheme = {
   '--button-backdrop-filter': 'unset',
   '--button-icon-idle': 'rgba(97, 97, 102, 1)',
   '--button-icon-hover': 'rgba(24, 24, 26, 1)',
+  '--button-text': 'rgb(24, 24, 26, 1)',
   '--icon-compass-north-color': 'rgb(240, 92, 68)',
-  '--icon-compass-south-color': 'rgb(204, 204, 204)'
+  '--icon-compass-south-color': 'rgb(204, 204, 204)',
+  '--menu-gap': '4px'
 } as const satisfies Required<DeckWidgetTheme>;
 
 export const DarkTheme = {
@@ -49,8 +54,10 @@ export const DarkTheme = {
   '--button-backdrop-filter': 'unset',
   '--button-icon-idle': 'rgba(158, 157, 168, 1)',
   '--button-icon-hover': 'rgba(215, 214, 229, 1)',
+  '--button-text': 'rgb(215, 214, 229, 1)',
   '--icon-compass-north-color': 'rgb(240, 92, 68)',
-  '--icon-compass-south-color': 'rgb(200, 199, 209)'
+  '--icon-compass-south-color': 'rgb(200, 199, 209)',
+  '--menu-gap': '4px'
 } as const satisfies Required<DeckWidgetTheme>;
 
 export const LightGlassTheme = {
@@ -65,8 +72,10 @@ export const LightGlassTheme = {
   '--button-backdrop-filter': 'blur(4px)',
   '--button-icon-idle': 'rgba(97, 97, 102, 1)',
   '--button-icon-hover': 'rgba(24, 24, 26, 1)',
+  '--button-text': 'rgb(24, 24, 26, 1)',
   '--icon-compass-north-color': 'rgb(240, 92, 68)',
-  '--icon-compass-south-color': 'rgb(204, 204, 204)'
+  '--icon-compass-south-color': 'rgb(204, 204, 204)',
+  '--menu-gap': '4px'
 } as const satisfies Required<DeckWidgetTheme>;
 
 export const DarkGlassTheme = {
@@ -81,6 +90,8 @@ export const DarkGlassTheme = {
   '--button-backdrop-filter': 'blur(4px)',
   '--button-icon-idle': 'rgba(158, 157, 168, 1)',
   '--button-icon-hover': 'rgba(215, 214, 229, 1)',
+  '--button-text': 'rgb(215, 214, 229, 1)',
   '--icon-compass-north-color': 'rgb(240, 92, 68)',
-  '--icon-compass-south-color': 'rgb(200, 199, 209)'
+  '--icon-compass-south-color': 'rgb(200, 199, 209)',
+  '--menu-gap': '4px'
 } as const satisfies Required<DeckWidgetTheme>;

package/src/timeline-widget.tsx

@@ -2,45 +2,24 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Widget, type WidgetPlacement} from '@deck.gl/core';
+import {Widget, type WidgetPlacement, type WidgetProps} from '@deck.gl/core';
 import {render} from 'preact';
+import {IconButton} from './lib/components/icon-button';
 
-export type TimelineWidgetProps = {
-  /**
-   * Widget id
-   */
-  id?: string;
-  /**
-   * CSS inline style overrides.
-   */
-  style?: Partial<CSSStyleDeclaration>;
-  /**
-   * Additional CSS class.
-   */
-  className?: string;
-  /**
-   * Widget placement.
-   */
+export type TimelineWidgetProps = WidgetProps & {
+  /** Widget positioning within the view. Default 'bottom-left'. */
   placement?: WidgetPlacement;
-  /**
-   * Slider timeRange [min, max].
-   */
+  /** View to attach to and interact with. Required when using multiple views. */
+  viewId?: string | null;
+  /** Slider timeRange [min, max]. */
   timeRange?: [number, number];
-  /**
-   * Slider step.
-   */
+  /** Slider step. */
   step?: number;
-  /**
-   * Initial slider value.
-   */
+  /** Initial slider value. */
   initialTime?: number;
-  /**
-   * Callback when value changes.
-   */
+  /** Callback when value changes. */
   onTimeChange?: (value: number) => void;
-  /**
-   * Play interval in milliseconds.
-   */
+  /** Play interval in milliseconds. */
   playInterval?: number;
 };
 
@@ -56,7 +35,8 @@ export class TimelineWidget extends Widget<TimelineWidgetProps> {
   static defaultProps: Required<TimelineWidgetProps> = {
     ...Widget.defaultProps,
     id: 'timeline',
-    placement: 'bottom-left' as const,
+    placement: 'bottom-left',
+    viewId: null,
     timeRange: [0, 100],
     step: 1,
     initialTime: undefined!,
@@ -67,10 +47,12 @@ export class TimelineWidget extends Widget<TimelineWidgetProps> {
   constructor(props: TimelineWidgetProps = {}) {
     super(props, TimelineWidget.defaultProps);
     this.currentTime = this.props.initialTime ?? this.props.timeRange[0];
+    this.setProps(this.props);
   }
 
   setProps(props: Partial<TimelineWidgetProps>): void {
-    this.placement = props.placement || this.placement;
+    this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
   }
 
@@ -86,14 +68,9 @@ export class TimelineWidget extends Widget<TimelineWidgetProps> {
   onRenderHTML(rootElement: HTMLElement): void {
     render(
       <div style={{display: 'flex', alignItems: 'center', pointerEvents: 'auto'}}>
-        <button
-          type="button"
-          className="timeline-play-pause"
-          title={this.playing ? 'Pause' : 'Play'}
-          onClick={this.handlePlayPause}
-        >
-          {this.playing ? '⏸' : '▶'}
-        </button>
+        <IconButton label={this.playing ? 'Pause' : 'Play'} onClick={this.handlePlayPause}>
+          <div className="text">{this.playing ? '⏸' : '▶'}</div>
+        </IconButton>
         <input
           type="range"
           className="timeline-slider"