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

package/src/toggle-widget.tsx

@@ -0,0 +1,101 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {WidgetPlacement, WidgetProps} from '@deck.gl/core';
+import {render, type JSX} from 'preact';
+import {Widget} from '@deck.gl/core';
+import {IconButton} from './lib/components/icon-button';
+
+export type ToggleWidgetProps = WidgetProps & {
+  /** Widget positioning within the view. Default 'bottom-left'. */
+  placement?: WidgetPlacement;
+  /** View to attach to and interact with. Required when using multiple views. */
+  viewId?: string | null;
+  /** If the toggle is checked when first added */
+  initialChecked?: boolean;
+  /** Data url to display as icon */
+  icon: string;
+  /** Data url to display as icon when it is checked */
+  onIcon?: string;
+  /** Tooltip label */
+  label?: string;
+  /** Tooltip label when it is checked */
+  onLabel?: string;
+  /** Icon color, a CSS Color string */
+  color?: string;
+  /** Icon color when it is checked, a CSS Color string */
+  onColor?: string;
+  /** Callback when the widget is clicked */
+  onChange?: (checked: boolean) => void;
+};
+
+/**
+ * A generic widget that displays a button with icon or text content.
+ */
+export class ToggleWidget extends Widget<ToggleWidgetProps> {
+  static defaultProps: Required<ToggleWidgetProps> = {
+    ...Widget.defaultProps,
+    id: 'icon',
+    placement: 'top-left',
+    viewId: null,
+    initialChecked: false,
+    icon: '',
+    onIcon: undefined!,
+    label: '',
+    onLabel: undefined!,
+    color: '',
+    onColor: undefined!,
+    onChange: undefined!
+  };
+
+  className = 'deck-widget-toggle';
+  placement: WidgetPlacement = 'top-left';
+  checked: boolean;
+
+  constructor(props: ToggleWidgetProps) {
+    super(props);
+    this.checked = this.props.initialChecked;
+    this.setProps(this.props);
+  }
+
+  setProps(props: Partial<ToggleWidgetProps>) {
+    this.placement = props.placement ?? this.placement;
+    this.viewId = props.viewId;
+    super.setProps(props);
+  }
+
+  onRenderHTML(rootElement: HTMLElement): void {
+    const {
+      className,
+      style,
+      icon,
+      label,
+      color,
+      onIcon = icon,
+      onLabel = label,
+      onColor = color
+    } = this.props;
+    const on = this.checked;
+
+    rootElement.dataset.checked = String(on);
+
+    render(
+      <IconButton
+        className={className}
+        style={style as JSX.CSSProperties}
+        icon={on ? onIcon : icon}
+        label={on ? onLabel : label}
+        color={on ? onColor : color}
+        onClick={this._toggle}
+      />,
+      rootElement
+    );
+  }
+
+  private _toggle = () => {
+    this.checked = !this.checked;
+    this.props.onChange?.(this.checked);
+    this.updateHTML();
+  };
+}

package/dist/fps-widget.d.ts

