@deck.gl-community/experimental 9.2.0-beta.2 → 9.2.0-beta.3

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

@@ -1,125 +0,0 @@
-// deck.gl-community
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-import {Component, type ComponentChildren} from 'preact';
-
-const REPEAT_DELAY_MS = 300;
-const REPEAT_INTERVAL_MS = 100;
-
-export type LongPressButtonProps = {
-  onClick: () => void;
-  children: ComponentChildren;
-};
-
-export class LongPressButton extends Component<LongPressButtonProps> {
-  buttonPressTimer: ReturnType<typeof setTimeout> | null = null;
-  usingPointerEvents = false;
-
-  private stopEvent(event: Event) {
-    event.stopPropagation();
-    if (typeof (event as any).stopImmediatePropagation === 'function') {
-      (event as any).stopImmediatePropagation();
-    }
-    if (typeof (event as any).preventDefault === 'function') {
-      (event as any).preventDefault();
-    }
-  }
-
-  private repeat = () => {
-    if (this.buttonPressTimer) {
-      this.props.onClick();
-      this.buttonPressTimer = setTimeout(this.repeat, REPEAT_INTERVAL_MS);
-    }
-  };
-
-  private startPress(event: Event) {
-    this.stopEvent(event);
-    this.props.onClick();
-    this.buttonPressTimer = setTimeout(this.repeat, REPEAT_DELAY_MS);
-  }
-
-  private endPress(event?: Event) {
-    if (event) {
-      this.stopEvent(event);
-    }
-    if (this.buttonPressTimer) {
-      clearTimeout(this.buttonPressTimer);
-    }
-    this.buttonPressTimer = null;
-  }
-
-  private handlePointerDown = (event: PointerEvent) => {
-    this.usingPointerEvents = true;
-    (event.currentTarget as HTMLElement | null)?.setPointerCapture?.(event.pointerId);
-    this.startPress(event);
-  };
-
-  private handlePointerUp = (event: PointerEvent) => {
-    (event.currentTarget as HTMLElement | null)?.releasePointerCapture?.(event.pointerId);
-    this.endPress(event);
-  };
-
-  private handlePointerCancel = (event: PointerEvent) => {
-    (event.currentTarget as HTMLElement | null)?.releasePointerCapture?.(event.pointerId);
-    this.endPress(event);
-  };
-
-  private handleMouseDown = (event: MouseEvent) => {
-    if (this.usingPointerEvents) {
-      return;
-    }
-    this.startPress(event);
-    document.addEventListener('mouseup', this.handleMouseUp, {once: true});
-  };
-
-  private handleMouseUp = (event: MouseEvent) => {
-    if (this.usingPointerEvents) {
-      return;
-    }
-    this.endPress(event);
-  };
-
-  private handleTouchStart = (event: TouchEvent) => {
-    if (this.usingPointerEvents) {
-      return;
-    }
-    this.startPress(event);
-    document.addEventListener('touchend', this.handleTouchEnd, {once: true});
-    document.addEventListener('touchcancel', this.handleTouchEnd, {once: true});
-  };
-
-  private handleTouchEnd = (event: TouchEvent) => {
-    if (this.usingPointerEvents) {
-      return;
-    }
-    this.endPress(event);
-  };
-
-  render() {
-    return (
-      <div className="deck-widget-button">
-        <div
-          style={{pointerEvents: 'auto'}}
-          onPointerDown={this.handlePointerDown}
-          onPointerUp={this.handlePointerUp}
-          onPointerCancel={this.handlePointerCancel}
-          onPointerMove={(event) => this.stopEvent(event)}
-          onPointerLeave={this.handlePointerCancel}
-          onPointerOut={this.handlePointerCancel}
-          onMouseDown={this.handleMouseDown}
-          onMouseUp={this.handleMouseUp}
-          onMouseMove={(event) => this.stopEvent(event)}
-          onTouchStart={this.handleTouchStart}
-          onTouchEnd={this.handleTouchEnd}
-          onTouchMove={(event) => this.stopEvent(event)}
-          onContextMenu={(event) => event.preventDefault()}
-          onWheel={(event) => this.stopEvent(event)}
-          onClick={(event) => this.stopEvent(event)}
-        >
-          {this.props.children}
-        </div>
-      </div>
-    );
-  }
-}

package/src/widgets/pan-widget.tsx

