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

package/src/context-menu-widget.tsx

@@ -6,18 +6,17 @@
 import {Widget} from '@deck.gl/core';
 import type {Deck, PickingInfo, WidgetProps} from '@deck.gl/core';
 import {render, type JSX} from 'preact';
-import {SimpleMenu, SimpleMenuProps} from './lib/components/dropdown-menu';
+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;
-  /** Provide menu items for the menu given the picked object */
-  getMenuItems: (
-    info: PickingInfo,
-    widget: ContextMenuWidget
-  ) => SimpleMenuProps['menuItems'] | null;
-  /** Callback with the selected item */
+  /** 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'
@@ -39,6 +38,7 @@ export class ContextMenuWidget extends Widget<ContextMenuWidgetProps> {
     ...Widget.defaultProps,
     id: 'context',
     viewId: null,
+    menuItems: [],
     getMenuItems: undefined!,
     onMenuItemSelected: () => {},
     placement: 'bottom-start',
@@ -50,7 +50,7 @@ export class ContextMenuWidget extends Widget<ContextMenuWidgetProps> {
   placement = 'fill' as const;
 
   menu: {
-    items: SimpleMenuProps['menuItems'];
+    items: MenuItem[];
     pickInfo: PickingInfo;
   } | null = null;
 
@@ -77,7 +77,7 @@ export class ContextMenuWidget extends Widget<ContextMenuWidgetProps> {
       index: -1,
       pixelRatio: 1
     };
-    const menuItems = this.props.getMenuItems(pickInfo, this) || [];
+    const menuItems = this.props.getMenuItems?.(pickInfo, this) || this.props.menuItems;
     this.menu =
       menuItems.length > 0
         ? {

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,22 +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 {InfoWidget} from './info-widget';
 export {PopupWidget} from './popup-widget';
-export {ContextMenuWidget as _ContextMenuWidget} from './context-menu-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';
@@ -40,15 +41,17 @@ 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';
 
@@ -64,7 +67,6 @@ export {
   SimpleMenu as _SimpleMenu,
   type SimpleMenuProps
 } from './lib/components/dropdown-menu';
-export {IconMenu as _IconMenu, type IconMenuProps} from './lib/components/icon-menu';
 export {
   RangeInput as _RangeInput,
   type RangeInputProps,

package/src/info-widget.tsx

@@ -81,6 +81,13 @@ export class InfoWidget extends Widget<InfoWidgetProps> {
     this.deck = deck;
   }
 
+  onRemove() {
+    // Invoke clean up of preact hooks
+    if (this.rootElement) {
+      render(null, this.rootElement);
+    }
+  }
+
   onViewportChange(viewport) {
     this.viewport = viewport;
     this.updateHTML();

package/src/lib/components/dropdown-menu.tsx

@@ -4,12 +4,20 @@
 
 import {type JSX, type ComponentChild} from 'preact';
 import {useState, useRef, useEffect} from 'preact/hooks';
+import {getCSSMask} from '../data-url';
 
-export type MenuItem = string | {label: string; value?: string; icon?: string};
+export type MenuItem =
+  | string
+  | {
+      value?: string;
+      label: string;
+      icon?: string;
+      onSelect?: () => void;
+    };
 
 export type DropdownMenuProps = {
   menuItems: MenuItem[];
-  onSelect: (value: string) => void;
+  onSelect?: (value: string) => void;
   style?: Partial<CSSStyleDeclaration>;
 };
 
@@ -52,22 +60,24 @@ export type SimpleMenuProps = DropdownMenuProps & {
 export const SimpleMenu = (props: SimpleMenuProps) => {
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  const handleClickOutside = (event: MouseEvent) => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-      props.onClose();
-    }
-  };
-
   useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        props.onClose();
+      }
+    };
     document.addEventListener('mousedown', handleClickOutside);
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
 
-  const handleSelect = (value?: string) => {
+  const handleSelect = (value: string | undefined, item: MenuItem) => {
     if (value) {
-      props.onSelect(value);
+      if (typeof item === 'object') {
+        item.onSelect?.();
+      }
+      props.onSelect?.(value);
       props.onClose();
     }
   };
@@ -89,13 +99,10 @@ export const SimpleMenu = (props: SimpleMenuProps) => {
               <li
                 className={`deck-widget-dropdown-item ${value ? '' : 'disabled'}`}
                 key={i}
-                onClick={() => handleSelect(value)}
+                onClick={() => handleSelect(value, item)}
               >
                 {icon && (
-                  <span
-                    className="deck-widget-dropdown-item-icon"
-                    style={{maskImage: `url("${icon}")`, WebkitMaskImage: `url("${icon}")`}}
-                  />
+                  <span className="deck-widget-dropdown-item-icon" style={getCSSMask(icon)} />
                 )}
                 {getMenuItemLabel(item)}
               </li>

package/src/lib/components/icon-button.tsx

@@ -3,26 +3,38 @@
 // Copyright (c) vis.gl contributors
 
 import type {ComponentChildren, JSX} from 'preact';
+import {useMemo} from 'preact/hooks';
+import {getCSSMask} from '../data-url';
 
 export type IconButtonProps = {
   className?: string;
+  icon?: string;
   label?: string;
+  color?: string;
+  style?: JSX.CSSProperties;
   onClick?: JSX.MouseEventHandler<HTMLButtonElement>;
   children?: ComponentChildren;
 };
 
 /** Renders a button component with widget CSS */
 export const IconButton = (props: IconButtonProps) => {
-  const {className = '', label, onClick, children} = props;
+  const {className = '', style, color, icon, label, onClick, children} = props;
+
+  const iconStyle = useMemo(() => {
+    const css: JSX.CSSProperties | undefined = getCSSMask(icon);
+    if (!color) return css;
+    return {...css, backgroundColor: color};
+  }, [color, icon]);
+
   return (
-    <div className="deck-widget-button">
+    <div className="deck-widget-button" style={style}>
       <button
         className={`deck-widget-icon-button ${className}`}
         type="button"
         onClick={onClick}
         title={label}
       >
-        {children ? children : <div className="deck-widget-icon" />}
+        {children ? children : <div className="deck-widget-icon" style={iconStyle} />}
       </button>
     </div>
   );

package/src/lib/components/popover.tsx

@@ -89,7 +89,7 @@ export const Popover = ({
 
   useMemo(() => {
     updaterRef.current?.();
-  }, [placement, arrowSize, pixelOffset]);
+  }, [x, y, placement, arrowSize, pixelOffset]);
 
   useEffect(() => {
     // initial mount

package/src/lib/data-url.ts

@@ -0,0 +1,5 @@
+export function getCSSMask(imageUrl: string | null | undefined) {
+  if (!imageUrl) return undefined;
+  const cssUrl = `url("${imageUrl.replace(/"/g, `'`)}")`;
+  return {maskImage: cssUrl, WebkitMaskImage: cssUrl};
+}

package/src/popup-widget.tsx

@@ -90,6 +90,13 @@ export class PopupWidget extends Widget<PopupWidgetProps> {
     this.deck = deck;
   }
 
+  onRemove() {
+    // Invoke clean up of preact hooks
+    if (this.rootElement) {
+      render(null, this.rootElement);
+    }
+  }
+
   onViewportChange(viewport) {
     this.viewport = viewport;
     this.updateHTML();

package/src/selector-widget.tsx

@@ -0,0 +1,111 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {render} from 'preact';
+import {Widget, type WidgetProps, type WidgetPlacement} from '@deck.gl/core';
+import {SimpleMenu, type MenuItem} from './lib/components/dropdown-menu';
+import {Popover, type PopoverProps} from './lib/components/popover';
+import {IconButton} from './lib/components/icon-button';
+
+export type SelectorWidgetOption<ValueT = string> = {
+  value: ValueT;
+  icon: string;
+  label?: string;
+};
+
+/** Properties for the ViewSelectorWidget */
+export type SelectorWidgetProps<ValueT = string> = 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;
+  options: SelectorWidgetOption<ValueT>[];
+  /** The initial value. Default to the first option. */
+  initialValue?: ValueT;
+  /** Callback invoked when the value changes */
+  onChange?: (value: ValueT) => 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 class SelectorWidget<ValueT = string> extends Widget<SelectorWidgetProps<ValueT>> {
+  static defaultProps: Required<SelectorWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'view-selector',
+    placement: 'top-left',
+    viewId: null,
+    initialValue: '',
+    options: [],
+    onChange: () => {}
+  };
+
+  className = 'deck-widget-selector';
+  placement: WidgetPlacement = 'top-left';
+  value: ValueT;
+  isOpen: {x: number; y: number; placement: PopoverProps['placement']} | false = false;
+
+  constructor(props: SelectorWidgetProps<ValueT>) {
+    super(props);
+    this.value = this.props.initialValue;
+    this.setProps(this.props);
+  }
+
+  setProps(props: Partial<SelectorWidgetProps<ValueT>>) {
+    this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId ?? this.viewId;
+    super.setProps(props);
+  }
+
+  onRenderHTML(rootElement: HTMLElement) {
+    const selectedOption =
+      this.props.options.find(opt => opt.value === this.value) ?? this.props.options[0];
+
+    render(
+      <div>
+        <IconButton
+          icon={selectedOption.icon}
+          label={selectedOption.label}
+          onClick={this._toggleMenu}
+        />
+        {this.isOpen && (
+          <Popover {...this.isOpen}>
+            <SimpleMenu
+              isOpen
+              style={{pointerEvents: 'auto', position: 'static'}}
+              menuItems={this.props.options as MenuItem[]}
+              onSelect={this._handleSelectMode}
+              onClose={this._toggleMenu}
+            />
+          </Popover>
+        )}
+      </div>,
+      rootElement
+    );
+  }
+
+  private _toggleMenu = () => {
+    if (this.isOpen) {
+      this.isOpen = false;
+    } else if (this.rootElement) {
+      this.isOpen = {
+        x: this.rootElement.offsetLeft,
+        y: this.rootElement.offsetTop,
+        placement: this.props.placement.includes('right') ? 'left-start' : 'right-start'
+      };
+    }
+    this.updateHTML();
+  };
+
+  private _handleSelectMode = (value: string) => {
+    this.value = value as ValueT;
+    this.props.onChange(value as ValueT);
+    this.updateHTML();
+  };
+}