@@ -1,28 +0,0 @@
-import { Widget } from '@deck.gl/core';
-import type { WidgetPlacement, Deck, WidgetProps } from '@deck.gl/core';
-/** 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 declare class FpsWidget extends Widget<FpsWidgetProps> {
-    static defaultProps: Required<FpsWidgetProps>;
-    className: string;
-    placement: WidgetPlacement;
-    private _lastFps;
-    constructor(props?: FpsWidgetProps);
-    setProps(props: Partial<FpsWidgetProps>): void;
-    onAdd({}: {
-        deck: Deck<any>;
-        viewId: string | null;
-    }): void;
-    onRenderHTML(rootElement: HTMLElement): void;
-    _animate(): void;
-    _getFps(): number;
-}
-//# sourceMappingURL=fps-widget.d.ts.map

package/dist/fps-widget.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fps-widget.d.ts","sourceRoot":"","sources":["../src/fps-widget.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AAErC,OAAO,KAAK,EAAC,eAAe,EAAE,IAAI,EAAE,WAAW,EAAC,MAAM,eAAe,CAAC;AAGtE,oCAAoC;AACpC,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG;IACzC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,+EAA+E;IAC/E,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,qBAAa,SAAU,SAAQ,MAAM,CAAC,cAAc,CAAC;IACnD,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,CAK3C;IAEF,SAAS,SAAqB;IAC9B,SAAS,EAAE,eAAe,CAAc;IAExC,OAAO,CAAC,QAAQ,CAAc;gBAElB,KAAK,GAAE,cAAmB;IAKtC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI;IAM9C,KAAK,CAAC,EAAE,EAAE;QAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;QAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;KAAC,GAAG,IAAI;IAKzD,YAAY,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI;IAc5C,QAAQ,IAAI,IAAI;IAShB,OAAO,IAAI,MAAM;CAIlB"}

package/dist/fps-widget.js

@@ -1,51 +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 { Widget } from '@deck.gl/core';
-import { render } from 'preact';
-import { IconButton } from "./lib/components/icon-button.js";
-/**
- * Displays the average frames per second reported by the Deck instance.
- */
-export class FpsWidget extends Widget {
-    constructor(props = {}) {
-        super(props);
-        this.className = 'deck-widget-fps';
-        this.placement = 'top-left';
-        this._lastFps = -1;
-        this.setProps(this.props);
-    }
-    setProps(props) {
-        this.placement = props.placement ?? this.placement;
-        this.viewId = props.viewId ?? this.viewId;
-        super.setProps(props);
-    }
-    onAdd({}) {
-        this._lastFps = this._getFps();
-        requestAnimationFrame(() => this._animate());
-    }
-    onRenderHTML(rootElement) {
-        const fps = this._getFps();
-        render(_jsx(IconButton, { children: _jsxs("div", { className: "text", children: ["FPS", _jsx("br", {}), fps] }) }), rootElement);
-    }
-    _animate() {
-        const fps = this._getFps();
-        if (this._lastFps !== fps) {
-            this._lastFps = fps;
-            this.updateHTML();
-        }
-        requestAnimationFrame(() => this._animate());
-    }
-    _getFps() {
-        // @ts-expect-error protected
-        return Math.round(this.deck?.metrics.fps ?? 0);
-    }
-}
-FpsWidget.defaultProps = {
-    ...Widget.defaultProps,
-    id: 'fps',
-    placement: 'top-left',
-    viewId: null
-};
-//# sourceMappingURL=fps-widget.js.map

package/dist/fps-widget.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fps-widget.js","sourceRoot":"","sources":["../src/fps-widget.tsx"],"names":[],"mappings":";AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAEpC,OAAO,EAAC,MAAM,EAAC,MAAM,eAAe,CAAC;AACrC,OAAO,EAAC,MAAM,EAAC,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAC,UAAU,EAAC,wCAAqC;AAUxD;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,MAAsB;IAanD,YAAY,QAAwB,EAAE;QACpC,KAAK,CAAC,KAAK,CAAC,CAAC;QANf,cAAS,GAAG,iBAAiB,CAAC;QAC9B,cAAS,GAAoB,UAAU,CAAC;QAEhC,aAAQ,GAAW,CAAC,CAAC,CAAC;QAI5B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,QAAQ,CAAC,KAA8B;QACrC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC;QACnD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC;QAC1C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC;IAED,KAAK,CAAC,EAA4C;QAChD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC/B,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC;IAED,YAAY,CAAC,WAAwB;QACnC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC3B,MAAM,CACJ,KAAC,UAAU,cACT,eAAK,SAAS,EAAC,MAAM,oBAEnB,cAAM,EACL,GAAG,IACA,GACK,EACb,WAAW,CACZ,CAAC;IACJ,CAAC;IAED,QAAQ;QACN,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC3B,IAAI,IAAI,CAAC,QAAQ,KAAK,GAAG,EAAE,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;YACpB,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;QACD,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC;IAED,OAAO;QACL,6BAA6B;QAC7B,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC;IACjD,CAAC;;AAtDM,sBAAY,GAA6B;IAC9C,GAAG,MAAM,CAAC,YAAY;IACtB,EAAE,EAAE,KAAK;IACT,SAAS,EAAE,UAAU;IACrB,MAAM,EAAE,IAAI;CACb,AALkB,CAKjB"}

package/dist/lib/components/icon-menu.d.ts