@@ -1,178 +0,0 @@
-// deck.gl-community
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-import {render} from 'preact';
-import type {JSX} from 'preact';
-import {LongPressButton} from './long-press-button';
-import {
-  Widget,
-  type Deck,
-  type Viewport,
-  type WidgetPlacement,
-  type WidgetProps
-} from '@deck.gl/core';
-
-export type PanWidgetProps = WidgetProps & {
-  viewId?: string | null;
-  placement?: WidgetPlacement;
-  /** Amount in screen pixels to pan by when a button is pressed. */
-  step?: number;
-};
-
-const WRAPPER_STYLE: Partial<CSSStyleDeclaration> = {
-  position: 'absolute',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  zIndex: '99',
-  userSelect: 'none'
-};
-
-const NAVIGATION_CONTAINER_STYLE: JSX.CSSProperties = {
-  position: 'relative',
-  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'
-};
-
-const NAVIGATION_BUTTON_STYLE: JSX.CSSProperties = {
-  color: '#848484',
-  cursor: 'pointer',
-  position: 'absolute',
-  pointerEvents: 'auto'
-};
-
-export class PanWidget extends Widget<PanWidgetProps> {
-  static override defaultProps = {
-    id: 'pan',
-    viewId: null,
-    placement: 'top-left',
-    step: 48,
-    style: {},
-    className: ''
-  } satisfies Required<WidgetProps> & Required<Pick<PanWidgetProps, 'step'>> & PanWidgetProps;
-
-  placement: WidgetPlacement = 'top-left';
-  className = 'deck-widget-pan';
-  deck?: Deck | null = null;
-  step: number;
-
-  constructor(props: PanWidgetProps = {}) {
-    super({...PanWidget.defaultProps, ...props});
-    this.viewId = props.viewId ?? null;
-    this.placement = props.placement ?? 'top-left';
-    this.step = props.step ?? PanWidget.defaultProps.step;
-  }
-
-  override setProps(props: Partial<PanWidgetProps>): void {
-    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);
-  }
-
-  override onAdd({deck, viewId}: {deck: Deck; viewId: string | null}): void {
-    this.deck = deck;
-    if (this.viewId === undefined) {
-      this.viewId = viewId;
-    }
-  }
-
-  override onRemove(): void {
-    this.deck = null;
-  }
-
-  override onRenderHTML(rootElement: HTMLElement): void {
-    const style = {...WRAPPER_STYLE, ...this.props.style};
-    Object.assign(rootElement.style, style);
-
-    const buttons = [
-      {top: -2, left: 14, onClick: () => this.handlePan(0, this.step), label: '▲', key: 'up'},
-      {top: 12, left: 0, onClick: () => this.handlePan(this.step, 0), label: '◀', key: 'left'},
-      {top: 12, left: 28, onClick: () => this.handlePan(-this.step, 0), label: '▶', key: 'right'},
-      {top: 25, left: 14, onClick: () => this.handlePan(0, -this.step), label: '▼', key: 'down'}
-    ] as const;
-
-    const ui = (
-      <div style={NAVIGATION_CONTAINER_STYLE}>
-        {buttons.map((button) => (
-          <div
-            key={button.key}
-            style={{
-              ...NAVIGATION_BUTTON_STYLE,
-              top: `${button.top}px`,
-              left: `${button.left}px`
-            } as JSX.CSSProperties}
-          >
-            <LongPressButton onClick={button.onClick}>{button.label}</LongPressButton>
-          </div>
-        ))}
-      </div>
-    );
-
-    render(ui, rootElement);
-  }
-
-  private getTargetViewports(): Viewport[] {
-    const deck = this.deck as (Deck & {viewManager?: any}) | null;
-    if (!deck) {
-      return [];
-    }
-
-    if (this.viewId) {
-      const viewport = deck.viewManager?.getViewport(this.viewId);
-      return viewport ? [viewport] : [];
-    }
-    return deck.getViewports();
-  }
-
-  private getViewState(viewport: Viewport): any {
-    const viewManager = (this.deck as (Deck & {viewManager?: any}) | null)?.viewManager;
-    const viewId = this.viewId || viewport.id;
-    if (viewManager) {
-      try {
-        return {...viewManager.getViewState(viewId)};
-      } catch (err) {
-        return {...(viewManager.viewState as any)};
-      }
-    }
-    return {...(viewport as any)};
-  }
-
-  private handlePan(deltaX: number, deltaY: number) {
-    if (!this.deck) {
-      return;
-    }
-
-    const viewports = this.getTargetViewports();
-    for (const viewport of viewports) {
-      const center = viewport.unproject([viewport.width / 2, viewport.height / 2]);
-      if (!center) {
-        continue;
-      }
-
-      const nextPixel: [number, number] = [
-        viewport.width / 2 + deltaX,
-        viewport.height / 2 + deltaY
-      ];
-
-      const viewState = this.getViewState(viewport);
-      const panUpdate = viewport.panByPosition(center, nextPixel);
-      const nextViewState = {...viewState, ...panUpdate};
-      const viewId = this.viewId || viewport.id || 'default-view';
-
-      // @ts-ignore Using private method until a public alternative is available
-      this.deck._onViewStateChange({viewId, viewState: nextViewState, interactionState: {}});
-    }
-  }
-}

package/src/widgets/zoom-range-widget.tsx

