From 5e5933ca2f3d53ee83ef7383ad37998278ba1996 Mon Sep 17 00:00:00 2001
From: Ib Green <7025232+ibgreen@users.noreply.github.com>
Date: Mon, 3 Nov 2025 11:47:59 -0500
Subject: [PATCH 1/5] feat(experimental): add pan and zoom widgets

---
 .../react-graph-layers/graph-gl.tsx           |  61 ++---
 examples/graph-layers/graph-viewer/app.tsx    |  40 +--
 modules/experimental/package.json             |   3 +-
 modules/experimental/src/index.ts             |   3 +
 .../src/widgets/long-press-button.tsx         |  48 ++++
 .../experimental/src/widgets/pan-widget.tsx   | 173 +++++++++++++
 .../src/widgets/zoom-range-widget.tsx         | 235 ++++++++++++++++++
 modules/experimental/tsconfig.json            |   4 +-
 .../components/positioned-view-control.tsx    |  27 --
 modules/react/src/components/view-control.tsx | 172 -------------
 modules/react/src/index.ts                    |   2 -
 .../test/components/view-control.spec.tsx     |  76 ------
 12 files changed, 508 insertions(+), 336 deletions(-)
 create mode 100644 modules/experimental/src/widgets/long-press-button.tsx
 create mode 100644 modules/experimental/src/widgets/pan-widget.tsx
 create mode 100644 modules/experimental/src/widgets/zoom-range-widget.tsx
 delete mode 100644 modules/react/src/components/positioned-view-control.tsx
 delete mode 100644 modules/react/src/components/view-control.tsx
 delete mode 100644 modules/react/test/components/view-control.spec.tsx

diff --git a/examples/graph-layers/graph-viewer-legacy/react-graph-layers/graph-gl.tsx b/examples/graph-layers/graph-viewer-legacy/react-graph-layers/graph-gl.tsx
index 6ef939c9..9687f1e1 100644
--- a/examples/graph-layers/graph-viewer-legacy/react-graph-layers/graph-gl.tsx
+++ b/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. */
diff --git a/examples/graph-layers/graph-viewer/app.tsx b/examples/graph-layers/graph-viewer/app.tsx
index 6223ca09..894f1f8f 100644
--- a/examples/graph-layers/graph-viewer/app.tsx
+++ b/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={{
diff --git a/modules/experimental/package.json b/modules/experimental/package.json
index 7c91101d..f1d4ca62 100644
--- a/modules/experimental/package.json
+++ b/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"
   }
 }
