@deck.gl-community/widgets 9.2.0-beta.5

package/dist/widgets/zoom-range-widget.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+import { render } from 'preact';
+import { LongPressButton } from "./long-press-button.js";
+import { cloneViewState, hasViewManager } from "./view-manager-utils.js";
+import { Widget } from '@deck.gl/core';
+const WRAPPER_STYLE = {
+    position: 'absolute',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    background: '#f7f7f7',
+    border: '0.5px solid #eaeaea',
+    marginTop: '6px',
+    padding: '2px 0',
+    width: '18px',
+    userSelect: 'none',
+    pointerEvents: 'auto'
+};
+const ZOOM_BUTTON_STYLE = {
+    cursor: 'pointer',
+    fontSize: '14px',
+    fontWeight: '500',
+    margin: '-4px'
+};
+const SLIDER_CONTAINER_STYLE = {
+    display: 'inline-block',
+    height: '100px',
+    padding: '0',
+    width: '10px'
+};
+const VERTICAL_SLIDER_STYLE = {
+    writingMode: 'vertical-lr',
+    height: '100px',
+    padding: '0',
+    margin: '0',
+    width: '10px'
+};
+export class ZoomRangeWidget extends Widget {
+    static defaultProps = {
+        id: 'zoom-range',
+        viewId: null,
+        placement: 'top-left',
+        minZoom: undefined,
+        maxZoom: undefined,
+        step: 0.1,
+        style: {},
+        className: ''
+    };
+    placement = 'top-left';
+    className = 'deck-widget-zoom-range';
+    deck = null;
+    step;
+    currentZoom = 0;
+    inferredMinZoom = null;
+    inferredMaxZoom = null;
+    constructor(props = {}) {
+        super({ ...ZoomRangeWidget.defaultProps, ...props });
+        this.viewId = props.viewId ?? null;
+        this.placement = props.placement ?? 'top-left';
+        this.step = props.step ?? ZoomRangeWidget.defaultProps.step;
+    }
+    setProps(props) {
+        if (props.viewId !== undefined) {
+            this.viewId = props.viewId;
+        }
+        if (props.placement !== undefined) {
+            this.placement = props.placement;
+        }
+        if (props.step !== undefined) {
+            this.step = props.step;
+        }
+        super.setProps(props);
+    }
+    onAdd({ deck, viewId }) {
+        this.deck = deck;
+        if (this.viewId === undefined) {
+            this.viewId = viewId;
+        }
+    }
+    onRemove() {
+        this.deck = null;
+    }
+    onRenderHTML(rootElement) {
+        const style = { ...WRAPPER_STYLE, ...this.props.style };
+        Object.assign(rootElement.style, style);
+        const { minZoom, maxZoom } = this.getZoomBounds();
+        const clampedZoom = Math.max(minZoom, Math.min(maxZoom, this.currentZoom));
+        const stopEventPropagation = (event) => {
+            event.stopPropagation();
+            if (typeof event.stopImmediatePropagation === 'function') {
+                event.stopImmediatePropagation();
+            }
+        };
+        const ui = (_jsxs(_Fragment, { children: [_jsx("div", { style: ZOOM_BUTTON_STYLE, children: _jsx(LongPressButton, { onClick: () => this.handleZoomDelta(this.step), children: '+' }) }), _jsx("div", { style: SLIDER_CONTAINER_STYLE, onPointerDown: stopEventPropagation, onPointerMove: stopEventPropagation, onPointerUp: stopEventPropagation, onMouseDown: stopEventPropagation, onMouseMove: stopEventPropagation, onMouseUp: stopEventPropagation, onClick: stopEventPropagation, onWheel: stopEventPropagation, onTouchStart: stopEventPropagation, onTouchMove: stopEventPropagation, onTouchEnd: stopEventPropagation, children: _jsx("input", { type: "range", value: clampedZoom, min: minZoom, max: maxZoom, step: this.step, onInput: (event) => this.handleZoomTo(Number(event.target.value)), onChange: (event) => this.handleZoomTo(Number(event.target.value)), onPointerDown: stopEventPropagation, onPointerMove: stopEventPropagation, onPointerUp: stopEventPropagation, onMouseDown: stopEventPropagation, onMouseMove: stopEventPropagation, onMouseUp: stopEventPropagation, onClick: stopEventPropagation, onWheel: stopEventPropagation, onTouchStart: stopEventPropagation, onTouchMove: stopEventPropagation, onTouchEnd: stopEventPropagation, 
+                        /* @ts-expect-error - non-standard attribute for vertical sliders */
+                        orient: "vertical", style: VERTICAL_SLIDER_STYLE }) }), _jsx("div", { style: ZOOM_BUTTON_STYLE, children: _jsx(LongPressButton, { onClick: () => this.handleZoomDelta(-this.step), children: '-' }) })] }));
+        render(ui, rootElement);
+    }
+    onViewportChange(viewport) {
+        const viewState = this.getViewState(viewport);
+        const zoom = Number(viewState?.zoom);
+        if (Number.isFinite(zoom)) {
+            this.currentZoom = zoom;
+        }
+        if (this.props.minZoom === undefined) {
+            const minZoom = Number(viewState?.minZoom);
+            if (Number.isFinite(minZoom)) {
+                this.inferredMinZoom = minZoom;
+            }
+        }
+        if (this.props.maxZoom === undefined) {
+            const maxZoom = Number(viewState?.maxZoom);
+            if (Number.isFinite(maxZoom)) {
+                this.inferredMaxZoom = maxZoom;
+            }
+        }
+        this.updateHTML();
+    }
+    getZoomBounds() {
+        const minZoom = this.props.minZoom ?? this.inferredMinZoom ?? Number.NEGATIVE_INFINITY;
+        const maxZoom = this.props.maxZoom ?? this.inferredMaxZoom ?? Number.POSITIVE_INFINITY;
+        if (minZoom > maxZoom) {
+            return { minZoom: maxZoom, maxZoom: minZoom };
+        }
+        return {
+            minZoom: Number.isFinite(minZoom) ? minZoom : -20,
+            maxZoom: Number.isFinite(maxZoom) ? maxZoom : 20
+        };
+    }
+    getTargetViewports() {
+        const deck = this.deck;
+        if (!deck) {
+            return [];
+        }
+        if (this.viewId) {
+            if (hasViewManager(deck)) {
+                const viewport = deck.viewManager?.getViewport(this.viewId);
+                return viewport ? [viewport] : [];
+            }
+            return [];
+        }
+        return deck.getViewports();
+    }
+    getViewState(viewport) {
+        const deck = this.deck;
+        const viewManager = hasViewManager(deck) ? deck.viewManager : null;
+        const viewId = this.viewId || viewport.id;
+        if (viewManager) {
+            try {
+                return { ...viewManager.getViewState(viewId) };
+            }
+            catch (err) {
+                return cloneViewState(viewManager.viewState);
+            }
+        }
+        return cloneViewState(viewport);
+    }
+    handleZoomDelta(delta) {
+        const { minZoom, maxZoom } = this.getZoomBounds();
+        for (const viewport of this.getTargetViewports()) {
+            const viewState = this.getViewState(viewport);
+            const baseZoom = Number(viewState.zoom);
+            const current = Number.isFinite(baseZoom) ? baseZoom : this.currentZoom;
+            const nextZoom = Math.max(minZoom, Math.min(maxZoom, current + delta));
+            this.updateViewState(viewport, { ...viewState, zoom: nextZoom });
+        }
+    }
+    handleZoomTo(zoom) {
+        const { minZoom, maxZoom } = this.getZoomBounds();
+        const nextZoom = Math.max(minZoom, Math.min(maxZoom, zoom));
+        for (const viewport of this.getTargetViewports()) {
+            const viewState = this.getViewState(viewport);
+            this.updateViewState(viewport, { ...viewState, zoom: nextZoom });
+        }
+    }
+    updateViewState(viewport, viewState) {
+        if (!this.deck) {
+            return;
+        }
+        const viewId = this.viewId || viewport.id || 'default-view';
+        this.currentZoom = Number(viewState.zoom) || this.currentZoom;
+        this.updateHTML();
+        // @ts-ignore Using private method until a public alternative is available
+        this.deck._onViewStateChange({ viewId, viewState, interactionState: {} });
+    }
+}
+//# sourceMappingURL=zoom-range-widget.js.map

