PixiJS

Class: InteractionManager

PIXI.interaction.InteractionManager

The interaction manager deals with mouse, touch and pointer events. Any DisplayObject can be interactive if its interactive parameter 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

new PIXI.interaction.InteractionManager(renderer, options)

InteractionManager.js:37
Name Type Description
renderer PIXI.CanvasRenderer | PIXI.WebGLRenderer

A reference to the current renderer
options object optional

The options for the manager.

Name Type Default Description
autoPreventDefault boolean true optional

Should the manager automatically prevent default browser actions.
interactionFrequency number 10 optional

Frequency increases the interaction events will be checked.

Extends

  • EventEmitter

Members

autoPreventDefaultboolean

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.

Default Value:
  • true

currentCursorModestring

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

currentCursorStylestring

Deprecated
  • since 4.3.0
    See:

    cursorStylesObject.<string, (string|function()|Object.<string, string>)>

    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.

    defaultCursorStylestring

    Deprecated
    • since 4.3.0
      See:

      eventDataobject

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

      interactionFrequencynumber

      Frequency in milliseconds that the mousemove, moveover & mouseout interaction events will be checked.

      Default Value:
      • 10

      mousePIXI.interaction.InteractionData

      The mouse data

      moveWhenInsideboolean

      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 verison 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.

      Default Value:
      • false

      rendererPIXI.SystemRenderer

      The renderer this interaction manager works for.

      resolutionnumber

      The current resolution / device pixel ratio.

      Default Value:
      • 1

      readonlysupportsPointerEventsboolean

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

      readonlysupportsTouchEventsboolean

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

      Methods

      destroy()

      InteractionManager.js:1791

      Destroys the interaction manager

      hitTest(globalPoint, root)PIXI.DisplayObject

      InteractionManager.js:659

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

      Name Type 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(point, x, y)

      InteractionManager.js:957

      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.

      Name Type Description
      point PIXI.Point

      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

      setCursorMode(mode)

      InteractionManager.js:885

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

      Name Type Description
      mode string

      cursor mode, a key from the cursorStyles dictionary

      update(deltaTime)

      InteractionManager.js:821

      Updates the state of interactive objects. Invoked by a throttled ticker update from PIXI.ticker.shared.

      Name Type Description
      deltaTime number

      time delta since last tick

      Events

      click

      InteractionManager.js:289

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      mousedown

      InteractionManager.js:257

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      mousemove

      InteractionManager.js:323

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      mouseout

      InteractionManager.js:337

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      mouseover

      InteractionManager.js:330

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      mouseup

      InteractionManager.js:273

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      mouseupoutside

      InteractionManager.js:305

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      pointercancel

      InteractionManager.js:358

      Fired when the operating system cancels a pointer event

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      pointerdown

      InteractionManager.js:344

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      pointermove

      InteractionManager.js:380

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      pointerout

      InteractionManager.js:394

      Fired when a pointer device is moved off the display object

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      pointerover

      InteractionManager.js:387

      Fired when a pointer device is moved onto the display object

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      pointertap

      InteractionManager.js:365

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      pointerup

      InteractionManager.js:351

      Fired when a pointer device button is released over the display object.

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      pointerupoutside

      InteractionManager.js:372

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      rightclick

      InteractionManager.js:297

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      rightdown

      InteractionManager.js:265

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      rightup

      InteractionManager.js:281

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      rightupoutside

      InteractionManager.js:314

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      tap

      InteractionManager.js:422

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      touchcancel

      InteractionManager.js:415

      Fired when the operating system cancels a touch

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      touchend

      InteractionManager.js:408

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      touchendoutside

      InteractionManager.js:429

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      touchmove

      InteractionManager.js:437

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event

      touchstart

      InteractionManager.js:401

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

      Name Type Description
      event PIXI.interaction.InteractionEvent

      Interaction event