@deck.gl-community/widgets 9.2.5 → 9.3.0-beta.1

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'
+});

package/src/widget-panels/full-screen-panel-widget.test.tsx

@@ -0,0 +1,49 @@
+/** @jsxImportSource preact */
+import {afterEach, describe, expect, it} from 'vitest';
+
+import {FullScreenPanelWidget} from './full-screen-panel-widget';
+
+import type {WidgetPanel} from './widget-containers';
+
+const panel: WidgetPanel = {
+  id: 'full-screen-panel',
+  title: 'Full Screen Panel',
+  content: <div>full screen content</div>
+};
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('FullScreenPanelWidget', () => {
+  it('renders title and direct panel content', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+    const widget = new FullScreenPanelWidget({
+      id: 'full-screen-panel-widget-basic',
+      title: 'Widget Panels',
+      panel
+    });
+
+    widget.onRenderHTML(root);
+
+    expect(root.textContent).toContain('Widget Panels');
+    expect(root.textContent).toContain('full screen content');
+  });
+
+  it('uses fill placement and normalizes margin', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+    const widget = new FullScreenPanelWidget({
+      id: 'full-screen-panel-widget-margin',
+      panel,
+      marginPx: 36
+    });
+
+    widget.onRenderHTML(root);
+
+    const section = root.querySelector<HTMLElement>('section');
+    expect(widget.placement).toBe('fill');
+    expect(section?.style.inset).toBe('36px');
+  });
+});

package/src/widget-panels/full-screen-panel-widget.tsx

