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

package/src/context-menu-widget.tsx

@@ -0,0 +1,115 @@
+/* global document */
+import {Widget, WidgetProps} from '@deck.gl/core';
+import type {Deck, PickingInfo} from '@deck.gl/core';
+import {render} from 'preact';
+import {SimpleMenu} from './lib/components/simple-menu';
+
+/** The standard, modern way is to use event.button === 2, where button is the standardized property (0 = left, 1 = middle, 2 = right). */
+const MOUSE_BUTTON_RIGHT = 2;
+/** A name for the legacy MouseEvent.which value that corresponds to the right-mouse button. In older browsers, the check is: if (event.which === 3) */
+const MOUSE_WHICH_RIGHT = 3;
+
+export type ContextWidgetMenuItem = {
+  label: string;
+  key: string;
+};
+
+export type ContextMenuWidgetProps = WidgetProps & {
+  /** View to attach to and interact with. Required when using multiple views. */
+  viewId?: string | null;
+  /** Controls visibility of the context menu */
+  visible?: boolean;
+  /** Screen position at which to place the menu */
+  position: {x: number; y: number};
+  /** Items to render */
+  menuItems: ContextWidgetMenuItem[];
+  /** Provide menu items for the menu given the picked object */
+  getMenuItems: (info: PickingInfo, widget: ContextMenuWidget) => ContextWidgetMenuItem[] | null;
+  /** Callback with the selected item */
+  onMenuItemSelected?: (key: string, pickInfo: PickingInfo | null) => void;
+};
+
+export class ContextMenuWidget extends Widget<ContextMenuWidgetProps> {
+  static defaultProps: Required<ContextMenuWidgetProps> = {
+    ...Widget.defaultProps,
+    viewId: null,
+    visible: false,
+    position: {x: 0, y: 0},
+    getMenuItems: undefined!,
+    menuItems: [],
+    // eslint-disable-next-line no-console
+    onMenuItemSelected: (key, pickInfo) => console.log('Context menu item selected:', key, pickInfo)
+  };
+
+  className = 'deck-widget-context-menu';
+  placement = 'fill' as const;
+
+  pickInfo: PickingInfo | null = null;
+
+  constructor(props: ContextMenuWidgetProps) {
+    super(props, ContextMenuWidget.defaultProps);
+    this.pickInfo = null;
+    this.setProps(props);
+  }
+
+  onAdd({deck}: {deck: Deck<any>}): HTMLDivElement {
+    const element = document.createElement('div');
+    element.classList.add('deck-widget', 'deck-widget-context-menu');
+    const style = {
+      margin: '0px',
+      top: '0px',
+      left: '0px',
+      position: 'absolute',
+      pointerEvents: 'auto'
+    };
+    Object.entries(style).forEach(([key, value]) => element.style.setProperty(key, value));
+
+    deck.getCanvas()?.addEventListener('click', () => this.hide());
+    deck.getCanvas()?.addEventListener('contextmenu', event => this.handleContextMenu(event));
+    return element;
+  }
+
+  onRenderHTML(rootElement: HTMLElement): void {
+    const {visible, position, menuItems} = this.props;
+
+    const ui =
+      visible && menuItems.length ? (
+        <SimpleMenu
+          menuItems={menuItems}
+          onItemSelected={key => this.props.onMenuItemSelected(key, this.pickInfo)}
+          position={position}
+          style={{pointerEvents: 'auto'}}
+        />
+      ) : null;
+    render(ui, rootElement);
+  }
+
+  handleContextMenu(srcEvent: MouseEvent): boolean {
+    if (
+      srcEvent &&
+      (srcEvent.button === MOUSE_BUTTON_RIGHT || srcEvent.which === MOUSE_WHICH_RIGHT)
+    ) {
+      this.pickInfo =
+        this.deck?.pickObject({
+          x: srcEvent.clientX,
+          y: srcEvent.clientY
+        }) || null;
+      const menuItems = (this.pickInfo && this.props.getMenuItems?.(this.pickInfo, this)) || [];
+      const visible = menuItems.length > 0;
+      this.setProps({
+        visible,
+        position: {x: srcEvent.clientX, y: srcEvent.clientY},
+        menuItems
+      });
+      this.updateHTML();
+      srcEvent.preventDefault();
+      return visible;
+    }
+
+    return false;
+  }
+
+  hide(): void {
+    this.setProps({visible: false});
+  }
+}

package/src/fps-widget.tsx

