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

package/dist/view-selector-widget.d.ts

@@ -1,35 +0,0 @@
-import { Widget, type WidgetProps, type WidgetPlacement } from '@deck.gl/core';
-/** The available view modes */
-export type ViewMode = 'single' | 'split-horizontal' | 'split-vertical';
-/** Properties for the ViewSelectorWidget */
-export type ViewSelectorWidgetProps = 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;
-    /** Tooltip label */
-    label?: string;
-    /** The initial view mode. Defaults to 'single'. */
-    initialViewMode?: ViewMode;
-    /** Callback invoked when the view mode changes */
-    onViewModeChange?: (mode: ViewMode) => 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 declare class ViewSelectorWidget extends Widget<ViewSelectorWidgetProps> {
-    static defaultProps: Required<ViewSelectorWidgetProps>;
-    className: string;
-    placement: WidgetPlacement;
-    viewMode: ViewMode;
-    constructor(props?: ViewSelectorWidgetProps);
-    setProps(props: Partial<ViewSelectorWidgetProps>): void;
-    onRenderHTML(rootElement: HTMLElement): void;
-    handleSelectMode: (viewMode: ViewMode) => void;
-}
-//# sourceMappingURL=view-selector-widget.d.ts.map

package/dist/view-selector-widget.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"view-selector-widget.d.ts","sourceRoot":"","sources":["../src/view-selector-widget.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAC,MAAM,eAAe,CAAC;AAG7E,+BAA+B;AAC/B,MAAM,MAAM,QAAQ,GAAG,QAAQ,GAAG,kBAAkB,GAAG,gBAAgB,CAAC;AAExE,4CAA4C;AAC5C,MAAM,MAAM,uBAAuB,GAAG,WAAW,GAAG;IAClD,8DAA8D;IAC9D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,+EAA+E;IAC/E,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC7C,CAAC;AAEF;;;;;;;GAOG;AACH,qBAAa,kBAAmB,SAAQ,MAAM,CAAC,uBAAuB,CAAC;IACrE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,uBAAuB,CAAC,CAQpD;IAEF,SAAS,SAA+B;IACxC,SAAS,EAAE,eAAe,CAAc;IACxC,QAAQ,EAAE,QAAQ,CAAC;gBAEP,KAAK,GAAE,uBAA4B;IAM/C,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,uBAAuB,CAAC;IAMhD,YAAY,CAAC,WAAW,EAAE,WAAW;IAerC,gBAAgB,aAAc,QAAQ,UAIpC;CACH"}

package/dist/view-selector-widget.js

