feat: add pan and zoom widgets to experimental module

examples/graph-layers/graph-viewer-legacy/react-graph-layers/graph-gl.tsx

@@ -14,8 +14,8 @@ import {
   SimpleLayout
 } from '@deck.gl-community/graph-layers';
 import type {GraphLayerStylesheet} from '@deck.gl-community/graph-layers';
-import {PositionedViewControl} from '@deck.gl-community/react';
-import {ViewControlWidget} from '@deck.gl-community/graph-layers';
+import {PanWidget, ZoomRangeWidget} from '@deck.gl-community/experimental';
+import '@deck.gl/widgets/stylesheet.css';
 import '@deck.gl/widgets/stylesheet.css';
 
 import {extent} from 'd3-array';
@@ -60,7 +60,6 @@ export const GraphGL = ({
   // eslint-disable-next-line no-console
   onError = (error) => console.error(error),
   initialViewState = INITIAL_VIEW_STATE,
-  ViewControlComponent = PositionedViewControl,
   minZoom = -20,
   maxZoom = 20,
   viewportPadding = 50,
@@ -93,6 +92,25 @@ export const GraphGL = ({
 
   const [{isLoading}, loadingDispatch] = useLoading(engine) as any;
 
+  const widgets = useMemo(
+    () => [
+      new PanWidget({
+        id: 'legacy-pan-widget',
+        style: {margin: '20px 0 0 20px'}
+      }),
+      new ZoomRangeWidget({
+        id: 'legacy-zoom-widget',
+        style: {margin: '90px 0 0 20px'}
+      })
+    ],
+    []
+  );
+
+  useEffect(() => {
+    const zoomWidget = widgets.find((widget) => widget instanceof ZoomRangeWidget);
+    zoomWidget?.setProps({minZoom, maxZoom});
+  }, [widgets, minZoom, maxZoom]);
+
   useLayoutEffect(() => {
     engine.run();
 
@@ -128,28 +146,6 @@ export const GraphGL = ({
     });
   }, [engine, viewState, setViewState, viewportPadding, minZoom, maxZoom]);
 
-  // Relatively pan the graph by a specified position vector.
-  const panBy = useCallback(
-    (dx, dy) =>
-      setViewState({
-        ...viewState,
-        target: [viewState.target[0] + dx, viewState.target[1] + dy]
-      }),
-    [viewState, setViewState]
-  );
-
-  // Relatively zoom the graph by a delta zoom level
-  const zoomBy = useCallback(
-    (deltaZoom) => {
-      const newZoom = viewState.zoom + deltaZoom;
-      setViewState({
-        ...viewState,
-        zoom: Math.min(Math.max(newZoom, minZoom), maxZoom)
-      });
-    },
-    [maxZoom, minZoom, viewState, setViewState]
-  );
-
   useEffect(() => {
     if (zoomToFitOnLoad && isLoading) {
       engine.addEventListener('onLayoutDone', fitBounds, {once: true});
@@ -220,22 +216,10 @@ export const GraphGL = ({
               ]
             ) as any
           }
-          widgets={[
-            new ViewControlWidget({})
-          ]}
+          widgets={widgets}
           getTooltip={getTooltip}
           onHover={onHover}
         />
-        {/* View control component        
-         <ViewControlComponent
-          fitBounds={fitBounds}
-          panBy={panBy}
-          zoomBy={zoomBy}
-          zoomLevel={viewState.zoom}
-          maxZoom={maxZoom}
-          minZoom={minZoom}
-        />
-        */}
       </div>
     </>
   );
@@ -273,7 +257,6 @@ GraphGL.propTypes = {
     zoom: PropTypes.number
   }),
   /** A component to control view state. */
-  ViewControlComponent: PropTypes.func,
   /** A minimum scale factor for zoom level of the graph. */
   minZoom: PropTypes.number,
   /** A maximum scale factor for zoom level of the graph. */

examples/graph-layers/graph-viewer/app.tsx

@@ -8,6 +8,8 @@ import {createRoot} from 'react-dom/client';
 import DeckGL from '@deck.gl/react';
 
 import {OrthographicView} from '@deck.gl/core';
+import {PanWidget, ZoomRangeWidget} from '@deck.gl-community/experimental';
+import '@deck.gl/widgets/stylesheet.css';
 import {
   GraphEngine,
   GraphLayer,
@@ -22,9 +24,6 @@ import {
   D3DagLayout
 } from '@deck.gl-community/graph-layers';
 
-// import {ViewControlWidget} from '@deck.gl-community/graph-layers';
-// import '@deck.gl/widgets/stylesheet.css';
-
 import {extent} from 'd3-array';
 
 import {ControlPanel, ExampleDefinition, LayoutType} from './control-panel';
@@ -145,6 +144,20 @@ export function App(props) {
   const resumeLayoutAfterDragging = false;
   const zoomToFitOnLoad = false;
 
+  const widgets = useMemo(
+    () => [
+      new PanWidget({
+        id: 'pan-widget',
+        style: {margin: '20px 0 0 20px'}
+      }),
+      new ZoomRangeWidget({
+        id: 'zoom-range-widget',
+        style: {margin: '90px 0 0 20px'}
+      })
+    ],
+    []
+  );
+
   const [viewState, setViewState] = useState({
     ...INITIAL_VIEW_STATE,
     ...initialViewState
@@ -219,6 +232,11 @@ export function App(props) {
       engine.removeEventListener('onLayoutDone', fitBounds);
     };
   }, [engine, isLoading, fitBounds, zoomToFitOnLoad]);
+
+  useEffect(() => {
+    const zoomWidget = widgets.find((widget) => widget instanceof ZoomRangeWidget);
+    zoomWidget?.setProps({minZoom, maxZoom});
+  }, [widgets, minZoom, maxZoom]);
   const handleExampleChange = useCallback((example: ExampleDefinition, layoutType: LayoutType) => {
     setSelectedExample(example);
     setSelectedLayout(layoutType);
@@ -291,23 +309,9 @@ export function App(props) {
                 ]
               : []
           }
-          widgets={[
-            // // new ViewControlWidget({}) TODO - fix and enable
-          ]
-            // onHover={(info) => console.log('Hover', info)}
-          }
+          widgets={widgets}
           getTooltip={(info) => getToolTip(info.object)}
         />
-        {/* View control component TODO - doesn't work in website, replace with widget *
-          <PositionedViewControl
-            fitBounds={fitBounds}
-            panBy={panBy}
-            zoomBy={zoomBy}
-            zoomLevel={viewState.zoom}
-            maxZoom={maxZoom}
-            minZoom={minZoom}
-          />
-        */}
       </div>
       <aside
         style={{

modules/experimental/package.json

@@ -41,6 +41,7 @@
     "@loaders.gl/tiles": "^4.2.0",
     "@luma.gl/core": "~9.2.0",
     "@luma.gl/engine": "~9.2.0",
-    "@luma.gl/shadertools": "~9.2.0"
+    "@luma.gl/shadertools": "~9.2.0",
+    "preact": "^10.17.0"
   }
 }

modules/experimental/src/index.ts

@@ -6,3 +6,6 @@ export {DataDrivenTile3DLayer} from './data-driven-tile-3d-layer/data-driven-til
 
 export {colorizeTile} from './data-driven-tile-3d-layer/utils/colorize-tile';
 export {filterTile} from './data-driven-tile-3d-layer/utils/filter-tile';
+
+export {PanWidget} from './widgets/pan-widget';
+export {ZoomRangeWidget} from './widgets/zoom-range-widget';

modules/experimental/src/widgets/long-press-button.tsx

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