@deck.gl-community/react 9.0.1

package/dist/overlays/html-overlay-item.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+type Props = {
+    x?: number;
+    y?: number;
+    coordinates: number[];
+    children: any;
+    style?: Record<string, any>;
+};
+export declare class HtmlOverlayItem extends React.Component<Props> {
+    render(): React.JSX.Element;
+}
+export {};

package/dist/overlays/html-overlay-item.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export class HtmlOverlayItem extends React.Component {
+    render() {
+        const { x, y, children, style, coordinates, ...props } = this.props;
+        const { zIndex = 'auto', ...remainingStyle } = style || {};
+        return (
+        // Using transform translate to position overlay items will result in a smooth zooming
+        // effect, whereas using the top/left css properties will cause overlay items to
+        // jiggle when zooming
+        React.createElement("div", { style: { transform: `translate(${x}px, ${y}px)`, position: 'absolute', zIndex } },
+            React.createElement("div", { style: { userSelect: 'none', ...remainingStyle }, ...props }, children)));
+    }
+}

package/dist/overlays/html-overlay.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+interface Props {
+    viewport?: Record<string, any>;
+    zIndex?: number;
+    children?: React.ReactNode;
+    overflowMargin?: number;
+}
+export declare class HtmlOverlay extends React.Component<Props> {
+    static deckGLViewProps: boolean;
+    getItems(): Array<any>;
+    getCoords(coordinates: number[]): [number, number];
+    inView([x, y]: number[]): boolean;
+    scaleWithZoom(n: number): number;
+    breakpointWithZoom(threshold: number, a: any, b: any): any;
+    getViewport(): Record<string, any>;
+    getZoom(): any;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/overlays/html-overlay.js

@@ -0,0 +1,65 @@
+import * as React from 'react';
+const styles = {
+    mainContainer: {
+        width: '100%',
+        height: '100%',
+        position: 'absolute',
+        pointerEvents: 'none',
+        overflow: 'hidden'
+    }
+};
+export class HtmlOverlay extends React.Component {
+    // This is needed for Deck.gl 8.0+
+    static deckGLViewProps = true;
+    // Override this to provide your items
+    getItems() {
+        const { children } = this.props;
+        if (children) {
+            return Array.isArray(children) ? children : [children];
+        }
+        return [];
+    }
+    getCoords(coordinates) {
+        const pos = this.props.viewport.project(coordinates);
+        if (!pos)
+            return [-1, -1];
+        return pos;
+    }
+    inView([x, y]) {
+        const { viewport, overflowMargin = 0 } = this.props;
+        const { width, height } = viewport;
+        return !(x < -overflowMargin ||
+            y < -overflowMargin ||
+            x > width + overflowMargin ||
+            y > height + overflowMargin);
+    }
+    scaleWithZoom(n) {
+        const { zoom } = this.props.viewport;
+        return n / Math.pow(2, 20 - zoom);
+    }
+    breakpointWithZoom(threshold, a, b) {
+        const { zoom } = this.props.viewport;
+        return zoom > threshold ? a : b;
+    }
+    getViewport() {
+        return this.props.viewport;
+    }
+    getZoom() {
+        return this.props.viewport.zoom;
+    }
+    render() {
+        const { zIndex = 1 } = this.props;
+        const style = Object.assign({ zIndex }, styles.mainContainer);
+        const renderItems = [];
+        this.getItems()
+            .filter(Boolean)
+            .forEach((item, index) => {
+            const [x, y] = this.getCoords(item.props.coordinates);
+            if (this.inView([x, y])) {
+                const key = item.key === null || item.key === undefined ? index : item.key;
+                renderItems.push(React.cloneElement(item, { x, y, key }));
+            }
+        });
+        return React.createElement("div", { style: style }, renderItems);
+    }
+}

package/dist/overlays/html-tooltip-overlay.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { HtmlOverlay } from './html-overlay';
+type State = {
+    visible: boolean;
+    pickingInfo: Record<string, any> | null | undefined;
+};
+export declare class HtmlTooltipOverlay extends HtmlOverlay {
+    constructor(props: any);
+    componentWillMount(): void;
+    timeoutID: number | null | undefined;
+    state: State;
+    _getTooltip(pickingInfo: Record<string, any>): string;
+    _makeOverlay(): React.JSX.Element;
+    getItems(): Array<Record<string, any> | null | undefined>;
+}
+export {};

package/dist/overlays/html-tooltip-overlay.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { HtmlOverlay } from './html-overlay';
+import { HtmlOverlayItem } from './html-overlay-item';
+const styles = {
+    tooltip: {
+        transform: 'translate(-50%,-100%)',
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        padding: '4px 8px',
+        borderRadius: 8,
+        color: 'white'
+    }
+};
+const SHOW_TOOLTIP_TIMEOUT = 250;
+export class HtmlTooltipOverlay extends HtmlOverlay {
+    constructor(props) {
+        super(props);
+        this.state = { visible: false, pickingInfo: null };
+    }
+    componentWillMount() {
+        this.context.nebula.queryObjectEvents.on('pick', ({ event, pickingInfo }) => {
+            if (this.timeoutID !== null) {
+                window.clearTimeout(this.timeoutID);
+            }
+            this.timeoutID = null;
+            if (pickingInfo && this._getTooltip(pickingInfo)) {
+                this.timeoutID = window.setTimeout(() => {
+                    this.setState({ visible: true, pickingInfo });
+                }, SHOW_TOOLTIP_TIMEOUT);
+            }
+            else {
+                this.setState({ visible: false });
+            }
+        });
+    }
+    timeoutID = null;
+    state = undefined;
+    _getTooltip(pickingInfo) {
+        return pickingInfo.object.style.tooltip;
+    }
+    _makeOverlay() {
+        const { pickingInfo } = this.state;
+        if (pickingInfo) {
+            return (React.createElement(HtmlOverlayItem, { key: 0, coordinates: pickingInfo.lngLat, style: styles.tooltip }, this._getTooltip(pickingInfo)));
+        }
+        return null;
+    }
+    getItems() {
+        if (this.state.visible) {
+            return [this._makeOverlay()];
+        }
+        return [];
+    }
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@deck.gl-community/react",
+  "description": "React components for deck.gl",
+  "license": "MIT",
+  "version": "9.0.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/uber/@deck.gl-community"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test-watch": "vitest"
+  },
+  "keywords": [
+    "webgl",
+    "visualization",
+    "overlay",
+    "layer"
+  ],
+  "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"
+  ],
+  "dependencies": {
+    "@turf/helpers": "^6.5.0",
+    "@types/styled-react-modal": "^1.2.5",
+    "boxicons": "^2.1.4",
+    "prop-types": "^15.8.1",
+    "styled-components": "^4.4.1",
+    "styled-react-modal": "^3.1.1",
+    "supercluster": "^8.0.1"
+  },
+  "peerDependencies": {
+    "react": "^16.14 || ^17",
+    "react-dom": "^16.14 || ^17"
+  },
+  "gitHead": "646f8328d27d67d596f05c9154072051ec5cf4f0"
+}

