PIXI.InteractionManager

class InteractionManager extends PIXI.utils.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: object) → {}
Parameters:
Name Type Attributes Default Description
renderer PIXI.CanvasRenderer | PIXI.Renderer

A reference to the current renderer

options object

<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 = undefined
Object<string, Object>
cursorStyles
object
eventData

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

number
interactionFrequency = 10

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

PIXI.InteractionData
mouse

The mouse data

boolean
moveWhenInside = false
PIXI.AbstractRenderer
renderer

The renderer this interaction manager works for.

number
resolution = 1

The current resolution / device pixel ratio.

boolean
supportsPointerEvents = --
boolean
supportsTouchEvents
boolean
useSystemTicker = true

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

boolean
protected eventsAdded = false

Have events been attached to the dom element?

HTMLElement
protected interactionDOMElement = undefined

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 = false

Has the system ticker been added?

Methods from InteractionManager

void
destroy()

Destroys the interaction manager

PIXI.DisplayObject
hitTest(globalPoint: PIXI.Point, root: PIXI.Container)

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

void
mapPositionToPoint(point: PIXI.IPointData, x: number, y: number)
void
setCursorMode(mode: string)

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

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.Container | PIXI.Sprite | PIXI.TilingSprite, func: Function, hitTest: boolean)

Events from InteractionManager

click
mousedown
mousemove

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

mouseout

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

mouseover

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

mouseup
mouseupoutside
pointercancel

Fired when the operating system cancels a pointer event

pointerdown

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

pointermove

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

pointerout

Fired when a pointer device is moved off the display object

pointerover

Fired when a pointer device is moved onto the display object

pointertap

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

pointerup
pointerupoutside
rightclick
rightdown
rightup
rightupoutside
tap

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

touchcancel

Fired when the operating system cancels a touch

touchend

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

touchendoutside
touchmove

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

touchstart

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

Public Properties


autoPreventDefault InteractionManager.ts:115
autoPreventDefault: boolean = true

Should default browser actions automatically be prevented. Does not apply to pointer events for backwards compatibility 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:288
currentCursorMode: string = undefined

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

cursorStyles InteractionManager.ts:276
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:163
eventData: object

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

interactionFrequency InteractionManager.ts:126
interactionFrequency: number = 10

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

moveWhenInside InteractionManager.ts:178
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:108
renderer: PIXI.AbstractRenderer

The renderer this interaction manager works for.

resolution InteractionManager.ts:304
resolution: number = 1

The current resolution / device pixel ratio.

supportsPointerEvents InteractionManager.ts:224
supportsPointerEvents: boolean = --

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

supportsTouchEvents InteractionManager.ts:215
supportsTouchEvents: boolean

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

useSystemTicker InteractionManager.ts:794
useSystemTicker: boolean = true

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

Protected Properties


eventsAdded InteractionManager.ts:191
protected eventsAdded: boolean = false

Have events been attached to the dom element?

interactionDOMElement InteractionManager.ts:170
protected interactionDOMElement: HTMLElement = undefined

The DOM element to bind to.

lastObjectRendered InteractionManager.ts:818
protected lastObjectRendered: PIXI.DisplayObject

Last rendered object or temp object

mouseOverRenderer InteractionManager.ts:207
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:199
protected tickerAdded: boolean = false

Has the system ticker been added?

Public Methods


destroy InteractionManager.ts:1958
destroy() → {void}

Destroys the interaction manager

Returns:
Type Description
void
hitTest InteractionManager.ts:829
hitTest(globalPoint: PIXI.Point, root: PIXI.Container) → {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.Container

<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:1201
mapPositionToPoint(point: PIXI.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 PIXI.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:1103
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:855
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 Attributes Default Description
element HTMLElement

the DOM element which will receive mouse and touch events.

resolution number

<optional>

1

The resolution / device pixel ratio of the new element (relative to the canvas).

Returns:
Type Description
void
tickerUpdate InteractionManager.ts:1030
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:1052
update() → {void}

Updates the state of interactive objects.

Returns:
Type Description
void

Protected Methods


processInteractive InteractionManager.ts:1237
protected processInteractive(interactionEvent: PIXI.InteractionEvent, displayObject: PIXI.Container | PIXI.Sprite | PIXI.TilingSprite, func: Function, 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.Container | PIXI.Sprite | PIXI.TilingSprite

the displayObject that will be hit test (recursively crawls its children)

func Function

<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:375

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:343

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:409

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:423

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:416

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:359

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:391

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:447

Fired when the operating system cancels a pointer event

Parameters:
Name Type Description
event PIXI.InteractionEvent

Interaction event

pointerdown InteractionManager.ts:430

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

Parameters:
Name Type Description
event PIXI.InteractionEvent

Interaction event

pointermove InteractionManager.ts:469

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

Parameters:
Name Type Description
event PIXI.InteractionEvent

Interaction event

pointerout InteractionManager.ts:483

Fired when a pointer device is moved off the display object

Parameters:
Name Type Description
event PIXI.InteractionEvent

Interaction event

pointerover InteractionManager.ts:476

Fired when a pointer device is moved onto the display object

Parameters:
Name Type Description
event PIXI.InteractionEvent

Interaction event

pointertap InteractionManager.ts:454

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:437

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:461

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:383

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:351

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:367

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:400

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:511

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:504

Fired when the operating system cancels a touch

Parameters:
Name Type Description
event PIXI.InteractionEvent

Interaction event

touchend InteractionManager.ts:497

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

Parameters:
Name Type Description
event PIXI.InteractionEvent

Interaction event

touchendoutside InteractionManager.ts:518

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:526

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

Parameters:
Name Type Description
event PIXI.InteractionEvent

Interaction event

touchstart InteractionManager.ts:490

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

Parameters:
Name Type Description
event PIXI.InteractionEvent

Interaction event