@deck.gl/widgets 9.1.12 → 9.2.0-alpha.2

package/src/zoom-widget.tsx

@@ -2,68 +2,32 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-/* global document */
-import {
-  FlyToInterpolator,
-  LinearInterpolator,
-  _deepEqual as deepEqual,
-  _applyStyles as applyStyles,
-  _removeStyles as removeStyles
-} from '@deck.gl/core';
-import type {Deck, Viewport, Widget, WidgetPlacement} from '@deck.gl/core';
+import {Widget, FlyToInterpolator, LinearInterpolator} from '@deck.gl/core';
+import {Viewport, WidgetProps, WidgetPlacement} from '@deck.gl/core';
 import {render} from 'preact';
-import {ButtonGroup, GroupedIconButton} from './components';
+import {ButtonGroup} from './lib/components/button-group';
+import {GroupedIconButton} from './lib/components/grouped-icon-button';
 
-export type ZoomWidgetProps = {
-  id?: string;
-  /**
-   * Widget positioning within the view. Default 'top-left'.
-   */
+export type ZoomWidgetProps = WidgetProps & {
+  /** Widget positioning within the view. Default 'top-left'. */
   placement?: WidgetPlacement;
-  /**
-   * View to attach to and interact with. Required when using multiple views.
-   */
+  /** View to attach to and interact with. Required when using multiple views. */
   viewId?: string | null;
-  /**
-   * Button orientation.
-   */
+  /** Button orientation. */
   orientation?: 'vertical' | 'horizontal';
-  /**
-   * Tooltip message on zoom in button.
-   */
+  /** Tooltip message on zoom in button. */
   zoomInLabel?: string;
-  /**
-   * Tooltip message on zoom out button.
-   */
+  /** Tooltip message on zoom out button. */
   zoomOutLabel?: string;
-  /**
-   * Zoom transition duration in ms. 0 disables the transition
-   */
+  /** Zoom transition duration in ms. 0 disables the transition */
   transitionDuration?: number;
-  /**
-   * CSS inline style overrides.
-   */
-  style?: Partial<CSSStyleDeclaration>;
-  /**
-   * Additional CSS class.
-   */
-  className?: string;
 };
 
-export class ZoomWidget implements Widget<ZoomWidgetProps> {
-  id = 'zoom';
-  props: Required<ZoomWidgetProps>;
-  placement: WidgetPlacement = 'top-left';
-  viewId?: string | null = null;
-  viewports: {[id: string]: Viewport} = {};
-  deck?: Deck<any>;
-  element?: HTMLDivElement;
-
+export class ZoomWidget extends Widget<ZoomWidgetProps> {
   static defaultProps: Required<ZoomWidgetProps> = {
-    id: 'zoom-widget',
-    style: {},
+    ...Widget.defaultProps,
+    id: 'zoom',
     placement: 'top-left',
-    className: undefined!,
     orientation: 'vertical',
     transitionDuration: 200,
     zoomInLabel: 'Zoom In',
@@ -71,53 +35,39 @@ export class ZoomWidget implements Widget<ZoomWidgetProps> {
     viewId: undefined!
   };
 
+  className = 'deck-widget-zoom';
+  placement: WidgetPlacement = 'top-left';
+  viewId?: string | null = null;
+  viewports: {[id: string]: Viewport} = {};
+
   constructor(props: ZoomWidgetProps = {}) {
-    this.id = props.id ?? this.id;
+    super(props, ZoomWidget.defaultProps);
     this.viewId = props.viewId ?? this.viewId;
     this.placement = props.placement ?? this.placement;
-
-    this.props = {
-      ...ZoomWidget.defaultProps,
-      ...props
-    };
-  }
-
-  onAdd({deck}: {deck: Deck<any>}): HTMLDivElement {
-    const {style, className} = this.props;
-    const element = document.createElement('div');
-    element.classList.add('deck-widget', 'deck-widget-zoom');
-    if (className) element.classList.add(className);
-    applyStyles(element, style);
-    this.deck = deck;
-    this.element = element;
-    this.update();
-    return element;
-  }
-
-  onRemove() {
-    this.deck = undefined;
-    this.element = undefined;
   }
 
   setProps(props: Partial<ZoomWidgetProps>) {
     this.placement = props.placement ?? this.placement;
     this.viewId = props.viewId ?? this.viewId;
-    const oldProps = this.props;
-    const el = this.element;
-    if (el) {
-      if (oldProps.className !== props.className) {
-        if (oldProps.className) el.classList.remove(oldProps.className);
-        if (props.className) el.classList.add(props.className);
-      }
-
-      if (!deepEqual(oldProps.style, props.style, 1)) {
-        removeStyles(el, oldProps.style);
-        applyStyles(el, props.style);
-      }
-    }
+    super.setProps(props);
+  }
 
-    Object.assign(this.props, props);
-    this.update();
+  onRenderHTML(rootElement: HTMLElement): void {
+    const ui = (
+      <ButtonGroup orientation={this.props.orientation}>
+        <GroupedIconButton
+          onClick={() => this.handleZoomIn()}
+          label={this.props.zoomInLabel}
+          className="deck-widget-zoom-in"
+        />
+        <GroupedIconButton
+          onClick={() => this.handleZoomOut()}
+          label={this.props.zoomOutLabel}
+          className="deck-widget-zoom-out"
+        />
+      </ButtonGroup>
+    );
+    render(ui, rootElement);
   }
 
   onViewportChange(viewport: Viewport) {
@@ -150,33 +100,9 @@ export class ZoomWidget implements Widget<ZoomWidgetProps> {
     }
   }
 
-  /**
-   * @todo - move to deck or widget manager
-   */
+  /** @todo - move to deck or widget manager */
   private setViewState(viewId: string, viewState: Record<string, unknown>): void {
     // @ts-ignore Using private method temporary until there's a public one
     this.deck._onViewStateChange({viewId, viewState, interactionState: {}});
   }
-
-  private update() {
-    const element = this.element;
-    if (!element) {
-      return;
-    }
-    const ui = (
-      <ButtonGroup orientation={this.props.orientation}>
-        <GroupedIconButton
-          onClick={() => this.handleZoomIn()}
-          label={this.props.zoomInLabel}
-          className="deck-widget-zoom-in"
-        />
-        <GroupedIconButton
-          onClick={() => this.handleZoomOut()}
-          label={this.props.zoomOutLabel}
-          className="deck-widget-zoom-out"
-        />
-      </ButtonGroup>
-    );
-    render(ui, element);
-  }
 }

package/dist/components.d.ts

@@ -1,4 +0,0 @@
-export declare const IconButton: (props: any) => import("preact").JSX.Element;
-export declare const ButtonGroup: (props: any) => import("preact").JSX.Element;
-export declare const GroupedIconButton: (props: any) => import("preact").JSX.Element;
-//# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU,8CActB,CAAC;AAEF,eAAO,MAAM,WAAW,8CAGvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,8CAY7B,CAAC"}

package/dist/components.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
-// deck.gl
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-export const IconButton = props => {
-    const { className, label, onClick } = props;
-    return (_jsx("div", { className: "deck-widget-button", children: _jsx("button", { className: `deck-widget-icon-button ${className}`, type: "button", onClick: onClick, title: label, children: _jsx("div", { className: "deck-widget-icon" }) }) }));
-};
-export const ButtonGroup = props => {
-    const { children, orientation } = props;
-    return _jsx("div", { className: `deck-widget-button-group ${orientation}`, children: children });
-};
-export const GroupedIconButton = props => {
-    const { className, label, onClick } = props;
-    return (_jsx("button", { className: `deck-widget-icon-button ${className}`, type: "button", onClick: onClick, title: label, children: _jsx("div", { className: "deck-widget-icon" }) }));
-};
-//# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.tsx"],"names":[],"mappings":";AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAEpC,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE;IAChC,MAAM,EAAC,SAAS,EAAE,KAAK,EAAE,OAAO,EAAC,GAAG,KAAK,CAAC;IAC1C,OAAO,CACL,cAAK,SAAS,EAAC,oBAAoB,YACjC,iBACE,SAAS,EAAE,2BAA2B,SAAS,EAAE,EACjD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,YAEZ,cAAK,SAAS,EAAC,kBAAkB,GAAG,GAC7B,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,EAAE;IACjC,MAAM,EAAC,QAAQ,EAAE,WAAW,EAAC,GAAG,KAAK,CAAC;IACtC,OAAO,cAAK,SAAS,EAAE,4BAA4B,WAAW,EAAE,YAAG,QAAQ,GAAO,CAAC;AACrF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,EAAE;IACvC,MAAM,EAAC,SAAS,EAAE,KAAK,EAAE,OAAO,EAAC,GAAG,KAAK,CAAC;IAC1C,OAAO,CACL,iBACE,SAAS,EAAE,2BAA2B,SAAS,EAAE,EACjD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,YAEZ,cAAK,SAAS,EAAC,kBAAkB,GAAG,GAC7B,CACV,CAAC;AACJ,CAAC,CAAC"}

package/dist/widget-impl.d.ts

@@ -1,29 +0,0 @@
-import type { Deck, Widget } from '@deck.gl/core';
-export type WidgetImplProps = {
-    id?: string;
-    /** CSS inline style overrides. */
-    style?: Partial<CSSStyleDeclaration>;
-    /** Additional CSS class. */
-    className?: string;
-};
-export declare abstract class WidgetImpl<PropsT extends WidgetImplProps> implements Widget<PropsT> {
-    id: string;
-    props: Required<PropsT>;
-    deck?: Deck<any>;
-    element?: HTMLDivElement;
-    static defaultProps: Required<WidgetImplProps>;
-    abstract className: Required<string>;
-    constructor(props: Required<PropsT>);
-    abstract onRenderHTML(): void;
-    onAdd({ deck }: {
-        deck: Deck<any>;
-    }): HTMLDivElement;
-    onRemove(): void;
-    setProps(props: Partial<PropsT>): void;
-    _createRootElement(props: {
-        widgetClassName: string;
-        className?: string;
-        style?: Partial<CSSStyleDeclaration>;
-    }): HTMLDivElement;
-}
-//# sourceMappingURL=widget-impl.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"widget-impl.d.ts","sourceRoot":"","sources":["../src/widget-impl.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAC,IAAI,EAAE,MAAM,EAAC,MAAM,eAAe,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kCAAkC;IAClC,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;IACrC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AACF,8BAAsB,UAAU,CAAC,MAAM,SAAS,eAAe,CAAE,YAAW,MAAM,CAAC,MAAM,CAAC;IACxF,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IAExB,IAAI,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IACjB,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,eAAe,CAAC,CAI5C;IAEF,QAAQ,CAAC,SAAS,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;gBAEzB,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC;IAKnC,QAAQ,CAAC,YAAY,IAAI,IAAI;IAE7B,KAAK,CAAC,EAAC,IAAI,EAAC,EAAE;QAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAA;KAAC,GAAG,cAAc;IAahD,QAAQ;IAKR,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC;IAmB/B,kBAAkB,CAAC,KAAK,EAAE;QACxB,eAAe,EAAE,MAAM,CAAC;QACxB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;KACtC;CASF"}

package/dist/widget-impl.js

@@ -1,60 +0,0 @@
-// deck.gl
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-/* global document */
-import { _deepEqual, _applyStyles, _removeStyles } from '@deck.gl/core';
-export class WidgetImpl {
-    constructor(props) {
-        this.id = props.id || 'widget';
-        this.props = props;
-    }
-    onAdd({ deck }) {
-        this.deck = deck;
-        const { style, className } = this.props;
-        const el = this._createRootElement({
-            widgetClassName: this.className,
-            className,
-            style
-        });
-        this.element = el;
-        this.onRenderHTML();
-        return this.element;
-    }
-    onRemove() {
-        this.deck = undefined;
-        this.element = undefined;
-    }
-    setProps(props) {
-        const oldProps = this.props;
-        const el = this.element;
-        if (el) {
-            if (oldProps.className !== props.className) {
-                if (oldProps.className)
-                    el.classList.remove(oldProps.className);
-                if (props.className)
-                    el.classList.add(props.className);
-            }
-            if (!_deepEqual(oldProps.style, props.style, 1)) {
-                _removeStyles(el, oldProps.style);
-                _applyStyles(el, props.style);
-            }
-        }
-        Object.assign(this.props, props);
-        this.onRenderHTML();
-    }
-    _createRootElement(props) {
-        const { widgetClassName, className, style } = props;
-        const element = document.createElement('div');
-        ['deck-widget', widgetClassName, className]
-            .filter((cls) => typeof cls === 'string' && cls.length > 0)
-            .forEach(className => element.classList.add(className));
-        _applyStyles(element, style);
-        return element;
-    }
-}
-WidgetImpl.defaultProps = {
-    id: 'widget',
-    style: {},
-    className: ''
-};
-//# sourceMappingURL=widget-impl.js.map

package/dist/widget-impl.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"widget-impl.js","sourceRoot":"","sources":["../src/widget-impl.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AAEpC,qBAAqB;AACrB,OAAO,EAAC,UAAU,EAAE,YAAY,EAAE,aAAa,EAAC,MAAM,eAAe,CAAC;AAUtE,MAAM,OAAgB,UAAU;IAe9B,YAAY,KAAuB;QACjC,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC,EAAE,IAAI,QAAQ,CAAC;QAC/B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAID,KAAK,CAAC,EAAC,IAAI,EAAoB;QAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,MAAM,EAAC,KAAK,EAAE,SAAS,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACtC,MAAM,EAAE,GAAG,IAAI,CAAC,kBAAkB,CAAC;YACjC,eAAe,EAAE,IAAI,CAAC,SAAS;YAC/B,SAAS;YACT,KAAK;SACN,CAAC,CAAC;QACH,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;QACtB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;IAC3B,CAAC;IAED,QAAQ,CAAC,KAAsB;QAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5B,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;QACxB,IAAI,EAAE,EAAE,CAAC;YACP,IAAI,QAAQ,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,EAAE,CAAC;gBAC3C,IAAI,QAAQ,CAAC,SAAS;oBAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;gBAChE,IAAI,KAAK,CAAC,SAAS;oBAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YACzD,CAAC;YAED,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC;gBAChD,aAAa,CAAC,EAAE,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAClC,YAAY,CAAC,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;YAChC,CAAC;QACH,CAAC;QAED,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACjC,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,kBAAkB,CAAC,KAIlB;QACC,MAAM,EAAC,eAAe,EAAE,SAAS,EAAE,KAAK,EAAC,GAAG,KAAK,CAAC;QAClD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC,aAAa,EAAE,eAAe,EAAE,SAAS,CAAC;aACxC,MAAM,CAAC,CAAC,GAAG,EAAiB,EAAE,CAAC,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC;aACzE,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;QAC1D,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QAC7B,OAAO,OAAO,CAAC;IACjB,CAAC;;AAhEM,uBAAY,GAA8B;IAC/C,EAAE,EAAE,QAAQ;IACZ,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,EAAE;CACd,CAAC"}

package/src/components.tsx

@@ -1,38 +0,0 @@
-// deck.gl
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-export const IconButton = props => {
-  const {className, label, onClick} = props;
-  return (
-    <div className="deck-widget-button">
-      <button
-        className={`deck-widget-icon-button ${className}`}
-        type="button"
-        onClick={onClick}
-        title={label}
-      >
-        <div className="deck-widget-icon" />
-      </button>
-    </div>
-  );
-};
-
-export const ButtonGroup = props => {
-  const {children, orientation} = props;
-  return <div className={`deck-widget-button-group ${orientation}`}>{children}</div>;
-};
-
-export const GroupedIconButton = props => {
-  const {className, label, onClick} = props;
-  return (
-    <button
-      className={`deck-widget-icon-button ${className}`}
-      type="button"
-      onClick={onClick}
-      title={label}
-    >
-      <div className="deck-widget-icon" />
-    </button>
-  );
-};

package/src/widget-impl.ts

@@ -1,88 +0,0 @@
-// deck.gl
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-/* global document */
-import {_deepEqual, _applyStyles, _removeStyles} from '@deck.gl/core';
-import type {Deck, Widget} from '@deck.gl/core';
-
-export type WidgetImplProps = {
-  id?: string;
-  /** CSS inline style overrides. */
-  style?: Partial<CSSStyleDeclaration>;
-  /** Additional CSS class. */
-  className?: string;
-};
-export abstract class WidgetImpl<PropsT extends WidgetImplProps> implements Widget<PropsT> {
-  id: string;
-  props: Required<PropsT>;
-
-  deck?: Deck<any>;
-  element?: HTMLDivElement;
-
-  static defaultProps: Required<WidgetImplProps> = {
-    id: 'widget',
-    style: {},
-    className: ''
-  };
-
-  abstract className: Required<string>;
-
-  constructor(props: Required<PropsT>) {
-    this.id = props.id || 'widget';
-    this.props = props;
-  }
-
-  abstract onRenderHTML(): void;
-
-  onAdd({deck}: {deck: Deck<any>}): HTMLDivElement {
-    this.deck = deck;
-    const {style, className} = this.props;
-    const el = this._createRootElement({
-      widgetClassName: this.className,
-      className,
-      style
-    });
-    this.element = el;
-    this.onRenderHTML();
-    return this.element;
-  }
-
-  onRemove() {
-    this.deck = undefined;
-    this.element = undefined;
-  }
-
-  setProps(props: Partial<PropsT>) {
-    const oldProps = this.props;
-    const el = this.element;
-    if (el) {
-      if (oldProps.className !== props.className) {
-        if (oldProps.className) el.classList.remove(oldProps.className);
-        if (props.className) el.classList.add(props.className);
-      }
-
-      if (!_deepEqual(oldProps.style, props.style, 1)) {
-        _removeStyles(el, oldProps.style);
-        _applyStyles(el, props.style);
-      }
-    }
-
-    Object.assign(this.props, props);
-    this.onRenderHTML();
-  }
-
-  _createRootElement(props: {
-    widgetClassName: string;
-    className?: string;
-    style?: Partial<CSSStyleDeclaration>;
-  }) {
-    const {widgetClassName, className, style} = props;
-    const element = document.createElement('div');
-    ['deck-widget', widgetClassName, className]
-      .filter((cls): cls is string => typeof cls === 'string' && cls.length > 0)
-      .forEach(className => element.classList.add(className));
-    _applyStyles(element, style);
-    return element;
-  }
-}