@@ -1,16 +0,0 @@
-import type { JSX } from 'preact';
-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 declare function IconMenu<KeyType extends string>(props: IconMenuProps<KeyType>): JSX.Element;
-//# sourceMappingURL=icon-menu.d.ts.map

package/dist/lib/components/icon-menu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-menu.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,QAAQ,CAAC;AAKhC,MAAM,MAAM,aAAa,CAAC,OAAO,GAAG,MAAM,IAAI;IAC5C,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE;QAAC,KAAK,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAChE,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,kDAAkD;AAClD,wBAAgB,QAAQ,CAAC,OAAO,SAAS,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,eAsD7E"}

package/dist/lib/components/icon-menu.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useState, useRef, useEffect } from 'preact/hooks';
-import { ButtonGroup } from "./button-group.js";
-import { IconButton } from "./icon-button.js";
-/** A component that renders an icon popup menu */
-export function IconMenu(props) {
-    const [menuOpen, setMenuOpen] = useState(false);
-    const containerRef = useRef(null);
-    // Close the menu when clicking outside.
-    const handleClickOutside = (event) => {
-        if (containerRef.current && !containerRef.current.contains(event.target)) {
-            setMenuOpen(false);
-        }
-    };
-    useEffect(() => {
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [containerRef]);
-    const [selectedItem, setSelectedItem] = useState(props.initialItem);
-    const handleSelectItem = (item) => {
-        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 (_jsxs("div", { style: { position: 'relative', display: 'inline-block' }, ref: containerRef, children: [_jsx(IconButton, { className: props.className, label: label, onClick: handleButtonClick, children: icon }), menuOpen && (_jsx("div", { className: "deck-widget-icon-menu", children: _jsx(ButtonGroup, { orientation: "vertical", children: props.menuItems.map(item => (_jsx(IconButton, { label: item.label, onClick: () => handleSelectItem(item.value), children: item.icon }, item.value))) }) }))] }));
-}
-//# sourceMappingURL=icon-menu.js.map

package/dist/lib/components/icon-menu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-menu.js","sourceRoot":"","sources":["../../../src/lib/components/icon-menu.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,EAAC,WAAW,EAAC,0BAAuB;AAC3C,OAAO,EAAC,UAAU,EAAC,yBAAsB;AAWzC,kDAAkD;AAClD,MAAM,UAAU,QAAQ,CAAyB,KAA6B;IAC5E,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,wCAAwC;IACxC,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC/C,IAAI,YAAY,CAAC,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;YACjF,WAAW,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,WAAW,CAAC,CAAC;IAE7E,MAAM,gBAAgB,GAAG,CAAC,IAAa,EAAE,EAAE;QACzC,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;IAEvD,MAAM,gBAAgB,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,KAAK,YAAY,CAAC,CAAC;IACnF,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,gBAAgB,EAAE,KAAK,IAAI,EAAE,CAAC;IAC3D,MAAM,IAAI,GAAG,CAAC,KAAK,CAAC,IAAI,IAAI,gBAAgB,EAAE,IAAI,CAAE,CAAC;IAErD,OAAO,CACL,eAAK,KAAK,EAAE,EAAC,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAC,EAAE,GAAG,EAAE,YAAY,aAC5E,KAAC,UAAU,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,iBAAiB,YAC7E,IAAI,GACM,EACZ,QAAQ,IAAI,CACX,cAAK,SAAS,EAAC,uBAAuB,YACpC,KAAC,WAAW,IAAC,WAAW,EAAC,UAAU,YAChC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC3B,KAAC,UAAU,IAET,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,YAE1C,IAAI,CAAC,IAAI,IAJL,IAAI,CAAC,KAAK,CAKJ,CACd,CAAC,GACU,GACV,CACP,IACG,CACP,CAAC;AACJ,CAAC"}

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/icon-menu.tsx

@@ -1,70 +0,0 @@
-import type {JSX} from 'preact';
-import {useState, useRef, useEffect} from 'preact/hooks';
-import {ButtonGroup} from './button-group';
-import {IconButton} from './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 => (
-              <IconButton
-                key={item.value}
-                label={item.label}
-                onClick={() => handleSelectItem(item.value)}
-              >
-                {item.icon}
-              </IconButton>
-            ))}
-          </ButtonGroup>
-        </div>
-      )}
-    </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'}
-];