@deck.gl/widgets 9.2.10 → 9.3.0-alpha.1

package/src/context-menu-widget.tsx

@@ -5,32 +5,33 @@
 /* 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, SimpleMenuProps} 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;
+  getMenuItems: (
+    info: PickingInfo,
+    widget: ContextMenuWidget
+  ) => SimpleMenuProps['menuItems'] | null;
   /** Callback with the selected item */
-  onMenuItemSelected?: (key: string, pickInfo: PickingInfo | null) => void;
+  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 +39,92 @@ 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)
+    onMenuItemSelected: () => {},
+    placement: 'bottom-start',
+    offset: 10,
+    arrow: false
   };
 
   className = 'deck-widget-context-menu';
   placement = 'fill' as const;
 
-  pickInfo: PickingInfo | null = null;
+  menu: {
+    items: SimpleMenuProps['menuItems'];
+    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.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;
 
-    return false;
+    const style = {
+      pointerEvents: 'auto',
+      position: 'static',
+      ...this.props.style
+    };
+
+    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/index.ts

@@ -19,7 +19,9 @@ export {ViewSelectorWidget as _ViewSelectorWidget} from './view-selector-widget'
 
 // Information widgets
 export {InfoWidget as _InfoWidget} from './info-widget';
+export {PopupWidget} from './popup-widget';
 export {ContextMenuWidget as _ContextMenuWidget} from './context-menu-widget';
+export {ScrollbarWidget} from './scrollbar-widget';
 
 // Control widgets
 export {TimelineWidget as _TimelineWidget} from './timeline-widget';
@@ -48,6 +50,7 @@ export type {SplitterWidgetProps} from './splitter-widget';
 export type {TimelineWidgetProps} from './timeline-widget';
 export type {ViewSelectorWidgetProps} from './view-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 +58,18 @@ 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';