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

package/src/info-widget.tsx

@@ -5,43 +5,67 @@
 import {Widget} from '@deck.gl/core';
 import type {Deck, PickingInfo, Viewport, WidgetProps} from '@deck.gl/core';
 import {render, JSX} from 'preact';
+import {Popover, type PopoverProps} from './lib/components/popover';
+import {UserContent} from './lib/components/user-content';
+
+export type TooltipContent = {
+  /** Anchor of the popup in world coordinates, e.g. [longitude, latitude].
+   * If not supplied, default to the mouse position where the popup was triggered.
+   */
+  position?: number[];
+  /** Text content to display in the popup */
+  text?: string;
+  /** HTML content to display in the popup. If supplied, `text` is ignored. */
+  html?: string;
+  /** HTML element to attach inside the popup. */
+  element?: HTMLElement | null;
+  /** Custom class name to add to the popup */
+  className?: string;
+  /** CSS style overrides of the popup */
+  style?: Partial<CSSStyleDeclaration>;
+};
 
 export type InfoWidgetProps = WidgetProps & {
   /** View to attach to and interact with. Required when using multiple views */
   viewId?: string | null;
   /** Determines the interaction mode of the widget */
-  mode: 'click' | 'hover' | 'static';
+  mode: 'click' | 'hover';
   /** Function to generate the popup contents from the selected element */
-  getTooltip?: (info: PickingInfo, widget: InfoWidget) => InfoWidgetProps | null;
-  /** Position at which to place popup (clicked point: [longitude, latitude]) */
-  position: [number, number];
-  /** Text content of popup */
-  text?: string;
-  /** Visibility of info widget */
-  visible?: boolean;
-  /** Minimum offset (in pixels) to keep the popup away from the canvas edges. */
-  minOffset?: number;
-  /** Callback triggered when the widget is clicked. */
-  onClick?: (widget: InfoWidget, info: PickingInfo) => boolean;
+  getTooltip?: (
+    info: PickingInfo,
+    widget: InfoWidget
+  ) => TooltipContent | string | null | undefined;
+  /** Position popup relative to the anchor.
+   * @default 'right'
+   */
+  placement?: PopoverProps['placement'];
+  /** Pixel offset
+   * @default 10
+   */
+  offset?: PopoverProps['offset'];
+  /**
+   * Show an arrow pointing at the anchor. Optionally accepts a pixel size.
+   * @default 10
+   */
+  arrow?: PopoverProps['arrow'];
 };
 
 export class InfoWidget extends Widget<InfoWidgetProps> {
   static defaultProps: Required<InfoWidgetProps> = {
     ...Widget.defaultProps,
     id: 'info',
-    position: [0, 0],
-    text: '',
-    visible: false,
-    minOffset: 0,
     viewId: null,
     mode: 'hover',
     getTooltip: undefined!,
-    onClick: undefined!
+    placement: 'right',
+    offset: 10,
+    arrow: 10
   };
 
   className = 'deck-widget-info';
   placement = 'fill' as const;
   viewport?: Viewport;
+  tooltip: Required<TooltipContent> | null = null;
 
   constructor(props: InfoWidgetProps) {
     super(props);
@@ -53,11 +77,15 @@ export class InfoWidget extends Widget<InfoWidgetProps> {
     super.setProps(props);
   }
 
-  onCreateRootElement(): HTMLDivElement {
-    const element = super.onCreateRootElement();
-    const style = {margin: '0px', top: '0px', left: '0px', position: 'absolute'};
-    Object.entries(style).forEach(([key, value]) => element.style.setProperty(key, value));
-    return element;
+  onAdd({deck}: {deck: Deck<any>; viewId: string | null}) {
+    this.deck = deck;
+  }
+
+  onRemove() {
+    // Invoke clean up of preact hooks
+    if (this.rootElement) {
+      render(null, this.rootElement);
+    }
   }
 
   onViewportChange(viewport) {
@@ -66,156 +94,71 @@ export class InfoWidget extends Widget<InfoWidgetProps> {
   }
 
   onHover(info: PickingInfo): void {
-    if (this.props.mode === 'hover' && this.props.getTooltip) {
-      const tooltip = this.props.getTooltip(info, this);
-      // hover tooltips should show over static and click infos
-      this.setProps({
-        visible: tooltip !== null,
-        ...tooltip,
-        style: {zIndex: '1', ...tooltip?.style}
-      });
+    if (this.props.mode === 'hover') {
+      this.tooltip = this._getTooltip(info);
     }
   }
 
-  onClick(info: PickingInfo): boolean {
-    if (this.props.mode === 'click' && this.props.getTooltip) {
-      const tooltip = this.props.getTooltip(info, this);
-      this.setProps({
-        visible: tooltip !== null,
-        ...tooltip
-      });
-      return tooltip !== null;
+  onClick(info: PickingInfo): void {
+    if (this.props.mode === 'click') {
+      this.tooltip = this._getTooltip(info);
     }
-
-    // Original behavior
-    return this.props.onClick?.(this, info) || false;
   }
 
-  onAdd({deck, viewId}: {deck: Deck<any>; viewId: string | null}) {
-    this.deck = deck;
-    if (!viewId) {
-      this.viewport = deck.getViewports()[0];
-    } else {
-      this.viewport = deck.getViewports().find(viewport => viewport.id === viewId);
-    }
+  protected _getTooltip(info: PickingInfo): Required<TooltipContent> | null {
+    if (!this.props.getTooltip) return null;
+
+    const content = this.props.getTooltip(info, this) ?? null;
+    if (content === null) return null;
+    const normalizedTooltip: TooltipContent =
+      typeof content === 'string' ? {text: content} : content;
+
+    const position = normalizedTooltip.position || info.coordinate;
+    if (!position) return null;
+
+    return {
+      position,
+      text: '',
+      html: '',
+      element: null,
+      className: '',
+      style: {},
+      ...normalizedTooltip
+    };
   }
 
   onRenderHTML(rootElement: HTMLElement): void {
-    if (!this.viewport) {
+    if (!this.viewport || this.tooltip === null) {
+      render(null, rootElement);
       return;
     }
-    const [longitude, latitude] = this.props.position;
+    const style: Partial<CSSStyleDeclaration> = {
+      ...this.props.style,
+      ...this.tooltip.style
+    };
     // Project the clicked geographic coordinate to canvas (x, y)
-    const [x, y] = this.viewport.project([longitude, latitude]);
-
-    const minOffset = this.props.minOffset || 0;
-    const gap = 10; // gap between clicked point and popup box
-    const arrowHeight = 8; // height of the triangle arrow
-    const arrowWidth = 16; // full width of the arrow
-
-    // Decide vertical orientation.
-    // If the clicked point is in the bottom half, place the popup above the point.
-    const isAbove = y > this.viewport.height / 2;
-    const background = (this.props.style && this.props.style.background) || 'rgba(255,255,255,0.9)';
+    const [x, y] = this.viewport.project(this.tooltip.position);
 
     // Render the popup container with a content box and a placeholder for the arrow.
     // The container is positioned absolutely (initially at 0,0) and will be repositioned after measuring.
-    const ui = this.props.visible ? (
-      <div className="popup-container" style={{position: 'absolute', left: 0, top: 0}}>
-        <div
-          className="popup-content"
-          style={{
-            background,
-            padding: '10px',
-            position: 'relative',
-            // Include any additional styles
-            ...(this.props.style as JSX.CSSProperties)
-          }}
-        >
-          {this.props.text}
-        </div>
-        <div className="popup-arrow" style={{position: 'absolute', width: '0px', height: '0px'}} />
-      </div>
-    ) : null;
+    const ui = (
+      <Popover
+        x={x}
+        y={y}
+        placement={this.props.placement}
+        arrow={this.props.arrow}
+        arrowColor="var(--menu-background, #fff)"
+        offset={this.props.offset}
+      >
+        <UserContent
+          className={`deck-widget-popup-content ${this.tooltip.className} ${this.props.className}`}
+          style={style as JSX.CSSProperties}
+          html={this.tooltip.html}
+          text={this.tooltip.text}
+          element={this.tooltip.element}
+        />
+      </Popover>
+    );
     render(ui, rootElement);
-
-    // After rendering, measure the content and adjust positioning so that:
-    // - The popup (with its arrow) does not cover the clicked point.
-    // - The arrow's tip points to the clicked point.
-    // - The popup remains within the canvas bounds, with minOffset.
-    // eslint-disable-next-line max-statements, complexity
-    requestAnimationFrame(() => {
-      if (!this.props.visible || !rootElement.firstChild || !this.viewport) return;
-
-      const container = rootElement.firstChild as HTMLElement;
-      const contentEl = container.querySelector('.popup-content') as HTMLElement;
-      const arrowEl = container.querySelector('.popup-arrow') as HTMLElement;
-      if (!contentEl || !arrowEl) return;
-      const contentRect = contentEl.getBoundingClientRect();
-      const popupWidth = contentRect.width;
-      const popupHeight = contentRect.height;
-
-      // Compute ideal horizontal position: center the popup on the clicked x
-      let computedLeft = x - popupWidth / 2;
-      // Compute vertical position based on orientation:
-      // If the popup is above, position its bottom edge (minus arrow & gap) at the clicked y.
-      // Otherwise, position its top edge (plus arrow & gap) at the clicked y.
-      let computedTop;
-      if (isAbove) {
-        computedTop = y - gap - arrowHeight - popupHeight;
-      } else {
-        computedTop = y + gap + arrowHeight;
-      }
-
-      // Ensure the popup (content) stays within horizontal bounds of the canvas
-      if (computedLeft < minOffset) {
-        computedLeft = minOffset;
-      }
-      if (computedLeft + popupWidth > this.viewport.width - minOffset) {
-        computedLeft = this.viewport.width - minOffset - popupWidth;
-      }
-
-      // Ensure the vertical position (including the arrow) stays within canvas bounds.
-      if (isAbove) {
-        if (computedTop < minOffset) {
-          computedTop = minOffset;
-        }
-      } else if (computedTop + popupHeight + arrowHeight > this.viewport.height - minOffset) {
-        computedTop = this.viewport.height - minOffset - popupHeight - arrowHeight;
-      }
-
-      // Update container position (remove any transform and set left/top explicitly)
-      container.style.left = `${computedLeft}px`;
-      container.style.top = `${computedTop}px`;
-      container.style.transform = '';
-
-      // Compute arrow's horizontal offset relative to the container.
-      // We want the arrow's tip to align with the clicked point.
-      let arrowLeft = x - computedLeft - arrowWidth / 2;
-      // Optionally constrain arrowLeft so it stays within the popup's width.
-      arrowLeft = Math.max(arrowLeft, 0);
-      arrowLeft = Math.min(arrowLeft, popupWidth - arrowWidth);
-
-      // Update arrow element's style based on orientation.
-      if (isAbove) {
-        // Popup is above the clicked point so arrow appears at the bottom of the popup.
-        arrowEl.style.left = `${arrowLeft}px`;
-        arrowEl.style.bottom = `-${arrowHeight}px`;
-        arrowEl.style.top = '';
-        arrowEl.style.borderLeft = `${arrowWidth / 2}px solid transparent`;
-        arrowEl.style.borderRight = `${arrowWidth / 2}px solid transparent`;
-        arrowEl.style.borderTop = `${arrowHeight}px solid ${background}`;
-        arrowEl.style.borderBottom = '';
-      } else {
-        // Popup is below the clicked point so arrow appears at the top.
-        arrowEl.style.left = `${arrowLeft}px`;
-        arrowEl.style.top = `-${arrowHeight}px`;
-        arrowEl.style.bottom = '';
-        arrowEl.style.borderLeft = `${arrowWidth / 2}px solid transparent`;
-        arrowEl.style.borderRight = `${arrowWidth / 2}px solid transparent`;
-        arrowEl.style.borderBottom = `${arrowHeight}px solid ${background}`;
-        arrowEl.style.borderTop = '';
-      }
-    });
   }
 }

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

@@ -2,18 +2,26 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {type JSX} from 'preact';
+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;
-  style?: JSX.CSSProperties;
+  onSelect?: (value: string) => void;
+  style?: Partial<CSSStyleDeclaration>;
 };
 
-function getMenuItemValue(item: MenuItem): string {
+function getMenuItemValue(item: MenuItem): string | undefined {
   return typeof item === 'string' ? item : item.value;
 }
 
@@ -27,26 +35,51 @@ function getMenuItemIcon(item: MenuItem): string | undefined {
 
 export const DropdownMenu = (props: DropdownMenuProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
 
-  const toggleDropdown = () => setIsOpen(!isOpen);
+  return (
+    <SimpleMenu
+      {...props}
+      style={{...props.style, position: 'absolute'}}
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      trigger={
+        <button className="deck-widget-dropdown-button" onClick={() => setIsOpen(!isOpen)}>
+          <span className={`deck-widget-dropdown-icon ${isOpen ? 'open' : ''}`} />
+        </button>
+      }
+    />
+  );
+};
 
-  const handleClickOutside = (event: MouseEvent) => {
-    if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-      setIsOpen(false);
-    }
-  };
+export type SimpleMenuProps = DropdownMenuProps & {
+  trigger?: ComponentChild;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const SimpleMenu = (props: SimpleMenuProps) => {
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
   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 = (item: MenuItem) => {
-    props.onSelect(getMenuItemValue(item));
-    setIsOpen(false);
+  const handleSelect = (value: string | undefined, item: MenuItem) => {
+    if (value) {
+      if (typeof item === 'object') {
+        item.onSelect?.();
+      }
+      props.onSelect?.(value);
+      props.onClose();
+    }
   };
 
   // Don't render anything if there are no menu items
@@ -55,25 +88,21 @@ export const DropdownMenu = (props: DropdownMenuProps) => {
   }
 
   return (
-    <div className="deck-widget-dropdown-container" ref={dropdownRef} style={props.style}>
-      <button className="deck-widget-dropdown-button" onClick={toggleDropdown}>
-        <span className={`deck-widget-dropdown-icon ${isOpen ? 'open' : ''}`} />
-      </button>
-      {isOpen && (
-        <ul className="deck-widget-dropdown-menu">
-          {props.menuItems.map(item => {
+    <div className="deck-widget-dropdown-container" ref={dropdownRef}>
+      {props.trigger}
+      {props.isOpen && (
+        <ul className="deck-widget-dropdown-menu" style={props.style as JSX.CSSProperties}>
+          {props.menuItems.map((item, i) => {
+            const value = getMenuItemValue(item);
             const icon = getMenuItemIcon(item);
             return (
               <li
-                className="deck-widget-dropdown-item"
-                key={getMenuItemValue(item)}
-                onClick={() => handleSelect(item)}
+                className={`deck-widget-dropdown-item ${value ? '' : 'disabled'}`}
+                key={i}
+                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

@@ -0,0 +1,167 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import type {JSX, ComponentChildren} from 'preact';
+import {useRef, useEffect, useMemo} from 'preact/hooks';
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  arrow,
+  autoUpdate,
+  type Placement,
+  type ComputePositionConfig
+} from '@floating-ui/dom';
+
+export type PopoverProps = {
+  /** Anchor x */
+  x: number;
+  /** Anchor y */
+  y: number;
+  /** Position content relative to the anchor.
+   * @default 'right'
+   */
+  placement?: Placement;
+  /** Pixel offset
+   * @default 0
+   */
+  offset?: number;
+  /**
+   * Show an arrow pointing at the anchor. Optionally accepts a pixel size.
+   * @default false
+   */
+  arrow?: false | number | [width: number, height: number];
+  /**
+   * CSS color of the arrow
+   * @default 'white'
+   */
+  arrowColor?: string;
+  /** Content of the popover */
+  children: ComponentChildren;
+};
+
+export const Popover = ({
+  x,
+  y,
+  placement = 'right',
+  offset: pixelOffset = 0,
+  arrow: arrowSize = false,
+  arrowColor = 'white',
+  children
+}: PopoverProps) => {
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const arrowRef = useRef<HTMLDivElement>(null);
+  const updaterRef = useRef<() => void>();
+
+  updaterRef.current = () => {
+    if (!anchorRef.current || !contentRef.current) return;
+
+    const arrowWidth = Array.isArray(arrowSize) ? arrowSize[0] : arrowSize || 0;
+    const arrowHeight = Array.isArray(arrowSize) ? arrowSize[1] : arrowSize || 0;
+    const padding = pixelOffset + Math.max(arrowHeight, arrowWidth);
+
+    const middleware: ComputePositionConfig['middleware'] = placement.includes('-')
+      ? [offset(padding), flip(), shift()]
+      : [offset(padding), shift(), flip()];
+    if (arrowRef.current) middleware.push(arrow({element: arrowRef.current}));
+    computePosition(anchorRef.current, contentRef.current, {
+      placement,
+      strategy: 'fixed',
+      middleware
+    }).then(popoverPos => {
+      if (contentRef.current) {
+        Object.assign(contentRef.current.style, {
+          left: `${popoverPos.x}px`,
+          top: `${popoverPos.y}px`
+        });
+      }
+
+      const arrowData = popoverPos.middlewareData.arrow;
+      if (arrowData && arrowRef.current) {
+        const arrowStyle = createArrow(arrowWidth, arrowHeight, arrowColor, popoverPos.placement);
+        arrowStyle.transform = `translate(${arrowData.x || 0}px, ${arrowData.y || 0}px)`;
+        Object.assign(arrowRef.current.style, arrowStyle);
+      }
+    });
+  };
+
+  useMemo(() => {
+    updaterRef.current?.();
+  }, [x, y, placement, arrowSize, pixelOffset]);
+
+  useEffect(() => {
+    // initial mount
+    if (contentRef.current) {
+      contentRef.current.style.visibility = 'visible';
+    }
+    const cleanup = autoUpdate(anchorRef.current!, contentRef.current!, () =>
+      updaterRef.current?.()
+    );
+    return () => {
+      cleanup();
+    };
+  }, []);
+
+  return (
+    <div style={{position: 'absolute', left: x, top: y}} ref={anchorRef}>
+      <div
+        className="deck-widget deck-widget-popover"
+        style={{position: 'fixed', visibility: 'hidden', pointerEvents: 'none'}}
+        ref={contentRef}
+      >
+        {Boolean(arrowSize) && (
+          <div
+            className="deck-widget-popover-arrow"
+            style={{position: 'absolute'}}
+            ref={arrowRef}
+          />
+        )}
+        {children}
+      </div>
+    </div>
+  );
+};
+
+function createArrow(
+  width: number,
+  height: number,
+  color: string,
+  placement: Placement
+): JSX.CSSProperties {
+  const result: JSX.CSSProperties = {
+    width: 0,
+    height: 0,
+    top: '',
+    bottom: '',
+    left: '',
+    right: ''
+  };
+  if (placement.startsWith('bottom')) {
+    result.borderLeft = `${width / 2}px solid transparent`;
+    result.borderRight = `${width / 2}px solid transparent`;
+    result.borderBottom = `${height}px solid ${color}`;
+    result.borderTop = '';
+    result.top = `${-height}px`;
+  } else if (placement.startsWith('top')) {
+    result.borderLeft = `${width / 2}px solid transparent`;
+    result.borderRight = `${width / 2}px solid transparent`;
+    result.borderTop = `${height}px solid ${color}`;
+    result.borderBottom = '';
+    result.bottom = `${-height}px`;
+  } else if (placement.startsWith('right')) {
+    result.borderTop = `${width / 2}px solid transparent`;
+    result.borderBottom = `${width / 2}px solid transparent`;
+    result.borderRight = `${height}px solid ${color}`;
+    result.borderLeft = '';
+    result.left = `${-height}px`;
+  } else if (placement.startsWith('left')) {
+    result.borderTop = `${width / 2}px solid transparent`;
+    result.borderBottom = `${width / 2}px solid transparent`;
+    result.borderLeft = `${height}px solid ${color}`;
+    result.borderRight = '';
+    result.right = `${-height}px`;
+  }
+  return result;
+}