@deck.gl/widgets 9.2.11 → 9.3.0-alpha.2

package/src/context-menu-widget.tsx

@@ -5,32 +5,32 @@
 /* global document */
 import {Widget} from '@deck.gl/core';
 import type {Deck, PickingInfo, WidgetProps} 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;
-};
+import {render, type JSX} from 'preact';
+import {SimpleMenu, type MenuItem} from './lib/components/dropdown-menu';
+import {Popover, type PopoverProps} from './lib/components/popover';
 
 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;
+  /** Menu items for the menu. */
+  menuItems?: MenuItem[];
+  /** Callback to provide menu items for the menu given the picked object. Overrides `menuItems` */
+  getMenuItems?: (info: PickingInfo, widget: ContextMenuWidget) => MenuItem[] | null;
+  /** Callback when a menu item is selected */
+  onMenuItemSelected?: (value: string, pickInfo: PickingInfo | null) => void;
+  /** Position menu relative to the anchor.
+   * @default 'bottom-start'
+   */
+  placement?: PopoverProps['placement'];
+  /** Pixel offset
+   * @default 10
+   */
+  offset?: PopoverProps['offset'];
+  /**
+   * Show an arrow pointing at the anchor. Optionally accepts a pixel size.
+   * @default false
+   */
+  arrow?: PopoverProps['arrow'];
 };
 
 export class ContextMenuWidget extends Widget<ContextMenuWidgetProps> {
@@ -38,83 +38,93 @@ export class ContextMenuWidget extends Widget<ContextMenuWidgetProps> {
     ...Widget.defaultProps,
     id: 'context',
     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)
+    getMenuItems: undefined!,
+    onMenuItemSelected: () => {},
+    placement: 'bottom-start',
+    offset: 10,
+    arrow: false
   };
 
   className = 'deck-widget-context-menu';
   placement = 'fill' as const;
 
