import type UI from "./UI.js"; import type { ComponentName } from "./types.js"; import type { UIProperties } from "./UI.js"; export interface DefaultUIProperties extends UIProperties, Partial> {} /** * The DefaultUI class exposes the default * [widgets](https://developers.arcgis.com/javascript/latest/references/core/widgets/Widget/) and [components](https://developers.arcgis.com/javascript/latest/references/core/views/ui/DefaultUI/#components) available in either a * [MapView](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/) or a [SceneView](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/). This class * also provides a simple API for [adding](https://developers.arcgis.com/javascript/latest/references/core/views/ui/DefaultUI/#add), [moving](https://developers.arcgis.com/javascript/latest/references/core/views/ui/DefaultUI/#move) and [removing](https://developers.arcgis.com/javascript/latest/references/core/views/ui/DefaultUI/#remove) * [widgets](https://developers.arcgis.com/javascript/latest/references/core/widgets/Widget/) and other HTML components from the view's UI. * * You typically don't have to create a new instance of this class since a default instance is * available in the `ui` property of the * [SceneView](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/) and [MapView](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/). * * When adding or moving components in the view's UI, you can specify a position. Widgets in * the upper region are stacked vertically, while widgets in the lower region are stacked horizontally. * The available positions are indicated in the image below. * * ![views-ui-layout](https://developers.arcgis.com/javascript/latest/assets/references/core/views/views-ui-layout.jpg) * * Methods, such as [add()](https://developers.arcgis.com/javascript/latest/references/core/views/ui/DefaultUI/#add) and [move()](https://developers.arcgis.com/javascript/latest/references/core/views/ui/DefaultUI/#move) can be used to place widgets in specific * positions of the UI. In the image below, the [Search](https://developers.arcgis.com/javascript/latest/references/core/widgets/Search/) and * [BasemapToggle](https://developers.arcgis.com/javascript/latest/references/core/widgets/BasemapToggle/) widgets are placed in the view with the [add()](https://developers.arcgis.com/javascript/latest/references/core/views/ui/DefaultUI/#add) * method. * * ```js * let searchWidget = new Search({ view: view }); * let bmToggleWidget = new BasemapToggle({ * view: view, * nextBasemap: "hybrid" * }); * * view.ui.add(searchWidget, "top-right"); * view.ui.add(bmToggleWidget, "bottom-right"); * ``` * * ![views-ui-demo](https://developers.arcgis.com/javascript/latest/assets/references/core/views/views-ui-demo.png) * * If you dive into the doc of the methods [add()](https://developers.arcgis.com/javascript/latest/references/core/views/ui/DefaultUI/#add), [empty()](https://developers.arcgis.com/javascript/latest/references/core/views/ui/DefaultUI/#empty) and [move()](https://developers.arcgis.com/javascript/latest/references/core/views/ui/DefaultUI/#move), you'll notice some of the * possible values include "leading" and "trailing". That's because the ArcGIS Maps SDK for JavaScript provides * bidirectional support. * * For left-to-right (LTR), "leading" is left and "trailing" is right. For right-to-left (RTL), "leading" is right and "trailing" is left. * * To enable right-to-left(RTL), set the `dir` attribute in the `` or `` tag to `rtl`. * * ```js * * ``` * * @since 4.0 * @see [SceneView.ui](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/#ui) * @see [MapView.ui](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#ui) */ export default class DefaultUI extends UI { constructor(properties?: DefaultUIProperties); /** * An array of strings representing the default * widgets visible when a [MapView](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/) or * [SceneView](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/) is created. The default widgets differ between MapView * and SceneView. * * The following are the default widgets in each view: * * **MapView:** `["zoom"]` * * **SceneView:** `["navigation-toggle", "compass", "zoom"]` * * > [!WARNING] * > * > As of version 5.0, attribution is a part of the view itself. To control the visibility of the attribution, use the [View.attributionVisible](https://developers.arcgis.com/javascript/latest/references/core/views/View/#attributionVisible) property. */ accessor components: ComponentName[]; }