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

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

@@ -1,339 +0,0 @@
-// 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: {}});
-  }
-}