@@ -1,63 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-// deck.gl
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-import { render } from 'preact';
-import { Widget } from '@deck.gl/core';
-import { IconMenu } from "./lib/components/icon-menu.js";
-/**
- * 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 ViewSelectorWidget extends Widget {
-    constructor(props = {}) {
-        super(props);
-        this.className = 'deck-widget-view-selector';
-        this.placement = 'top-left';
-        this.handleSelectMode = (viewMode) => {
-            this.viewMode = viewMode;
-            this.updateHTML();
-            this.props.onViewModeChange(viewMode);
-        };
-        this.viewMode = this.props.initialViewMode;
-        this.setProps(this.props);
-    }
-    setProps(props) {
-        this.placement = props.placement ?? this.placement;
-        this.viewId = props.viewId ?? this.viewId;
-        super.setProps(props);
-    }
-    onRenderHTML(rootElement) {
-        render(_jsx(IconMenu, { className: "deck-widget-view-selector", menuItems: MENU_ITEMS.map(item => ({
-                ...item,
-                icon: item.icon()
-            })), initialItem: this.props.initialViewMode, onItemSelected: this.handleSelectMode }), rootElement);
-    }
-}
-ViewSelectorWidget.defaultProps = {
-    ...Widget.defaultProps,
-    id: 'view-selector',
-    placement: 'top-left',
-    viewId: null,
-    label: 'Split View',
-    initialViewMode: 'single',
-    onViewModeChange: () => { }
-};
-const ICON_STYLE = { width: '24px', height: '24px' };
-// JSX wrapped in a function to fix deck's Node tests
-const ICONS = {
-    single: () => (_jsx("svg", { width: "24", height: "24", style: ICON_STYLE, children: _jsx("rect", { x: "4", y: "4", width: "16", height: "16", stroke: "var(--button-icon-hover, rgb(24, 24, 26))", fill: "none", strokeWidth: "2" }) })),
-    'split-horizontal': () => (_jsxs("svg", { width: "24", height: "24", style: ICON_STYLE, children: [_jsx("rect", { x: "4", y: "4", width: "16", height: "7", stroke: "var(--button-icon-hover, rgb(24, 24, 26))", fill: "none", strokeWidth: "2" }), _jsx("rect", { x: "4", y: "13", width: "16", height: "7", stroke: "var(--button-icon-hover, rgb(24, 24, 26))", fill: "none", strokeWidth: "2" })] })),
-    'split-vertical': () => (_jsxs("svg", { width: "24", height: "24", style: ICON_STYLE, children: [_jsx("rect", { x: "4", y: "4", width: "7", height: "16", stroke: "var(--button-icon-hover, rgb(24, 24, 26))", fill: "none", strokeWidth: "2" }), _jsx("rect", { x: "13", y: "4", width: "7", height: "16", stroke: "var(--button-icon-hover, rgb(24, 24, 26))", fill: "none", strokeWidth: "2" })] }))
-};
-// Define menu items for the popup menu.
-const MENU_ITEMS = [
-    { value: 'single', icon: ICONS.single, label: 'Single View' },
-    { value: 'split-horizontal', icon: ICONS['split-horizontal'], label: 'Split Horizontal' },
-    { value: 'split-vertical', icon: ICONS['split-vertical'], label: 'Split Vertical' }
-];
-//# sourceMappingURL=view-selector-widget.js.map

package/dist/view-selector-widget.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"view-selector-widget.js","sourceRoot":"","sources":["../src/view-selector-widget.tsx"],"names":[],"mappings":"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"}

package/src/fps-widget.tsx

@@ -1,77 +0,0 @@
-// deck.gl
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-import {Widget} from '@deck.gl/core';
-import {render} from 'preact';
-import type {WidgetPlacement, Deck, WidgetProps} from '@deck.gl/core';
-import {IconButton} from './lib/components/icon-button';
-
-/** Properties for the FpsWidget. */
-export type FpsWidgetProps = 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;
-};
-
-/**
- * Displays the average frames per second reported by the Deck instance.
- */
-export class FpsWidget extends Widget<FpsWidgetProps> {
-  static defaultProps: Required<FpsWidgetProps> = {
-    ...Widget.defaultProps,
-    id: 'fps',
-    placement: 'top-left',
-    viewId: null
-  };
-
-  className = 'deck-widget-fps';
-  placement: WidgetPlacement = 'top-left';
-
-  private _lastFps: number = -1;
-
-  constructor(props: FpsWidgetProps = {}) {
-    super(props);
-    this.setProps(this.props);
-  }
-
-  setProps(props: Partial<FpsWidgetProps>): void {
-    this.placement = props.placement ?? this.placement;
-    this.viewId = props.viewId ?? this.viewId;
-    super.setProps(props);
-  }
-
-  onAdd({}: {deck: Deck<any>; viewId: string | null}): void {
-    this._lastFps = this._getFps();
-    requestAnimationFrame(() => this._animate());
-  }
-
-  onRenderHTML(rootElement: HTMLElement): void {
-    const fps = this._getFps();
-    render(
-      <IconButton>
-        <div className="text">
-          FPS
-          <br />
-          {fps}
-        </div>
-      </IconButton>,
-      rootElement
-    );
-  }
-
-  _animate(): void {
-    const fps = this._getFps();
-    if (this._lastFps !== fps) {
-      this._lastFps = fps;
-      this.updateHTML();
-    }
-    requestAnimationFrame(() => this._animate());
-  }
-
-  _getFps(): number {
-    // @ts-expect-error protected
-    return Math.round(this.deck?.metrics.fps ?? 0);
-  }
-}

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

