514 lines
15 KiB
JavaScript
514 lines
15 KiB
JavaScript
import { EventSystem } from './EventSystem.mjs';
|
|
import { FederatedEvent } from './FederatedEvent.mjs';
|
|
|
|
"use strict";
|
|
const FederatedContainer = {
|
|
/**
|
|
* Property-based event handler for the `click` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onclick = (event) => {
|
|
* //some function here that happens on click
|
|
* }
|
|
*/
|
|
onclick: null,
|
|
/**
|
|
* Property-based event handler for the `mousedown` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onmousedown = (event) => {
|
|
* //some function here that happens on mousedown
|
|
* }
|
|
*/
|
|
onmousedown: null,
|
|
/**
|
|
* Property-based event handler for the `mouseenter` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onmouseenter = (event) => {
|
|
* //some function here that happens on mouseenter
|
|
* }
|
|
*/
|
|
onmouseenter: null,
|
|
/**
|
|
* Property-based event handler for the `mouseleave` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onmouseleave = (event) => {
|
|
* //some function here that happens on mouseleave
|
|
* }
|
|
*/
|
|
onmouseleave: null,
|
|
/**
|
|
* Property-based event handler for the `mousemove` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onmousemove = (event) => {
|
|
* //some function here that happens on mousemove
|
|
* }
|
|
*/
|
|
onmousemove: null,
|
|
/**
|
|
* Property-based event handler for the `globalmousemove` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onglobalmousemove = (event) => {
|
|
* //some function here that happens on globalmousemove
|
|
* }
|
|
*/
|
|
onglobalmousemove: null,
|
|
/**
|
|
* Property-based event handler for the `mouseout` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onmouseout = (event) => {
|
|
* //some function here that happens on mouseout
|
|
* }
|
|
*/
|
|
onmouseout: null,
|
|
/**
|
|
* Property-based event handler for the `mouseover` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onmouseover = (event) => {
|
|
* //some function here that happens on mouseover
|
|
* }
|
|
*/
|
|
onmouseover: null,
|
|
/**
|
|
* Property-based event handler for the `mouseup` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onmouseup = (event) => {
|
|
* //some function here that happens on mouseup
|
|
* }
|
|
*/
|
|
onmouseup: null,
|
|
/**
|
|
* Property-based event handler for the `mouseupoutside` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onmouseupoutside = (event) => {
|
|
* //some function here that happens on mouseupoutside
|
|
* }
|
|
*/
|
|
onmouseupoutside: null,
|
|
/**
|
|
* Property-based event handler for the `pointercancel` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointercancel = (event) => {
|
|
* //some function here that happens on pointercancel
|
|
* }
|
|
*/
|
|
onpointercancel: null,
|
|
/**
|
|
* Property-based event handler for the `pointerdown` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointerdown = (event) => {
|
|
* //some function here that happens on pointerdown
|
|
* }
|
|
*/
|
|
onpointerdown: null,
|
|
/**
|
|
* Property-based event handler for the `pointerenter` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointerenter = (event) => {
|
|
* //some function here that happens on pointerenter
|
|
* }
|
|
*/
|
|
onpointerenter: null,
|
|
/**
|
|
* Property-based event handler for the `pointerleave` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointerleave = (event) => {
|
|
* //some function here that happens on pointerleave
|
|
* }
|
|
*/
|
|
onpointerleave: null,
|
|
/**
|
|
* Property-based event handler for the `pointermove` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointermove = (event) => {
|
|
* //some function here that happens on pointermove
|
|
* }
|
|
*/
|
|
onpointermove: null,
|
|
/**
|
|
* Property-based event handler for the `globalpointermove` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onglobalpointermove = (event) => {
|
|
* //some function here that happens on globalpointermove
|
|
* }
|
|
*/
|
|
onglobalpointermove: null,
|
|
/**
|
|
* Property-based event handler for the `pointerout` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointerout = (event) => {
|
|
* //some function here that happens on pointerout
|
|
* }
|
|
*/
|
|
onpointerout: null,
|
|
/**
|
|
* Property-based event handler for the `pointerover` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointerover = (event) => {
|
|
* //some function here that happens on pointerover
|
|
* }
|
|
*/
|
|
onpointerover: null,
|
|
/**
|
|
* Property-based event handler for the `pointertap` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointertap = (event) => {
|
|
* //some function here that happens on pointertap
|
|
* }
|
|
*/
|
|
onpointertap: null,
|
|
/**
|
|
* Property-based event handler for the `pointerup` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointerup = (event) => {
|
|
* //some function here that happens on pointerup
|
|
* }
|
|
*/
|
|
onpointerup: null,
|
|
/**
|
|
* Property-based event handler for the `pointerupoutside` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onpointerupoutside = (event) => {
|
|
* //some function here that happens on pointerupoutside
|
|
* }
|
|
*/
|
|
onpointerupoutside: null,
|
|
/**
|
|
* Property-based event handler for the `rightclick` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onrightclick = (event) => {
|
|
* //some function here that happens on rightclick
|
|
* }
|
|
*/
|
|
onrightclick: null,
|
|
/**
|
|
* Property-based event handler for the `rightdown` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onrightdown = (event) => {
|
|
* //some function here that happens on rightdown
|
|
* }
|
|
*/
|
|
onrightdown: null,
|
|
/**
|
|
* Property-based event handler for the `rightup` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onrightup = (event) => {
|
|
* //some function here that happens on rightup
|
|
* }
|
|
*/
|
|
onrightup: null,
|
|
/**
|
|
* Property-based event handler for the `rightupoutside` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onrightupoutside = (event) => {
|
|
* //some function here that happens on rightupoutside
|
|
* }
|
|
*/
|
|
onrightupoutside: null,
|
|
/**
|
|
* Property-based event handler for the `tap` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.ontap = (event) => {
|
|
* //some function here that happens on tap
|
|
* }
|
|
*/
|
|
ontap: null,
|
|
/**
|
|
* Property-based event handler for the `touchcancel` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.ontouchcancel = (event) => {
|
|
* //some function here that happens on touchcancel
|
|
* }
|
|
*/
|
|
ontouchcancel: null,
|
|
/**
|
|
* Property-based event handler for the `touchend` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.ontouchend = (event) => {
|
|
* //some function here that happens on touchend
|
|
* }
|
|
*/
|
|
ontouchend: null,
|
|
/**
|
|
* Property-based event handler for the `touchendoutside` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.ontouchendoutside = (event) => {
|
|
* //some function here that happens on touchendoutside
|
|
* }
|
|
*/
|
|
ontouchendoutside: null,
|
|
/**
|
|
* Property-based event handler for the `touchmove` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.ontouchmove = (event) => {
|
|
* //some function here that happens on touchmove
|
|
* }
|
|
*/
|
|
ontouchmove: null,
|
|
/**
|
|
* Property-based event handler for the `globaltouchmove` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onglobaltouchmove = (event) => {
|
|
* //some function here that happens on globaltouchmove
|
|
* }
|
|
*/
|
|
onglobaltouchmove: null,
|
|
/**
|
|
* Property-based event handler for the `touchstart` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.ontouchstart = (event) => {
|
|
* //some function here that happens on touchstart
|
|
* }
|
|
*/
|
|
ontouchstart: null,
|
|
/**
|
|
* Property-based event handler for the `wheel` event.
|
|
* @memberof scene.Container#
|
|
* @default null
|
|
* @example
|
|
* this.onwheel = (event) => {
|
|
* //some function here that happens on wheel
|
|
* }
|
|
*/
|
|
onwheel: null,
|
|
/**
|
|
* Enable interaction events for the Container. Touch, pointer and mouse
|
|
* @memberof scene.Container#
|
|
*/
|
|
get interactive() {
|
|
return this.eventMode === "dynamic" || this.eventMode === "static";
|
|
},
|
|
set interactive(value) {
|
|
this.eventMode = value ? "static" : "passive";
|
|
},
|
|
/**
|
|
* @ignore
|
|
*/
|
|
_internalEventMode: void 0,
|
|
/**
|
|
* Enable interaction events for the Container. Touch, pointer and mouse.
|
|
* There are 5 types of interaction settings:
|
|
* - `'none'`: Ignores all interaction events, even on its children.
|
|
* - `'passive'`: **(default)** Does not emit events and ignores all hit testing on itself and non-interactive children.
|
|
* Interactive children will still emit events.
|
|
* - `'auto'`: Does not emit events but is hit tested if parent is interactive. Same as `interactive = false` in v7
|
|
* - `'static'`: Emit events and is hit tested. Same as `interaction = true` in v7
|
|
* - `'dynamic'`: Emits events and is hit tested but will also receive mock interaction events fired from a ticker to
|
|
* allow for interaction when the mouse isn't moving
|
|
* @example
|
|
* import { Sprite } from 'pixi.js';
|
|
*
|
|
* const sprite = new Sprite(texture);
|
|
* sprite.eventMode = 'static';
|
|
* sprite.on('tap', (event) => {
|
|
* // Handle event
|
|
* });
|
|
* @memberof scene.Container#
|
|
* @since 7.2.0
|
|
*/
|
|
get eventMode() {
|
|
return this._internalEventMode ?? EventSystem.defaultEventMode;
|
|
},
|
|
set eventMode(value) {
|
|
this._internalEventMode = value;
|
|
},
|
|
/**
|
|
* Determines if the container is interactive or not
|
|
* @returns {boolean} Whether the container is interactive or not
|
|
* @memberof scene.Container#
|
|
* @since 7.2.0
|
|
* @example
|
|
* import { Sprite } from 'pixi.js';
|
|
*
|
|
* const sprite = new Sprite(texture);
|
|
* sprite.eventMode = 'static';
|
|
* sprite.isInteractive(); // true
|
|
*
|
|
* sprite.eventMode = 'dynamic';
|
|
* sprite.isInteractive(); // true
|
|
*
|
|
* sprite.eventMode = 'none';
|
|
* sprite.isInteractive(); // false
|
|
*
|
|
* sprite.eventMode = 'passive';
|
|
* sprite.isInteractive(); // false
|
|
*
|
|
* sprite.eventMode = 'auto';
|
|
* sprite.isInteractive(); // false
|
|
*/
|
|
isInteractive() {
|
|
return this.eventMode === "static" || this.eventMode === "dynamic";
|
|
},
|
|
/**
|
|
* Determines if the children to the container can be clicked/touched
|
|
* Setting this to false allows PixiJS to bypass a recursive `hitTest` function
|
|
* @memberof scene.Container#
|
|
*/
|
|
interactiveChildren: true,
|
|
/**
|
|
* Interaction shape. Children will be hit first, then this shape will be checked.
|
|
* Setting this will cause this shape to be checked in hit tests rather than the container's bounds.
|
|
* @example
|
|
* import { Rectangle, Sprite } from 'pixi.js';
|
|
*
|
|
* const sprite = new Sprite(texture);
|
|
* sprite.interactive = true;
|
|
* sprite.hitArea = new Rectangle(0, 0, 100, 100);
|
|
* @member {IHitArea}
|
|
* @memberof scene.Container#
|
|
*/
|
|
hitArea: null,
|
|
/**
|
|
* Unlike `on` or `addListener` which are methods from EventEmitter, `addEventListener`
|
|
* seeks to be compatible with the DOM's `addEventListener` with support for options.
|
|
* @memberof scene.Container
|
|
* @param type - The type of event to listen to.
|
|
* @param listener - The listener callback or object.
|
|
* @param options - Listener options, used for capture phase.
|
|
* @example
|
|
* // Tell the user whether they did a single, double, triple, or nth click.
|
|
* button.addEventListener('click', {
|
|
* handleEvent(e): {
|
|
* let prefix;
|
|
*
|
|
* switch (e.detail) {
|
|
* case 1: prefix = 'single'; break;
|
|
* case 2: prefix = 'double'; break;
|
|
* case 3: prefix = 'triple'; break;
|
|
* default: prefix = e.detail + 'th'; break;
|
|
* }
|
|
*
|
|
* console.log('That was a ' + prefix + 'click');
|
|
* }
|
|
* });
|
|
*
|
|
* // But skip the first click!
|
|
* button.parent.addEventListener('click', function blockClickOnce(e) {
|
|
* e.stopImmediatePropagation();
|
|
* button.parent.removeEventListener('click', blockClickOnce, true);
|
|
* }, {
|
|
* capture: true,
|
|
* });
|
|
*/
|
|
addEventListener(type, listener, options) {
|
|
const capture = typeof options === "boolean" && options || typeof options === "object" && options.capture;
|
|
const signal = typeof options === "object" ? options.signal : void 0;
|
|
const once = typeof options === "object" ? options.once === true : false;
|
|
const context = typeof listener === "function" ? void 0 : listener;
|
|
type = capture ? `${type}capture` : type;
|
|
const listenerFn = typeof listener === "function" ? listener : listener.handleEvent;
|
|
const emitter = this;
|
|
if (signal) {
|
|
signal.addEventListener("abort", () => {
|
|
emitter.off(type, listenerFn, context);
|
|
});
|
|
}
|
|
if (once) {
|
|
emitter.once(type, listenerFn, context);
|
|
} else {
|
|
emitter.on(type, listenerFn, context);
|
|
}
|
|
},
|
|
/**
|
|
* Unlike `off` or `removeListener` which are methods from EventEmitter, `removeEventListener`
|
|
* seeks to be compatible with the DOM's `removeEventListener` with support for options.
|
|
* @memberof scene.Container
|
|
* @param type - The type of event the listener is bound to.
|
|
* @param listener - The listener callback or object.
|
|
* @param options - The original listener options. This is required to deregister a capture phase listener.
|
|
*/
|
|
removeEventListener(type, listener, options) {
|
|
const capture = typeof options === "boolean" && options || typeof options === "object" && options.capture;
|
|
const context = typeof listener === "function" ? void 0 : listener;
|
|
type = capture ? `${type}capture` : type;
|
|
listener = typeof listener === "function" ? listener : listener.handleEvent;
|
|
this.off(type, listener, context);
|
|
},
|
|
/**
|
|
* Dispatch the event on this {@link Container} using the event's {@link EventBoundary}.
|
|
*
|
|
* The target of the event is set to `this` and the `defaultPrevented` flag is cleared before dispatch.
|
|
* @memberof scene.Container
|
|
* @param e - The event to dispatch.
|
|
* @returns Whether the {@link FederatedEvent.preventDefault preventDefault}() method was not invoked.
|
|
* @example
|
|
* // Reuse a click event!
|
|
* button.dispatchEvent(clickEvent);
|
|
*/
|
|
dispatchEvent(e) {
|
|
if (!(e instanceof FederatedEvent)) {
|
|
throw new Error("Container cannot propagate events outside of the Federated Events API");
|
|
}
|
|
e.defaultPrevented = false;
|
|
e.path = null;
|
|
e.target = this;
|
|
e.manager.dispatchEvent(e);
|
|
return !e.defaultPrevented;
|
|
}
|
|
};
|
|
|
|
export { FederatedContainer };
|
|
//# sourceMappingURL=FederatedEventTarget.mjs.map
|