require(["esri/widgets/DirectionalPad/DirectionalPadViewModel"], (DirectionalPadVM) => { /* code goes here */ });
import DirectionalPadVM from "@arcgis/core/widgets/DirectionalPad/DirectionalPadViewModel.js";
esri/widgets/DirectionalPad/DirectionalPadViewModel
Provides the logic for the DirectionalPad widget.
- See also
-
- DirectionalPad
Programming patterns: Widget viewModel pattern
The DirectionalPad widget is not supported in 3d.
Constructors
-
Parameterproperties Objectoptional
See the properties for a list of all the properties that may be passed into the constructor.
Property Overview
| Name | Type | Summary | Class |
|---|---|---|---|
| Number|undefined | The closest angle that matches the current mouse position relative to the widget's center. | DirectionalPadViewModel | |
| String | The name of the class. | Accessor | |
| Boolean | Indicates whether interaction is allowed on the widget. | DirectionalPadViewModel | |
| Number | The angle of rotation of the map. | DirectionalPadViewModel | |
| String | The state of the view model. | DirectionalPadViewModel |
Property Details
-
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, and135. If the widget is not in motion, the value isundefined.
-
disabled
Propertydisabled 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
-
rotation
Propertyrotation Number -
The angle of rotation of the map. Ranges from 0 to 360
- Default Value:0
ExamplereactiveUtils.watch( ()=>directionalPadViewModel.rotation, (newAngle,oldAngle)=> console.log({ newAngle, oldAngle }) );
-
state
Propertystate Stringreadonly -
The state of the view model.
Possible Values:"disabled"|"ready"|"moving"
Method Overview
| Name | Return Type | Summary | Class |
|---|---|---|---|
Adds one or more handles which are to be tied to the lifecycle of the object. | Accessor | ||
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 | DirectionalPadViewModel | ||
| Boolean | Returns true if a named group of handles exist. | Accessor | |
Initialize a brief movement in a desired direction | DirectionalPadViewModel | ||
Removes a group of handles owned by the object. | Accessor |
Method Details
-
Inherited from Accessor
-
Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.
// Manually manage handles const handle = reactiveUtils.when( () => !view.updating, () => { wkidSelect.disabled = false; }, { once: true } ); this.addHandles(handle); // Destroy the object this.destroy();ParametershandleOrHandles WatchHandle|WatchHandle[]Handles marked for removal once the object is destroyed.
groupKey *optionalKey identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.
-
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
ParameterspointerLocation VectorCurrent pointer location
widgetCenter VectorThe center of the DirectionalPad widget
ExamplemoveLeftButton.addEventListener("pointerDown", (event) => { const { x, y, width, height } = buttonsContainer.getBoundingClientRect(); const widgetCenter = { x: x + width / 2, y: y + height / 2 }; directionalPadViewModel.beginFollowingPointer(event, widgetCenter); });
-
hasHandles
InheritedMethodhasHandles(groupKey){Boolean}Inherited from Accessor -
Returns true if a named group of handles exist.
ParametergroupKey *optionalA group key.
ReturnsType Description Boolean Returns trueif a named group of handles exist.Example// Remove a named group of handles if they exist. if (obj.hasHandles("watch-view-updates")) { obj.removeHandles("watch-view-updates"); }
-
Initialize a brief movement in a desired direction
Parameterangle NumberAngle in the [0, 360] range
ExamplemoveLeftButton.addEventListener("keydown", () => { directionalPadViewModel.moveOnce(90); });
-
Inherited from Accessor
-
Removes a group of handles owned by the object.
ParametergroupKey *optionalA group key or an array or collection of group keys to remove.
Exampleobj.removeHandles(); // removes handles from default group obj.removeHandles("handle-group"); obj.removeHandles("other-handle-group");