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

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

package/src/widget-panels/heap-memory-widget.tsx

@@ -0,0 +1,221 @@
+/** @jsxImportSource preact */
+import {Widget} from '@deck.gl/core';
+import {render} from 'preact';
+import {useEffect, useMemo, useState} from 'preact/hooks';
+
+import type {WidgetPlacement, WidgetProps} from '@deck.gl/core';
+import type {JSX} from 'preact';
+
+type HeapMemoryInfo = {
+  jsHeapSizeLimit: number;
+  totalJSHeapSize: number;
+  usedJSHeapSize: number;
+};
+
+export type HeapMemoryWidgetProps = WidgetProps & {
+  placement?: WidgetPlacement;
+  /** How frequently to poll the heap usage, in milliseconds. */
+  pollIntervalMs?: number;
+};
+
+const DEFAULT_MEMORY_INFO: HeapMemoryInfo = {
+  jsHeapSizeLimit: 0,
+  totalJSHeapSize: 0,
+  usedJSHeapSize: 0
+};
+
+function clampRatio(value: number): number {
+  if (!Number.isFinite(value) || value <= 0) {
+    return 0;
+  }
+  if (value >= 1) {
+    return 1;
+  }
+  return value;
+}
+
+function formatGigabytesValue(bytes: number): string {
+  if (!Number.isFinite(bytes)) {
+    return '0.00';
+  }
+  const gigabytes = bytes / 1024 / 1024 / 1024;
+  return gigabytes.toFixed(2);
+}
+
+type HeapMemoryWidgetViewProps = {
+  pollIntervalMs: number;
+};
+
+function HeapMemoryWidgetView({pollIntervalMs}: HeapMemoryWidgetViewProps) {
+  const [memoryInfo, setMemoryInfo] = useState<HeapMemoryInfo>(DEFAULT_MEMORY_INFO);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const updateMemory = () => {
+      if (!isMounted || typeof window === 'undefined') {
+        return;
+      }
+      const memory = (window.performance as Performance & {memory?: HeapMemoryInfo}).memory;
+      if (!memory) {
+        return;
+      }
+
+      setMemoryInfo({
+        jsHeapSizeLimit: memory.jsHeapSizeLimit ?? 0,
+        totalJSHeapSize: memory.totalJSHeapSize ?? 0,
+        usedJSHeapSize: memory.usedJSHeapSize ?? 0
+      });
+    };
+
+    updateMemory();
+    const interval = window.setInterval(updateMemory, Math.max(500, pollIntervalMs));
+    return () => {
+      isMounted = false;
+      window.clearInterval(interval);
+    };
+  }, [pollIntervalMs]);
+
+  const {jsHeapSizeLimit, totalJSHeapSize, usedJSHeapSize} = memoryInfo;
+
+  const {usedRatio, reservedRatio} = useMemo(() => {
+    const limit = jsHeapSizeLimit || 0;
+    if (!limit) {
+      return {usedRatio: 0, reservedRatio: 0} as const;
+    }
+    const used = clampRatio(usedJSHeapSize / limit);
+    const total = clampRatio(totalJSHeapSize / limit);
+
+    return {
+      usedRatio: used,
+      reservedRatio: Math.max(0, total - used)
+    } as const;
+  }, [jsHeapSizeLimit, totalJSHeapSize, usedJSHeapSize]);
+
+  const gradient = useMemo(() => {
+    const usedColor =
+      usedRatio < 0.5
+        ? 'rgba(107, 114, 128, 0.55)'
+        : usedRatio < 0.8
+          ? 'rgba(234, 179, 8, 0.6)'
+          : 'rgba(239, 68, 68, 0.7)';
+    const reservedColor = 'rgba(148, 163, 184, 0.35)';
+    const remainingColor = 'rgba(226, 232, 240, 0.35)';
+
+    const usedPercent = (usedRatio * 100).toFixed(2);
+    const reservedEnd = ((usedRatio + reservedRatio) * 100).toFixed(2);
+
+    return `linear-gradient(90deg, ${usedColor} 0%, ${usedColor} ${usedPercent}%, ${reservedColor} ${usedPercent}%, ${reservedColor} ${reservedEnd}%, ${remainingColor} ${reservedEnd}%, ${remainingColor} 100%)`;
+  }, [reservedRatio, usedRatio]);
+
+  const hasMemoryInfo = jsHeapSizeLimit > 0;
+  const valueText = hasMemoryInfo ? formatGigabytesValue(usedJSHeapSize) : 'N/A';
+  const title = hasMemoryInfo ? `Heap Size: ${valueText}GB` : 'Heap Size unavailable';
+
+  const buttonStyle: JSX.CSSProperties = {
+    position: 'relative',
+    padding: 0,
+    borderRadius: 'var(--button-corner-radius)',
+    backgroundImage: gradient,
+    backgroundColor: 'var(--button-background)',
+    color: 'var(--button-text, currentColor)',
+    border: '1px solid var(--button-stroke)',
+    boxShadow: 'var(--button-shadow)',
+    overflow: 'hidden',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    gap: '0px',
+    fontSize: '10px',
+    fontWeight: 700,
+    userSelect: 'none',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: '100% 100%',
+    width: '100%',
+    height: '100%'
+  };
+
+  return (
+    <div className="deck-widget-button">
+      <button
+        className="deck-widget-icon-button deck-widget-heap-memory"
+        type="button"
+        title={title}
+        aria-label="Heap size"
+        style={buttonStyle}
+      >
+        <span
+          style={{
+            lineHeight: 1.05,
+            fontSize: '10px'
+          }}
+        >
+          {valueText}
+        </span>
+        <span
+          style={{
+            lineHeight: 1,
+            fontSize: '9px'
+          }}
+        >
+          GB
+        </span>
+      </button>
+    </div>
+  );
+}
+
+export class HeapMemoryWidget extends Widget<HeapMemoryWidgetProps> {
+  static override defaultProps = {
+    ...Widget.defaultProps,
+    id: 'heap-memory',
+    placement: 'top-right',
+    pollIntervalMs: 2000
+  } satisfies Required<WidgetProps> &
+    Required<Pick<HeapMemoryWidgetProps, 'placement' | 'pollIntervalMs'>> &
+    HeapMemoryWidgetProps;
+
+  placement: WidgetPlacement = HeapMemoryWidget.defaultProps.placement;
+  className = 'deck-widget-heap-memory';
+
+  #pollIntervalMs = HeapMemoryWidget.defaultProps.pollIntervalMs;
+  #rootElement: HTMLElement | null = null;
+
+  constructor(props: HeapMemoryWidgetProps = {}) {
+    super({...HeapMemoryWidget.defaultProps, ...props});
+    if (props.placement !== undefined) {
+      this.placement = props.placement;
+    }
+    if (props.pollIntervalMs !== undefined) {
+      this.#pollIntervalMs = props.pollIntervalMs;
+    }
+  }
+
+  override setProps(props: Partial<HeapMemoryWidgetProps>): void {
+    if (props.placement !== undefined) {
+      this.placement = props.placement;
+    }
+    if (props.pollIntervalMs !== undefined) {
+      this.#pollIntervalMs = props.pollIntervalMs;
+    }
+    super.setProps(props);
+  }
+
+  override onRenderHTML(rootElement: HTMLElement): void {
+    this.#rootElement = rootElement;
+    const className = ['deck-widget', this.className, this.props.className]
+      .filter(Boolean)
+      .join(' ');
+
+    rootElement.className = className;
+
+    render(<HeapMemoryWidgetView pollIntervalMs={this.#pollIntervalMs} />, rootElement);
+  }
+
+  override onRemove(): void {
+    if (this.#rootElement) {
+      render(null, this.#rootElement);
+    }
+  }
+}