@@ -0,0 +1,67 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Widget, WidgetProps} from '@deck.gl/core';
+import type {WidgetPlacement, Deck} from '@deck.gl/core';
+
+/** Properties for the FpsWidget. */
+export type FpsWidgetProps = WidgetProps & {
+  /** Widget positioning within the view. Default 'top-left'. */
+  placement?: WidgetPlacement;
+};
+
+/**
+ * Displays the average frames per second reported by the Deck instance.
+ */
+export class FpsWidget extends Widget<FpsWidgetProps> {
+  static defaultProps: Required<FpsWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'fps',
+    placement: 'top-left'
+  };
+
+  className = 'deck-widget-fps';
+  placement: WidgetPlacement = 'top-left';
+
+  private _lastFps: number = -1;
+
+  constructor(props: FpsWidgetProps = {}) {
+    super(props, FpsWidget.defaultProps);
+    this.placement = props.placement ?? this.placement;
+  }
+
+  setProps(props: Partial<FpsWidgetProps>): void {
+    if (props.placement) {
+      this.placement = props.placement;
+    }
+    super.setProps(props);
+  }
+
+  onRenderHTML(rootElement: HTMLElement): void {
+    const fps = this._getFps();
+    rootElement.innerText = `FPS:\n${fps}`;
+    rootElement.style.backgroundColor = 'white';
+    rootElement.style.fontFamily = 'monospace';
+    rootElement.style.fontSize = '8px';
+    rootElement.style.fontWeight = '700'; // Make font bolder on click
+  }
+
+  onRedraw({}: {viewports: any[]; layers: any[]}): void {
+    const fps = this._getFps();
+    if (fps !== this._lastFps) {
+      this._lastFps = fps;
+      this.updateHTML();
+    }
+  }
+
+  onAdd({}: {deck: Deck<any>; viewId: string | null}): void {
+    this._lastFps = this._getFps();
+    this.updateHTML();
+  }
+
+  _getFps(): number {
+    // @ts-expect-error protected
+    return Math.round(this.deck.metrics.fps ?? 0);
+  }
+}

package/src/fullscreen-widget.tsx

@@ -3,121 +3,68 @@
 // Copyright (c) vis.gl contributors
 
 /* global document */
-import {
-  _deepEqual as deepEqual,
-  _applyStyles as applyStyles,
-  _removeStyles as removeStyles
-} from '@deck.gl/core';
-import type {Deck, Widget, WidgetPlacement} from '@deck.gl/core';
+import {Widget, type WidgetProps, type WidgetPlacement} from '@deck.gl/core';
 import {render} from 'preact';
-import {IconButton} from './components';
+import {IconButton} from './lib/components/icon-button';
 