@@ -1,27 +0,0 @@
-// deck.gl
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-import type {ComponentChildren, JSX} from 'preact';
-
-export type GroupedIconButtonProps = {
-  className?: string;
-  label?: string;
-  onClick?: JSX.MouseEventHandler<HTMLButtonElement>;
-  children?: ComponentChildren;
-};
-
-/** Renders an icon button as part of a ButtonGroup */
-export const GroupedIconButton = (props: GroupedIconButtonProps) => {
-  const {className = '', label, onClick, children} = props;
-  return (
-    <button
-      className={`deck-widget-icon-button ${className}`}
-      type="button"
-      onClick={onClick}
-      title={label}
-    >
-      {children ? children : <div className="deck-widget-icon" />}
-    </button>
-  );
-};

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

@@ -1,71 +0,0 @@
-import type {JSX} from 'preact';
-import {useState, useRef, useEffect} from 'preact/hooks';
-import {IconButton} from './icon-button';
-import {ButtonGroup} from './button-group';
-import {GroupedIconButton} from './grouped-icon-button';
-
-export type IconMenuProps<KeyType = string> = {
-  className: string;
-  icon?: JSX.Element;
-  label?: string;
-  menuItems: {value: KeyType; icon: JSX.Element; label: string}[];
-  initialItem: KeyType;
-  onItemSelected: (item: KeyType) => void;
-};
-
-/** A component that renders an icon popup menu */
-export function IconMenu<KeyType extends string>(props: IconMenuProps<KeyType>) {
-  const [menuOpen, setMenuOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // Close the menu when clicking outside.
-  const handleClickOutside = (event: MouseEvent) => {
-    if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-      setMenuOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [containerRef]);
-
-  const [selectedItem, setSelectedItem] = useState<KeyType>(props.initialItem);
-
-  const handleSelectItem = (item: KeyType) => {
-    setSelectedItem(item);
-    setMenuOpen(false);
-    props.onItemSelected(item);
-  };
-
-  const handleButtonClick = () => setMenuOpen(!menuOpen);
-
-  const selectedMenuItem = props.menuItems.find(item => item.value === selectedItem);
-  const label = props.label || selectedMenuItem?.label || '';
-  const icon = (props.icon || selectedMenuItem?.icon)!;
-
-  return (
-    <div style={{position: 'relative', display: 'inline-block'}} ref={containerRef}>
-      <IconButton className={props.className} label={label} onClick={handleButtonClick}>
-        {icon}
-      </IconButton>
-      {menuOpen && (
-        <div className="deck-widget-icon-menu">
-          <ButtonGroup orientation="vertical">
-            {props.menuItems.map(item => (
-              <GroupedIconButton
-                key={item.value}
-                label={item.label}
-                onClick={() => handleSelectItem(item.value)}
-              >
-                {item.icon}
-              </GroupedIconButton>
-            ))}
-          </ButtonGroup>
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,52 +0,0 @@
-import type {JSX} from 'preact';
-
-const MENU_STYLE: JSX.CSSProperties = {
-  position: 'absolute',
-  top: '100%',
-  left: 0,
-  background: 'white',
-  border: '1px solid #ccc',
-  borderRadius: '4px',
-  marginTop: 'var(--menu-gap, 4px)',
-  zIndex: 100
-};
-
-const MENU_ITEM_STYLE: JSX.CSSProperties = {
-  background: 'white',
-  border: 'none',
-  padding: '4px',
-  cursor: 'pointer',
-  pointerEvents: 'auto'
-};
-
-export type SimpleMenuProps = {
-  menuItems: {key: string; label: string}[];
-  onItemSelected: (key: string) => void;
-  position: {x: number; y: number};
-  style?: JSX.CSSProperties;
-};
-
-/** Renders a simple dropdown menu at an arbitrary position */
-export const SimpleMenu = (props: SimpleMenuProps) => {
-  const {menuItems, onItemSelected, position, style} = props;
-  const styleOverride: JSX.CSSProperties = {
-    ...MENU_STYLE,
-    ...style,
-    left: `${position.x}px`,
-    top: `${position.y}px`
-  };
-
-  return (
-    <div style={styleOverride}>
-      {menuItems.map(({key, label}) => (
-        <button
-          key={key}
-          style={{...MENU_ITEM_STYLE, display: 'block'}}
-          onClick={_ => onItemSelected(key)}
-        >
-          {label}
-        </button>
-      ))}
-    </div>
-  );
-};

package/src/view-selector-widget.tsx

@@ -1,151 +0,0 @@
-// deck.gl
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-import {render, JSX} from 'preact';
-import {Widget, type WidgetProps, type WidgetPlacement} from '@deck.gl/core';
-import {IconMenu} from './lib/components/icon-menu';
-
-/** The available view modes */
-export type ViewMode = 'single' | 'split-horizontal' | 'split-vertical';
-
-/** Properties for the ViewSelectorWidget */
-export type ViewSelectorWidgetProps = 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;
-  /** Tooltip label */
-  label?: string;
-  /** The initial view mode. Defaults to 'single'. */
-  initialViewMode?: ViewMode;
-  /** Callback invoked when the view mode changes */
-  onViewModeChange?: (mode: ViewMode) => 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 ViewSelectorWidget extends Widget<ViewSelectorWidgetProps> {
-  static defaultProps: Required<ViewSelectorWidgetProps> = {
-    ...Widget.defaultProps,
-    id: 'view-selector',
-    placement: 'top-left',
-    viewId: null,
-    label: 'Split View',
-    initialViewMode: 'single',
-    onViewModeChange: () => {}
-  };
-
-  className = 'deck-widget-view-selector';
-  placement: WidgetPlacement = 'top-left';
-  viewMode: ViewMode;
-
-  constructor(props: ViewSelectorWidgetProps = {}) {
-    super(props);
-    this.viewMode = this.props.initialViewMode;
-    this.setProps(this.props);
-  }
-
-  setProps(props: Partial<ViewSelectorWidgetProps>) {
-    this.placement = props.placement ?? this.placement;
-    this.viewId = props.viewId ?? this.viewId;
-    super.setProps(props);
-  }
-
-  onRenderHTML(rootElement: HTMLElement) {
-    render(
-      <IconMenu<ViewMode>
-        className="deck-widget-view-selector"
-        menuItems={MENU_ITEMS.map(item => ({
-          ...item,
-          icon: item.icon()
-        }))}
-        initialItem={this.props.initialViewMode}
-        onItemSelected={this.handleSelectMode}
-      />,
-      rootElement
-    );
-  }
-
-  handleSelectMode = (viewMode: ViewMode) => {
-    this.viewMode = viewMode;
-    this.updateHTML();
-    this.props.onViewModeChange(viewMode);
-  };
-}
-
-const ICON_STYLE = {width: '24px', height: '24px'};
-
-// JSX wrapped in a function to fix deck's Node tests
-const ICONS: Record<ViewMode, () => JSX.Element> = {
-  single: () => (
-    <svg width="24" height="24" style={ICON_STYLE}>
-      <rect
-        x="4"
-        y="4"
-        width="16"
-        height="16"
-        stroke="var(--button-icon-hover, rgb(24, 24, 26))"
-        fill="none"
-        strokeWidth="2"
-      />
-    </svg>
-  ),
-  'split-horizontal': () => (
-    <svg width="24" height="24" style={ICON_STYLE}>
-      <rect
-        x="4"
-        y="4"
-        width="16"
-        height="7"
-        stroke="var(--button-icon-hover, rgb(24, 24, 26))"
-        fill="none"
-        strokeWidth="2"
-      />
-      <rect
-        x="4"
-        y="13"
-        width="16"
-        height="7"
-        stroke="var(--button-icon-hover, rgb(24, 24, 26))"
-        fill="none"
-        strokeWidth="2"
-      />
-    </svg>
-  ),
-  'split-vertical': () => (
-    <svg width="24" height="24" style={ICON_STYLE}>
-      <rect
-        x="4"
-        y="4"
-        width="7"
-        height="16"
-        stroke="var(--button-icon-hover, rgb(24, 24, 26))"
-        fill="none"
-        strokeWidth="2"
-      />
-      <rect
-        x="13"
-        y="4"
-        width="7"
-        height="16"
-        stroke="var(--button-icon-hover, rgb(24, 24, 26))"
-        fill="none"
-        strokeWidth="2"
-      />
-    </svg>
-  )
-};
-
-// Define menu items for the popup menu.
-const MENU_ITEMS: Array<{value: ViewMode; icon: () => JSX.Element; label: string}> = [
-  {value: 'single', icon: ICONS.single, label: 'Single View'},
-  {value: 'split-horizontal', icon: ICONS['split-horizontal'], label: 'Split Horizontal'},
-  {value: 'split-vertical', icon: ICONS['split-vertical'], label: 'Split Vertical'}
-];