Class EventBoundary

Event boundaries are "barriers" where events coming from an upstream scene are modified before downstream propagation.

Root event boundary

The PIXI.EventSystem#rootBoundary rootBoundary handles events coming from the <canvas />. PIXI.EventSystem handles the normalization from native Events into PIXI.FederatedEvent FederatedEvents. The rootBoundary then does the hit-testing and event dispatch for the upstream normalized event.

Additional event boundaries

An additional event boundary may be desired within an application's scene graph. For example, if a portion of the scene is is flat with many children at one level - a spatial hash maybe needed to accelerate hit testing. In this scenario, the container can be detached from the scene and glued using a custom event boundary.

import { Container } from '@pixi/display';
import { EventBoundary } from '@pixi/events';
import { SpatialHash } from 'pixi-spatial-hash';

class HashedHitTestingEventBoundary
{
    private spatialHash: SpatialHash;

    constructor(scene: Container, spatialHash: SpatialHash)
    {
        super(scene);
        this.spatialHash = spatialHash;
    }

    hitTestRecursive(...)
    {
        // TODO: If target === this.rootTarget, then use spatial hash to get a
        // list of possible children that match the given (x,y) coordinates.
    }
}

class VastScene extends DisplayObject
{
    protected eventBoundary: EventBoundary;
    protected scene: Container;
    protected spatialHash: SpatialHash;

    constructor()
    {
        this.scene = new Container();
        this.spatialHash = new SpatialHash();
        this.eventBoundary = new HashedHitTestingEventBoundary(this.scene, this.spatialHash);

        // Populate this.scene with a ton of children, while updating this.spatialHash
    }
}

Memberof

PIXI

Constructors

constructor

Properties

cursor dispatch enableGlobalMoveEvents moveOnAll rootTarget

Methods

addEventMapping all dispatchEvent hitTest mapEvent propagate propagationPath

Constructors

constructor

  • new EventBoundary(rootTarget?): EventBoundary

  • Parameters

    • Optional rootTarget: DisplayObject

      The holder of the event boundary.

    Returns EventBoundary

Properties

cursor

cursor: string

The cursor preferred by the event targets underneath this boundary.

dispatch

dispatch: Pixi.utils.EventEmitter<string | symbol, any>

Emits events after they were dispatched into the scene graph.

This can be used for global events listening, regardless of the scene graph being used. It should not be used by interactive libraries for normal use.

Special events that do not bubble all the way to the root target are not emitted from here, e.g. pointerenter, pointerleave, click.

enableGlobalMoveEvents

enableGlobalMoveEvents: boolean

Enables the global move events. globalpointermove, globaltouchmove, and globalmousemove

moveOnAll

moveOnAll: boolean

This flag would emit pointermove, touchmove, and mousemove events on all DisplayObjects.

The moveOnAll semantics mirror those of earlier versions of PixiJS. This was disabled in favor of the Pointer Event API's approach.

rootTarget

rootTarget: DisplayObject

The root event-target residing below the event boundary.

All events are dispatched trickling down and bubbling up to this rootTarget.

Methods

addEventMapping

  • addEventMapping(type, fn): void

  • Adds an event mapping for the event type handled by fn.

    Event mappings can be used to implement additional or custom events. They take an event coming from the upstream scene (or directly from the PIXI.EventSystem) and dispatch new downstream events generally trickling down and bubbling up to PIXI.EventBoundary.rootTarget this.rootTarget.

    To modify the semantics of existing events, the built-in mapping methods of EventBoundary should be overridden instead.

    Parameters

    • type: string

      The type of upstream event to map.

    • fn: ((e) => void)

      The mapping method. The context of this function must be bound manually, if desired.

    Returns void

all

  • all(e, type?, targets?): void

  • Emits the event {@code e} to all interactive display objects. The event is propagated in the bubbling phase always.

    This is used in the globalpointermove event.

    Parameters

    Returns void

dispatchEvent

  • dispatchEvent(e, type?): void

  • Dispatches the given event

    Parameters

    Returns void

hitTest

  • hitTest(x, y): DisplayObject

  • Finds the DisplayObject that is the target of a event at the given coordinates.

    The passed (x,y) coordinates are in the world space above this event boundary.

    Parameters

    • x: number
    • y: number

    Returns DisplayObject

mapEvent

  • mapEvent(e): void

  • Maps the given upstream event through the event boundary and propagates it downstream.

    Parameters

    Returns void

propagate

  • propagate(e, type?): void

  • Propagate the passed event from from PIXI.EventBoundary.rootTarget this.rootTarget to its target {@code e.target}.

    Parameters

    Returns void

propagationPath

  • propagationPath(target): FederatedEventTarget[]

  • Finds the propagation path from PIXI.EventBoundary.rootTarget rootTarget to the passed {@code target}. The last element in the path is {@code target}.

    Parameters

    Returns FederatedEventTarget[]

Settings

Member Visibility

Theme

On This Page

constructorcursordispatchenableGlobalMoveEventsmoveOnAllrootTargetaddEventMappingalldispatchEventhitTestmapEventpropagatepropagationPath

Generated using TypeDoc