website: Update whatsnew (#9784)

Author: felixpalmer

docs/api-reference/core/widget.md

@@ -9,11 +9,11 @@ The `Widget` class is a base class used to define new widgets and should not be
 
 ## Types 
 
-#### `WidgetProps` (object) {#props}
+#### `WidgetProps` (object) {#widgetprops}
 
 Options for the widget, as passed into the constructor and can be updated with `setProps`.
 
-#### `id` {#id}
+#### `id` (string) {#id}
 
 The `id` string must be unique among all your widgets at a given time. While a default `id` is provided, it is recommended to set `id` explicitly if you have multiple widgets of the same type.
 
@@ -41,25 +41,25 @@ Widget positioning within the view. One of:
 - `'bottom-right'`
 - `'fill'`
 
-#### `style`
+#### `style` (object, optional) {#style}
 
-CSS inline style overrides.
+Additional inline CSS styles on the top HTML element.
 
 ```ts
   style?: Partial<CSSStyleDeclaration>;
 ```
 
-#### `className`
+* Default: `{}`
 
-Additional CSS classnames for interaction with custom stylesheets.
+#### `className` (string, optional) {#classname}
+
+Additional CSS classnames on the top HTML element.
 
-```ts
-  className?: string;
-```
+* Default: `''`
 
 ### Methods for Widget Writers
 
-#### `constructor`
+#### `constructor` {#constructor}
 
 Supply the props and default props to the base class.
 
@@ -71,7 +71,7 @@ Called to update widget options.
 
 Updates the widget. Called by the specific widget when state has changed. Calls `onRenderHTML()`
 
-#### `onRenderHTML`
+#### `onRenderHTML` {#onrenderhtml}
 
 This function is implemented by the specific widget subclass to update the HTML for the widget
 

docs/api-reference/layers/line-layer.md

@@ -1,4 +1,5 @@
 # LineLayer
+![webgpu](https://img.shields.io/badge/webgpu-supported-blue.svg?style=flat-square)
 
 import {LineLayerDemo} from '@site/src/doc-demos/layers';
 

docs/api-reference/layers/point-cloud-layer.md

@@ -1,4 +1,5 @@
 # PointCloudLayer
+[webgpu](https://img.shields.io/badge/webgpu-supported-blue.svg?style=flat-square)
 
 import {PointCloudLayerDemo} from '@site/src/doc-demos/layers';
 

docs/api-reference/layers/scatterplot-layer.md

@@ -1,4 +1,5 @@
 # ScatterplotLayer
+![webgpu](https://img.shields.io/badge/webgpu-supported-blue.svg?style=flat-square)
 
 import {ScatterplotLayerDemo} from '@site/src/doc-demos/layers';
 

docs/api-reference/layers/text-layer.md

@@ -198,7 +198,7 @@ If `true`, the text always faces camera. Otherwise the text faces up (z).
 
 Whether to render background for the text blocks.
 
-#### `backgroundBorderRadius` (number | number[4], optional) {#backgroundBorderRadius}
+#### `backgroundBorderRadius` (number | number[4], optional) {#backgroundborderradius}
 
 - Default `0`
 

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

@@ -18,9 +18,9 @@ const deck = new Deck({
 
 ## Types
 
-### `CompassWidgetProps`
+### `CompassWidgetProps` {#compasswidgetprops}
 
-The `CompassWidget` accepts the generic [`WidgetProps`](../core/widget.md#props):
+The `CompassWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops):
 
 - `id` (default `'compass'`) -  Unique id for this widget
 - `placement` (default `'top-left'`) - Widget position within the view relative to the map container

docs/api-reference/widgets/context-menu-widget.md

@@ -0,0 +1,61 @@
+import {WidgetPreview} from '@site/src/doc-demos/widgets';
+import {_ContextMenuWidget as ContextMenuWidget} from '@deck.gl/widgets';
+
+# ContextMenuWidget (Experimental)
+
+Displays a context menu on right-click events with customizable menu items based on picked objects.
+
+<WidgetPreview cls={ContextMenuWidget}/>
+
+```ts
+import {Deck} from '@deck.gl/core';
+import {_ContextMenuWidget as ContextMenuWidget} from '@deck.gl/widgets';
+
+const deck = new Deck({
+  widgets: [
+    new ContextMenuWidget({
+      getMenuItems: (info, widget) => {
+        if (info.object) {
+        const name = info.object.properties.name;
+          return [
+            {key: 'name', label: name},
+            {key: 'delete', label: 'Delete'}
+          ];
+        }
+        return [{label: 'Add Point', key: 'add'}];
+      },
+      onMenuItemSelected: (key, pickInfo) => {
+        if (key === 'add') addPoint(pickInfo);  
+        if (key === 'delete') deletePoint(pickInfo);  
+      }
+    })
+  ]
+});
+```
+
+## Types
+
+### `ContextMenuWidgetProps` {#contextmenuwidgetprops}
+
+The `ContextMenuWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops) and:
+
+- `id` (string, default: `'context'`) - **Required.** Unique id for this widget
+- `getMenuItems` (function) - **Required.** Function that returns menu items based on the picked object. Receives `PickingInfo` and returns an array of `ContextWidgetMenuItem` objects or `null`.
+- `onMenuItemSelected` (function, optional) - Callback invoked when a menu item is selected. Receives the selected item key and `PickingInfo`.
+- `visible` (boolean, default `false`) - Controls visibility of the context menu.
+- `position` (object, default `{x: 0, y: 0}`) - Screen position where the menu appears.
+- `menuItems` (array, default `[]`) - Current menu items to display.
+
+### `ContextWidgetMenuItem` {#contextwidgetmenuitem}
+
+Menu item definition:
+
+- `label` (string) - Display text for the menu item
+- `key` (string) - Unique identifier for the menu item
+
+## Behavior
+
+- Right-click events trigger the context menu
+- Menu items are dynamically generated based on what was clicked
+- Click elsewhere to hide the menu
+- Menu automatically positions itself at the cursor location

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

@@ -17,9 +17,9 @@ new Deck({
 
 ## Types
 
-### `FpsWidgetProps`
+### `FpsWidgetProps` {#fpswidgetprops}
 
-The `FpsWidget` accepts the generic [`WidgetProps`](../core/widget.md#props):
+The `FpsWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops):
 
 - `id` (default `'fps'`) -  Unique id for this widget
 - `placement` (default `'top-left'`) - Widget position within the view relative to the map container

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

@@ -18,9 +18,9 @@ const deck = new Deck({
 
 ## Types
 
-### `FullscreenWidgetProps`
+### `FullscreenWidgetProps` {#fullscreenwidgetprops}
 
-The `FullscreenWidget` accepts the generic [`WidgetProps`](../core/widget.md#props):
+The `FullscreenWidget` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops):
 
 - `id` (default `'fullscreen'`) -  Unique id for this widget
 - `placement` (default `'top-left'`) - Widget position within the view relative to the map container

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

@@ -1,3 +1,6 @@
+import {WidgetPreview} from '@site/src/doc-demos/widgets';
+import {GeocoderWidget} from '@deck.gl/widgets';
+
 # GeocoderWidget
 
 The GeocoderWidget helps the user find positions on the map.
@@ -8,7 +11,7 @@ The user types an address or coordinates into the text field and press **Go** to
 
 Addresses that return a valid location are stored in browser local storage (up to five entries). They will appear in the drop-down for quick re-use during later visits.
 
-## Usage
+<WidgetPreview cls={GeocoderWidget}/>
 
 ```ts
 import {GeocoderWidget} from '@deck.gl/widgets';
@@ -19,25 +22,45 @@ new Deck({
 });
 ```
 
-## Props
+## Types
+
+### `GeocoderWidgetProps` {#geocoderwidgetprops}
+
+The `GeocoderWidgetProps` accepts the generic [`WidgetProps`](../core/widget.md#widgetprops):
+
+- `id` (default `'geocoder'`) -  Unique id for this widget
+- `placement` (default `'top-left'`) - Widget position within the view relative to the map container
+- `viewId` (default `null`) - The `viewId` prop controls how a widget interacts with views. 
+- `style` (default `{}`) - Additional inline styles on the top HTML element.
+- `className` (default `''`) - Additional classnames on the top HTML element.
 
-The `GeocoderWidget` shares the base properties listed on the [widget overview page](./overview.md). Additional options are listed below.
+#### `label` (string, optional) {#label}
+
+Tooltip message displayed while hovering a mouse over the widget.
+
+Default: `'Geocoder'`
 
 #### `geocoder` (string, optional) {#geocoder}
 
 Default: `'coordinates'`
 
 Which geocoding service to use. Supported values are `'coordinates'`, `'google'`, `'mapbox'`, `'opencage'`, or `'custom'`.
 
-#### `apiKey` (string, optional) {#apiKey}
+#### `apiKey` (string, optional) {#apikey}
 
 Required if `geocoder` is set to a third party provider. For quick testing, applications can use the  `coordinates` geocode does not require an api key.
 
-#### `customGeocoder` (optional) {#customGeocoder}
+#### `customGeocoder` (optional) {#customgeocoder}
 
 Only used when `geocoder` is `'custom'`. A function that receives the entered text and an API key, and resolves to a `{longitude, latitude}` object when successful.
 
-#### `_geolocation` (optional) {#geolocation}
+#### `transitionDuration` (number, optional) {#transitionduration}
+
+Default: `200`
+
+View state transition duration in milliseconds.
+
+#### `_geolocation` (optional) {#_geolocation}
 
 In addition to addresses / coordinates, one position of obvious interest is the user's own current position. This experimental option adds a `current` menu item that calls the browser's geolocation API and navigates to the user's current position. Note that this requires the user to enable geolocation in the browser.