DirectionalPadViewModel | References | ArcGIS Maps SDK for JavaScript

import DirectionalPadViewModel from "@arcgis/core/widgets/DirectionalPad/DirectionalPadViewModel.js";

Inheritance:: DirectionalPadViewModel→Accessor

Since: ArcGIS Maps SDK for JavaScript 4.29

Provides the logic for the DirectionalPad widget and component.

See also

DirectionalPad widget - Deprecated since 4.32. Use the DirectionalPad component instead.
Directional Pad component
Programming patterns: Widget viewModel pattern

The DirectionalPad widget is not supported in 3d.

Constructors

Constructor

Parameters

Parameter	Type	Description	Required
properties	`DirectionalPadViewModelProperties`

See the properties table for a list of all the properties that may be passed into the constructor.

Properties

Any properties can be set, retrieved or listened to. See the Watch for changes topic.

Property	Type	Class
`angle` readonly	`DirectionalPadAngle \| null \| undefined`
`declaredClass` readonly inherited	`string`	Accessor
`disabled`	`boolean`
`goToOverride` inherited	`GoToOverride \| null \| undefined`	GoTo
`rotation`	`number`
`state` readonly	`DirectionalPadViewModelState`
`view`	`MapView \| null \| undefined`

angle

readonly Property

Type: DirectionalPadAngle | null | undefined

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.

declaredClass

readonlyinherited Property

Type: string

Inherited from: Accessor

The name of the class. The declared class name is formatted as esri.folder.className.

disabled

Property

Type: boolean

Indicates whether interaction is allowed on the widget. When true, this property sets the widget to a disabled state to stop user interaction.

Default value: false

goToOverride

inherited Property

Type: GoToOverride | null | undefined

Inherited from: GoTo

This function provides the ability to override either the MapView goTo() or SceneView goTo() methods.

See also

Example

// The following snippet uses Search but can be applied to any
// widgets that support the goToOverride property.
search.goToOverride = function(view, goToParams) {
  goToParams.options = {
    duration: updatedDuration
  };
  return view.goTo(goToParams.target, goToParams.options);
};

rotation

Property

Type: number

The angle of rotation of the map. Ranges from 0 to 360

Default value: 0

Example

reactiveUtils.watch(
 ()=>directionalPadViewModel.rotation,
 (newAngle,oldAngle)=> console.log({ newAngle, oldAngle })
);

state

readonly Property

Type: DirectionalPadViewModelState

The state of the view model.

view

Property

Type: MapView | 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.

Methods

Method	Signature	Class
`beginFollowingPointer`	`beginFollowingPointer(pointerLocation: Vector & Partial<Pick<PointerEvent, "target">>, widgetCenter: Vector): void`
`emit` inherited	`emit<Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean`	EventedMixin
`hasEventListener` inherited	`hasEventListener<Type extends EventNames<this>>(type: Type): boolean`	EventedMixin
`moveOnce`	`moveOnce(angle: number): void`
`on` inherited	`on<Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle`	EventedMixin

beginFollowingPointer

Method

Signature: beginFollowingPointer (pointerLocation: Vector & Partial<Pick<PointerEvent, "target">>, widgetCenter: Vector): void

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

Parameters

Parameter	Type	Description	Required
pointerLocation	`Vector & Partial<Pick<PointerEvent, "target">>`	Current pointer location
widgetCenter	`Vector`	The center of the DirectionalPad widget

Returns: void

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);
});

emit

inherited Method

Signature: emit <Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

Emits an event on the instance. This method should only be used when creating subclasses of this class.

Parameters

Parameter	Type	Description	Required
type	`Type`	The name of the event.
event	`this["@eventTypes"][Type]`	The event payload.

Returns: boolean
true if a listener was notified

hasEventListener

inherited Method

Signature: hasEventListener <Type extends EventNames<this>>(type: Type): boolean

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

Indicates whether there is an event listener on the instance that matches the provided event name.

Parameters

Parameter	Type	Description	Required
type	`Type`	The name of the event.

Returns: boolean
Returns true if the class supports the input event.

moveOnce

Method

Signature: moveOnce (angle: number): void

Initialize a brief movement in a desired direction

Parameters

Parameter	Type	Description	Required
angle	`number`	Angle in the [0, 360] range

Returns: void

Example

moveLeftButton.addEventListener("keydown", () => {
  directionalPadViewModel.moveOnce(90);
});

on

inherited Method

Signature: on <Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

Registers an event handler on the instance. Call this method to hook an event with a listener.

Parameters

Parameter	Type	Description	Required
type	`Type`	An event or an array of events to listen for.
listener	`EventedCallback<this["@eventTypes"][Type]>`	The function to call when the event fires.

Returns

ResourceHandle

Returns an event handler with a remove() method that should be called to stop listening for the event(s).

Property	Type	Description
remove	Function	When called, removes the listener from the event.

Example

view.on("click", function(event){
  // event is the event handle returned after the event fires.
  console.log(event.mapPoint);
});

Type definitions

DirectionalPadViewModelState

Type definition

Type: "ready" | "disabled" | "moving"