@arcgis/core/widgets/DirectionalPad.d.ts

ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API

import type MapView from "../views/MapView.js";
import type Widget from "./Widget.js";
import type DirectionalPadViewModel from "./DirectionalPad/DirectionalPadViewModel.js";
import type VisibleElements from "./DirectionalPad/VisibleElements.js";
import type { Icon } from "@esri/calcite-components/components/calcite-icon";
import type { Action } from "@esri/calcite-components/dist/components/calcite-action";
import type { WidgetProperties } from "./Widget.js";
import type { VisibleElementsProperties } from "./DirectionalPad/VisibleElements.js";
import type { DirectionalPadViewModelProperties } from "./DirectionalPad/DirectionalPadViewModel.js";

export interface DirectionalPadProperties extends WidgetProperties, Partial<Pick<DirectionalPad, "disabled" | "view" | "visualScale">> {
  /**
   * Icon which represents the widget. It is typically used when the widget is controlled by another
   * one (e.g. in the Expand widget).
   *
   * @default "move"
   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
   * @since 4.27
   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
   */
  icon?: Icon["icon"] | null;
  /**
   * The widget's default label.
   *
   * @since 4.11
   */
  label?: string | null;
  /**
   * The view model for the DirectionalPad widget. This is a class that contains all the logic
   * (properties and methods) that controls this widget's behavior. See the
   * [DirectionalPadViewModel](https://developers.arcgis.com/javascript/latest/references/core/widgets/DirectionalPad/DirectionalPadViewModel/)
   * class to access all properties and methods on the DirectionalPad widget.
   */
  viewModel?: DirectionalPadViewModelProperties;
  /**
   * The visible elements that are displayed within the widget.
   * This property provides the ability to turn individual elements of the widget's display on/off.
   *
   * @example
   * // display all elements, except the rotation reset button
   * directionalPad.visibleElements.rotationResetButton = false;
   * @example
   * // disable all elements
   * directionalPad.visibleElements = {
   *   directionalButtons: false,
   *   rotationSlider: false,
   *   rotationResetButton: false,
   * };
   */
  visibleElements?: VisibleElementsProperties;
}

/**
 * A directional pad (D-Pad) widget can be used to control the position and rotation
 * of the map. The D-Pad provides eight directions of movement, a small
 * compass which indicates the current orientation of the map and a slider for rotating the map.
 *
 * It is also possible to disable the map's rotation controls or change the size of the widget.
 *
 * > [!WARNING]
 * >
 * > The DirectionalPad widget is not supported in 3d.
 *
 * @deprecated since version 4.32. Use the [Directional Pad component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-directional-pad/) instead. For information on widget deprecation, read about [Esri's move to web components](https://developers.arcgis.com/javascript/latest/components-transition-plan/).
 * @since 4.29
 * @see [DirectionalPadViewModel](https://developers.arcgis.com/javascript/latest/references/core/widgets/DirectionalPad/DirectionalPadViewModel/)
 * @example
 * const directionalPad = new DirectionalPad({
 *   view: view
 * });
 * // adds the d-pad to the bottom left corner of the MapView
 * view.ui.add(directionalPad, "bottom-left");
 */
export default class DirectionalPad extends Widget<DirectionalPadProperties> {
  /**
   * @example
   * // Typical usage
   * const directionalPad = new DirectionalPad({
   *   view: view
   * });
   * // adds the d-pad to the bottom left corner of the MapView
   * view.ui.add(directionalPad, "bottom-left");
   */
  constructor(properties?: DirectionalPadProperties);
  /**
   * Indicates whether interaction is allowed on the widget. When `true`, this property sets the widget to a disabled state to disable any user interaction.
   *
   * @default false
   */
  accessor disabled: boolean;
  /**
   * Icon which represents the widget. It is typically used when the widget is controlled by another
   * one (e.g. in the Expand widget).
   *
   * @default "move"
   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
   * @since 4.27
   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
   */
  get icon(): Icon["icon"];
  set icon(value: Icon["icon"] | null | undefined);
  /**
   * The widget's default label.
   *
   * @since 4.11
   */
  get label(): string;
  set label(value: string | null | undefined);
  /**
   * The view which the directional pad will control. If not provided, you
   * can manually listen to emitted events and control the map accordingly.
   *
   * > [!WARNING]
   * >
   * > The DirectionalPad widget is not supported in 3d.
   */
  accessor view: MapView | null | undefined;
  /**
   * The view model for the DirectionalPad widget. This is a class that contains all the logic
   * (properties and methods) that controls this widget's behavior. See the
   * [DirectionalPadViewModel](https://developers.arcgis.com/javascript/latest/references/core/widgets/DirectionalPad/DirectionalPadViewModel/)
   * class to access all properties and methods on the DirectionalPad widget.
   */
  get viewModel(): DirectionalPadViewModel;
  set viewModel(value: DirectionalPadViewModelProperties);
  /**
   * The visible elements that are displayed within the widget.
   * This property provides the ability to turn individual elements of the widget's display on/off.
   *
   * @example
   * // display all elements, except the rotation reset button
   * directionalPad.visibleElements.rotationResetButton = false;
   * @example
   * // disable all elements
   * directionalPad.visibleElements = {
   *   directionalButtons: false,
   *   rotationSlider: false,
   *   rotationResetButton: false,
   * };
   */
  get visibleElements(): VisibleElements;
  set visibleElements(value: VisibleElementsProperties);
  /**
   * Determines the size of directional pad buttons and the slider.
   *
   * In addition to this parameter, you can set the width on the component
   * container to dictate directional pad size.
   *
   * @default "s"
   * @example
   * // Make buttons and slider larger
   * directionalPad.visualScale = 'l';
   */
  accessor visualScale: Action["scale"];
}