AnimatedPanZoomListener¶

Overview¶

A PanZoomListener that supports additional forms of input for pan and zoom, including trackpad gestures, mouse wheel, and keyboard input. These gestures will animate the target node to its destination translation and scale so it uses a step function that must be called every animation frame.

@author Jesse Greenberg

Class AnimatedPanZoomListener¶

import { AnimatedPanZoomListener } from 'scenerystack/scenery';

Constructor¶

new AnimatedPanZoomListener( targetNode : Node, providedOptions? : PanZoomListenerOptions )¶

Instance Methods¶

step( dt : number )¶

Step the listener, supporting any animation as the target node is transformed to target position and scale.

down( event : SceneryEvent )¶

Attach a MiddlePress for drag panning, if detected.

movePress( press : MultiListenerPress )¶

(protected)

Listener for the attached pointer on move. Only move if a middle press is not currently down.

handleFocusChange( focus : Focus | null, previousFocus : Focus | null )¶

Handle a change of focus by immediately panning so that the focused Node is in view. Also sets up the TransformTracker which will automatically keep the target in the viewport as it is animates, and a listener on the focusPanTargetBoundsProperty (if provided) to handle Node other size or custom changes.

handleZoomCommands( domEvent : Event )¶

Handle zoom commands from a keyboard.

translateToTarget( initialPoint : Vector2, targetPoint : Vector2 )¶

Translate the targetNode from a local point to a target point. Both points should be in the global coordinate frame. @param initialPoint - in global coordinate frame, source position @param targetPoint - in global coordinate frame, target position

correctReposition()¶

(protected)

Upon any kind of reposition, update the source position and scale for the next update in animateToTargets.

Note: This assumes that any kind of repositioning of the target node will eventually call correctReposition.

addPress( press : MultiListenerPress )¶

(protected)

When a new press begins, stop any in progress animation.

removePress( press : MultiListenerPress )¶

(protected)

When presses are removed, reset animation destinations.

interrupt()¶

Interrupt the listener. Cancels any active input and clears references upon interaction end.

cancel()¶

"Cancel" the listener, when input stops abnormally. Part of the scenery Input API.

panToNode( node : Node, panToCenter : boolean, panDirection? : LimitPanDirection | null )¶

Pan to a provided Node, attempting to place the node in the center of the transformedPanBounds. It may not end up exactly in the center since we have to make sure panBounds are completely filled with targetNode content.

You can conditionally not pan to the center by setting panToCenter to false. Sometimes shifting the screen so that the Node is at the center is too jarring.

@param node - Node to pan to @param panToCenter - If true, listener will pan so that the Node is at the center of the screen. Otherwise, just until the Node is fully displayed in the viewport. @param panDirection - if provided, we will only pan in the direction specified, null for all directions

setPanBounds( bounds : Bounds2 )¶

Set the containing panBounds and then make sure that the targetBounds fully fill the new panBounds. Updates bounds that trigger panning during a drag operation.

setTargetBounds( targetBounds : Bounds2 )¶

Upon setting target bounds, re-set source and destination positions.

resetTransform()¶

Reset all transformations on the target node, and reset destination targets to source values to prevent any in progress animation.

dispose()¶

Instance Properties¶

animatingProperty : BooleanProperty¶

(readonly)

True when the listener is actively panning or zooming to the destination position and scale. Updated in the animation frame.

Source Code¶

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