PIXI.InteractionManager

class InteractionManager extends EventEmitter

The interaction manager deals with mouse, touch and pointer events.

Any DisplayObject can be interactive if its interactive property is set to true.

This manager also supports multitouch.

An instance of this class is automatically created by default, and can be found at renderer.plugins.interaction

Constructor

new PIXI.InteractionManager(renderer: PIXI.CanvasRenderer | PIXI.Renderer, options: InteractionManagerOptions) → {}

Parameters:
Name	Type	Attributes	Default	Description
renderer	PIXI.CanvasRenderer \| PIXI.Renderer			A reference to the current renderer
options	InteractionManagerOptions	<optional>		The options for the manager.
options.autoPreventDefault	boolean	<optional>	true	Should the manager automatically prevent default browser actions.
options.interactionFrequency	number	<optional>	10	Maximum frequency (ms) at pointer over/out states will be checked.
options.useSystemTicker	number	<optional>	true	Whether to add tickerUpdate to {@link PIXI.Ticker.system}.

Summary

Properties from InteractionManager

boolean	autoPreventDefault = true
string	currentCursorMode The mode of the cursor that is being used. The value of this is a key from the cursorStyles dictionary.
Object<string, Object>	cursorStyles
PIXI.InteractionEvent	eventData An event data object to handle all the event tracking/dispatching.
number	interactionFrequency = 10
PIXI.InteractionData	mouse The mouse data.
boolean	moveWhenInside = false
PIXI.AbstractRenderer	renderer The renderer this interaction manager works for.
number	resolution = 1
boolean	supportsPointerEvents Does the device support pointer events https://www.w3.org/Submission/pointer-events/
boolean	supportsTouchEvents Does the device support touch events https://www.w3.org/TR/touch-events/
boolean	useSystemTicker = true
boolean	protected eventsAdded Have events been attached to the dom element?
HTMLElement	protected interactionDOMElement The DOM element to bind to.
PIXI.DisplayObject	protected lastObjectRendered
boolean	protected mouseOverRenderer Is the mouse hovering over the renderer? If working in worker mouse considered to be over renderer by default.
boolean	protected tickerAdded Has the system ticker been added?

Methods from InteractionManager

void	destroy() Destroys the interaction manager.
PIXI.DisplayObject	hitTest(globalPoint: PIXI.Point, root: PIXI.DisplayObject)
void	mapPositionToPoint(point: IPointData, x: number, y: number)
void	setCursorMode(mode: string)
void	setTargetElement(element: HTMLElement, resolution: number)
void	tickerUpdate(deltaTime: number)
void	update() Updates the state of interactive objects.
void	protected processInteractive(interactionEvent: PIXI.InteractionEvent, displayObject: PIXI.DisplayObject, func: InteractionCallback, hitTest: boolean)

Events from InteractionManager

	click
	mousedown
	mousemove
	mouseout
	mouseover
	mouseup
	mouseupoutside
	pointercancel
	pointerdown
	pointermove
	pointerout
	pointerover
	pointertap
	pointerup
	pointerupoutside
	rightclick
	rightdown
	rightup
	rightupoutside
	tap
	touchcancel
	touchend
	touchendoutside
	touchmove
	touchstart

Public Properties

autoPreventDefault InteractionManager.ts:118

autoPreventDefault: boolean = true

Should default browser actions automatically be prevented. Does not apply to pointer events for backwards compatibility as preventDefault on pointer events stops mouse events from firing. Thus, for every pointer event, there will always be either a mouse of touch event alongside it.

currentCursorMode InteractionManager.ts:159

currentCursorMode: string

The mode of the cursor that is being used. The value of this is a key from the cursorStyles dictionary.

cursorStyles InteractionManager.ts:150

cursorStyles: Object<string, Object>

Dictionary of how different cursor modes are handled. Strings are handled as CSS cursor values, objects are handled as dictionaries of CSS values for interactionDOMElement, and functions are called instead of changing the CSS. Default CSS cursor values are provided for 'default' and 'pointer' modes.

eventData InteractionManager.ts:136

eventData: PIXI.InteractionEvent

An event data object to handle all the event tracking/dispatching.