@@ -0,0 +1,223 @@
+/** @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';
+
+/** Full-screen panel widget properties. */
+export type FullScreenPanelWidgetProps = WidgetProps & {
+  /** The content container to show inside the full-screen panel. */
+  container?: WidgetContainer;
+  /** Optional shorthand panel. When supplied, shown directly inside the full-screen panel. */
+  panel?: WidgetPanel;
+  /** Placement anchor for the full-screen panel. Defaults to deck.gl's fill placement. */
+  placement?: WidgetPlacement;
+  /** Optional panel header title. */
+  title?: string;
+  /** Inset from the deck overlay edge in pixels. */
+  marginPx?: number;
+};
+
+const FULL_SCREEN_PANEL_WIDGET_CLASS = 'deck-widget-full-screen-panel';
+
+/**
+ * Normalizes inset margin into a practical render value.
+ */
+function normalizeMarginPx(marginPx: number): number {
+  const clamped = Math.max(0, Math.floor(marginPx));
+  return Number.isFinite(clamped) ? clamped : 24;
+}
+
+/**
+ * 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-full-screen-panel',
+        title: '',
+        content: <div />
+      }
+    }
+  };
+}
+
+function FullScreenPanelWidgetView({
+  container,
+  title,
+  marginPx
+}: {
+  container: WidgetContainer;
+  title?: string;
+  marginPx: number;
+}) {
+  return (
+    <section
+      style={FULL_SCREEN_PANEL_WIDGET_STYLE(marginPx)}
+      aria-label={title ?? 'Full-screen panel widget'}
+      onPointerDown={stopFullScreenPanelEventPropagation}
+      onPointerMove={stopFullScreenPanelEventPropagation}
+      onPointerUp={stopFullScreenPanelEventPropagation}
+      onMouseDown={stopFullScreenPanelEventPropagation}
+      onMouseMove={stopFullScreenPanelEventPropagation}
+      onMouseUp={stopFullScreenPanelEventPropagation}
+      onTouchStart={stopFullScreenPanelEventPropagation}
+      onTouchMove={stopFullScreenPanelEventPropagation}
+      onTouchEnd={stopFullScreenPanelEventPropagation}
+      onClick={stopFullScreenPanelEventPropagation}
+      onContextMenu={stopFullScreenPanelEventPropagation}
+      onWheel={stopFullScreenPanelEventPropagation}
+    >
+      {title ? <header style={FULL_SCREEN_PANEL_HEADER_STYLE}>{title}</header> : null}
+      <div style={FULL_SCREEN_PANEL_CONTENT_STYLE}>
+        <WidgetContainerRenderer container={container} />
+      </div>
+    </section>
+  );
+}
+
+/**
+ * Prevents full-screen panel interactions from leaking into the underlying deck canvas.
+ */
+function stopFullScreenPanelEventPropagation(event: Event): void {
+  event.stopPropagation();
+}
+
+/**
+ * A reusable deck widget that renders one container inside a large inset panel.
+ */
+export class FullScreenPanelWidget extends Widget<FullScreenPanelWidgetProps> {
+  static defaultProps: Required<FullScreenPanelWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'full-screen-panel-widget',
+    placement: 'fill',
+    title: undefined!,
+    marginPx: 24,
+    panel: undefined!,
+    container: {
+      kind: 'panel',
+      props: {
+        panel: {
+          id: 'empty-full-screen-panel',
+          title: '',
+          content: <div />
+        }
+      }
+    }
+  };
+
+  className = FULL_SCREEN_PANEL_WIDGET_CLASS;
+  placement: WidgetPlacement = FullScreenPanelWidget.defaultProps.placement;
+  title: string | undefined = FullScreenPanelWidget.defaultProps.title;
+  marginPx = FullScreenPanelWidget.defaultProps.marginPx;
+  #container: WidgetContainer = FullScreenPanelWidget.defaultProps.container;
+  #rootElement: HTMLElement | null = null;
+
+  constructor(props: Partial<FullScreenPanelWidgetProps> = {}) {
+    super({
+      ...FullScreenPanelWidget.defaultProps,
+      ...props,
+      container: asContainer(props.container, props.panel)
+    } as FullScreenPanelWidgetProps);
+    this.setProps(this.props);
+  }
+
+  setProps(props: Partial<FullScreenPanelWidgetProps>): void {
+    if (props.placement !== undefined) {
+      this.placement = props.placement;
+    }
+    if ('title' in props) {
+      this.title = props.title;
+    }
+    if (props.marginPx !== undefined) {
+      this.marginPx = normalizeMarginPx(props.marginPx);
+    }
+    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;
+    const className = ['deck-widget', this.className, this.props.className]
+      .filter(Boolean)
+      .join(' ');
+    rootElement.className = className;
+    rootElement.style.position = 'absolute';
+    rootElement.style.inset = '0';
+    rootElement.style.margin = '0';
+    rootElement.style.pointerEvents = 'none';
+    rootElement.style.zIndex = '30';
+    this.#render();
+  }
+
+  #render = () => {
+    if (!this.#rootElement) {
+      return;
+    }
+
+    render(
+      <FullScreenPanelWidgetView
+        container={this.#container}
+        title={this.title}
+        marginPx={this.marginPx}
+      />,
+      this.#rootElement
+    );
+  };
+}
+
+const FULL_SCREEN_PANEL_WIDGET_STYLE = (marginPx: number): JSX.CSSProperties => ({
+  position: 'absolute',
+  inset: `${marginPx}px`,
+  pointerEvents: 'auto',
+  display: 'grid',
+  gridTemplateRows: 'auto minmax(0, 1fr)',
+  border: 'var(--menu-border, 1px solid rgba(148, 163, 184, 0.42))',
+  borderRadius: '18px',
+  background: 'var(--menu-background, rgba(255, 255, 255, 0.94))',
+  backdropFilter: 'var(--menu-backdrop-filter, blur(18px))',
+  color: 'var(--menu-text, rgb(24, 24, 26))',
+  boxShadow: 'var(--menu-shadow, 0 28px 80px rgba(15, 23, 42, 0.24))',
+  overflow: 'hidden'
+});
+
+const FULL_SCREEN_PANEL_HEADER_STYLE: JSX.CSSProperties = {
+  padding: '18px 22px 12px',
+  fontSize: '24px',
+  fontWeight: 800,
+  lineHeight: 1.1,
+  letterSpacing: '-0.03em',
+  color: 'var(--button-text, currentColor)'
+};
+
+const FULL_SCREEN_PANEL_CONTENT_STYLE: JSX.CSSProperties = {
+  minHeight: 0,
+  overflow: 'auto',
+  padding: '0 22px 22px'
+};