-export type FullscreenWidgetProps = {
+/* eslint-enable max-len */
+
+export type FullscreenWidgetProps = WidgetProps & {
   id?: string;
-  /**
-   * Widget positioning within the view. Default 'top-left'.
-   */
+  /** Widget positioning within the view. Default 'top-left'. */
   placement?: WidgetPlacement;
-  /**
-   * A [compatible DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen#Compatible_elements) which should be made full screen.
-   * By default, the map container element will be made full screen.
-   */
-  /* eslint-enable max-len */
-  container?: HTMLElement;
-  /**
-   * Tooltip message when out of fullscreen.
-   */
+  /** Tooltip message when out of fullscreen. */
   enterLabel?: string;
-  /**
-   * Tooltip message when fullscreen.
-   */
+  /** Tooltip message when fullscreen. */
   exitLabel?: string;
   /**
-   * CSS inline style overrides.
+   * A compatible DOM element which should be made full screen. By default, the map container element will be made full screen.
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen#Compatible_elements
    */
-  style?: Partial<CSSStyleDeclaration>;
-  /**
-   * Additional CSS class.
-   */
-  className?: string;
+  container?: HTMLElement;
 };
 
-export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
-  id = 'fullscreen';
-  props: FullscreenWidgetProps;
+export class FullscreenWidget extends Widget<FullscreenWidgetProps> {
+  static defaultProps: Required<FullscreenWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'fullscreen',
+    placement: 'top-left',
+    enterLabel: 'Enter Fullscreen',
+    exitLabel: 'Exit Fullscreen',
+    container: undefined!
+  };
+
+  className = 'deck-widget-fullscreen';
   placement: WidgetPlacement = 'top-left';
-
-  deck?: Deck<any>;
-  element?: HTMLDivElement;
-
   fullscreen: boolean = false;
 
-  constructor(props: FullscreenWidgetProps) {
-    this.id = props.id ?? this.id;
+  constructor(props: FullscreenWidgetProps = {}) {
+    super(props, FullscreenWidget.defaultProps);
     this.placement = props.placement ?? this.placement;
-
-    this.props = {
-      ...props,
-      enterLabel: props.enterLabel ?? 'Enter Fullscreen',
-      exitLabel: props.exitLabel ?? 'Exit Fullscreen',
-      style: props.style ?? {}
-    };
   }
 
-  onAdd({deck}: {deck: Deck<any>}): HTMLDivElement {
-    const {style, className} = this.props;
-    const el = document.createElement('div');
-    el.classList.add('deck-widget', 'deck-widget-fullscreen');
-    if (className) el.classList.add(className);
-    applyStyles(el, style);
-    this.deck = deck;
-    this.element = el;
-    this.update();
+  onAdd(): void {
     document.addEventListener('fullscreenchange', this.onFullscreenChange.bind(this));
-    return el;
   }
 
   onRemove() {
-    this.deck = undefined;
-    this.element = undefined;
     document.removeEventListener('fullscreenchange', this.onFullscreenChange.bind(this));
   }
 
-  private update() {
-    const {enterLabel, exitLabel} = this.props;
-    const element = this.element;
-    if (!element) {
-      return;
-    }
-
-    const ui = (
+  onRenderHTML(rootElement: HTMLElement): void {
+    render(
       <IconButton
         onClick={this.handleClick.bind(this)}
-        label={this.fullscreen ? exitLabel : enterLabel}
+        label={this.fullscreen ? this.props.exitLabel : this.props.enterLabel}
         className={this.fullscreen ? 'deck-widget-fullscreen-exit' : 'deck-widget-fullscreen-enter'}
-      />
+      />,
+      rootElement
     );
-    render(ui, element);
   }
 
   setProps(props: Partial<FullscreenWidgetProps>) {
     this.placement = props.placement ?? this.placement;
-    const oldProps = this.props;
-    const el = this.element;
-    if (el) {
-      if (oldProps.className !== props.className) {
-        if (oldProps.className) el.classList.remove(oldProps.className);
-        if (props.className) el.classList.add(props.className);
-      }
-
-      if (!deepEqual(oldProps.style, props.style, 1)) {
-        removeStyles(el, oldProps.style);
-        applyStyles(el, props.style);
-      }
-    }
-
-    Object.assign(this.props, props);
-    this.update();
+    super.setProps(props);
   }
 
   getContainer() {
@@ -130,7 +77,7 @@ export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
     if (prevFullscreen !== fullscreen) {
       this.fullscreen = !this.fullscreen;
     }
-    this.update();
+    this.updateHTML();
   }
 
   async handleClick() {
@@ -139,7 +86,7 @@ export class FullscreenWidget implements Widget<FullscreenWidgetProps> {
     } else {
       await this.requestFullscreen();
     }
-    this.update();
+    this.updateHTML();
   }
 
   async requestFullscreen() {

package/src/geocoder-widget.tsx

@@ -0,0 +1,209 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Widget, WidgetProps} from '@deck.gl/core';
+import type {WidgetPlacement, Viewport} from '@deck.gl/core';
+import {FlyToInterpolator, LinearInterpolator} from '@deck.gl/core';
+import {render} from 'preact';
+import {DropdownMenu} from './lib/components/dropdown-menu';
+import {type Geocoder} from './lib/geocode/geocoder';
+import {GeocoderHistory} from './lib/geocode/geocoder-history';
+import {
+  GoogleGeocoder,
+  MapboxGeocoder,
+  OpenCageGeocoder,
+  CoordinatesGeocoder,
+  CurrentLocationGeocoder
+} from './lib/geocode/geocoders';
+
+/** @todo - is the the best we can do? */
+type ViewState = Record<string, unknown>;
+
+const CURRENT_LOCATION = 'current';
+
+/** Properties for the GeocoderWidget */
+export type GeocoderWidgetProps = WidgetProps & {
+  viewId?: string;
+  /** Widget positioning within the view. Default 'top-left'. */
+  placement?: WidgetPlacement;
+  /** Tooltip message */
+  label?: string;
+  transitionDuration?: number;
+  /** Geocoding service selector, for declarative usage */
+  geocoder?: 'google' | 'mapbox' | 'opencage' | 'coordinates' | 'custom';
+  /** Custom geocoding service (Used when geocoder = 'custom') */
+  customGeocoder?: Geocoder;
+  /** API key used for geocoding services */
+  apiKey?: string;
+  /** Whether to use geolocation @note Experimental*/
+  _geolocation?: boolean;
+};
+
+/**
+ * A widget that display a text box that lets user type in a location
+ * and a button that moves the view to that location.
+ * @todo For now only supports coordinates, Could be extended with location service integrations.
+ */
+export class GeocoderWidget extends Widget<GeocoderWidgetProps> {
+  static defaultProps: Required<GeocoderWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'geolocate',
+    viewId: undefined!,
+    placement: 'top-left',
+    label: 'Geolocate',
+    transitionDuration: 200,
+    geocoder: 'coordinates',
+    customGeocoder: CoordinatesGeocoder,
+    apiKey: '',
+    _geolocation: false
+  };
+
+  className = 'deck-widget-geocoder';
+  placement: WidgetPlacement = 'top-left';
+
+  geocodeHistory = new GeocoderHistory({});
+  addressText: string = '';
+  geocoder: Geocoder = CoordinatesGeocoder;
+
+  constructor(props: GeocoderWidgetProps = {}) {
+    super(props, GeocoderWidget.defaultProps);
+    this.placement = props.placement ?? this.placement;
+    this.setProps(props);
+    this.geocoder = getGeocoder(props);
+  }
+
+  setProps(props: Partial<GeocoderWidgetProps>): void {
+    super.setProps(props);
+    this.placement = props.placement ?? this.placement;
+    this.geocoder = getGeocoder(this.props);
+    if (this.geocoder.requiresApiKey && !this.props.apiKey) {
+      throw new Error(`API key is required for the ${this.geocoder.name} geocoder`);
+    }
+  }
+
+  onRenderHTML(rootElement: HTMLElement): void {
+    const menuItems = this.props._geolocation
+      ? [CURRENT_LOCATION, ...this.geocodeHistory.addressHistory]
+      : [...this.geocodeHistory.addressHistory];
+    render(
+      <div
+        className="deck-widget-geocoder"
+        style={{
+          pointerEvents: 'auto',
+          display: 'flex',
+          alignItems: 'center',
+          flexWrap: 'wrap' // Allows wrapping on smaller screens
+        }}
+      >
+        <input
+          type="text"
+          placeholder={this.geocoder.placeholderLocation ?? 'Enter address or location'}
+          value={this.geocodeHistory.addressText}
+          // @ts-expect-error event type
+          onInput={e => this.setInput(e.target?.value || '')}
+          onKeyPress={this.handleKeyPress}
+          style={{
+            flex: '1 1 auto',
+            minWidth: '200px',
+            margin: 0,
+            padding: '8px',
+            boxSizing: 'border-box'
+          }}
+        />
+        <DropdownMenu
+          menuItems={menuItems}
+          onSelect={this.handleSelect}
+          style={{
+            margin: 2,
+            padding: '4px 2px',
+            boxSizing: 'border-box'
+          }}
+        />
+        {this.geocodeHistory.errorText && (
+          <div className="error">{this.geocodeHistory.errorText}</div>
+        )}
+      </div>,
+      rootElement
+    );
+  }
+
+  setInput = (text: string) => {
+    this.addressText = text;
+  };
+
+  handleKeyPress = e => {
+    if (e.key === 'Enter') {
+      this.handleSubmit();
+    }
+  };
+
+  handleSelect = (address: string) => {
+    this.setInput(address);
+    this.handleSubmit();
+  };
+
+  /** Sync wrapper for async geocode() */
+  handleSubmit = () => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    this.geocode(this.addressText);
+  };
+
+  /** Perform geocoding */
+  geocode: (address: string) => Promise<void> = async address => {
+    const useGeolocation = this.props._geolocation && address === CURRENT_LOCATION;
+    const geocoder = useGeolocation ? CurrentLocationGeocoder : this.geocoder;
+    const coordinates = await this.geocodeHistory.geocode(
+      geocoder,
+      this.addressText,
+      this.props.apiKey
+    );
+    if (coordinates) {
+      this.setViewState(coordinates);
+    }
+  };
+
+  // TODO - MOVE TO WIDGETIMPL?
+  setViewState(viewState: ViewState) {
+    const viewId = this.props.viewId || (viewState?.id as string) || 'default-view';
+    const viewport = this.viewports[viewId] || {};
+    const nextViewState: ViewState = {
+      ...viewport,
+      ...viewState
+    };
+    if (this.props.transitionDuration > 0) {
+      nextViewState.transitionDuration = this.props.transitionDuration;
+      nextViewState.transitionInterpolator =
+        'latitude' in nextViewState ? new FlyToInterpolator() : new LinearInterpolator();
+    }
+
+    // @ts-ignore Using private method temporary until there's a public one
+    this.deck._onViewStateChange({viewId, viewState: nextViewState, interactionState: {}});
+  }
+
+  onViewportChange(viewport: Viewport) {
+    this.viewports[viewport.id] = viewport;
+  }
+
+  viewports: Record<string, Viewport> = {};
+}
+
+function getGeocoder(props: {geocoder?: string; customGeocoder?: Geocoder}): Geocoder {
+  switch (props.geocoder) {
+    case 'google':
+      return GoogleGeocoder;
+    case 'mapbox':
+      return MapboxGeocoder;
+    case 'opencage':
+      return OpenCageGeocoder;
+    case 'coordinates':
+      return CoordinatesGeocoder;
+    case 'custom':
+      if (!props.customGeocoder) {
+        throw new Error('Custom geocoder is not defined');
+      }
+      return props.customGeocoder;
+    default:
+      throw new Error(`Unknown geocoder: ${props.geocoder}`);
+  }
+}