interactionFrequency InteractionManager.ts:127

interactionFrequency: number = 10

Maximum frequency in milliseconds at which pointer over/out states will be checked by tickerUpdate.

mouse InteractionManager.ts:133

mouse: PIXI.InteractionData

The mouse data.

moveWhenInside InteractionManager.ts:139

moveWhenInside: boolean = false

This property determines if mousemove and touchmove events are fired only when the cursor is over the object. Setting to true will make things work more in line with how the DOM version works. Setting to false can make things easier for things like dragging It is currently set to false as this is how PixiJS used to work. This will be set to true in future versions of pixi.

renderer InteractionManager.ts:115

renderer: PIXI.AbstractRenderer

The renderer this interaction manager works for.

resolution InteractionManager.ts:162

resolution: number = 1

The current resolution / device pixel ratio.

supportsPointerEvents InteractionManager.ts:88

supportsPointerEvents: boolean

Does the device support pointer events https://www.w3.org/Submission/pointer-events/

supportsTouchEvents InteractionManager.ts:85

supportsTouchEvents: boolean

Does the device support touch events https://www.w3.org/TR/touch-events/

useSystemTicker InteractionManager.ts:663

useSystemTicker: boolean = true

Should the InteractionManager automatically add tickerUpdate to {@link PIXI.Ticker.system}.

Protected Properties

eventsAdded InteractionManager.ts:171

protected eventsAdded: boolean

Have events been attached to the dom element?

interactionDOMElement InteractionManager.ts:168

protected interactionDOMElement: HTMLElement

The DOM element to bind to.

lastObjectRendered InteractionManager.ts:685

protected lastObjectRendered: PIXI.DisplayObject

Last rendered object or temp object.

mouseOverRenderer InteractionManager.ts:177

protected mouseOverRenderer: boolean

Is the mouse hovering over the renderer? If working in worker mouse considered to be over renderer by default.

tickerAdded InteractionManager.ts:174

protected tickerAdded: boolean

Has the system ticker been added?

Public Methods

destroy InteractionManager.ts:1773

destroy() → {void}

Destroys the interaction manager.

Returns:
Type	Description
void

hitTest InteractionManager.ts:695

hitTest(globalPoint: PIXI.Point, root: PIXI.DisplayObject) → {PIXI.DisplayObject}

Hit tests a point against the display tree, returning the first interactive object that is hit.

Parameters:
Name	Type	Attributes	Description
globalPoint	PIXI.Point		A point to hit test with, in global space.
root	PIXI.DisplayObject	<optional>	The root display object to start from. If omitted, defaults to the last rendered root of the associated renderer.

Returns:
Type	Description
PIXI.DisplayObject	The hit display object, if any.

mapPositionToPoint InteractionManager.ts:1041

mapPositionToPoint(point: IPointData, x: number, y: number) → {void}

Maps x and y coords from a DOM object and maps them correctly to the PixiJS view. The resulting value is stored in the point. This takes into account the fact that the DOM element could be scaled and positioned anywhere on the screen.

Parameters:
Name	Type	Description
point	IPointData	the point that the result will be stored in
x	number	the x coord of the position to map
y	number	the y coord of the position to map

Returns:
Type	Description
void

setCursorMode InteractionManager.ts:948

setCursorMode(mode: string) → {void}

Sets the current cursor mode, handling any callbacks or CSS style changes.

Parameters:
Name	Type	Description
mode	string	cursor mode, a key from the cursorStyles dictionary

Returns:
Type	Description
void

setTargetElement InteractionManager.ts:720

setTargetElement(element: HTMLElement, resolution: number) → {void}

Sets the DOM element which will receive mouse/touch events. This is useful for when you have other DOM elements on top of the renderers Canvas element. With this you'll be bale to delegate another DOM element to receive those events.

Parameters:
Name	Type	Default	Description
element	HTMLElement		the DOM element which will receive mouse and touch events.
resolution	number	1	The resolution / device pixel ratio of the new element (relative to the canvas).

Returns:
Type	Description
void

tickerUpdate InteractionManager.ts:878

tickerUpdate(deltaTime: number) → {void}

Updates the state of interactive objects if at least interactionFrequency milliseconds have passed since the last invocation.

