@deck.gl-community/widgets 9.2.8 → 9.3.1-alpha.0

package/src/widget-components/select-widget-component.tsx

@@ -0,0 +1,354 @@
+/** @jsxImportSource preact */
+import {createPortal} from 'preact/compat';
+import {useEffect, useLayoutEffect, useMemo, useRef, useState} from 'preact/hooks';
+
+import type {SettingValue} from '../lib/settings/settings';
+import type {JSX} from 'preact';
+
+export type SelectWidgetComponentOption = {
+  label: string;
+  value: SettingValue;
+};
+
+export type SelectWidgetComponentProps = {
+  id: string;
+  label: string;
+  value: SettingValue;
+  options: SelectWidgetComponentOption[];
+  onValueChange: (nextValue: SettingValue) => void;
+};
+
+const SELECT_ROOT_STYLE: JSX.CSSProperties = {
+  position: 'relative',
+  width: '100%',
+  minWidth: 0
+};
+
+const SELECT_BUTTON_STYLE: JSX.CSSProperties = {
+  width: '100%',
+  minHeight: '32px',
+  display: 'grid',
+  gridTemplateColumns: 'minmax(0, 1fr) auto',
+  alignItems: 'center',
+  gap: '8px',
+  border: 'var(--button-inner-stroke, 1px solid rgba(148, 163, 184, 0.48))',
+  borderRadius: 'var(--button-corner-radius, 8px)',
+  background: 'var(--button-background, rgba(255, 255, 255, 0.94))',
+  color: 'var(--button-text, currentColor)',
+  boxSizing: 'border-box',
+  padding: '6px 8px 6px 10px',
+  fontSize: '12px',
+  fontWeight: 600,
+  cursor: 'pointer',
+  boxShadow: 'none',
+  outline: 'none'
+};
+
+const SELECT_BUTTON_OPEN_STYLE: JSX.CSSProperties = {
+  borderColor: 'var(--button-icon-hover, rgba(59, 130, 246, 0.82))',
+  boxShadow: '0 0 0 2px rgba(59, 130, 246, 0.16)'
+};
+
+const SELECT_VALUE_STYLE: JSX.CSSProperties = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  textAlign: 'left'
+};
+
+const SELECT_CARET_STYLE: JSX.CSSProperties = {
+  width: '16px',
+  height: '16px',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: 'var(--button-icon-idle, currentColor)',
+  fontSize: '10px',
+  lineHeight: 1,
+  transition: 'transform 120ms ease'
+};
+
+const SELECT_LIST_STYLE: JSX.CSSProperties = {
+  position: 'fixed',
+  zIndex: 10000,
+  maxHeight: '192px',
+  overflowY: 'auto',
+  padding: '4px',
+  border: 'var(--button-inner-stroke, 1px solid rgba(148, 163, 184, 0.48))',
+  borderRadius: 'var(--button-corner-radius, 8px)',
+  background: 'var(--container-background, var(--button-background, rgba(255, 255, 255, 0.98)))',
+  color: 'var(--button-text, currentColor)',
+  boxShadow: '0 12px 28px rgba(15, 23, 42, 0.18)',
+  boxSizing: 'border-box'
+};
+
+const SELECT_OPTION_STYLE: JSX.CSSProperties = {
+  width: '100%',
+  minHeight: '28px',
+  border: 0,
+  borderRadius: 'calc(var(--button-corner-radius, 8px) - 1px)',
+  display: 'grid',
+  gridTemplateColumns: 'minmax(0, 1fr) auto',
+  alignItems: 'center',
+  gap: '8px',
+  margin: 0,
+  padding: '5px 8px',
+  background: 'transparent',
+  color: 'var(--button-text, currentColor)',
+  cursor: 'pointer',
+  fontSize: '12px',
+  textAlign: 'left'
+};
+
+const SELECT_OPTION_ACTIVE_STYLE: JSX.CSSProperties = {
+  background: 'var(--menu-item-hover, rgba(148, 163, 184, 0.16))'
+};
+
+const SELECT_OPTION_SELECTED_STYLE: JSX.CSSProperties = {
+  color: 'var(--button-icon-hover, currentColor)',
+  fontWeight: 700
+};
+
+function stopEventPropagation(event: Event): void {
+  event.stopPropagation();
+  if (
+    typeof (event as {stopImmediatePropagation?: () => void}).stopImmediatePropagation ===
+    'function'
+  ) {
+    (event as {stopImmediatePropagation: () => void}).stopImmediatePropagation();
+  }
+}
+
+function findSelectedOptionIndex(
+  options: SelectWidgetComponentOption[],
+  value: SettingValue
+): number {
+  return options.findIndex((option) => option.value === value);
+}
+
+function getNextOptionIndex(currentIndex: number, delta: -1 | 1, optionCount: number): number {
+  if (optionCount === 0) {
+    return -1;
+  }
+  const resolvedIndex = currentIndex >= 0 ? currentIndex : delta > 0 ? -1 : 0;
+  return (resolvedIndex + delta + optionCount) % optionCount;
+}
+
+export function SelectWidgetComponent({
+  id,
+  label,
+  value,
+  options,
+  onValueChange
+}: SelectWidgetComponentProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeOptionIndex, setActiveOptionIndex] = useState(() =>
+    findSelectedOptionIndex(options, value)
+  );
+  const [listStyle, setListStyle] = useState<JSX.CSSProperties>(SELECT_LIST_STYLE);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const listboxRef = useRef<HTMLDivElement | null>(null);
+  const optionRefs = useRef<Array<HTMLButtonElement | null>>([]);
+  const listboxId = `${id}-listbox`;
+
+  const selectedOptionIndex = useMemo(
+    () => findSelectedOptionIndex(options, value),
+    [options, value]
+  );
+  const selectedOption = selectedOptionIndex >= 0 ? options[selectedOptionIndex] : undefined;
+  const selectedLabel = selectedOption?.label ?? String(value);
+
+  useEffect(() => {
+    optionRefs.current = optionRefs.current.slice(0, options.length);
+  }, [options.length]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setActiveOptionIndex(selectedOptionIndex);
+    }
+  }, [isOpen, selectedOptionIndex]);
+
+  useEffect(() => {
+    const ownerDocument = rootRef.current?.ownerDocument;
+    if (!isOpen || !ownerDocument) {
+      return undefined;
+    }
+
+    const handleDocumentPointerDown = (event: PointerEvent) => {
+      if (!rootRef.current || !event.target) {
+        return;
+      }
+      const target = event.target as Node;
+      if (!rootRef.current.contains(target) && !listboxRef.current?.contains(target)) {
+        setIsOpen(false);
+      }
+    };
+
+    ownerDocument.addEventListener('pointerdown', handleDocumentPointerDown);
+    return () => {
+      ownerDocument.removeEventListener('pointerdown', handleDocumentPointerDown);
+    };
+  }, [isOpen]);
+
+  useLayoutEffect(() => {
+    const ownerDocument = rootRef.current?.ownerDocument;
+    const ownerWindow = ownerDocument?.defaultView;
+    if (!isOpen || !rootRef.current || !ownerWindow) {
+      return undefined;
+    }
+
+    const updateListStyle = () => {
+      if (!rootRef.current) {
+        return;
+      }
+      const rect = rootRef.current.getBoundingClientRect();
+      setListStyle({
+        ...SELECT_LIST_STYLE,
+        top: `${rect.bottom + 4}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`
+      });
+    };
+
+    updateListStyle();
+    ownerWindow.addEventListener('resize', updateListStyle);
+    ownerWindow.addEventListener('scroll', updateListStyle, true);
+    return () => {
+      ownerWindow.removeEventListener('resize', updateListStyle);
+      ownerWindow.removeEventListener('scroll', updateListStyle, true);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen || activeOptionIndex < 0) {
+      return;
+    }
+    optionRefs.current[activeOptionIndex]?.scrollIntoView?.({block: 'nearest'});
+  }, [activeOptionIndex, isOpen]);
+
+  const selectOption = (option: SelectWidgetComponentOption) => {
+    onValueChange(option.value);
+    setIsOpen(false);
+  };
+
+  const handleButtonKeyDown: JSX.KeyboardEventHandler<HTMLButtonElement> = (event) => {
+    stopEventPropagation(event as unknown as Event);
+
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      setIsOpen(true);
+      setActiveOptionIndex((previous) =>
+        getNextOptionIndex(previous, event.key === 'ArrowDown' ? 1 : -1, options.length)
+      );
+      return;
+    }
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      if (isOpen && activeOptionIndex >= 0) {
+        const activeOption = options[activeOptionIndex];
+        if (activeOption) {
+          selectOption(activeOption);
+        }
+        return;
+      }
+      setIsOpen(true);
+      setActiveOptionIndex(selectedOptionIndex);
+      return;
+    }
+
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <div
+      ref={rootRef}
+      style={SELECT_ROOT_STYLE}
+      onPointerDown={(event) => stopEventPropagation(event as unknown as Event)}
+      onMouseDown={(event) => stopEventPropagation(event as unknown as Event)}
+      onWheel={(event) => stopEventPropagation(event as unknown as Event)}
+      onClick={(event) => stopEventPropagation(event as unknown as Event)}
+    >
+      <button
+        id={id}
+        type="button"
+        aria-label={label}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        aria-controls={isOpen ? listboxId : undefined}
+        style={{
+          ...SELECT_BUTTON_STYLE,
+          ...(isOpen ? SELECT_BUTTON_OPEN_STYLE : {}),
+          opacity: options.length ? 1 : 0.58,
+          cursor: options.length ? 'pointer' : 'default'
+        }}
+        disabled={!options.length}
+        onClick={() => setIsOpen((previous) => !previous)}
+        onKeyDown={handleButtonKeyDown}
+        onKeyUp={(event) => stopEventPropagation(event as unknown as Event)}
+      >
+        <span style={SELECT_VALUE_STYLE}>{selectedLabel}</span>
+        <span
+          aria-hidden
+          style={{
+            ...SELECT_CARET_STYLE,
+            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
+          }}
+        >
+          ▾
+        </span>
+      </button>
+
+      {isOpen &&
+        rootRef.current?.ownerDocument.body &&
+        createPortal(
+          <div
+            ref={listboxRef}
+            id={listboxId}
+            role="listbox"
+            aria-label={label}
+            style={listStyle}
+            onPointerDown={(event) => stopEventPropagation(event as unknown as Event)}
+            onMouseDown={(event) => stopEventPropagation(event as unknown as Event)}
+            onWheel={(event) => stopEventPropagation(event as unknown as Event)}
+            onClick={(event) => stopEventPropagation(event as unknown as Event)}
+          >
+            {options.map((option, index) => {
+              const isSelected = index === selectedOptionIndex;
+              const isActive = index === activeOptionIndex;
+
+              return (
+                <button
+                  key={`${id}-${index}-${String(option.value)}`}
+                  ref={(element) => {
+                    optionRefs.current[index] = element;
+                  }}
+                  type="button"
+                  role="option"
+                  aria-selected={isSelected}
+                  style={{
+                    ...SELECT_OPTION_STYLE,
+                    ...(isActive ? SELECT_OPTION_ACTIVE_STYLE : {}),
+                    ...(isSelected ? SELECT_OPTION_SELECTED_STYLE : {})
+                  }}
+                  onPointerEnter={() => setActiveOptionIndex(index)}
+                  onMouseDown={(event) => {
+                    event.preventDefault();
+                    stopEventPropagation(event as unknown as Event);
+                  }}
+                  onClick={() => selectOption(option)}
+                >
+                  <span style={SELECT_VALUE_STYLE}>{option.label}</span>
+                  {isSelected && <span aria-hidden>✓</span>}
+                </button>
+              );
+            })}
+          </div>,
+          rootRef.current.ownerDocument.body
+        )}
+    </div>
+  );
+}

