Event system supporting mouse, touch, and pointer interactions with event bubbling, hit testing, and custom event handling. Provides comprehensive interaction capabilities for creating responsive user interfaces and interactive graphics.
Modern event system with bubbling, capturing, and pointer abstraction.
/**
* Base federated event class
*/
class FederatedEvent {
constructor(manager: EventBoundary);
/** Event type */
readonly type: string;
/** Event target */
readonly target: FederatedEventTarget;
/** Current event target during bubbling */
readonly currentTarget: FederatedEventTarget;
/** Event timestamp */
readonly timeStamp: number;
/** Event bubbles flag */
readonly bubbles: boolean;
/** Event cancelable flag */
readonly cancelable: boolean;
/** Event canceled flag */
readonly canceled: boolean;
/** Default prevented flag */
readonly defaultPrevented: boolean;
/** Event phase */
readonly eventPhase: number;
/** Event manager */
readonly manager: EventBoundary;
/** Path of event propagation */
readonly path: FederatedEventTarget[];
/** Propagation stopped flag */
readonly propagationStopped: boolean;
/** Immediate propagation stopped flag */
readonly propagationImmediatelyStopped: boolean;
/**
* Stop event propagation
*/
stopPropagation(): void;
/**
* Stop immediate event propagation
*/
stopImmediatePropagation(): void;
/**
* Prevent default behavior
*/
preventDefault(): void;
/**
* Get composed path
* @returns Array of event targets
*/
composedPath(): FederatedEventTarget[];
}Comprehensive pointer event system supporting mouse, touch, and pen input.
/**
* Federated pointer event for mouse, touch, and pen
*/
class FederatedPointerEvent extends FederatedEvent {
/** Pointer ID */
readonly pointerId: number;
/** Pointer width */
readonly width: number;
/** Pointer height */
readonly height: number;
/** Is primary pointer */
readonly isPrimary: boolean;
/** Pointer type */
readonly pointerType: 'mouse' | 'pen' | 'touch';
/** Pressure (0-1) */
readonly pressure: number;
/** Tangential pressure */
readonly tangentialPressure: number;
/** Tilt X angle */
readonly tiltX: number;
/** Tilt Y angle */
readonly tiltY: number;
/** Twist angle */
readonly twist: number;
/** Alt key pressed */
readonly altKey: boolean;
/** Ctrl key pressed */
readonly ctrlKey: boolean;
/** Meta key pressed */
readonly metaKey: boolean;
/** Shift key pressed */
readonly shiftKey: boolean;
/** Mouse button pressed */
readonly button: number;
/** Mouse buttons bitmask */
readonly buttons: number;
/** Client X coordinate */
readonly clientX: number;
/** Client Y coordinate */
readonly clientY: number;
/** Movement X delta */
readonly movementX: number;
/** Movement Y delta */
readonly movementY: number;
/** Offset X coordinate */
readonly offsetX: number;
/** Offset Y coordinate */
readonly offsetY: number;
/** Global X coordinate */
readonly globalX: number;
/** Global Y coordinate */
readonly globalY: number;
/** Screen X coordinate */
readonly screenX: number;
/** Screen Y coordinate */
readonly screenY: number;
/**
* Get local position relative to display object
* @param displayObject - Target display object
* @param point - Point to store result
* @param globalPos - Global position to convert
* @returns Local position
*/
getLocalPosition(displayObject: Container, point?: Point, globalPos?: PointData): Point;
/**
* Get global position
* @param point - Point to store result
* @returns Global position
*/
getGlobalPosition(point?: Point): Point;
/**
* Clone event
* @returns Cloned pointer event
*/
clone(): FederatedPointerEvent;
}Mouse-specific event extensions.
/**
* Federated mouse event
*/
class FederatedMouseEvent extends FederatedPointerEvent {
/** Related target (for enter/leave events) */
readonly relatedTarget: FederatedEventTarget;
/**
* Get mouse position relative to display object
* @param displayObject - Target display object
* @param point - Point to store result
* @returns Mouse position
*/
getMousePosition(displayObject: Container, point?: Point): Point;
}Mouse wheel event support.
/**
* Federated wheel event
*/
class FederatedWheelEvent extends FederatedMouseEvent {
/** Wheel delta X */
readonly deltaX: number;
/** Wheel delta Y */
readonly deltaY: number;
/** Wheel delta Z */
readonly deltaZ: number;
/** Delta mode */
readonly deltaMode: number;
}Interface for objects that can receive events.
/**
* Event target interface
*/
interface FederatedEventTarget extends EventEmitter {
/** Interactive flag */
interactive: boolean;
/** Interactive children flag */
interactiveChildren: boolean;
/** Hit area for interaction */
hitArea: Rectangle | Circle | Ellipse | Polygon | null;
/** Cursor style */
cursor: CSSStyleDeclaration['cursor'] | string;
/**
* Add event listener
* @param type - Event type
* @param listener - Event listener function
* @param options - Listener options
*/
addEventListener(type: string, listener: (event: FederatedEvent) => void, options?: AddEventListenerOptions): void;
/**
* Remove event listener
* @param type - Event type
* @param listener - Event listener function
* @param options - Listener options
*/
removeEventListener(type: string, listener: (event: FederatedEvent) => void, options?: EventListenerOptions): void;
/**
* Dispatch event
* @param event - Event to dispatch
* @returns True if not prevented
*/
dispatchEvent(event: FederatedEvent): boolean;
}Event management and hit testing system.
/**
* Event boundary for managing interaction events
*/
class EventBoundary {
constructor(rootTarget?: Container);
/** Root target container */
rootTarget: Container;
/** Renderer instance */
renderer: Renderer;
/** Current cursor */
cursor: string;
/**
* Map pointer event to federated event
* @param nativeEvent - Native DOM event
* @returns Federated event
*/
mapPointerDown(nativeEvent: PointerEvent): FederatedPointerEvent;
/**
* Map pointer move event
* @param nativeEvent - Native DOM event
* @returns Federated event
*/
mapPointerMove(nativeEvent: PointerEvent): FederatedPointerEvent;
/**
* Map pointer up event
* @param nativeEvent - Native DOM event
* @returns Federated event
*/
mapPointerUp(nativeEvent: PointerEvent): FederatedPointerEvent;
/**
* Map wheel event
* @param nativeEvent - Native DOM event
* @returns Federated wheel event
*/
mapWheel(nativeEvent: WheelEvent): FederatedWheelEvent;
/**
* Hit test at coordinates
* @param globalX - Global X coordinate
* @param globalY - Global Y coordinate
* @returns Hit target or null
*/
hitTest(globalX: number, globalY: number): FederatedEventTarget;
/**
* Set cursor style
* @param cursor - Cursor style
*/
setCursor(cursor: string): void;
}Main event system integration.
/**
* Event system for handling DOM events
*/
class EventSystem {
constructor(renderer: Renderer);
/** Associated renderer */
renderer: Renderer;
/** Event boundary */
boundary: EventBoundary;
/** DOM element for events */
domElement: HTMLElement;
/** Resolution for coordinate conversion */
resolution: number;
/**
* Set target element for events
* @param element - DOM element
*/
setTargetElement(element: HTMLElement): void;
/**
* Destroy event system
*/
destroy(): void;
}Standard event types supported by the system.
/**
* Pointer event types
*/
type PointerEventTypes =
| 'pointerdown'
| 'pointerup'
| 'pointermove'
| 'pointerover'
| 'pointerout'
| 'pointerenter'
| 'pointerleave'
| 'pointercancel'
| 'pointertap';
/**
* Mouse event types
*/
type MouseEventTypes =
| 'mousedown'
| 'mouseup'
| 'mousemove'
| 'mouseover'
| 'mouseout'
| 'mouseenter'
| 'mouseleave'
| 'click'
| 'rightclick'
| 'rightdown'
| 'rightup';
/**
* Touch event types
*/
type TouchEventTypes =
| 'touchstart'
| 'touchend'
| 'touchmove'
| 'touchcancel'
| 'tap';
/**
* Wheel event types
*/
type WheelEventTypes = 'wheel';Usage Examples:
import { Container, Sprite, Graphics, FederatedPointerEvent } from 'pixi.js';
// Basic interactivity
const sprite = new Sprite(texture);
sprite.interactive = true;
sprite.buttonMode = true;
// Pointer events
sprite.on('pointerdown', (event: FederatedPointerEvent) => {
console.log('Pointer down at', event.globalX, event.globalY);
console.log('Local position:', event.getLocalPosition(sprite));
console.log('Pointer type:', event.pointerType);
});
sprite.on('pointerup', (event: FederatedPointerEvent) => {
console.log('Pointer up');
});
sprite.on('pointermove', (event: FederatedPointerEvent) => {
// Drag functionality
if (event.buttons > 0) {
const localPos = event.getLocalPosition(sprite.parent);
sprite.x = localPos.x;
sprite.y = localPos.y;
}
});
// Mouse-specific events
sprite.on('mouseenter', () => {
sprite.tint = 0xff0000;
});
sprite.on('mouseleave', () => {
sprite.tint = 0xffffff;
});
// Touch events
sprite.on('touchstart', (event: FederatedPointerEvent) => {
console.log('Touch started with pressure:', event.pressure);
});
// Wheel events
sprite.on('wheel', (event: FederatedWheelEvent) => {
// Zoom functionality
const scaleFactor = event.deltaY > 0 ? 0.9 : 1.1;
sprite.scale.x *= scaleFactor;
sprite.scale.y *= scaleFactor;
event.preventDefault(); // Prevent page scroll
});
// Event propagation
const container = new Container();
const childSprite = new Sprite(texture);
container.interactive = true;
childSprite.interactive = true;
container.addChild(childSprite);
container.on('pointerdown', () => {
console.log('Container clicked');
});
childSprite.on('pointerdown', (event: FederatedPointerEvent) => {
console.log('Child clicked');
event.stopPropagation(); // Prevent container event
});
// Custom hit areas
const graphics = new Graphics();
graphics.rect(0, 0, 100, 100).fill(0xff0000);
graphics.interactive = true;
// Triangle hit area
const triangleHitArea = new Polygon([
0, 0,
50, 0,
25, 50
]);
graphics.hitArea = triangleHitArea;
// Interactive children management
const gameContainer = new Container();
gameContainer.interactive = true;
gameContainer.interactiveChildren = true; // Enable child interactions
// Add multiple interactive sprites
for (let i = 0; i < 10; i++) {
const gameSprite = new Sprite(texture);
gameSprite.interactive = true;
gameSprite.x = i * 60;
gameSprite.on('pointerdown', (event) => {
console.log(`Sprite ${i} clicked`);
});
gameContainer.addChild(gameSprite);
}
// Global event handling
app.stage.interactive = true;
app.stage.hitArea = app.screen;
app.stage.on('pointerdown', (event: FederatedPointerEvent) => {
console.log('Stage clicked at global:', event.global);
// Check which child was actually hit
const hitTarget = app.renderer.events.boundary.hitTest(event.globalX, event.globalY);
if (hitTarget) {
console.log('Hit target:', hitTarget);
}
});
// Cursor management
sprite.cursor = 'pointer';
sprite.on('pointerover', () => {
document.body.style.cursor = 'pointer';
});
sprite.on('pointerout', () => {
document.body.style.cursor = 'default';
});
// Multi-touch handling
const multiTouchContainer = new Container();
multiTouchContainer.interactive = true;
const activePointers = new Map();
multiTouchContainer.on('pointerdown', (event: FederatedPointerEvent) => {
activePointers.set(event.pointerId, {
startX: event.globalX,
startY: event.globalY
});
});
multiTouchContainer.on('pointermove', (event: FederatedPointerEvent) => {
if (activePointers.has(event.pointerId)) {
const pointer = activePointers.get(event.pointerId);
const deltaX = event.globalX - pointer.startX;
const deltaY = event.globalY - pointer.startY;
// Handle multi-touch gestures
if (activePointers.size === 2) {
// Two-finger gesture (zoom, rotate, etc.)
}
}
});
multiTouchContainer.on('pointerup', (event: FederatedPointerEvent) => {
activePointers.delete(event.pointerId);
});