@@ -1,279 +0,0 @@
-// deck.gl-community
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-import {render} from 'preact';
-import type {JSX} from 'preact';
-import {LongPressButton} from './long-press-button';
-import {
-  Widget,
-  type Deck,
-  type Viewport,
-  type WidgetPlacement,
-  type WidgetProps
-} from '@deck.gl/core';
-
-export type ZoomRangeWidgetProps = WidgetProps & {
-  viewId?: string | null;
-  placement?: WidgetPlacement;
-  minZoom?: number;
-  maxZoom?: number;
-  step?: number;
-};
-
-const WRAPPER_STYLE: Partial<CSSStyleDeclaration> = {
-  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: JSX.CSSProperties = {
-  cursor: 'pointer',
-  fontSize: '14px',
-  fontWeight: '500',
-  margin: '-4px'
-};
-
-const SLIDER_CONTAINER_STYLE: JSX.CSSProperties = {
-  display: 'inline-block',
-  height: '100px',
-  padding: '0',
-  width: '10px'
-};
-
-export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
-  static override defaultProps = {
-    id: 'zoom-range',
-    viewId: null,
-    placement: 'top-left',
-    minZoom: undefined,
-    maxZoom: undefined,
-    step: 0.1,
-    style: {},
-    className: ''
-  } satisfies Required<WidgetProps> & Required<Pick<ZoomRangeWidgetProps, 'step'>> & ZoomRangeWidgetProps;
-
-  placement: WidgetPlacement = 'top-left';
-  className = 'deck-widget-zoom-range';
-  deck?: Deck | null = null;
-  step: number;
-  currentZoom = 0;
-  inferredMinZoom: number | null = null;
-  inferredMaxZoom: number | null = null;
-
-  constructor(props: ZoomRangeWidgetProps = {}) {
-    super({...ZoomRangeWidget.defaultProps, ...props});
-    this.viewId = props.viewId ?? null;
-    this.placement = props.placement ?? 'top-left';
-    this.step = props.step ?? ZoomRangeWidget.defaultProps.step;
-  }
-
-  override setProps(props: Partial<ZoomRangeWidgetProps>): void {
-    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);
-  }
-
-  override onAdd({deck, viewId}: {deck: Deck; viewId: string | null}): void {
-    this.deck = deck;
-    if (this.viewId === undefined) {
-      this.viewId = viewId;
-    }
-  }
-
-  override onRemove(): void {
-    this.deck = null;
-  }
-
-  override onRenderHTML(rootElement: HTMLElement): void {
-    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) => {
-      event.stopPropagation();
-      if (typeof (event as any).stopImmediatePropagation === 'function') {
-        (event as any).stopImmediatePropagation();
-      }
-    };
-
-    const ui = (
-      <>
-        <div style={ZOOM_BUTTON_STYLE}>
-          <LongPressButton onClick={() => this.handleZoomDelta(this.step)}>{'+'}</LongPressButton>
-        </div>
-        <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}
-        >
-          <input
-            type="range"
-            value={clampedZoom}
-            min={minZoom}
-            max={maxZoom}
-            step={this.step}
-            onInput={(event) =>
-              this.handleZoomTo(Number((event.target as HTMLInputElement).value))
-            }
-            onChange={(event) =>
-              this.handleZoomTo(Number((event.target as HTMLInputElement).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={
-              {
-                writingMode: 'vertical-lr',
-                height: '100px',
-                padding: '0',
-                margin: '0',
-                width: '10px'
-              } as JSX.CSSProperties
-            }
-          />
-        </div>
-        <div style={ZOOM_BUTTON_STYLE}>
-          <LongPressButton onClick={() => this.handleZoomDelta(-this.step)}>{'-'}</LongPressButton>
-        </div>
-      </>
-    );
-
-    render(ui, rootElement);
-  }
-
-  override onViewportChange(viewport: Viewport): void {
-    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();
-  }
-
-  private getZoomBounds(): {minZoom: number; maxZoom: number} {
-    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
-    };
-  }
-
-  private getTargetViewports(): Viewport[] {
-    const deck = this.deck as (Deck & {viewManager?: any}) | null;
-    if (!deck) {
-      return [];
-    }
-    if (this.viewId) {
-      const viewport = deck.viewManager?.getViewport(this.viewId);
-      return viewport ? [viewport] : [];
-    }
-    return deck.getViewports();
-  }
-
-  private getViewState(viewport: Viewport): any {
-    const viewManager = (this.deck as (Deck & {viewManager?: any}) | null)?.viewManager;
-    const viewId = this.viewId || viewport.id;
-    if (viewManager) {
-      try {
-        return {...viewManager.getViewState(viewId)};
-      } catch (err) {
-        return {...(viewManager.viewState as any)};
-      }
-    }
-    return {...(viewport as any)};
-  }
-
-  private handleZoomDelta(delta: number) {
-    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});
-    }
-  }
-
-  private handleZoomTo(zoom: number) {
-    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});
-    }
-  }
-
-  private updateViewState(viewport: Viewport, viewState: any) {
-    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: {}});
-  }
-}