package/dist/widgets/zoom-range-widget.js.map

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

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@deck.gl-community/widgets",
+  "version": "9.2.0-beta.5",
+  "description": "UI widgets for deck.gl",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "widgets",
+    "visualization",
+    "deck.gl"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "test": "vitest run",
+    "test-watch": "vitest"
+  },
+  "dependencies": {
+    "@deck.gl/core": "~9.2.1",
+    "@turf/helpers": "^6.5.0",
+    "preact": "^10.17.0",
+    "supercluster": "^8.0.1"
+  },
+  "gitHead": "7c3c27d9df35a4d089d183696a06c643ea77fcd1"
+}

package/src/_deprecate/long-press-button.tsx

@@ -0,0 +1,50 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Component} from 'preact';
+
+export type LongPressButtonProps = {
+  onClick: () => void;
+  children: any;
+};
+
+export class LongPressButton extends Component<LongPressButtonProps> {
+  buttonPressTimer: ReturnType<typeof setTimeout> | null = null;
+
+  _repeat = () => {
+    if (this.buttonPressTimer) {
+      this.props.onClick();
+      this.buttonPressTimer = setTimeout(this._repeat, 100);
+    }
+  };
+
+  _handleButtonPress = () => {
+    this.buttonPressTimer = setTimeout(this._repeat, 100);
+  };
+
+  _handleButtonRelease = () => {
+    if (this.buttonPressTimer) {
+      clearTimeout(this.buttonPressTimer);
+    }
+    this.buttonPressTimer = null;
+  };
+
+  render() {
+    return (
+      <div className="deck-widget-button">
+        <div
+          style={{
+            pointerEvents: 'auto'
+          }}
+          onMouseDown={(event) => {
+            this._handleButtonPress();
+            document.addEventListener('mouseup', this._handleButtonRelease, {once: true});
+          }}
+        >
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+}

package/src/_deprecate/view-control-widget.tsx

@@ -0,0 +1,339 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Component, render} from 'preact';
+
+// import {FlyToInterpolator} from '@deck.gl/core';
+import {Widget, type Deck, type Viewport, type WidgetPlacement} from '@deck.gl/core';
+import {LongPressButton} from './long-press-button';
+
+export const ViewControlWrapper = ({children}) => (
+  <div
+    style={{
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'absolute',
+      zIndex: 99,
+      userSelect: 'none'
+    }}
+  >
+    {' '}
+    {children}{' '}
+  </div>
+);
+
+export const NavigationButtonContainer = ({children}) => (
+  <div
+    style={{
+      background: '#f7f7f7',
+      borderRadius: '23px',
+      border: '0.5px solid #eaeaea',
+      boxShadow: 'inset 11px 11px 5px -7px rgba(230, 230, 230, 0.49)',
+      height: '46px',
+      width: '46px'
+    }}
+  >
+    {' '}
+    {children}{' '}
+  </div>
+);
+
+export type NavigationButtonProps = {
+  left: any;
+  top: any;
+  rotate?: number;
+  children?: any;
+  onClick?: () => void;
+};
+
+export const NavigationButton = (props: NavigationButtonProps) => (
+  <div
+    onClick={props.onClick}
+    style={{
+      color: '#848484',
+      cursor: 'pointer',
+      position: 'absolute',
+      left: props.left,
+      top: props.top,
+      transform: `rotate(${props.rotate || 0}deg)`
+      // &:hover,
+      // &:active {
+      //   color: #00ade6;
+      // }
+    }}
+  >
+    {' '}
+    {props.children}{' '}
+  </div>
+);
+
+export const ZoomControlWrapper = ({children}) => (
+  <div
+    style={{
+      alignItems: 'center',
+      background: '#f7f7f7',
+      border: '0.5px solid #eaeaea',
+      display: 'flex',
+      flexDirection: 'column',
+      marginTop: '6px',
+      padding: '2px 0',
+      width: '18px'
+    }}
+  >
+    {' '}
+    {children}{' '}
+  </div>
+);
+
+export const VerticalSlider = ({children}) => (
+  <div
+    style={{
+      display: 'inline-block',
+      height: '100px',
+      padding: '0',
+      width: '10px'
+
+      // > input[type='range'][orient='vertical'] {
+      //   -webkit-appearance: slider-vertical;
+      //   height: 100px;
+      //   padding: 0;
+      //   margin: 0;
+      //   width: 10px;
+      // }
+    }}
+  >
+    {' '}
+    {children}{' '}
+  </div>
+);
+
+export const ZoomControlButton = ({children}) => (
+  <div
+    style={{
+      cursor: 'pointer',
+      fontSize: '14px',
+      fontWeight: 500,
+      margin: '-4px'
+
+      // &:hover,
+      // &:active {
+      //   color: #00ade6;
+      // }
+    }}
+  >
+    {' '}
+    {children}{' '}
+  </div>
+);
+
+export type ViewControlProps = {
+  id?: string;
+  viewId?: string;
+  placement?: WidgetPlacement;
+  fitBounds: () => void;
+  panBy?: (dx: number, dy: number) => void;
+  zoomBy?: (delta: number) => void;
+  zoomLevel: number;
+  minZoom: number;
+  maxZoom: number;
+  deltaPan: number;
+  deltaZoom: number;
+  /** CSS inline style overrides. */
+  style?: Partial<CSSStyleDeclaration>;
+  /** Additional CSS class. */
+  className?: string;
+};
+
+export class ViewControl extends Component<ViewControlProps> {
+  static displayName = 'ViewControl';
+
+  static defaultProps: Required<ViewControlProps> = {
+    id: undefined,
+    viewId: undefined,
+    placement: 'top-left',
+    fitBounds: () => {},
+    panBy: () => {},
+    zoomBy: () => {},
+    zoomLevel: 1,
+    deltaPan: 10,
+    deltaZoom: 0.1,
+    minZoom: 0.1,
+    maxZoom: 1,
+    style: {},
+    className: ''
+  };
+
+  // pan actions
+  panUp = () => this.props.panBy(0, this.props.deltaPan);
+  panDown = () => this.props.panBy(0, -1 * this.props.deltaPan);
+  panLeft = () => this.props.panBy(this.props.deltaPan, 0);
+  panRight = () => this.props.panBy(-1 * this.props.deltaPan, 0);
+
+  // zoom actions
+  zoomIn = () => this.props.zoomBy(this.props.deltaZoom);
+  zoomOut = () => this.props.zoomBy(-1 * this.props.deltaZoom);
+  onChangeZoomLevel = (evt) => {
+    const delta = evt.target.value - this.props.zoomLevel;
+    this.props.zoomBy(delta);
+  };
+
+  render() {
+    const buttons = [
+      {top: -2, left: 14, rotate: 0, onClick: this.panUp, content: '▲', key: 'up'},
+      {top: 12, left: 0, rotate: -90, onClick: this.panLeft, content: '◀', key: 'left'},
+      {top: 12, left: 28, rotate: 90, onClick: this.panRight, content: '▶', key: 'right'},
+      {top: 25, left: 14, rotate: 180, onClick: this.panDown, content: '▼', key: 'down'}
+    ];
+
+    return (
+      <ViewControlWrapper>
+        <NavigationButtonContainer>
+          {buttons.map((b: any) => (
+            <NavigationButton key={b.key} top={`${b.top}px`} left={`${b.left}px`} rotate={b.rotate}>
+              <LongPressButton onClick={b.onClick}>{b.content}</LongPressButton>
+            </NavigationButton>
+          ))}
+          <NavigationButton
+            top={'12px'}
+            left={'16px'}
+            onClick={() => {
+              // console.log('on click fit bounds') || this.props.fitBounds;
+            }}
+          >
+            {'¤'}
+          </NavigationButton>
+        </NavigationButtonContainer>
+        <ZoomControlWrapper>
+          <ZoomControlButton>
+            <LongPressButton onClick={this.zoomIn}>{'+'}</LongPressButton>
+          </ZoomControlButton>
+          <VerticalSlider>
+            <input
+              type="range"
+              value={this.props.zoomLevel}
+              min={this.props.minZoom}
+              max={this.props.maxZoom}
+              step={this.props.deltaZoom}
+              onChange={this.onChangeZoomLevel}
+              /* @ts-expect-error TODO */
+              orient="vertical"
+            />
+          </VerticalSlider>
+          <ZoomControlButton>
+            <LongPressButton onClick={this.zoomOut}>{'-'}</LongPressButton>
+          </ZoomControlButton>
+        </ZoomControlWrapper>
+      </ViewControlWrapper>
+    );
+  }
+}
+
+export class ViewControlWidget extends Widget<ViewControlProps> {
+  id = 'zoom';
+  placement: WidgetPlacement = 'top-left';
+  orientation: 'vertical' | 'horizontal' = 'vertical';
+  viewId?: string | null = null;
+  viewports: {[id: string]: Viewport} = {};
+  element?: HTMLDivElement;
+  className = 'deck-widget-view-control';
+
+  constructor(props: ViewControlProps) {
+    super(props);
+    this.props = {...ViewControl.defaultProps, ...props};
+    this.id = props.id || 'zoom';
+    this.viewId = props.viewId || null;
+    this.placement = props.placement || 'top-left';
+    // this.orientation = props.orientation || 'vertical';
+    // props.transitionDuration = props.transitionDuration || 200;
+    // props.zoomInLabel = props.zoomInLabel || 'Zoom In';
+    // props.zoomOutLabel = props.zoomOutLabel || 'Zoom Out';
+    props.style = props.style || {};
+  }
+
+  onAdd({deck}: {deck: Deck<any>}): HTMLDivElement {
+    this.deck = deck;
+    this.element = document.createElement('div');
+
+    const {style, className} = this.props;
+    this.element.classList.add('deck-widget', 'deck-widget-zoom');
+    if (className) {
+      this.element.classList.add(className);
+    }
+    if (style) {
+      Object.entries(style).map(([key, value]) =>
+        this.element.style.setProperty(key, value as string)
+      );
+    }
+
+    return this.element;
+  }
+
+  onRemove() {
+    this.deck = undefined;
+    this.element = undefined;
+  }
+
+  onRenderHTML(rootElement: HTMLElement): void {
+    const ui = (
+      <ViewControl
+        {...this.props}
+        zoomBy={this.handleDeltaZoom.bind(this)}
+        panBy={this.handlePanBy.bind(this)}
+      />
+    );
+    render(ui, rootElement);
+  }
+
+  setProps(props: Partial<ViewControlProps>) {
+    Object.assign(this.props, props);
+  }
+
+  onViewportChange(viewport: Viewport) {
+    this.viewports[viewport.id] = viewport;
+  }
+
+  handleDeltaZoom(deltaZoom: number) {
+    // console.log('Handle delta zoom');
+    for (const view of this.deck.getViewports()) {
+      this.handleZoomView(view, view.zoom + deltaZoom);
+    }
+  }
+
+  handlePanBy(deltaX: number, deltaY: number) {
+    // console.log('Handle panby', deltaX, deltaY);
+    for (const viewport of this.deck.getViewports()) {
+      this.handlePanViewport(viewport, deltaX, deltaY);
+    }
+  }
+
+  handleZoomView(viewport: Viewport, nextZoom: number) {
+    const viewId = this.viewId || viewport?.id || 'default-view';
+    // @ts-expect-error TODO we lack a proper API for getting viewStates
+    const viewState = this.deck.viewManager.viewState || viewport;
+    const nextViewState = {
+      ...viewState,
+      zoom: nextZoom
+      // transitionDuration: this.props.transitionDuration,
+      // transitionInterpolator: new FlyToInterpolator()
+    };
+
+    // @ts-ignore Using private method temporary until there's a public one
+    this.deck._onViewStateChange({viewId, viewState: nextViewState, interactionState: {}});
+  }
+
+  handlePanViewport(viewport: Viewport, deltaX: number, deltaY: number) {
+    const viewId = this.viewId || viewport?.id || 'default-view';
+    // @ts-expect-error TODO we lack a proper API for getting viewStates
+    const viewState = this.deck.viewManager.viewState || viewport;
+    // console.log('Handle pan viewport', deltaX, deltaY, viewState);
+    const nextViewState = {
+      ...viewState,
+      position: [viewport.position[0] + deltaX, viewport.position[1] + deltaY]
+    };
+
+    // @ts-ignore Using private method temporary until there's a public one
+    this.deck._onViewStateChange({viewId, viewState: nextViewState, interactionState: {}});
+  }
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+export {PanWidget} from './widgets/pan-widget';
+export type {PanWidgetProps} from './widgets/pan-widget';
+
+export {ZoomRangeWidget} from './widgets/zoom-range-widget';
+export type {ZoomRangeWidgetProps} from './widgets/zoom-range-widget';
+
+export {HtmlOverlayWidget} from './widgets/html-overlay-widget';
+export type {HtmlOverlayWidgetProps} from './widgets/html-overlay-widget';
+export {HtmlOverlayItem} from './widgets/html-overlay-item';
+export type {HtmlOverlayItemProps} from './widgets/html-overlay-item';
+export {HtmlClusterWidget} from './widgets/html-cluster-widget';
+export type {HtmlClusterWidgetProps} from './widgets/html-cluster-widget';
+export {HtmlTooltipWidget} from './widgets/html-tooltip-widget';
+export type {HtmlTooltipWidgetProps} from './widgets/html-tooltip-widget';