RichDragListener¶

Overview¶

A drag listener that supports both pointer and keyboard input. It is composed with a DragListener and a KeyboardDragListener to support pointer input and alternative input. In the future it can support other input modalities or PhET-specific features.

Be sure to dispose of this listener when it is no longer needed.

Options that are common to both listeners are provided directly to this listener. Options that are specific to a particular listener can be provided through the dragListenerOptions or keyboardDragListenerOptions.

Typical PhET usage will use a position Property in a model coordinate frame and look like this:

// A focusable Node that can be dragged with pointer or keyboard.
const draggableNode = new Node( {
  tagName: 'div',
  focusable: true
} );

const richDragListener = new RichDragListener( {
  positionProperty: someObject.positionProperty,
  transform: modelViewTransform
} );

draggableNode.addInputListener( richDragListener );

This listener works by implementing TInputListener and forwarding input events to the specific listeners. This is how we support adding this listener through the scenery input listener API.

@author Jesse Greenberg

Class RichDragListener¶

import { RichDragListener } from 'scenerystack/scenery';

Constructor¶

new RichDragListener( providedOptions? : RichDragListenerOptions )¶

Instance Methods¶

dispose()¶

interrupt()¶

Forward input to both listeners

keydown( event : SceneryEvent<KeyboardEvent> )¶

Forward to the KeyboardListener

focusout( event : SceneryEvent )¶

focusin( event : SceneryEvent )¶

cancel()¶

click( event : SceneryEvent<MouseEvent> )¶

Forward to the DragListener

touchenter( event : PressListenerEvent )¶

touchmove( event : PressListenerEvent )¶

focus( event : SceneryEvent<FocusEvent> )¶

blur()¶

down( event : PressListenerEvent )¶

up( event : PressListenerEvent )¶

enter( event : PressListenerEvent )¶

move( event : PressListenerEvent )¶

exit( event : PressListenerEvent )¶

pointerUp( event : PressListenerEvent )¶

pointerCancel( event : PressListenerEvent )¶

pointerMove( event : PressListenerEvent )¶

pointerInterrupt()¶

Instance Properties¶

dragListener : DragListener¶

(readonly)

The DragListener and KeyboardDragListener that are composed to create this listener. Public so that you can add them to different Nodes if you need to, for cases where you need to access their properties directly, or if you only need one of the listeners.

keyboardDragListener : KeyboardDragListener¶

(readonly)

isPressedProperty : TReadOnlyProperty<boolean>¶

(readonly)

True if the listener is currently pressed (DragListener OR KeyboardDragListener).

hotkeys : Hotkey[]¶

(readonly)

Implements TInputListener

Type RichDragListenerOptions¶

import type { RichDragListenerOptions } from 'scenerystack/scenery';

AllDragListenerOptions<DragListener | KeyboardDragListener, PressListenerDOMEvent | KeyboardDragListenerDOMEvent> & { dragListenerOptions?: DragListenerOptions; keyboardDragListenerOptions?: KeyboardDragListenerOptions }

Source Code¶

See the source for RichDragListener.ts in the scenery repository.