Skip to content

PanZoomListener

Overview

A MultiListener that is designed to pan and zoom a target Node, where you can provide limiting and describing bounds so that the targetNode is limited to a region.

@author Jonathan Olson <jonathan.olson@colorado.edu> @author Jesse Greenberg (PhET Interactive Simulations)

Class PanZoomListener

import { PanZoomListener } from 'scenerystack/scenery';

Constructor

new PanZoomListener( targetNode : Node, providedOptions? : PanZoomListenerOptions )

Instance Methods

correctReposition()

(protected)

If the targetNode is larger than the panBounds specified, keep the panBounds completely filled with targetNode content.

addPress( press : MultiListenerPress )

(protected)

If the transformed targetBounds are equal to the panBounds, there is no space for us to pan so do not change the pointer cursor.

reposition()

(protected)

Reposition but keep content within this._panBounds.

resetTransform()

Reset the transform on the targetNode and follow up by making sure that the content is still within panBounds.

setPanBounds( panBounds : Bounds2 )

Set the containing panBounds and then make sure that the targetBounds fully fill the new panBounds.

setTargetBounds( targetBounds : Bounds2 )

Set the targetBounds which should totally fill the panBounds at all times. Useful if the targetNode has bounds which don't accurately describe the node. For instance, if an overlay plane is on top of the node and extends beyond the dimensions of the visible node.

targetBounds - in the global coordinate frame

setTargetScale( scale : number )

Set the representative scale of the target Node. If the targetBounds are different from the targetNode.bounds it may be useful to correct changes to panning and zooming by a scale that is different from the actual scale applied to the targetNode during panning.

getTargetBounds() : Bounds2

Get the targetBounds, in the global coordinate frame.

Instance Properties

sourceFramePanBoundsProperty : Property<Bounds2>

(protected)

Only needed for PhET-iO instrumented. The pan bounds of the source so if the destination bounds are different due to a differently sized iframe or self, this can be used to determine a correction for the destination targetNode transform. This could be removed by work recommended in

Type PanZoomListenerOptions

import type { PanZoomListenerOptions } from 'scenerystack/scenery';
  • panBounds?: Bounds2
    these bounds should be fully filled with content at all times, in the global coordinate frame
  • targetBounds?: Bounds2 | null
    Bounds for the target node that get transformed with this listener and fill panBounds, useful if the targetNode bounds do not accurately describe the targetNode (like if invisible content extends off screen). Defaults to targetNode bounds if null. Bounds in the global coordinate frame of the target Node.
  • targetScale?: number
    Scale that accurately describes scale of the targetNode, but is different from the actual scale of the targetNode's transform. This scale is applied to translation Vectors for the TargetNode during panning. If targetNode children get scaled uniformly (such as in response to self resizing or native browser zoom), you likely want that scale to be applied during translation operations so that pan/zoom behaves the same regardless of self size or native browser zoom.
  • & MultiListenerOptions

Source Code

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