Add Zoom and Compass widgets (#8072)

* Adding Zoom widget

* Adding Compass widget

* Adding globe viewport rotation

* add(widgets) zoom icons and horizontal option

* add(widgets) compass icon, button group component

* add(widgets) test app and simpler getting started

* add(widgets) compass and zoom docs

---------

Signed-off-by: Chris Gervang <chris@gervang.com>
Co-authored-by: Chris Gervang <chris.gervang@joby.aero>
Co-authored-by: Chris Gervang <chrisgervang@users.noreply.github.com>
Co-authored-by: Ib Green <ib@foursquare.com>
Co-authored-by: Xiaoji Chen <cxiaoji@gmail.com>
Co-authored-by: Chris Gervang <chris@gervang.com>

docs/api-reference/widgets/compass-widget.md

@@ -0,0 +1,47 @@
+# CompassWidget
+
+This widget visualizes bearing and pitch. Click it once to reset bearing to 0, click it a second time to reset pitch to 0. Supports Map and Globe view.
+
+## Props
+
+### `id` (String) {#id}
+
+Default: `'fullscreen'`
+
+Unique identifier of the widget.
+
+### `viewId` (String, optional) {#viewid}
+
+Default: `null`
+
+The widget is attached to the view identified by this `viewId`. When assigned, the widget is placed within the specified view, and  exclusively interacts with it. Required when using [multiple views](../../developer-guide/views.md#using-multiple-views).
+
+### `placement` (String, optional) {#placement}
+
+Default: `'top-left'`
+
+Widget position within the view relative to the map container. Valid options are `top-left`, `top-right`, `bottom-left`, `bottom-right`, or `fill`.
+
+### `label` (String, optional) {#label}
+
+Tooltip message displayed while hovering a mouse over the widget.
+
+Default: `'Compass'`
+
+### `transitionDuration` (Number, optional) {#transitionduration}
+
+Default: `200`
+
+Bearing and pitch reset transition duration in milliseconds.
+
+### `style` (Object, optional) {#style}
+
+Default: `{}`
+
+Additional CSS styles for the canvas.
+
+### `className` (String, optional) {#classname}
+
+Default: `undefined`
+
+Class name to attach to the widget element. The element has the default class name of `deck-widget deck-fullscreen-widget`.

docs/api-reference/widgets/fullscreen-widget.md

@@ -1,5 +1,7 @@
 # FullscreenWidget
 
+This widget enlarges deck.gl to fill the full screen. Click the widget to enter or exit full screen.
+
 ## Props
 
 ### `id` (String) {#id}
@@ -12,7 +14,7 @@ Unique identifier of the widget.
 
 Default: `'top-left'`
 
-Widget position within the view relatitive to the map container. Valid options are `top-left`, `top-right`, `bottom-left`, `bottom-right`, or `fill`.
+Widget position within the view relative to the map container. Valid options are `top-left`, `top-right`, `bottom-left`, `bottom-right`, or `fill`.
 
 ### `container` (HTMLElement, optional) {#container}
 
@@ -22,13 +24,13 @@ A [compatible DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Elem
 
 ### `enterLabel` (String, optional) {#enterlabel}
 
-Toolip message displayed while hovering a mouse over the widget when out of fullscreen.
+Tooltip message displayed while hovering a mouse over the widget when out of fullscreen.
 
 Default: `'Enter Fullscreen'`
 
 ### `exitLabel` (String, optional) {#exitlabel}
 
-Toolip message displayed while hovering a mouse over the widget when fullscreen.
+Tooltip message displayed while hovering a mouse over the widget when fullscreen.
 
 Default: `'Exit Fullscreen'`
 

docs/api-reference/widgets/overview.md

@@ -5,6 +5,9 @@ Widgets are UI components around the WebGL2/WebGPU canvas to offer controls and
 This module contains the following extensions:
 
 - [FullscreenWidget](./fullscreen-widget.md)
+- [ZoomWidget](./zoom-widget.md)
+- [CompassWidget](./compass-widget.md)
+
 
 ## Installation
 
@@ -44,7 +47,7 @@ Customizing the appearance of widgets can be achieved using CSS variables. This
 
 ### Global Theming
 
-Apply to all wigdets with the `.deck-widget` selector.
+Apply to all widgets with the `.deck-widget` selector.
 
 ```css
 .deck-widget {
@@ -94,7 +97,7 @@ We've provided a set of CSS variables to make styling UI Widgets more convenient
 | Name | Type | Default |
 | ---- | ---- | ------- |
 | `--button-size` | [Dimension](https://developer.mozilla.org/en-US/docs/Web/CSS/dimension) | `28px` |
-| `--button-border-radius` | [Dimension](https://developer.mozilla.org/en-US/docs/Web/CSS/dimension) | `12px` |
+| `--button-border-radius` | [Dimension](https://developer.mozilla.org/en-US/docs/Web/CSS/dimension) | `8px` |
 | `--widget-margin` | [Dimension](https://developer.mozilla.org/en-US/docs/Web/CSS/dimension) | `12px` |
 
 ### Color
@@ -106,14 +109,18 @@ We've provided a set of CSS variables to make styling UI Widgets more convenient
 | `--button-inner-stroke` | [Border](https://developer.mozilla.org/en-US/docs/Web/CSS/border) | `unset` |
 | `--button-shadow` | [Box Shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) | `0px 0px 8px 0px rgba(0, 0, 0, 0.25)` |
 | `--button-backdrop-filter` | [Backdrop Filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) | `unset` |
-| `--button-icon-idle` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `rgba(97, 97, 102, 1)`
-| `--button-icon-hover` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `rgba(24, 24, 26, 1)`
+| `--button-icon-idle` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `rgba(97, 97, 102, 1)` |
+| `--button-icon-hover` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `rgba(24, 24, 26, 1)` |
+| `--icon-compass-north-color` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `#F05C44` |
+| `--icon-compass-south-color` | [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) | `#C2C2CC` |
 
 ### Icon
 | Name | Type | Default |
 | ---- | ---- | ------- |
 | `--icon-fullscreen-enter` | [SVG Data Url](https://developer.mozilla.org/en-US/docs/Web/CSS/url#using_a_data_url) | [Material Symbol Fullscreen](https://fonts.google.com/icons?selected=Material+Symbols+Rounded:fullscreen:FILL@0;wght@400;GRAD@0;opsz@40) |
 | `--icon-fullscreen-enter` | [SVG Data Url](https://developer.mozilla.org/en-US/docs/Web/CSS/url#using_a_data_url) | [Material Symbol Fullscreen Exit](https://fonts.google.com/icons?selected=Material+Symbols+Rounded:fullscreen_exit:FILL@0;wght@400;GRAD@0;opsz@40) |
+| `--icon-zoom-in` | [SVG Data Url](https://developer.mozilla.org/en-US/docs/Web/CSS/url#using_a_data_url) | [Material Symbol Add](https://fonts.google.com/icons?selected=Material+Symbols+Rounded:add:FILL@0;wght@600;GRAD@0;opsz@40) |
+| `--icon-zoom-out` | [SVG Data Url](https://developer.mozilla.org/en-US/docs/Web/CSS/url#using_a_data_url) | [Material Symbol Remove](https://fonts.google.com/icons?selected=Material+Symbols+Rounded:remove:FILL@0;wght@600;GRAD@0;opsz@40) |
 
 #### Replacing Icons
 

docs/api-reference/widgets/zoom-widget.md

@@ -0,0 +1,65 @@
+# ZoomWidget
+
+This widget controls the zoom level of a deck.gl view. Click '+' to zoom in by 1, click '-' to zoom out by 1. Supports controlling Map and Globe views.
+
+## Props
+
+### `id` (String) {#id}
+
+Default: `'zoom'`
+
+Unique identifier of the widget.
+
+### `viewId` (String, optional) {#viewid}
+
+Default: `null`
+
+The widget is attached to the view identified by this `viewId`. When assigned, the widget is placed within the specified view, and  exclusively interacts with it. Required when using [multiple views](../../developer-guide/views.md#using-multiple-views).
+
+### `placement` (String, optional) {#placement}
+
+Default: `'top-left'`
+
+Widget position within the view relative to the map container. Valid options are `top-left`, `top-right`, `bottom-left`, `bottom-right`, or `fill`.
+
+### `orientation` (String, optional) {#orientation}
+
+Default: `'vertical'`
+
+Widget button orientation. Valid options are `vertical` or `horizontal`.
+
+### `container` (HTMLElement, optional) {#container}
+
+Default: `undefined`
+
+A [compatible DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen#Compatible_elements) which should be made full screen. By default, the map container element will be made full screen.
+
+### `zoomInLabel` (String, optional) {#zoominlabel}
+
+Tooltip message displayed while hovering a mouse over the zoom in button.
+
+Default: `'Zoom In'`
+
+### `zoomOutLabel` (String, optional) {#zoomoutlabel}
+
+Tooltip message displayed while hovering a mouse over the zoom out button.
+
+Default: `'Zoom Out'`
+
+### `transitionDuration` (Number, optional) {#transitionduration}
+
+Default: `200`
+
+Zoom transition duration in milliseconds.
+
+### `style` (Object, optional) {#style}
+
+Default: `{}`
+
+Additional CSS styles for the canvas.
+
+### `className` (String, optional) {#classname}
+
+Default: `undefined`
+
+Class name to attach to the widget element. The element has the default class name of `deck-widget deck-fullscreen-widget`.

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,8 @@ new Deck({
     })
   ],
   widgets: [
-    new FullscreenWidget({}),
-    new FullscreenWidget({id: 'themed', style: widgetTheme}), 
-    new FullscreenWidget({id: 'purple', className: 'purple'})
+    new ZoomWidget({style: widgetTheme}),
+    new CompassWidget({style: widgetTheme}),
+    new FullscreenWidget({style: widgetTheme})
   ]
 });

examples/get-started/pure-js/widgets/index.html

@@ -5,21 +5,6 @@
     <title>deck.gl Example</title>
     <style>
       body {margin: 0; width: 100vw; height: 100vh; overflow: hidden;}
-
-      @media screen and (max-width: 600px) {
-        .deck-widget {
-          /* mobile */
-          --button-size: 48px;
-          --button-corner-radius: 12px;
-        }
-      }
-
-      .purple {
-        --button-background: hsl(240, 40%, 40%);
-        --button-stroke: hsla(240, 40%, 40%, 0.3);
-        --button-icon-hover: rgb(236, 236, 236);
-        --button-icon-idle: rgb(174, 174, 202);
-      }
     </style>
   </head>
   <body></body>

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'. */