package/src/widget-panels/box-widget.test.tsx

@@ -0,0 +1,50 @@
+/** @jsxImportSource preact */
+import {afterEach, describe, expect, it} from 'vitest';
+
+import {BoxWidget} from './box-widget';
+
+import type {WidgetPanel} from './widget-containers';
+
+const panel: WidgetPanel = {
+  id: 'box-panel',
+  title: 'Box Panel',
+  content: <div>box content</div>
+};
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('BoxWidget', () => {
+  it('renders title and direct panel content', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+    const widget = new BoxWidget({
+      id: 'box-widget-basic',
+      title: 'Widget Panels',
+      panel
+    });
+
+    widget.onRenderHTML(root);
+
+    expect(root.textContent).toContain('Widget Panels');
+    expect(root.textContent).toContain('box content');
+  });
+
+  it('normalizes width configuration and placement props', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+    const widget = new BoxWidget({
+      id: 'box-widget-width',
+      panel,
+      placement: 'bottom-right',
+      widthPx: 420
+    });
+
+    widget.onRenderHTML(root);
+
+    const section = root.querySelector<HTMLElement>('section');
+    expect(widget.placement).toBe('bottom-right');
+    expect(section?.style.width).toBe('420px');
+  });
+});

package/src/widget-panels/box-widget.tsx

