Add Zoom and Compass widgets

.eslintrc.cjs

@@ -115,7 +115,8 @@ module.exports = getESLintConfig({
         files: ['modules/widgets/**/*.tsx'],
         rules: {
           // For widgets module. Disable React-style JSX linting since they conflict with Preact JSX.
-          'react/react-in-jsx-scope': 0
+          'react/react-in-jsx-scope': 0,
+          'no-unused-expressions': ['error', { 'allowShortCircuit': true }]
         }
       }
     ],

examples/get-started/pure-js/widgets/app.js

@@ -1,6 +1,12 @@
 import {Deck} from '@deck.gl/core';
 import {GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
-import {FullscreenWidget, DarkGlassTheme, LightGlassTheme} from '@deck.gl/widgets';
+import {
+  CompassWidget,
+  ZoomWidget,
+  FullscreenWidget, 
+  DarkGlassTheme, 
+  LightGlassTheme
+} from '@deck.gl/widgets';
 import '@deck.gl/widgets/stylesheet.css';
 
 const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
@@ -64,8 +70,11 @@ new Deck({
     })
   ],
   widgets: [
+    new ZoomWidget({style: widgetTheme}),
+    new CompassWidget({style: widgetTheme}),
+
     new FullscreenWidget({}),
-    new FullscreenWidget({id: 'themed', style: widgetTheme}), 
+    new FullscreenWidget({id: 'themed', style: widgetTheme}),
     new FullscreenWidget({id: 'purple', className: 'purple'})
   ]
 });

examples/get-started/pure-js/widgets/package.json

@@ -9,9 +9,9 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@deck.gl/core": "^9.0.0-beta.2",
-    "@deck.gl/layers": "^9.0.0-beta.2",
-    "@deck.gl/widgets": "^9.0.0-beta.2"
+    "@deck.gl/core": "^9.0.0-beta",
+    "@deck.gl/layers": "^9.0.0-beta",
+    "@deck.gl/widgets": "^9.0.0-beta"
   },
   "devDependencies": {
     "vite": "^4.0.0"

modules/core/src/lib/widget-manager.ts

@@ -14,7 +14,7 @@ export interface Widget<PropsT = any> {
   props: PropsT;
   /**
    * The view id that this widget is being attached to. Default `null`.
-   * If assigned, this widget will only respond to events occured inside the specific view that matches this id.
+   * If assigned, this widget will only respond to events occurred inside the specific view that matches this id.
    */
   viewId?: string | null;
   /** Widget positioning within the view. Default 'top-left'. */

modules/widgets/src/compass-widget.tsx

@@ -0,0 +1,117 @@
+/* global document */
+import {FlyToInterpolator, WebMercatorViewport, _GlobeViewport} from '@deck.gl/core';
+import type {Deck, Viewport, Widget, WidgetPlacement} from '@deck.gl/core';
+import {render} from 'preact';
+
+interface CompassWidgetProps {
+  id: string;
+  viewId?: string | null;
+  placement?: WidgetPlacement;
+  label?: string;
+  transitionDuration?: number;
+  style?: Partial<CSSStyleDeclaration>;
+  className?: string;
+}
+
+export class CompassWidget implements Widget<CompassWidgetProps> {
+  id = 'compass';
+  props: CompassWidgetProps;
+  placement: WidgetPlacement = 'top-left';
+  viewId?: string | null = null;
+  viewport?: Viewport;
+  deck?: Deck;
+  element?: HTMLDivElement;
+
+  constructor(props: CompassWidgetProps) {
+    this.id = props.id || 'compass';
+    this.viewId = props.viewId || null;
+    this.placement = props.placement || 'top-left';
+    props.transitionDuration = props.transitionDuration || 200;
+    props.label = props.label || 'Compass';
+    props.style = props.style || {};
+    this.props = props;
+  }
+
+  setProps(props: Partial<CompassWidgetProps>) {
+    Object.assign(this.props, props);
+  }
+
+  onViewportChange(viewport) {
+    this.viewport = viewport;
+    this.update();
+  }
+
+  onAdd({deck}: {deck: Deck}): HTMLDivElement {
+    const {style, className} = this.props;
+    const element = document.createElement('div');
+    element.classList.add('deck-widget', 'deck-widget-compass');
+    if (className) element.classList.add(className);
+    if (style) {
+      Object.entries(style).map(([key, value]) => element.style.setProperty(key, value as string));
+    }
+    this.deck = deck;
+    this.element = element;
+    this.update();
+    return element;
+  }
+
+  getRotation() {
+    if (this.viewport instanceof WebMercatorViewport) {
+      return [-this.viewport.bearing, this.viewport.pitch];
+    } else if (this.viewport instanceof _GlobeViewport) {
+      return [0, Math.max(-80, Math.min(80, this.viewport.latitude))];
+    }
+    return [0, 0];
+  }
+
+  update() {
+    const [rz, rx] = this.getRotation();
+    const element = this.element;
+    if (!element) {
+      return;
+    }
+    const ui = (
+      <div className="deck-widget-button">
+        <div className="deck-widget-button-border" style={{perspective: 100}}>
+          <button
+            type="button"
+            onClick={() => this.handleCompassReset()}
+            label={this.props.label}
+            style={{transform: `rotateX(${rx}deg)`}}
+          >
+            <svg fill="none" width="100%" height="100%" viewBox={'0 0 16 16'}>
+              <g transform={`rotate(${rz},8,8)`}>
+                <path d="M5 8.00006L7.99987 0L10.9997 8.00006H5Z" fill="#F05C44" />
+                <path
+                  d="M11.0002 7.99994L8.00038 16L5.00051 7.99994L11.0002 7.99994Z"
+                  fill="#ccc"
+                />
+              </g>
+            </svg>
+          </button>
+        </div>
+      </div>
+    );
+    render(ui, element);
+  }
+
+  onRemove() {
+    this.deck = undefined;
+    this.element = undefined;
+  }
+
+  handleCompassReset() {
+    const viewId = this.viewId || 'default-view';
+    if (this.viewport instanceof WebMercatorViewport) {
+      const nextViewState = {
+        ...this.viewport,
+        bearing: 0,
+        ...(this.getRotation()[0] === 0 ? {pitch: 0} : {}),
+        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: {}});
+    }
+  }
+}

modules/widgets/src/index.ts

@@ -1,3 +1,5 @@
 export {FullscreenWidget} from './fullscreen-widget';
+export {CompassWidget} from './compass-widget';
+export {ZoomWidget} from './zoom-widget';
 
 export * from './themes';

modules/widgets/src/stylesheet.css

@@ -77,3 +77,20 @@
   width: 100% !important;
   z-index: 99999;
 }