Invoked by a throttled ticker update from PIXI.Ticker.system.

Parameters:
Name	Type	Description
deltaTime	number	time delta since the last call

Returns:
Type	Description
void

update InteractionManager.ts:899

update() → {void}

Updates the state of interactive objects.

Returns:
Type	Description
void

Protected Methods

processInteractive InteractionManager.ts:1076

protected processInteractive(interactionEvent: PIXI.InteractionEvent, displayObject: PIXI.DisplayObject, func: InteractionCallback, hitTest: boolean) → {void}

This function is provides a neat way of crawling through the scene graph and running a specified function on all interactive objects it finds. It will also take care of hit testing the interactive objects and passes the hit across in the function.

Parameters:
Name	Type	Attributes	Description
interactionEvent	PIXI.InteractionEvent		event containing the point that is tested for collision
displayObject	PIXI.DisplayObject		the displayObject that will be hit test (recursively crawls its children)
func	InteractionCallback	<optional>	the function that will be called on each interactive object. The interactionEvent, displayObject and hit will be passed to the function
hitTest	boolean	<optional>	indicates whether we want to calculate hits or just iterate through all interactive objects

Returns:
Type	Description
void

Events

click InteractionManager.ts:290

Fired when a pointer device button (usually a mouse left-button) is pressed and released on the display object.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

mousedown InteractionManager.ts:262

Fired when a pointer device button (usually a mouse left-button) is pressed on the display object.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

mousemove InteractionManager.ts:320

Fired when a pointer device (usually a mouse) is moved while over the display object

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

mouseout InteractionManager.ts:332

Fired when a pointer device (usually a mouse) is moved off the display object

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

mouseover InteractionManager.ts:326

Fired when a pointer device (usually a mouse) is moved onto the display object

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

mouseup InteractionManager.ts:276

Fired when a pointer device button (usually a mouse left-button) is released over the display object.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

mouseupoutside InteractionManager.ts:304

Fired when a pointer device button (usually a mouse left-button) is released outside the display object that initially registered a mousedown.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

pointercancel InteractionManager.ts:353

Fired when the operating system cancels a pointer event

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

pointerdown InteractionManager.ts:338

Fired when a pointer device button is pressed on the display object.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

pointermove InteractionManager.ts:372

Fired when a pointer device is moved while over the display object

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

pointerout InteractionManager.ts:384

Fired when a pointer device is moved off the display object

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

pointerover InteractionManager.ts:378

Fired when a pointer device is moved onto the display object

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

pointertap InteractionManager.ts:359

Fired when a pointer device button is pressed and released on the display object.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

pointerup InteractionManager.ts:344

Fired when a pointer device button is released over the display object. Not always fired when some buttons are held down while others are released. In those cases, use mousedown and [mouseup]{@link PIXI.InteractionManager#event:mouseup} instead.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

pointerupoutside InteractionManager.ts:365

Fired when a pointer device button is released outside the display object that initially registered a pointerdown.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

rightclick InteractionManager.ts:297

Fired when a pointer device secondary button (usually a mouse right-button) is pressed and released on the display object.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

rightdown InteractionManager.ts:269

Fired when a pointer device secondary button (usually a mouse right-button) is pressed on the display object.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

rightup InteractionManager.ts:283

Fired when a pointer device secondary button (usually a mouse right-button) is released over the display object.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

rightupoutside InteractionManager.ts:312

Fired when a pointer device secondary button (usually a mouse right-button) is released outside the display object that initially registered a rightdown.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

tap InteractionManager.ts:408

Fired when a touch point is placed and removed from the display object.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

touchcancel InteractionManager.ts:402

Fired when the operating system cancels a touch

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

touchend InteractionManager.ts:396

Fired when a touch point is removed from the display object.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

touchendoutside InteractionManager.ts:414

Fired when a touch point is removed outside of the display object that initially registered a touchstart.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

touchmove InteractionManager.ts:421

Fired when a touch point is moved along the display object.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event

touchstart InteractionManager.ts:390

Fired when a touch point is placed on the display object.

Parameters:
Name	Type	Description
event	PIXI.InteractionEvent	Interaction event