@arcgis/core
Version:
ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API
82 lines (79 loc) • 3.89 kB
TypeScript
import type MapView from "../../views/MapView.js";
import type { EventedAccessor } from "../../core/Evented.js";
import type { DirectionalPadAngle, Vector } from "./types.js";
import type { GoTo, GoToProperties } from "../support/GoTo.js";
export interface DirectionalPadViewModelProperties extends GoToProperties, Partial<Pick<DirectionalPadViewModel, "disabled" | "rotation" | "view">> {}
export type DirectionalPadViewModelState = "ready" | "disabled" | "moving";
/**
* Provides the logic for the [DirectionalPad](https://developers.arcgis.com/javascript/latest/references/core/widgets/DirectionalPad/) widget and [component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-directional-pad/).
*
* @since 4.29
* @see [DirectionalPad](https://developers.arcgis.com/javascript/latest/references/core/widgets/DirectionalPad/) widget - _Deprecated since 4.32. Use the [DirectionalPad component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-directional-pad/) instead._
* @see [Directional Pad component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-directional-pad/)
* @see
* [Programming patterns: Widget viewModel pattern](https://developers.arcgis.com/javascript/latest/programming-patterns/#widget-viewmodel-pattern)
*
* > [!WARNING]
* >
* > The DirectionalPad widget is not supported in 3d.
*/
export default class DirectionalPadViewModel extends DirectionalPadViewModelSuperclass {
constructor(properties?: DirectionalPadViewModelProperties);
/**
* The closest angle that matches the current mouse position
* relative to the widget's center. There are eight possible angles, `-45`, `0`, `45`, `-90`, `90`, `-135`, `180`, and `135`. If the widget is not in motion, the value is `undefined`.
*/
get angle(): DirectionalPadAngle | null | undefined;
/**
* Indicates whether interaction is allowed on the widget. When `true`, this property sets the widget to a disabled state to stop user interaction.
*
* @default false
*/
accessor disabled: boolean;
/**
* The angle of rotation of the map. Ranges from 0 to 360
*
* @default 0
* @example
* reactiveUtils.watch(
* ()=>directionalPadViewModel.rotation,
* (newAngle,oldAngle)=> console.log({ newAngle, oldAngle })
* );
*/
accessor rotation: number;
/** The state of the view model. */
get state(): DirectionalPadViewModelState;
/**
* The view which the directional pad will control. If not provided, you
* can manually listen to emitted events and control the map accordingly.
*/
accessor view: MapView | null | undefined;
/**
* Starts movement in the correct direction according to pointer
* location, and listens for pointer move (to change direction) or release
* (to stop movement)
*
* This method should be called in response to pointerdown event on a button
*
* @param pointerLocation - Current pointer location
* @param widgetCenter - The center of the DirectionalPad widget
* @example
* moveLeftButton.addEventListener("pointerDown", (event) => {
* const { x, y, width, height } = buttonsContainer.getBoundingClientRect();
* const widgetCenter = { x: x + width / 2, y: y + height / 2 };
* directionalPadViewModel.beginFollowingPointer(event, widgetCenter);
* });
*/
beginFollowingPointer(pointerLocation: Vector & Partial<Pick<PointerEvent, "target">>, widgetCenter: Vector): void;
/**
* Initialize a brief movement in a desired direction
*
* @param angle - Angle in the [0, 360] range
* @example
* moveLeftButton.addEventListener("keydown", () => {
* directionalPadViewModel.moveOnce(90);
* });
*/
moveOnce(angle: number): void;
}
declare const DirectionalPadViewModelSuperclass: typeof EventedAccessor & typeof GoTo