package/src/components/icon.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import 'boxicons';
+
+export function Icon(props) {
+  // @ts-expect-error TODO
+  return <box-icon color="currentColor" {...props} />;
+}

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

@@ -0,0 +1,43 @@
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+
+export class LongPressButton extends PureComponent {
+  static propTypes = {
+    onClick: PropTypes.func.isRequired,
+    // eslint-disable-next-line react/forbid-prop-types
+    children: PropTypes.any.isRequired
+  };
+
+  buttonPressTimer: ReturnType<typeof setTimeout> | null = null;
+
+  _repeat = () => {
+    if (this.buttonPressTimer) {
+      (this.props as any).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
+        onMouseDown={(event) => {
+          this._handleButtonPress();
+          document.addEventListener('mouseup', this._handleButtonRelease, {once: true});
+        }}
+      >
+        {(this.props as any).children}
+      </div>
+    );
+  }
+}

package/src/components/modal.tsx

@@ -0,0 +1,92 @@
+/* eslint-env browser */
+
+import * as React from 'react';
+import Modal, {ModalProvider} from 'styled-react-modal';
+import styled from 'styled-components';
+
+export const Button = styled.button`
+  display: inline-block;
+  color: #fff;
+  background-color: rgb(90, 98, 94);
+  font-size: 1em;
+  margin: 0.25em;
+  padding: 0.375em 0.75em;
+  border: 1px solid transparent;
+  border-radius: 0.25em;
+  display: block;
+`;
+
+const StyledModal = Modal.styled`
+  position: relative;
+  display: block;
+  width: 50rem;
+  height: auto;
+  max-width: 500px;
+  margin: 1.75rem auto;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  color: rgb(21, 25, 29);
+  line-height: 1.5;
+  text-align: left;
+`;
+
+const Content = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  pointer-events: auto;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 0.3rem;
+  outline: 0;
+`;
+
+const HeaderRow = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 0.75rem 0.75rem;
+  border-bottom: 1px solid rgb(222, 226, 230);
+`;
+
+const Header = styled.h5`
+  font-size: 1.25rem;
+  font-weight: 500;
+  margin: 0;
+`;
+
+export type ModalProps = {
+  title: any;
+  content: any;
+  onClose: () => unknown;
+};
+
+export function EditorModal(props: ModalProps) {
+  const [isOpen, setIsOpen] = React.useState(true);
+
+  function toggleModal() {
+    if (isOpen) {
+      props.onClose();
+    }
+    setIsOpen(!isOpen);
+  }
+
+  return (
+    <>
+      <ModalProvider>
+        <StyledModal isOpen={isOpen} onBackgroundClick={toggleModal} onEscapeKeydown={toggleModal}>
+          <Content>
+            <HeaderRow>
+              <Header>{props.title}</Header>
+            </HeaderRow>
+            {props.content}
+          </Content>
+        </StyledModal>
+      </ModalProvider>
+    </>
+  );
+}

