///
import type { AbstractRenderer } from '@pixi/core';
import type { Dict } from '@pixi/utils';
import { DisplayObject } from '@pixi/display';
import { EventEmitter } from '@pixi/utils';
import type { ExtensionMetadata } from '@pixi/core';
import type { IPointData } from '@pixi/math';
import { Point } from '@pixi/math';
declare type Cursor = 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'e-resize' | 'n-resize' | 'ne-resize' | 'nw-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'w-resize' | 'ns-resize' | 'ew-resize' | 'nesw-resize' | 'col-resize' | 'nwse-resize' | 'row-resize' | 'all-scroll' | 'zoom-in' | 'zoom-out' | 'grab' | 'grabbing';
export declare interface DelayedEvent {
displayObject: DisplayObject;
eventString: string;
eventData: InteractionEvent;
}
export declare interface IHitArea {
contains(x: number, y: number): boolean;
}
export declare type InteractionCallback = (interactionEvent: InteractionEvent, displayObject: DisplayObject, hit?: boolean) => void;
/**
* Holds all information related to an Interaction event
* @memberof PIXI
*/
export declare class InteractionData {
/** This point stores the global coords of where the touch/mouse event happened. */
global: Point;
/** The target Sprite that was interacted with. */
target: DisplayObject;
/**
* When passed to an event handler, this will be the original DOM Event that was captured
* @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
* @see https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent
* @member {MouseEvent|TouchEvent|PointerEvent}
*/
originalEvent: InteractivePointerEvent;
/** Unique identifier for this interaction. */
identifier: number;
/**
* Indicates whether or not the pointer device that created the event is the primary pointer.
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/isPrimary
*/
isPrimary: boolean;
/**
* Indicates which button was pressed on the mouse or pointer device to trigger the event.
* @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
*/
button: number;
/**
* Indicates which buttons are pressed on the mouse or pointer device when the event is triggered.
* @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
*/
buttons: number;
/**
* The width of the pointer's contact along the x-axis, measured in CSS pixels.
* radiusX of TouchEvents will be represented by this value.
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/width
*/
width: number;
/**
* The height of the pointer's contact along the y-axis, measured in CSS pixels.
* radiusY of TouchEvents will be represented by this value.
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/height
*/
height: number;
/**
* The angle, in degrees, between the pointer device and the screen.
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltX
*/
tiltX: number;
/**
* The angle, in degrees, between the pointer device and the screen.
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/tiltY
*/
tiltY: number;
/**
* The type of pointer that triggered the event.
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType
*/
pointerType: string;
/**
* Pressure applied by the pointing device during the event. A Touch's force property
* will be represented by this value.
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pressure
*/
pressure: number;
/**
* From TouchEvents (not PointerEvents triggered by touches), the rotationAngle of the Touch.
* @see https://developer.mozilla.org/en-US/docs/Web/API/Touch/rotationAngle
*/
rotationAngle: number;
/**
* Twist of a stylus pointer.
* @see https://w3c.github.io/pointerevents/#pointerevent-interface
*/
twist: number;
/**
* Barrel pressure on a stylus pointer.
* @see https://w3c.github.io/pointerevents/#pointerevent-interface
*/
tangentialPressure: number;
constructor();
/**
* The unique identifier of the pointer. It will be the same as `identifier`.
* @readonly
* @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerId
*/
get pointerId(): number;
/**
* This will return the local coordinates of the specified displayObject for this InteractionData
* @param displayObject - The DisplayObject that you would like the local
* coords off
* @param point - A Point object in which to store the value, optional (otherwise
* will create a new point)
* @param globalPos - A Point object containing your custom global coords, optional
* (otherwise will use the current global coords)
* @returns - A point containing the coordinates of the InteractionData position relative
* to the DisplayObject
*/
getLocalPosition
(displayObject: DisplayObject, point?: P, globalPos?: IPointData): P;
/**
* Copies properties from normalized event data.
* @param {Touch|MouseEvent|PointerEvent} event - The normalized event data
*/
copyEvent(event: Touch | InteractivePointerEvent): void;
/** Resets the data for pooling. */
reset(): void;
}
/**
* Event class that mimics native DOM events.
* @memberof PIXI
*/
export declare class InteractionEvent {
/**
* Whether this event will continue propagating in the tree.
*
* Remaining events for the {@link stopsPropagatingAt} object
* will still be dispatched.
*/
stopped: boolean;
/**
* At which object this event stops propagating.
* @private
*/
stopsPropagatingAt: DisplayObject;
/**
* Whether we already reached the element we want to
* stop propagating at. This is important for delayed events,
* where we start over deeper in the tree again.
* @private
*/
stopPropagationHint: boolean;
/**
* The object which caused this event to be dispatched.
* For listener callback see {@link PIXI.InteractionEvent.currentTarget}.
*/
target: DisplayObject;
/** The object whose event listener’s callback is currently being invoked. */
currentTarget: DisplayObject;
/** Type of the event. */
type: string;
/** {@link InteractionData} related to this event */
data: InteractionData;
constructor();
/** Prevents event from reaching any objects other than the current object. */
stopPropagation(): void;
/** Resets the event. */
reset(): void;
}
/**
* 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`
* @memberof PIXI
*/
export declare class InteractionManager extends EventEmitter {
/** @ignore */
static extension: ExtensionMetadata;
/**
* Actively tracked InteractionData
* @private
* @member {Object}
*/
readonly activeInteractionData: {
[key: number]: InteractionData;
};
/** Does the device support touch events https://www.w3.org/TR/touch-events/ */
readonly supportsTouchEvents: boolean;
/** Does the device support pointer events https://www.w3.org/Submission/pointer-events/ */
readonly supportsPointerEvents: boolean;
/**
* Pool of unused InteractionData
* @private
*/
interactionDataPool: InteractionData[];
/**
* Internal cached let.
* @private
*/
cursor: string;
/**
* Delayed pointer events. Used to guarantee correct ordering of over/out events.
* @private
*/
delayedEvents: DelayedEvent[];
/**
* TreeSearch component that is used to hitTest stage tree.
* @private
*/
search: TreeSearch;
/** The renderer this interaction manager works for. */
renderer: AbstractRenderer;
/**
* 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.
* @default true
*/
autoPreventDefault: boolean;
/**
* Maximum frequency in milliseconds at which pointer over/out states will be checked by {@link tickerUpdate}.
* @default 10
*/
interactionFrequency: number;
/** The mouse data. */
mouse: InteractionData;
/** An event data object to handle all the event tracking/dispatching. */
eventData: InteractionEvent;
/**
* 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.
* @default false
*/
moveWhenInside: boolean;
/**
* 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.
* @member {Object}
*/
cursorStyles: Dict void) | CSSStyleDeclaration>;
/** The mode of the cursor that is being used. The value of this is a key from the cursorStyles dictionary. */
currentCursorMode: string;
/**
* The current resolution / device pixel ratio.
* @default 1
*/
resolution: number;
/** The DOM element to bind to. */
protected interactionDOMElement: HTMLElement;
/** Have events been attached to the dom element? */
protected eventsAdded: boolean;
/** Has the system ticker been added? */
protected tickerAdded: boolean;
/** Is the mouse hovering over the renderer? If working in worker mouse considered to be over renderer by default. */
protected mouseOverRenderer: boolean;
private _useSystemTicker;
private _deltaTime;
private _didMove;
/** Used as a last rendered object in case renderer doesnt have _lastObjectRendered. */
private _tempDisplayObject;
/**
* An options object specifies characteristics about the event listener.
* @member {Object}
*/
private readonly _eventListenerOptions;
/**
* @param {PIXI.CanvasRenderer|PIXI.Renderer} renderer - A reference to the current renderer
* @param options - The options for the manager.
* @param {boolean} [options.autoPreventDefault=true] - Should the manager automatically prevent default browser actions.
* @param {number} [options.interactionFrequency=10] - Maximum frequency (ms) at pointer over/out states will be checked.
* @param {number} [options.useSystemTicker=true] - Whether to add {@link tickerUpdate} to {@link PIXI.Ticker.system}.
*/
constructor(renderer: AbstractRenderer, options?: InteractionManagerOptions);
/**
* Should the InteractionManager automatically add {@link tickerUpdate} to {@link PIXI.Ticker.system}.
* @default true
*/
get useSystemTicker(): boolean;
set useSystemTicker(useSystemTicker: boolean);
/**
* Last rendered object or temp object.
* @readonly
* @protected
*/
get lastObjectRendered(): DisplayObject;
/**
* Hit tests a point against the display tree, returning the first interactive object that is hit.
* @param globalPoint - A point to hit test with, in global space.
* @param root - The root display object to start from. If omitted, defaults
* to the last rendered root of the associated renderer.
* @returns - The hit display object, if any.
*/
hitTest(globalPoint: Point, root?: DisplayObject): DisplayObject;
/**
* 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.
* @param element - the DOM element which will receive mouse and touch events.
* @param resolution - The resolution / device pixel ratio of the new element (relative to the canvas).
*/
setTargetElement(element: HTMLElement, resolution?: number): void;
/** Adds the ticker listener. */
private addTickerListener;
/** Removes the ticker listener. */
private removeTickerListener;
/** Registers all the DOM events. */
private addEvents;
/** Removes all the DOM events that were previously registered. */
private removeEvents;
/**
* Updates the state of interactive objects if at least {@link interactionFrequency}
* milliseconds have passed since the last invocation.
*
* Invoked by a throttled ticker update from {@link PIXI.Ticker.system}.
* @param deltaTime - time delta since the last call
*/
tickerUpdate(deltaTime: number): void;
/** Updates the state of interactive objects. */
update(): void;
/**
* Sets the current cursor mode, handling any callbacks or CSS style changes.
* @param mode - cursor mode, a key from the cursorStyles dictionary
*/
setCursorMode(mode: string): void;
/**
* Dispatches an event on the display object that was interacted with.
* @param displayObject - the display object in question
* @param eventString - the name of the event (e.g, mousedown)
* @param eventData - the event data object
*/
private dispatchEvent;
/**
* Puts a event on a queue to be dispatched later. This is used to guarantee correct
* ordering of over/out events.
* @param displayObject - the display object in question
* @param eventString - the name of the event (e.g, mousedown)
* @param eventData - the event data object
*/
private delayDispatchEvent;
/**
* 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.
* @param point - the point that the result will be stored in
* @param x - the x coord of the position to map
* @param y - the y coord of the position to map
*/
mapPositionToPoint(point: IPointData, x: number, y: number): 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.
* @protected
* @param interactionEvent - event containing the point that
* is tested for collision
* @param displayObject - the displayObject
* that will be hit test (recursively crawls its children)
* @param func - the function that will be called on each interactive object. The
* interactionEvent, displayObject and hit will be passed to the function
* @param hitTest - indicates whether we want to calculate hits
* or just iterate through all interactive objects
*/
processInteractive(interactionEvent: InteractionEvent, displayObject: DisplayObject, func?: InteractionCallback, hitTest?: boolean): void;
/**
* Is called when the pointer button is pressed down on the renderer element
* @param originalEvent - The DOM event of a pointer button being pressed down
*/
private onPointerDown;
/**
* Processes the result of the pointer down check and dispatches the event if need be
* @param interactionEvent - The interaction event wrapping the DOM event
* @param displayObject - The display object that was tested
* @param hit - the result of the hit test on the display object
*/
private processPointerDown;
/**
* Is called when the pointer button is released on the renderer element
* @param originalEvent - The DOM event of a pointer button being released
* @param cancelled - true if the pointer is cancelled
* @param func - Function passed to {@link processInteractive}
*/
private onPointerComplete;
/**
* Is called when the pointer button is cancelled
* @param event - The DOM event of a pointer button being released
*/
private onPointerCancel;
/**
* Processes the result of the pointer cancel check and dispatches the event if need be
* @param interactionEvent - The interaction event wrapping the DOM event
* @param displayObject - The display object that was tested
*/
private processPointerCancel;
/**
* Is called when the pointer button is released on the renderer element
* @param event - The DOM event of a pointer button being released
*/
private onPointerUp;
/**
* Processes the result of the pointer up check and dispatches the event if need be
* @param interactionEvent - The interaction event wrapping the DOM event
* @param displayObject - The display object that was tested
* @param hit - the result of the hit test on the display object
*/
private processPointerUp;
/**
* Is called when the pointer moves across the renderer element
* @param originalEvent - The DOM event of a pointer moving
*/
private onPointerMove;
/**
* Processes the result of the pointer move check and dispatches the event if need be
* @param interactionEvent - The interaction event wrapping the DOM event
* @param displayObject - The display object that was tested
* @param hit - the result of the hit test on the display object
*/
private processPointerMove;
/**
* Is called when the pointer is moved out of the renderer element
* @private
* @param {PointerEvent} originalEvent - The DOM event of a pointer being moved out
*/
private onPointerOut;
/**
* Processes the result of the pointer over/out check and dispatches the event if need be.
* @param interactionEvent - The interaction event wrapping the DOM event
* @param displayObject - The display object that was tested
* @param hit - the result of the hit test on the display object
*/
private processPointerOverOut;
/**
* Is called when the pointer is moved into the renderer element.
* @param originalEvent - The DOM event of a pointer button being moved into the renderer view.
*/
private onPointerOver;
/**
* Get InteractionData for a given pointerId. Store that data as well.
* @param event - Normalized pointer event, output from normalizeToPointerData.
* @returns - Interaction data for the given pointer identifier.
*/
private getInteractionDataForPointerId;
/**
* Return unused InteractionData to the pool, for a given pointerId
* @param pointerId - Identifier from a pointer event
*/
private releaseInteractionDataForPointerId;
/**
* Configure an InteractionEvent to wrap a DOM PointerEvent and InteractionData
* @param interactionEvent - The event to be configured
* @param pointerEvent - The DOM event that will be paired with the InteractionEvent
* @param interactionData - The InteractionData that will be paired
* with the InteractionEvent
* @returns - the interaction event that was passed in
*/
private configureInteractionEventForDOMEvent;
/**
* Ensures that the original event object contains all data that a regular pointer event would have
* @param {TouchEvent|MouseEvent|PointerEvent} event - The original event data from a touch or mouse event
* @returns - An array containing a single normalized pointer event, in the case of a pointer
* or mouse event, or a multiple normalized pointer events if there are multiple changed touches
*/
private normalizeToPointerData;
/** Destroys the interaction manager. */
destroy(): void;
}
export declare interface InteractionManagerOptions {
autoPreventDefault?: boolean;
interactionFrequency?: number;
useSystemTicker?: boolean;
}
/**
* DisplayObjects with the {@link PIXI.interactiveTarget} mixin use this class to track interactions
* @class
* @private
* @memberof PIXI
*/
export declare class InteractionTrackingData {
static FLAGS: Readonly;
private readonly _pointerId;
private _flags;
/**
* @param {number} pointerId - Unique pointer id of the event
* @private
*/
constructor(pointerId: number);
/**
*
* @private
* @param {number} flag - The interaction flag to set
* @param {boolean} yn - Should the flag be set or unset
*/
private _doSet;
/**
* Unique pointer id of the event
* @readonly
* @private
* @member {number}
*/
get pointerId(): number;
/**
* State of the tracking data, expressed as bit flags
* @private
* @member {number}
*/
get flags(): number;
set flags(flags: number);
/**
* Is the tracked event inactive (not over or down)?
* @private
* @member {number}
*/
get none(): boolean;
/**
* Is the tracked event over the DisplayObject?
* @private
* @member {boolean}
*/
get over(): boolean;
set over(yn: boolean);
/**
* Did the right mouse button come down in the DisplayObject?
* @private
* @member {boolean}
*/
get rightDown(): boolean;
set rightDown(yn: boolean);
/**
* Did the left mouse button come down in the DisplayObject?
* @private
* @member {boolean}
*/
get leftDown(): boolean;
set leftDown(yn: boolean);
}
export declare interface InteractionTrackingFlags {
OVER: number;
LEFT_DOWN: number;
RIGHT_DOWN: number;
NONE: number;
}
export declare type InteractivePointerEvent = PointerEvent | TouchEvent | MouseEvent;
export declare interface InteractiveTarget {
interactive: boolean;
interactiveChildren: boolean;
hitArea: IHitArea | null;
cursor: Cursor | string;
buttonMode: boolean;
trackedPointers: {
[x: number]: InteractionTrackingData;
};
_trackedPointers: {
[x: number]: InteractionTrackingData;
};
}
/**
* Default property values of interactive objects
* Used by {@link PIXI.InteractionManager} to automatically give all DisplayObjects these properties
* @private
* @name interactiveTarget
* @type {object}
* @memberof PIXI
* @example
* function MyObject() {}
*
* Object.assign(
* DisplayObject.prototype,
* PIXI.interactiveTarget
* );
*/
export declare const interactiveTarget: InteractiveTarget;
/**
* Strategy how to search through stage tree for interactive objects
* @memberof PIXI
*/
declare class TreeSearch {
private readonly _tempPoint;
constructor();
/**
* Recursive implementation for findHit
* @private
* @param interactionEvent - event containing the point that
* is tested for collision
* @param displayObject - the displayObject
* that will be hit test (recursively crawls its children)
* @param func - the function that will be called on each interactive object. The
* interactionEvent, displayObject and hit will be passed to the function
* @param hitTest - this indicates if the objects inside should be hit test against the point
* @param interactive - Whether the displayObject is interactive
* @returns - Returns true if the displayObject hit the point
*/
recursiveFindHit(interactionEvent: InteractionEvent, displayObject: DisplayObject, func?: InteractionCallback, hitTest?: boolean, interactive?: boolean): boolean;
/**
* 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.
* @private
* @param interactionEvent - event containing the point that
* is tested for collision
* @param displayObject - the displayObject
* that will be hit test (recursively crawls its children)
* @param func - the function that will be called on each interactive object. The
* interactionEvent, displayObject and hit will be passed to the function
* @param hitTest - this indicates if the objects inside should be hit test against the point
* @returns - Returns true if the displayObject hit the point
*/
findHit(interactionEvent: InteractionEvent, displayObject: DisplayObject, func?: InteractionCallback, hitTest?: boolean): void;
}
export { }