-  pickInfo: PickingInfo | null = null;
+  menu: {
+    items: MenuItem[];
+    pickInfo: PickingInfo;
+  } | null = null;
 
   constructor(props: ContextMenuWidgetProps) {
     super(props);
-    this.pickInfo = null;
     this.setProps(this.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());
+  onAdd({deck}: {deck: Deck<any>}) {
     deck.getCanvas()?.addEventListener('contextmenu', event => this.handleContextMenu(event));
-    return element;
   }
 
-  onRenderHTML(rootElement: HTMLElement): void {
-    const {visible, position, menuItems} = this.props;
+  handleContextMenu(srcEvent: MouseEvent) {
+    const targetRect = (srcEvent.target as HTMLElement).getBoundingClientRect();
+    const x = srcEvent.clientX - targetRect.x;
+    const y = srcEvent.clientY - targetRect.y;
 
-    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);
+    const pickInfo = this.deck?.pickObject({x, y}) || {
+      x,
+      y,
+      picked: false,
+      layer: null,
+      color: null,
+      index: -1,
+      pixelRatio: 1
+    };
+    const menuItems = this.props.getMenuItems?.(pickInfo, this) || this.props.menuItems;
+    this.menu =
+      menuItems.length > 0
+        ? {
+            items: menuItems,
+            pickInfo
+          }
+        : null;
+    srcEvent.preventDefault();
+    this.updateHTML();
   }
 
-  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;
+  onRenderHTML(rootElement: HTMLElement): void {
+    if (!this.menu) {
+      render(null, rootElement);
+      return;
     }
+    const {items, pickInfo} = this.menu;
+
+    const style = {
+      pointerEvents: 'auto',
+      position: 'static',
+      ...this.props.style
+    };
 
-    return false;
+    const ui = (
+      <Popover
+        x={pickInfo.x}
+        y={pickInfo.y}
+        placement={this.props.placement}
+        arrow={this.props.arrow}
+        arrowColor="var(--menu-background, #fff)"
+        offset={this.props.offset}
+      >
+        <SimpleMenu
+          menuItems={items}
+          onSelect={value => this.props.onMenuItemSelected(value, pickInfo)}
+          style={style}
+          isOpen
+          onClose={() => this.hide()}
+        />
+      </Popover>
+    );
+    render(ui, rootElement);
   }
 
-  hide(): void {
-    this.setProps({visible: false});
+  hide() {
+    this.menu = null;
+    this.updateHTML();
   }
 }

package/src/fullscreen-widget.tsx

@@ -74,7 +74,7 @@ export class FullscreenWidget extends Widget<FullscreenWidgetProps> {
   }
 
   getContainer() {
-    return this.props.container || this.deck?.getCanvas()?.parentElement;
+    return this.props.container || this.deck?.props.parent || this.deck?.getCanvas()?.parentElement;
   }
 
   onFullscreenChange() {

package/src/geocoder-widget.tsx

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import {Widget} from '@deck.gl/core';
-import type {WidgetPlacement, Viewport, WidgetProps} from '@deck.gl/core';
+import type {WidgetPlacement, WidgetProps} from '@deck.gl/core';
 import {FlyToInterpolator, LinearInterpolator} from '@deck.gl/core';
 import {render} from 'preact';
 import {DropdownMenu, type MenuItem} from './lib/components/dropdown-menu';
@@ -157,7 +157,7 @@ export class GeocoderWidget extends Widget<GeocoderWidgetProps> {
     try {
       const coordinates = await CurrentLocationGeocoder.geocode();
       if (coordinates) {
-        this.setViewState(coordinates);
+        this.flyTo(coordinates);
       }
     } catch (error) {
       this.geocodeHistory.errorText = error instanceof Error ? error.message : 'Location error';
@@ -181,33 +181,26 @@ export class GeocoderWidget extends Widget<GeocoderWidgetProps> {
       this.updateHTML();
     }
     if (coordinates) {
-      this.setViewState(coordinates);
+      this.flyTo(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();
+  flyTo(viewState: ViewState) {
+    const viewIds = this.viewId ? [this.viewId] : (this.deck?.getViews().map(v => v.id) ?? []);
+    for (const viewId of viewIds) {
+      const currentViewState = this.getViewState(viewId);
+      const nextViewState: ViewState = {
+        ...currentViewState,
+        ...viewState
+      };
+      if (this.props.transitionDuration > 0) {
+        nextViewState.transitionDuration = this.props.transitionDuration;
+        nextViewState.transitionInterpolator =
+          'latitude' in nextViewState ? new FlyToInterpolator() : new LinearInterpolator();
+      }
+      this.setViewState(viewId, nextViewState);
     }
-
-    // @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 {

package/src/gimbal-widget.tsx

@@ -119,7 +119,7 @@ export class GimbalWidget extends Widget<GimbalWidgetProps> {
   }
 
   resetOrbitView(viewport?: Viewport) {
-    const viewId = this.getViewId(viewport);
+    const viewId = this.viewId || viewport?.id || 'OrbitView';
     const viewState = this.getViewState(viewId);
     if ('rotationOrbit' in viewState || 'rotationX' in viewState) {
       const nextViewState = {
@@ -131,13 +131,13 @@ export class GimbalWidget extends Widget<GimbalWidgetProps> {
           transitionProps: ['rotationOrbit', 'rotationX']
         })
       };
-      // @ts-ignore Using private method temporary until there's a public one
-      this.deck._onViewStateChange({viewId, viewState: nextViewState, interactionState: {}});
+      this.setViewState(viewId, nextViewState);
     }
   }
 
   getNormalizedRotation(viewport?: Viewport): {rotationOrbit: number; rotationX: number} {
-    const viewState = this.getViewState(this.getViewId(viewport));
+    const viewId = this.viewId || viewport?.id || 'OrbitView';
+    const viewState = this.getViewState(viewId);
     const [rz, rx] = this.getRotation(viewState);
     const rotationOrbit = normalizeAndClampAngle(rz);
     const rotationX = normalizeAndClampAngle(rx);
@@ -150,28 +150,6 @@ export class GimbalWidget extends Widget<GimbalWidgetProps> {
     }
     return [0, 0];
   }
-
-  // Move to Widget/WidgetManager?
-
-  getViewId(viewport?: Viewport) {
-    const viewId = this.viewId || viewport?.id || 'OrbitView';
-    return viewId;
-  }
-
-  getViewState(viewId: string) {
-    const viewManager = this.getViewManager();
-    const viewState = (viewId && viewManager.getViewState(viewId)) || viewManager.viewState;
-    return viewState;
-  }
-
-  getViewManager() {
-    // @ts-expect-error protected
-    const viewManager = this.deck?.viewManager;
-    if (!viewManager) {
-      throw new Error('wigdet must be added to a deck instance');
-    }
-    return viewManager;
-  }
 }
 
 function normalizeAndClampAngle(angle: number): number {

package/src/icon-widget.tsx

@@ -0,0 +1,69 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {WidgetPlacement, WidgetProps} from '@deck.gl/core';
+import {render, type JSX} from 'preact';
+import {Widget} from '@deck.gl/core';
+import {IconButton} from './lib/components/icon-button';
+
+export type IconWidgetProps = WidgetProps & {
+  /** Widget positioning within the view. Default 'bottom-left'. */
+  placement?: WidgetPlacement;
+  /** View to attach to and interact with. Required when using multiple views. */
+  viewId?: string | null;
+  /** Data url to display as icon */
+  icon: string;
+  /** Tooltip label */
+  label?: string;
+  /** Icon color, a CSS Color string */
+  color?: string;
+  /** Callback when the widget is clicked */
+  onClick?: () => void;
+};
+
+/**
+ * A generic widget that displays a button with icon or text content.
+ */
+export class IconWidget extends Widget<IconWidgetProps> {
+  static defaultProps: Required<IconWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'icon',
+    placement: 'top-left',
+    viewId: null,
+    icon: '',
+    label: '',
+    color: '',
+    onClick: undefined!
+  };
+
+  className = '';
+  placement: WidgetPlacement = 'top-left';
+
+  constructor(props: IconWidgetProps) {
+    super(props);
+    this.setProps(this.props);
+  }
+
+  setProps(props: Partial<IconWidgetProps>) {
+    this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId;
+    super.setProps(props);
+  }
+
+  onRenderHTML(rootElement: HTMLElement): void {
+    const {className, style, icon, color, label, onClick} = this.props;
+
+    render(
+      <IconButton
+        className={className}
+        style={style as JSX.CSSProperties}
+        color={color}
+        icon={icon}
+        label={label}
+        onClick={onClick}
+      />,
+      rootElement
+    );
+  }
+}

package/src/index.ts

@@ -15,20 +15,23 @@ export {GeocoderWidget as _GeocoderWidget} from './geocoder-widget';
 // View widgets
 export {FullscreenWidget} from './fullscreen-widget';
 export {SplitterWidget as _SplitterWidget} from './splitter-widget';
-export {ViewSelectorWidget as _ViewSelectorWidget} from './view-selector-widget';
 
 // Information widgets
-export {InfoWidget as _InfoWidget} from './info-widget';
-export {ContextMenuWidget as _ContextMenuWidget} from './context-menu-widget';
+export {InfoWidget} from './info-widget';
+export {PopupWidget} from './popup-widget';
+export {ContextMenuWidget} from './context-menu-widget';
+export {ScrollbarWidget} from './scrollbar-widget';
 
 // Control widgets
+export {IconWidget} from './icon-widget';
+export {ToggleWidget} from './toggle-widget';
+export {SelectorWidget} from './selector-widget';
 export {TimelineWidget as _TimelineWidget} from './timeline-widget';
 
 // Utility widgets
 export {ScreenshotWidget} from './screenshot-widget';
-export {ThemeWidget as _ThemeWidget} from './theme-widget';
-export {LoadingWidget as _LoadingWidget} from './loading-widget';
-export {FpsWidget as _FpsWidget} from './fps-widget';
+export {ThemeWidget} from './theme-widget';
+export {LoadingWidget} from './loading-widget';
 export {StatsWidget as _StatsWidget} from './stats-widget';
 
 export type {FullscreenWidgetProps} from './fullscreen-widget';
@@ -38,16 +41,19 @@ export type {ScreenshotWidgetProps} from './screenshot-widget';
 export type {ResetViewWidgetProps} from './reset-view-widget';
 export type {GeocoderWidgetProps} from './geocoder-widget';
 export type {LoadingWidgetProps} from './loading-widget';
-export type {FpsWidgetProps} from './fps-widget';
+export type {IconWidgetProps} from './icon-widget';
+export type {ToggleWidgetProps} from './toggle-widget';
 export type {ScaleWidgetProps} from './scale-widget';
 export type {ThemeWidgetProps} from './theme-widget';
 export type {InfoWidgetProps} from './info-widget';
+export type {PopupWidgetProps} from './popup-widget';
 export type {StatsWidgetProps} from './stats-widget';
 export type {ContextMenuWidgetProps} from './context-menu-widget';
 export type {SplitterWidgetProps} from './splitter-widget';
 export type {TimelineWidgetProps} from './timeline-widget';
-export type {ViewSelectorWidgetProps} from './view-selector-widget';
+export type {SelectorWidgetProps} from './selector-widget';
 export type {GimbalWidgetProps} from './gimbal-widget';
+export type {ContentBounds, ScrollbarWidgetProps, ScrollbarDecoration} from './scrollbar-widget';
 
 export {LightTheme, DarkTheme, LightGlassTheme, DarkGlassTheme} from './themes';
 export type {DeckWidgetTheme} from './themes';
@@ -55,16 +61,17 @@ export type {DeckWidgetTheme} from './themes';
 // Experimental preact components
 export {ButtonGroup as _ButtonGroup, type ButtonGroupProps} from './lib/components/button-group';
 export {IconButton as _IconButton, type IconButtonProps} from './lib/components/icon-button';
-export {
-  GroupedIconButton as _GroupedIconButton,
-  type GroupedIconButtonProps
-} from './lib/components/grouped-icon-button';
 export {
   DropdownMenu as _DropdownMenu,
-  type DropdownMenuProps
+  type DropdownMenuProps,
+  SimpleMenu as _SimpleMenu,
+  type SimpleMenuProps
 } from './lib/components/dropdown-menu';
-export {SimpleMenu as _SimpleMenu, type SimpleMenuProps} from './lib/components/simple-menu';
-export {IconMenu as _IconMenu, type IconMenuProps} from './lib/components/icon-menu';
+export {
+  RangeInput as _RangeInput,
+  type RangeInputProps,
+  type RangeInputDecoration
+} from './lib/components/range-input';
 
 // Experimental geocoders. May be removed, use at your own risk!
 export {type Geocoder} from './lib/geocode/geocoder';