package/src/components/positioned-view-control.tsx

@@ -0,0 +1,16 @@
+import {ViewControl} from './view-control';
+import React from 'react';
+
+// A wrapper for positioning the ViewControl component
+export const PositionedViewControl = ({fitBounds, panBy, zoomBy, zoomLevel, maxZoom, minZoom}) => (
+  <div style={{position: 'relative', top: '20px', left: '20px'}}>
+    <ViewControl
+      fitBounds={fitBounds}
+      panBy={panBy}
+      zoomBy={zoomBy}
+      zoomLevel={zoomLevel}
+      maxZoom={maxZoom}
+      minZoom={minZoom}
+    />
+  </div>
+);

package/src/components/view-control.tsx

@@ -0,0 +1,163 @@
+// @ts-nocheck TODO
+
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import {LongPressButton} from './long-press-button';
+
+export const ViewControlWrapper = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  z-index: 99;
+  user-select: none;
+`;
+
+export const NavigationButtonContainer = styled.div`
+  background: #f7f7f7;
+  border-radius: 23px;
+  border: 0.5px solid #eaeaea;
+  box-shadow: inset 11px 11px 5px -7px rgba(230, 230, 230, 0.49);
+  height: 46px;
+  width: 46px;
+`;
+
+export const NavigationButton = styled.div`
+  color: #848484;
+  cursor: pointer;
+  left: ${(props: any) => props.left};
+  position: absolute;
+  top: ${(props: any) => props.top};
+  transform: rotate(${(props: any) => props.rotate || 0}deg);
+
+  &:hover,
+  &:active {
+    color: #00ade6;
+  }
+`;
+
+export const ZoomControlWrapper = styled.div`
+  align-items: center;
+  background: #f7f7f7;
+  border: 0.5px solid #eaeaea;
+  display: flex;
+  flex-direction: column;
+  margin-top: 6px;
+  padding: 2px 0;
+  width: 18px;
+`;
+
+export const VerticalSlider = styled.div`
+  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;
+  }
+`;
+
+export const ZoomControlButton = styled.div`
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  margin: -4px;
+
+  &:hover,
+  &:active {
+    color: #00ade6;
+  }
+`;
+
+export class ViewControl extends PureComponent {
+  static displayName = 'ViewControl';
+
+  static propTypes = {
+    // functions
+    fitBounds: PropTypes.func,
+    panBy: PropTypes.func,
+    zoomBy: PropTypes.func,
+    // current zoom level
+    zoomLevel: PropTypes.number,
+    // configuration
+    minZoom: PropTypes.number,
+    maxZoom: PropTypes.number,
+    deltaPan: PropTypes.number,
+    deltaZoom: PropTypes.number
+  };
+
+  static defaultProps = {
+    fitBounds: () => {},
+    panBy: () => {},
+    zoomBy: () => {},
+    deltaPan: 10,
+    deltaZoom: 0.1,
+    minZoom: 0.1,
+    maxZoom: 1
+  };
+
+  // pan actions
+  panUp = () => (this.props as any).panBy(0, (this.props as any).deltaPan);
+  panDown = () => (this.props as any).panBy(0, -1 * (this.props as any).deltaPan);
+  panLeft = () => (this.props as any).panBy((this.props as any).deltaPan, 0);
+  panRight = () => (this.props as any).panBy(-1 * (this.props as any).deltaPan, 0);
+
+  // zoom actions
+  zoomIn = () => (this.props as any).zoomBy((this.props as any).deltaZoom);
+  zoomOut = () => (this.props as any).zoomBy(-1 * (this.props as any).deltaZoom);
+  onChangeZoomLevel = (evt) => {
+    const delta = evt.target.value - (this.props as any).zoomLevel;
+    (this.props as any).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>
+          ))}
+          {/* @ts-expect-error TODO */}
+          <NavigationButton top={'12px'} left={'16px'} onClick={this.props.fitBounds}>
+            {'¤'}
+          </NavigationButton>
+        </NavigationButtonContainer>
+        <ZoomControlWrapper>
+          <ZoomControlButton>
+            <LongPressButton onClick={this.zoomIn}>{'+'}</LongPressButton>
+          </ZoomControlButton>
+          <VerticalSlider>
+            <input
+              type="range"
+              value={(this.props as any).zoomLevel}
+              min={(this.props as any).minZoom}
+              max={(this.props as any).maxZoom}
+              step={(this.props as any).deltaZoom}
+              onChange={this.onChangeZoomLevel}
+              /* @ts-expect-error */
+              orient="vertical"
+            />
+          </VerticalSlider>
+          <ZoomControlButton>
+            <LongPressButton onClick={this.zoomOut}>{'-'}</LongPressButton>
+          </ZoomControlButton>
+        </ZoomControlWrapper>
+      </ViewControlWrapper>
+    );
+  }
+}

package/src/index.ts

@@ -0,0 +1,19 @@
+// Components (originally from @deck.gl-community/react-graph-layers)
+
+export {LongPressButton} from './components/long-press-button';
+export {ViewControl} from './components/view-control';
+export {PositionedViewControl} from './components/positioned-view-control';
+
+// Components (originally from @nebula.gl/editor)
+
+export {EditorModal as Modal} from './components/modal';
+export {Button} from './components/modal';
+export {Icon} from './components/icon';
+
+// Overlays (originally from @nebula.gl/overlays)
+
+export {HtmlOverlay} from './overlays/html-overlay';
+export {HtmlOverlayItem} from './overlays/html-overlay-item';
+export {HtmlClusterOverlay} from './overlays/html-cluster-overlay';
+
+export {HtmlTooltipOverlay} from './overlays/html-tooltip-overlay';

package/src/overlays/html-cluster-overlay.ts

@@ -0,0 +1,80 @@
+import {point} from '@turf/helpers';
+import Supercluster from 'supercluster';
+import {HtmlOverlay} from './html-overlay';
+
+export class HtmlClusterOverlay<ObjType> extends HtmlOverlay {
+  _superCluster: Supercluster;
+  _lastObjects: ObjType[] | null | undefined = null;
+
+  getItems(): Record<string, any>[] {
+    // supercluster().load() is expensive and we want to run it only
+    // when necessary and not for every frame.
+
+    // TODO: Warn if this is running many times / sec
+
+    const newObjects = this.getAllObjects();
+    if (newObjects !== this._lastObjects) {
+      this._superCluster = new Supercluster(this.getClusterOptions());
+      this._superCluster.load(
+        newObjects.map((object) => point(this.getObjectCoordinates(object), {object}))
+      );
+      this._lastObjects = newObjects;
+      // console.log('new Supercluster() run');
+    }
+
+    const clusters = this._superCluster.getClusters(
+      [-180, -90, 180, 90],
+      Math.round(this.getZoom())
+    );
+
+    return clusters.map(
+      ({
+        geometry: {coordinates},
+        properties: {cluster, point_count: pointCount, cluster_id: clusterId, object}
+      }) =>
+        cluster
+          ? this.renderCluster(coordinates, clusterId, pointCount)
+          : this.renderObject(coordinates, object)
+    );
+  }
+
+  getClusterObjects(clusterId: number): ObjType[] {
+    return this._superCluster
+      .getLeaves(clusterId, Infinity)
+      .map((object) => object.properties.object);
+  }
+
+  // Override to provide items that need clustering.
+  // If the items have not changed please provide the same array to avoid
+  // regeneration of the cluster which causes performance issues.
+  getAllObjects(): ObjType[] {
+    return [];
+  }
+
+  // override to provide coordinates for each object of getAllObjects()
+  getObjectCoordinates(obj: ObjType): [number, number] {
+    return [0, 0];
+  }
+
+  // Get options object used when instantiating supercluster
+  getClusterOptions(): Record<string, any> | null | undefined {
+    return {
+      maxZoom: 20
+    };
+  }
+
+  // override to return an HtmlOverlayItem
+  renderObject(coordinates: number[], obj: ObjType): Record<string, any> | null | undefined {
+    return null;
+  }
+
+  // override to return an HtmlOverlayItem
+  // use getClusterObjects() to get cluster contents
+  renderCluster(
+    coordinates: number[],
+    clusterId: number,
+    pointCount: number
+  ): Record<string, any> | null | undefined {
+    return null;
+  }
+}

package/src/overlays/html-overlay-item.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+type Props = {
+  // Injected by HtmlOverlay
+  x?: number;
+  y?: number;
+
+  // User provided
+  coordinates: number[];
+  children: any;
+  style?: Record<string, any>;
+};
+
+export class HtmlOverlayItem extends React.Component<Props> {
+  render() {
+    const {x, y, children, style, coordinates, ...props} = this.props;
+    const {zIndex = 'auto', ...remainingStyle} = style || {};
+
+    return (
+      // Using transform translate to position overlay items will result in a smooth zooming
+      // effect, whereas using the top/left css properties will cause overlay items to
+      // jiggle when zooming
+      <div style={{transform: `translate(${x}px, ${y}px)`, position: 'absolute', zIndex}}>
+        <div style={{userSelect: 'none', ...remainingStyle}} {...props}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+}