+
+.deck-widget-button-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.deck-widget-button-group > *:not(:last-child),
+.deck-widget-button-group > *:not(:last-child) > button {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.deck-widget-button-group > *:not(:first-child),
+.deck-widget-button-group > *:not(:first-child) > button {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}

modules/widgets/src/zoom-widget.tsx

@@ -0,0 +1,115 @@
+/* global document */
+import {FlyToInterpolator} from '@deck.gl/core';
+import type {Deck, Viewport, Widget, WidgetPlacement} from '@deck.gl/core';
+import {render} from 'preact';
+
+interface ZoomWidgetProps {
+  id: string;
+  viewId?: string | null;
+  placement?: WidgetPlacement;
+  zoomInLabel?: string;
+  zoomOutLabel?: string;
+  transitionDuration?: number;
+  style?: Partial<CSSStyleDeclaration>;
+  className?: string;
+}
+
+export class ZoomWidget implements Widget<ZoomWidgetProps> {
+  id = 'zoom';
+  props: ZoomWidgetProps;
+  placement: WidgetPlacement = 'top-left';
+  viewId?: string | null = null;
+  viewport?: Viewport;
+  deck?: Deck;
+  element?: HTMLDivElement;
+
+  constructor(props: ZoomWidgetProps) {
+    this.id = props.id || 'zoom';
+    this.viewId = props.viewId || null;
+    this.placement = props.placement || 'top-left';
+    props.transitionDuration = props.transitionDuration || 200;
+    props.zoomInLabel = props.zoomInLabel || 'Zoom In';
+    props.zoomOutLabel = props.zoomOutLabel || 'Zoom Out';
+    props.style = props.style || {};
+    this.props = props;
+  }
+
+  onAdd({deck}: {deck: Deck}): HTMLDivElement {
+    const {style, className} = this.props;
+    const element = document.createElement('div');
+    element.classList.add('deck-widget', 'deck-widget-zoom');
+    if (className) element.classList.add(className);
+    if (style) {
+      Object.entries(style).map(([key, value]) => element.style.setProperty(key, value as string));
+    }
+    const ui = (
+      <div className="deck-widget-button-group">
+        <Button onClick={() => this.handleZoomIn()} label={this.props.zoomInLabel}>
+          <path d="M12 4.5v15m7.5-7.5h-15" />
+        </Button>
+        <Button onClick={() => this.handleZoomOut()} label={this.props.zoomOutLabel}>
+          <path d="M19.5 12h-15" />
+        </Button>
+      </div>
+    );
+    render(ui, element);
+
+    this.deck = deck;
+    this.element = element;
+
+    return element;
+  }
+
+  onRemove() {
+    this.deck = undefined;
+    this.element = undefined;
+  }
+
+  setProps(props: Partial<ZoomWidgetProps>) {
+    Object.assign(this.props, props);
+  }
+
+  onViewportChange(viewport) {
+    this.viewport = viewport;
+  }
+
+  handleZoom(nextZoom: number) {
+    const viewId = this.viewId || 'default-view';
+    const nextViewState = {
+      ...this.viewport,
+      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: {}});
+  }
+
+  handleZoomIn() {
+    this.viewport && this.handleZoom(this.viewport.zoom + 1);
+  }
+
+  handleZoomOut() {
+    this.viewport && this.handleZoom(this.viewport.zoom - 1);
+  }
+}
+
+const Button = props => {
+  const {label, onClick} = props;
+  return (
+    <div className="deck-widget-button-border">
+      <button className="deck-widget-button" type="button" onClick={onClick} title={label}>
+        <svg
+          fill="none"
+          width="100%"
+          height="100%"
+          viewBox="0 0 24 24"
+          style="stroke-width: 2px"
+          stroke="currentColor"
+        >
+          {props.children}
+        </svg>
+      </button>
+    </div>
+  );
+};