@@ -0,0 +1,284 @@
+/** @jsxImportSource preact */
+import {Widget} from '@deck.gl/core';
+import {render} from 'preact';
+
+import {asPanelContainer, WidgetContainerRenderer} from './widget-containers';
+
+import type {WidgetContainer, WidgetPanel} from './widget-containers';
+import type {WidgetPlacement, WidgetProps} from '@deck.gl/core';
+import type {JSX} from 'preact';
+
+/** Static card widget properties. */
+export type BoxWidgetProps = WidgetProps & {
+  /** The content container to show inside the box. */
+  container?: WidgetContainer;
+  /** Optional shorthand panel. When supplied, shown directly inside the box. */
+  panel?: WidgetPanel;
+  /** Placement anchor for the box. */
+  placement?: WidgetPlacement;
+  /** Optional box header title. */
+  title?: string;
+  /** Box width in pixels. */
+  widthPx?: number;
+  /** Whether the header toggles the box body open and closed. */
+  collapsible?: boolean;
+  /** Uncontrolled default open state. */
+  defaultOpen?: boolean;
+  /** Controlled open state for the box body. */
+  open?: boolean;
+  /** Called when user intent changes open/closed state. */
+  onOpenChange?: (open: boolean) => void;
+};
+
+const BOX_WIDGET_CLASS = 'deck-widget-box';
+
+/**
+ * Normalizes box width configuration into a practical render value.
+ */
+function normalizeBoxWidthPx(widthPx: number): number {
+  const clamped = Math.max(220, Math.floor(widthPx));
+  return Number.isFinite(clamped) ? clamped : 360;
+}
+
+/**
+ * Normalizes widget-container/panel inputs into a concrete widget container.
+ */
+function asContainer(container?: WidgetContainer, panel?: WidgetPanel): WidgetContainer {
+  if (container !== undefined) {
+    return container;
+  }
+
+  if (panel !== undefined) {
+    return asPanelContainer(panel);
+  }
+
+  return {
+    kind: 'panel',
+    props: {
+      panel: {
+        id: 'empty-box-panel',
+        title: '',
+        content: <div />
+      }
+    }
+  };
+}
+
+function BoxWidgetView({
+  container,
+  title,
+  widthPx,
+  open,
+  collapsible,
+  onOpenChange
+}: {
+  container: WidgetContainer;
+  title?: string;
+  widthPx: number;
+  open: boolean;
+  collapsible: boolean;
+  onOpenChange: (next: boolean) => void;
+}) {
+  return (
+    <section style={BOX_WIDGET_STYLE(widthPx)} aria-label={title ?? 'Box widget'}>
+      {title ? (
+        <header style={BOX_HEADER_STYLE}>
+          {collapsible ? (
+            <button
+              type="button"
+              aria-expanded={open}
+              style={BOX_HEADER_BUTTON_STYLE}
+              onClick={() => onOpenChange(!open)}
+            >
+              <span>{title}</span>
+              <span aria-hidden="true" style={BOX_HEADER_CHEVRON_STYLE(open)}>
+                {open ? '▾' : '▸'}
+              </span>
+            </button>
+          ) : (
+            <span>{title}</span>
+          )}
+        </header>
+      ) : null}
+      <div style={BOX_CONTENT_STYLE(open)}>
+        <WidgetContainerRenderer container={container} />
+      </div>
+    </section>
+  );
+}
+
+/**
+ * A reusable deck widget that renders a static themed card assembled from widget containers.
+ */
+export class BoxWidget extends Widget<BoxWidgetProps> {
+  static defaultProps: Required<BoxWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'box-widget',
+    placement: 'bottom-left',
+    title: undefined!,
+    widthPx: 360,
+    collapsible: true,
+    defaultOpen: true,
+    open: undefined!,
+    onOpenChange: undefined!,
+    panel: undefined!,
+    container: {
+      kind: 'panel',
+      props: {
+        panel: {
+          id: 'empty-box-panel',
+          title: '',
+          content: <div />
+        }
+      }
+    }
+  };
+
+  className = BOX_WIDGET_CLASS;
+  placement: WidgetPlacement = BoxWidget.defaultProps.placement;
+  title: string | undefined = BoxWidget.defaultProps.title;
+  widthPx = BoxWidget.defaultProps.widthPx;
+  collapsible = BoxWidget.defaultProps.collapsible;
+  isOpen = BoxWidget.defaultProps.defaultOpen;
+  #container: WidgetContainer = BoxWidget.defaultProps.container;
+  #rootElement: HTMLElement | null = null;
+  #hasOpenStateInitialized = false;
+  #isControlled = false;
+  #openChange: ((open: boolean) => void) | undefined = undefined;
+
+  constructor(props: Partial<BoxWidgetProps> = {}) {
+    super({
+      ...BoxWidget.defaultProps,
+      ...props,
+      container: asContainer(props.container, props.panel)
+    } as BoxWidgetProps);
+    this.setProps(this.props);
+  }
+
+  setProps(props: Partial<BoxWidgetProps>): void {
+    if (props.placement !== undefined) {
+      this.placement = props.placement;
+    }
+    if ('title' in props) {
+      this.title = props.title;
+    }
+    if (props.widthPx !== undefined) {
+      this.widthPx = normalizeBoxWidthPx(props.widthPx);
+    }
+    if (props.collapsible !== undefined) {
+      this.collapsible = props.collapsible;
+    }
+    this.#setOpenProps(props);
+    if (props.container !== undefined) {
+      this.#container = props.container;
+    } else if (props.panel !== undefined) {
+      this.#container = asContainer(undefined, props.panel);
+    }
+
+    this.#render();
+    super.setProps(props);
+  }
+
+  onRemove(): void {
+    if (this.#rootElement) {
+      render(null, this.#rootElement);
+    }
+  }
+
+  onRenderHTML(rootElement: HTMLElement): void {
+    this.#rootElement = rootElement;
+    rootElement.style.margin = '0';
+    this.#render();
+  }
+
+  #handleOpenChange = (nextOpen: boolean) => {
+    if (!this.#isControlled) {
+      this.isOpen = nextOpen;
+    }
+    this.#openChange?.(nextOpen);
+    this.#render();
+  };
+
+  #render = () => {
+    if (!this.#rootElement) {
+      return;
+    }
+
+    render(
+      <BoxWidgetView
+        container={this.#container}
+        title={this.title}
+        widthPx={this.widthPx}
+        open={this.isOpen}
+        collapsible={this.collapsible}
+        onOpenChange={this.#handleOpenChange}
+      />,
+      this.#rootElement
+    );
+  };
+
+  #setOpenProps(props: Partial<BoxWidgetProps>): void {
+    this.#isControlled = props.open !== undefined;
+    if (props.onOpenChange !== undefined) {
+      this.#openChange = props.onOpenChange;
+    }
+    if (props.open !== undefined) {
+      this.isOpen = props.open;
+      this.#hasOpenStateInitialized = true;
+      return;
+    }
+    if (!this.#hasOpenStateInitialized && props.defaultOpen !== undefined) {
+      this.isOpen = props.defaultOpen;
+      this.#hasOpenStateInitialized = true;
+    }
+  }
+}
+
+const BOX_WIDGET_STYLE = (widthPx: number): JSX.CSSProperties => ({
+  margin: 'var(--widget-margin, 12px)',
+  width: `${widthPx}px`,
+  maxWidth: `min(84vw, ${widthPx}px)`,
+  pointerEvents: 'auto',
+  border: 'var(--menu-border, 1px solid rgba(148, 163, 184, 0.35))',
+  borderRadius: '12px',
+  background: 'var(--menu-background, rgba(255, 255, 255, 0.96))',
+  backdropFilter: 'var(--menu-backdrop-filter, unset)',
+  color: 'var(--menu-text, rgb(24, 24, 26))',
+  boxShadow: 'var(--menu-shadow, 0 18px 40px rgba(15, 23, 42, 0.16))',
+  overflow: 'hidden'
+});
+
+const BOX_HEADER_STYLE: JSX.CSSProperties = {
+  padding: '14px 16px 10px',
+  fontSize: '18px',
+  fontWeight: 700,
+  lineHeight: 1.2,
+  color: 'var(--button-text, currentColor)'
+};
+
+const BOX_HEADER_BUTTON_STYLE: JSX.CSSProperties = {
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: '10px',
+  padding: '0',
+  border: '0',
+  background: 'transparent',
+  color: 'inherit',
+  font: 'inherit',
+  textAlign: 'left',
+  cursor: 'pointer'
+};
+
+const BOX_HEADER_CHEVRON_STYLE = (open: boolean): JSX.CSSProperties => ({
+  display: 'block',
+  fontSize: '16px',
+  lineHeight: 1,
+  transform: open ? 'translateY(1px)' : 'translateY(0)'
+});
+
+const BOX_CONTENT_STYLE = (open: boolean): JSX.CSSProperties => ({
+  padding: '0 16px 14px',
+  display: open ? 'block' : 'none'
+});