diff --git a/modules/experimental/src/index.ts b/modules/experimental/src/index.ts
index a946aa84..3d045f11 100644
--- a/modules/experimental/src/index.ts
+++ b/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';
diff --git a/modules/experimental/src/widgets/long-press-button.tsx b/modules/experimental/src/widgets/long-press-button.tsx
new file mode 100644
index 00000000..0956b342
--- /dev/null
+++ b/modules/experimental/src/widgets/long-press-button.tsx
@@ -0,0 +1,48 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Component, type ComponentChildren} from 'preact';
+
+export type LongPressButtonProps = {
+  onClick: () => void;
+  children: ComponentChildren;
+};
+
+export class LongPressButton extends Component<LongPressButtonProps> {
+  buttonPressTimer: ReturnType<typeof setTimeout> | null = null;
+
+  private repeat = () => {
+    if (this.buttonPressTimer) {
+      this.props.onClick();
+      this.buttonPressTimer = setTimeout(this.repeat, 100);
+    }
+  };
+
+  private handleButtonPress = () => {
+    this.buttonPressTimer = setTimeout(this.repeat, 100);
+  };
+
+  private handleButtonRelease = () => {
+    if (this.buttonPressTimer) {
+      clearTimeout(this.buttonPressTimer);
+    }
+    this.buttonPressTimer = null;
+  };
+
+  render() {
+    return (
+      <div className="deck-widget-button">
+        <div
+          style={{pointerEvents: 'auto'}}
+          onMouseDown={() => {
+            this.handleButtonPress();
+            document.addEventListener('mouseup', this.handleButtonRelease, {once: true});
+          }}
+        >
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/modules/experimental/src/widgets/pan-widget.tsx b/modules/experimental/src/widgets/pan-widget.tsx
new file mode 100644
index 00000000..b6826fa9
--- /dev/null
+++ b/modules/experimental/src/widgets/pan-widget.tsx
@@ -0,0 +1,173 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {render} from 'preact';
+import {LongPressButton} from './long-press-button';
+import {Widget, type Deck, type Viewport, type WidgetPlacement} from '@deck.gl/core';
+
+export type PanWidgetProps = {
+  id?: string;
+  viewId?: string | null;
+  placement?: WidgetPlacement;
+  /** Amount in screen pixels to pan by when a button is pressed. */
+  step?: number;
+  style?: Partial<CSSStyleDeclaration>;
+  className?: string;
+};
+
+const WRAPPER_STYLE: Partial<CSSStyleDeclaration> = {
+  position: 'absolute',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  zIndex: '99',
+  userSelect: 'none'
+};
+
+const NAVIGATION_CONTAINER_STYLE: Partial<CSSStyleDeclaration> = {
+  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: Partial<CSSStyleDeclaration> = {
+  color: '#848484',
+  cursor: 'pointer',
+  position: 'absolute',
+  pointerEvents: 'auto'
+};
+
+export class PanWidget extends Widget<PanWidgetProps> {
+  static defaultProps: Required<Pick<PanWidgetProps, 'step'>> & PanWidgetProps = {
+    id: 'pan',
+    viewId: null,
+    placement: 'top-left',
+    step: 48,
+    style: {},
+    className: ''
+  };
+
+  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, rotate: 0, onClick: () => this.handlePan(0, this.step), label: '▲', key: 'up'},
+      {top: 12, left: 0, rotate: -90, onClick: () => this.handlePan(this.step, 0), label: '◀', key: 'left'},
+      {top: 12, left: 28, rotate: 90, onClick: () => this.handlePan(-this.step, 0), label: '▶', key: 'right'},
+      {top: 25, left: 14, rotate: 180, onClick: () => this.handlePan(0, -this.step), label: '▼', key: 'down'}
+    ];
+
+    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`,
+              transform: `rotate(${button.rotate}deg)`
+            }}
+          >
+            <LongPressButton onClick={button.onClick}>{button.label}</LongPressButton>
+          </div>
+        ))}
+      </div>
+    );
+
+    render(ui, rootElement);
+  }
+
+  private getTargetViewports(): Viewport[] {
+    if (!this.deck) {
+      return [];
+    }
+    if (this.viewId) {
+      const viewport = this.deck.viewManager?.getViewport(this.viewId);
+      return viewport ? [viewport] : [];
+    }
+    return this.deck.getViewports();
+  }
+
+  private getViewState(viewport: Viewport): any {
+    const viewManager = this.deck?.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: {}});
+    }
+  }
+}
diff --git a/modules/experimental/src/widgets/zoom-range-widget.tsx b/modules/experimental/src/widgets/zoom-range-widget.tsx
new file mode 100644
index 00000000..b5eaaa90
--- /dev/null
+++ b/modules/experimental/src/widgets/zoom-range-widget.tsx
@@ -0,0 +1,235 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {render} from 'preact';
+import {LongPressButton} from './long-press-button';
+import {Widget, type Deck, type Viewport, type WidgetPlacement} from '@deck.gl/core';
+
+export type ZoomRangeWidgetProps = {
+  id?: string;
+  viewId?: string | null;
+  placement?: WidgetPlacement;
+  minZoom?: number;
+  maxZoom?: number;
+  step?: number;
+  style?: Partial<CSSStyleDeclaration>;
+  className?: string;
+};
+
+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: Partial<CSSStyleDeclaration> = {
+  cursor: 'pointer',
+  fontSize: '14px',
+  fontWeight: '500',
+  margin: '-4px'
+};
+
+const SLIDER_CONTAINER_STYLE: Partial<CSSStyleDeclaration> = {
+  display: 'inline-block',
+  height: '100px',
+  padding: '0',
+  width: '10px'
+};
+
+export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
+  static defaultProps: Required<Pick<ZoomRangeWidgetProps, 'step'>> & ZoomRangeWidgetProps = {
+    id: 'zoom-range',
+    viewId: null,
+    placement: 'top-left',
+    minZoom: undefined,
+    maxZoom: undefined,
+    step: 0.1,
+    style: {},
+    className: ''
+  };
+
+  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 ui = (
+      <>
+        <div style={ZOOM_BUTTON_STYLE}>
+          <LongPressButton onClick={() => this.handleZoomDelta(this.step)}>{'+'}</LongPressButton>
+        </div>
+        <div style={SLIDER_CONTAINER_STYLE}>
+          <input
+            type="range"
+            value={clampedZoom}
+            min={minZoom}
+            max={maxZoom}
+            step={this.step}
+            onChange={(event) => this.handleZoomTo(Number((event.target as HTMLInputElement).value))}
+            /* @ts-expect-error - non-standard attribute for vertical sliders */
+            orient="vertical"
+            style={{
+              writingMode: 'vertical-lr',
+              height: '100px',
+              padding: '0',
+              margin: '0',
+              width: '10px'
+            }}
+          />
+        </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[] {
+    if (!this.deck) {
+      return [];
+    }
+    if (this.viewId) {
+      const viewport = this.deck.viewManager?.getViewport(this.viewId);
+      return viewport ? [viewport] : [];
+    }
+    return this.deck.getViewports();
+  }
+
+  private getViewState(viewport: Viewport): any {
+    const viewManager = this.deck?.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;
+
+    // @ts-ignore Using private method until a public alternative is available
+    this.deck._onViewStateChange({viewId, viewState, interactionState: {}});
+  }
+}
diff --git a/modules/experimental/tsconfig.json b/modules/experimental/tsconfig.json
index 175b131b..76108f7b 100644
--- a/modules/experimental/tsconfig.json
+++ b/modules/experimental/tsconfig.json
@@ -6,6 +6,8 @@
     "composite": true,
     "rootDir": "src",
     "outDir": "dist",
-    "noEmit": false
+    "noEmit": false,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
   }
 }
diff --git a/modules/react/src/components/positioned-view-control.tsx b/modules/react/src/components/positioned-view-control.tsx
deleted file mode 100644
index 34236ff1..00000000
--- a/modules/react/src/components/positioned-view-control.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// deck.gl-community
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-import {ViewControl} from './view-control';
-import React from 'react';
-
-// A wrapper for positioning the ViewControl component
-export const PositionedViewControl = ({
-  fitBounds,
-  panBy,
-  zoomBy,
-  zoomLevel,
-  maxZoom = 20,
-  minZoom = -20
-}) => (
-  <div style={{position: 'relative', top: '20px', left: '20px'}}>
-    <ViewControl
-      fitBounds={fitBounds}
-      panBy={panBy}
-      zoomBy={zoomBy}
-      zoomLevel={zoomLevel}
-      maxZoom={maxZoom}
-      minZoom={minZoom}
-    />
-  </div>
-);
diff --git a/modules/react/src/components/view-control.tsx b/modules/react/src/components/view-control.tsx
deleted file mode 100644
index d3b0f6e2..00000000
--- a/modules/react/src/components/view-control.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-// deck.gl-community
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-// @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'] {
-    writing-mode: vertical-lr;
-    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 TODO */
-              orient="vertical"
-            />
-          </VerticalSlider>
-          <ZoomControlButton>
-            <LongPressButton onClick={this.zoomOut}>{'-'}</LongPressButton>
-          </ZoomControlButton>
-        </ZoomControlWrapper>
-      </ViewControlWrapper>
-    );
-  }
-}
diff --git a/modules/react/src/index.ts b/modules/react/src/index.ts
index f5374ba6..d7bbd7af 100644
--- a/modules/react/src/index.ts
+++ b/modules/react/src/index.ts
@@ -5,8 +5,6 @@
 // Components (originally from @deck.gl-community/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)
 
diff --git a/modules/react/test/components/view-control.spec.tsx b/modules/react/test/components/view-control.spec.tsx
deleted file mode 100644
index e69bfa6e..00000000
--- a/modules/react/test/components/view-control.spec.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-// deck.gl-community
-// SPDX-License-Identifier: MIT
-// Copyright (c) vis.gl contributors
-
-import * as React from 'react';
-import {afterEach, describe, it, expect, vi} from 'vitest';
-import {cleanup, fireEvent, render} from '@testing-library/react';
-import {ViewControl} from '../../src/components/view-control';
-
-// NOTE: this line is important! It will clean up the jsdom properly.
-afterEach(cleanup);
-
-const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-
-describe('ViewControl', () => {
-  it('should pass sanity check for pan buttons presence', () => {
-    const {getByText} = render(<ViewControl zoomLevel={2} />);
-    ['▲', '◀', '▶', '▼'].forEach((unicodeSymbol) => {
-      expect(getByText(unicodeSymbol)).toBeTruthy();
-    });
-  });
-
-  it('should record pressing ▲', async () => {
-    const panBy = vi.fn();
-    const deltaPan = 11;
-    const {getByText} = render(<ViewControl panBy={panBy} deltaPan={deltaPan} zoomLevel={1} />);
-    fireEvent.mouseDown(getByText('▲'));
-    await sleep(150); // await long press
-    expect(panBy).toHaveBeenCalledTimes(1);
-  });
-
-  it('should record pressing ¤ (recenter)', () => {
-    const fitBounds = vi.fn();
-    const {getByText} = render(<ViewControl fitBounds={fitBounds} zoomLevel={1} />);
-    const reCenterButton = getByText('¤');
-    expect(reCenterButton).toBeDefined();
-    fireEvent.click(reCenterButton);
-    expect(fitBounds).toHaveBeenCalledTimes(1);
-  });
-
-  it('should record changes through verticalSlider', () => {
-    const zoomBy = vi.fn();
-    const {container} = render(
-      <ViewControl zoomBy={zoomBy} zoomLevel={1} minZoom={1} maxZoom={10} />
-    );
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-    const verticalSlider = container.querySelector('input') as HTMLInputElement;
-    expect(verticalSlider).toBeTruthy();
-    fireEvent.change(verticalSlider, {target: {value: 8}});
-    expect(zoomBy).toHaveBeenLastCalledWith(7);
-    expect(zoomBy).toHaveBeenCalledTimes(1);
-  });
-
-  // TODO: Appears to be a real failure.
-  it.skip('should record changes through clicking on the plus and minus button', () => {
-    const zoomBy = vi.fn();
-    const {container, getByText} = render(
-      <ViewControl zoomBy={zoomBy} zoomLevel={1} minZoom={0.01} maxZoom={4} />
-    );
-    const verticalSlider = container.querySelector('input');
-    const minusButton = getByText('-');
-    const plusButton = getByText('+');
-    expect(minusButton).toBeTruthy();
-    expect(plusButton).toBeTruthy();
-    expect(verticalSlider).toBeTruthy();
-    // Click minus once
-    fireEvent.mouseDown(minusButton);
-    expect(zoomBy).toHaveBeenLastCalledWith(-0.1);
-    // Click plus twice, this should reset the previous minus
-    fireEvent.mouseDown(plusButton);
-    fireEvent.mouseDown(plusButton);
-    expect(zoomBy).toHaveBeenLastCalledWith(0.1);
-    // 1 + 2 = 3 mousedowns in total, triggering 3 zoomBys.
-    expect(zoomBy).toHaveBeenCalledTimes(3);
-  });
-});

From c21b0b6589ce72e881a73324accbfbf43121f955 Mon Sep 17 00:00:00 2001
From: Ib Green <7025232+ibgreen@users.noreply.github.com>
Date: Mon, 3 Nov 2025 11:58:48 -0500
Subject: [PATCH 2/5] fix: align widgets with deck.gl types

---
 .../experimental/src/widgets/pan-widget.tsx   | 36 ++++++++------
 .../src/widgets/zoom-range-widget.tsx         | 49 +++++++++++--------
 2 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/modules/experimental/src/widgets/pan-widget.tsx b/modules/experimental/src/widgets/pan-widget.tsx
index b6826fa9..44f5cd90 100644
--- a/modules/experimental/src/widgets/pan-widget.tsx
+++ b/modules/experimental/src/widgets/pan-widget.tsx
@@ -3,17 +3,21 @@
 // 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} from '@deck.gl/core';
-
-export type PanWidgetProps = {
-  id?: string;
+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;
-  style?: Partial<CSSStyleDeclaration>;
-  className?: string;
 };
 
 const WRAPPER_STYLE: Partial<CSSStyleDeclaration> = {
@@ -25,7 +29,7 @@ const WRAPPER_STYLE: Partial<CSSStyleDeclaration> = {
   userSelect: 'none'
 };
 
-const NAVIGATION_CONTAINER_STYLE: Partial<CSSStyleDeclaration> = {
+const NAVIGATION_CONTAINER_STYLE: JSX.CSSProperties = {
   position: 'relative',
   background: '#f7f7f7',
   borderRadius: '23px',
@@ -35,7 +39,7 @@ const NAVIGATION_CONTAINER_STYLE: Partial<CSSStyleDeclaration> = {
   width: '46px'
 };
 
-const NAVIGATION_BUTTON_STYLE: Partial<CSSStyleDeclaration> = {
+const NAVIGATION_BUTTON_STYLE: JSX.CSSProperties = {
   color: '#848484',
   cursor: 'pointer',
   position: 'absolute',
@@ -43,14 +47,14 @@ const NAVIGATION_BUTTON_STYLE: Partial<CSSStyleDeclaration> = {
 };
 
 export class PanWidget extends Widget<PanWidgetProps> {
-  static defaultProps: Required<Pick<PanWidgetProps, 'step'>> & 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';
@@ -109,7 +113,7 @@ export class PanWidget extends Widget<PanWidgetProps> {
               top: `${button.top}px`,
               left: `${button.left}px`,
               transform: `rotate(${button.rotate}deg)`
-            }}
+            } as JSX.CSSProperties}
           >
             <LongPressButton onClick={button.onClick}>{button.label}</LongPressButton>
           </div>
@@ -121,18 +125,20 @@ export class PanWidget extends Widget<PanWidgetProps> {
   }
 
   private getTargetViewports(): Viewport[] {
-    if (!this.deck) {
+    const deck = this.deck as (Deck & {viewManager?: any}) | null;
+    if (!deck) {
       return [];
     }
+
     if (this.viewId) {
-      const viewport = this.deck.viewManager?.getViewport(this.viewId);
+      const viewport = deck.viewManager?.getViewport(this.viewId);
       return viewport ? [viewport] : [];
     }
-    return this.deck.getViewports();
+    return deck.getViewports();
   }
 
   private getViewState(viewport: Viewport): any {
-    const viewManager = this.deck?.viewManager;
+    const viewManager = (this.deck as (Deck & {viewManager?: any}) | null)?.viewManager;
     const viewId = this.viewId || viewport.id;
     if (viewManager) {
       try {
diff --git a/modules/experimental/src/widgets/zoom-range-widget.tsx b/modules/experimental/src/widgets/zoom-range-widget.tsx
index b5eaaa90..35efc849 100644
--- a/modules/experimental/src/widgets/zoom-range-widget.tsx
+++ b/modules/experimental/src/widgets/zoom-range-widget.tsx
@@ -3,18 +3,22 @@
 // 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} from '@deck.gl/core';
-
-export type ZoomRangeWidgetProps = {
-  id?: string;
+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;
-  style?: Partial<CSSStyleDeclaration>;
-  className?: string;
 };
 
 const WRAPPER_STYLE: Partial<CSSStyleDeclaration> = {
@@ -31,14 +35,14 @@ const WRAPPER_STYLE: Partial<CSSStyleDeclaration> = {
   pointerEvents: 'auto'
 };
 
-const ZOOM_BUTTON_STYLE: Partial<CSSStyleDeclaration> = {
+const ZOOM_BUTTON_STYLE: JSX.CSSProperties = {
   cursor: 'pointer',
   fontSize: '14px',
   fontWeight: '500',
   margin: '-4px'
 };
 
-const SLIDER_CONTAINER_STYLE: Partial<CSSStyleDeclaration> = {
+const SLIDER_CONTAINER_STYLE: JSX.CSSProperties = {
   display: 'inline-block',
   height: '100px',
   padding: '0',
@@ -46,7 +50,7 @@ const SLIDER_CONTAINER_STYLE: Partial<CSSStyleDeclaration> = {
 };
 
 export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
-  static defaultProps: Required<Pick<ZoomRangeWidgetProps, 'step'>> & ZoomRangeWidgetProps = {
+  static override defaultProps = {
     id: 'zoom-range',
     viewId: null,
     placement: 'top-left',
@@ -55,7 +59,7 @@ export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
     step: 0.1,
     style: {},
     className: ''
-  };
+  } satisfies Required<WidgetProps> & Required<Pick<ZoomRangeWidgetProps, 'step'>> & ZoomRangeWidgetProps;
 
   placement: WidgetPlacement = 'top-left';
   className = 'deck-widget-zoom-range';
@@ -118,13 +122,15 @@ export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
             onChange={(event) => this.handleZoomTo(Number((event.target as HTMLInputElement).value))}
             /* @ts-expect-error - non-standard attribute for vertical sliders */
             orient="vertical"
-            style={{
-              writingMode: 'vertical-lr',
-              height: '100px',
-              padding: '0',
-              margin: '0',
-              width: '10px'
-            }}
+            style={
+              {
+                writingMode: 'vertical-lr',
+                height: '100px',
+                padding: '0',
+                margin: '0',
+                width: '10px'
+              } as JSX.CSSProperties
+            }
           />
         </div>
         <div style={ZOOM_BUTTON_STYLE}>
@@ -176,18 +182,19 @@ export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
   }
 
   private getTargetViewports(): Viewport[] {
-    if (!this.deck) {
+    const deck = this.deck as (Deck & {viewManager?: any}) | null;
+    if (!deck) {
       return [];
     }
     if (this.viewId) {
-      const viewport = this.deck.viewManager?.getViewport(this.viewId);
+      const viewport = deck.viewManager?.getViewport(this.viewId);
       return viewport ? [viewport] : [];
     }
-    return this.deck.getViewports();
+    return deck.getViewports();
   }
 
   private getViewState(viewport: Viewport): any {
-    const viewManager = this.deck?.viewManager;
+    const viewManager = (this.deck as (Deck & {viewManager?: any}) | null)?.viewManager;
     const viewId = this.viewId || viewport.id;
     if (viewManager) {
       try {

From cd72d520f77602513beaffc3344d57d09fd6381f Mon Sep 17 00:00:00 2001
From: Ib Green <7025232+ibgreen@users.noreply.github.com>
Date: Mon, 3 Nov 2025 12:03:17 -0500
Subject: [PATCH 3/5] fix: correct pan widget arrows and zoom slider

---
 .../experimental/src/widgets/pan-widget.tsx   | 13 ++++----
 .../src/widgets/zoom-range-widget.tsx         | 33 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/modules/experimental/src/widgets/pan-widget.tsx b/modules/experimental/src/widgets/pan-widget.tsx
index 44f5cd90..a736be91 100644
--- a/modules/experimental/src/widgets/pan-widget.tsx
+++ b/modules/experimental/src/widgets/pan-widget.tsx
@@ -97,11 +97,11 @@ export class PanWidget extends Widget<PanWidgetProps> {
     Object.assign(rootElement.style, style);
 
     const buttons = [
-      {top: -2, left: 14, rotate: 0, onClick: () => this.handlePan(0, this.step), label: '▲', key: 'up'},
-      {top: 12, left: 0, rotate: -90, onClick: () => this.handlePan(this.step, 0), label: '◀', key: 'left'},
-      {top: 12, left: 28, rotate: 90, onClick: () => this.handlePan(-this.step, 0), label: '▶', key: 'right'},
-      {top: 25, left: 14, rotate: 180, onClick: () => this.handlePan(0, -this.step), label: '▼', key: 'down'}
-    ];
+      {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}>
@@ -111,8 +111,7 @@ export class PanWidget extends Widget<PanWidgetProps> {
             style={{
               ...NAVIGATION_BUTTON_STYLE,
               top: `${button.top}px`,
-              left: `${button.left}px`,
-              transform: `rotate(${button.rotate}deg)`
+              left: `${button.left}px`
             } as JSX.CSSProperties}
           >
             <LongPressButton onClick={button.onClick}>{button.label}</LongPressButton>
diff --git a/modules/experimental/src/widgets/zoom-range-widget.tsx b/modules/experimental/src/widgets/zoom-range-widget.tsx
index 35efc849..d92eb32a 100644
--- a/modules/experimental/src/widgets/zoom-range-widget.tsx
+++ b/modules/experimental/src/widgets/zoom-range-widget.tsx
@@ -107,12 +107,32 @@ export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
     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}>
+        <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}
@@ -120,6 +140,17 @@ export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
             max={maxZoom}
             step={this.step}
             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={

From b8d3555cdc3ef12a1a2b62d27e39ef4628da58db Mon Sep 17 00:00:00 2001
From: Ib Green <7025232+ibgreen@users.noreply.github.com>
Date: Mon, 3 Nov 2025 12:21:27 -0500
Subject: [PATCH 4/5] fix: prevent deck interactions from widget controls

---
 .../src/widgets/long-press-button.tsx         | 95 +++++++++++++++++--
 .../src/widgets/zoom-range-widget.tsx         | 10 +-
 2 files changed, 95 insertions(+), 10 deletions(-)

diff --git a/modules/experimental/src/widgets/long-press-button.tsx b/modules/experimental/src/widgets/long-press-button.tsx
index 0956b342..fc5fb5ec 100644
--- a/modules/experimental/src/widgets/long-press-button.tsx
+++ b/modules/experimental/src/widgets/long-press-button.tsx
@@ -4,6 +4,9 @@
 
 import {Component, type ComponentChildren} from 'preact';
 
+const REPEAT_DELAY_MS = 300;
+const REPEAT_INTERVAL_MS = 100;
+
 export type LongPressButtonProps = {
   onClick: () => void;
   children: ComponentChildren;
@@ -11,23 +14,86 @@ export type LongPressButtonProps = {
 
 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, 100);
+      this.buttonPressTimer = setTimeout(this.repeat, REPEAT_INTERVAL_MS);
     }
   };
 
-  private handleButtonPress = () => {
-    this.buttonPressTimer = setTimeout(this.repeat, 100);
-  };
+  private startPress(event: Event) {
+    this.stopEvent(event);
+    this.props.onClick();
+    this.buttonPressTimer = setTimeout(this.repeat, REPEAT_DELAY_MS);
+  }
 
-  private handleButtonRelease = () => {
+  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() {
@@ -35,10 +101,21 @@ export class LongPressButton extends Component<LongPressButtonProps> {
       <div className="deck-widget-button">
         <div
           style={{pointerEvents: 'auto'}}
-          onMouseDown={() => {
-            this.handleButtonPress();
-            document.addEventListener('mouseup', this.handleButtonRelease, {once: true});
-          }}
+          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>
diff --git a/modules/experimental/src/widgets/zoom-range-widget.tsx b/modules/experimental/src/widgets/zoom-range-widget.tsx
index d92eb32a..51fb0963 100644
--- a/modules/experimental/src/widgets/zoom-range-widget.tsx
+++ b/modules/experimental/src/widgets/zoom-range-widget.tsx
@@ -112,6 +112,9 @@ export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
       if (typeof (event as any).stopImmediatePropagation === 'function') {
         (event as any).stopImmediatePropagation();
       }
+      if (typeof (event as any).preventDefault === 'function') {
+        (event as any).preventDefault();
+      }
     };
 
     const ui = (
@@ -139,7 +142,12 @@ export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
             min={minZoom}
             max={maxZoom}
             step={this.step}
-            onChange={(event) => this.handleZoomTo(Number((event.target as HTMLInputElement).value))}
+            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}

From df595a825c86473aaf7f7afed0903bd4cdfb65ed Mon Sep 17 00:00:00 2001
From: Ib Green <7025232+ibgreen@users.noreply.github.com>
Date: Mon, 3 Nov 2025 12:25:48 -0500
Subject: [PATCH 5/5] fix: restore zoom slider response

---
 modules/experimental/src/widgets/zoom-range-widget.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/modules/experimental/src/widgets/zoom-range-widget.tsx b/modules/experimental/src/widgets/zoom-range-widget.tsx
index 51fb0963..40b33d0f 100644
--- a/modules/experimental/src/widgets/zoom-range-widget.tsx
+++ b/modules/experimental/src/widgets/zoom-range-widget.tsx
@@ -112,9 +112,6 @@ export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
       if (typeof (event as any).stopImmediatePropagation === 'function') {
         (event as any).stopImmediatePropagation();
       }
-      if (typeof (event as any).preventDefault === 'function') {
-        (event as any).preventDefault();
-      }
     };
 
     const ui = (
@@ -274,6 +271,7 @@ export class ZoomRangeWidget extends Widget<ZoomRangeWidgetProps> {
 
     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: {}});