pixi.js

Version:

pixijs.com

pixijs/pixijs

1 lines • 82.5 kB

Source Map (JSON)

View Raw

{"version":3,"file":"EventBoundary.mjs","sources":["../../src/events/EventBoundary.ts"],"sourcesContent":["import EventEmitter from 'eventemitter3';\nimport { Point } from '../maths/point/Point';\nimport { warn } from '../utils/logging/warn';\nimport { EventsTicker } from './EventTicker';\nimport { FederatedMouseEvent } from './FederatedMouseEvent';\nimport { FederatedPointerEvent } from './FederatedPointerEvent';\nimport { FederatedWheelEvent } from './FederatedWheelEvent';\n\nimport type { Renderable } from '../rendering/renderers/shared/Renderable';\nimport type { Container } from '../scene/container/Container';\nimport type { EmitterListeners, TrackingData } from './EventBoundaryTypes';\nimport type { FederatedEvent } from './FederatedEvent';\nimport type {\n Cursor, EventMode, FederatedEventHandler,\n} from './FederatedEventTarget';\n\n// The maximum iterations used in propagation. This prevent infinite loops.\nconst PROPAGATION_LIMIT = 2048;\n\nconst tempHitLocation = new Point();\nconst tempLocalMapping = new Point();\n\n/**\n * Event boundaries are \"barriers\" where events coming from an upstream scene are modified before downstream propagation.\n *\n * ## Root event boundary\n *\n * The {@link EventSystem#rootBoundary rootBoundary} handles events coming from the <canvas />.\n * {@link EventSystem} handles the normalization from native {@link https://dom.spec.whatwg.org/#event Events}\n * into {@link FederatedEvent FederatedEvents}. The rootBoundary then does the hit-testing and event dispatch\n * for the upstream normalized event.\n *\n * ## Additional event boundaries\n *\n * An additional event boundary may be desired within an application's scene graph. For example, if a portion of the scene is\n * is flat with many children at one level - a spatial hash maybe needed to accelerate hit testing. In this scenario, the\n * container can be detached from the scene and glued using a custom event boundary.\n *\n * ```ts\n * import { Container } from 'pixi.js';\n * import { EventBoundary } from 'pixi.js';\n * import { SpatialHash } from 'pixi-spatial-hash';\n *\n * class HashedHitTestingEventBoundary\n * {\n * private spatialHash: SpatialHash;\n *\n * constructor(scene: Container, spatialHash: SpatialHash)\n * {\n * super(scene);\n * this.spatialHash = spatialHash;\n * }\n *\n * hitTestRecursive(...)\n * {\n * // TODO: If target === this.rootTarget, then use spatial hash to get a\n * // list of possible children that match the given (x,y) coordinates.\n * }\n * }\n *\n * class VastScene extends Container\n * {\n * protected eventBoundary: EventBoundary;\n * protected scene: Container;\n * protected spatialHash: SpatialHash;\n *\n * constructor()\n * {\n * this.scene = new Container();\n * this.spatialHash = new SpatialHash();\n * this.eventBoundary = new HashedHitTestingEventBoundary(this.scene, this.spatialHash);\n *\n * // Populate this.scene with a ton of children, while updating this.spatialHash\n * }\n * }\n * ```\n * @category events\n * @advanced\n */\nexport class EventBoundary\n{\n /**\n * The root event-target residing below the event boundary.\n * All events are dispatched trickling down and bubbling up to this `rootTarget`.\n */\n public rootTarget: Container;\n\n /**\n * Emits events after they were dispatched into the scene graph.\n *\n * This can be used for global events listening, regardless of the scene graph being used. It should\n * not be used by interactive libraries for normal use.\n *\n * Special events that do not bubble all the way to the root target are not emitted from here,\n * e.g. pointerenter, pointerleave, click.\n */\n public dispatch: EventEmitter = new EventEmitter();\n\n /** The cursor preferred by the event targets underneath this boundary. */\n public cursor: Cursor | (string & {});\n\n /**\n * This flag would emit `pointermove`, `touchmove`, and `mousemove` events on all Containers.\n *\n * The `moveOnAll` semantics mirror those of earlier versions of PixiJS. This was disabled in favor of\n * the Pointer Event API's approach.\n */\n public moveOnAll = false;\n\n /** Enables the global move events. `globalpointermove`, `globaltouchmove`, and `globalmousemove` */\n public enableGlobalMoveEvents = true;\n\n /**\n * Maps event types to forwarding handles for them.\n *\n * {@link EventBoundary EventBoundary} provides mapping for \"pointerdown\", \"pointermove\",\n * \"pointerout\", \"pointerleave\", \"pointerover\", \"pointerup\", and \"pointerupoutside\" by default.\n * @see EventBoundary#addEventMapping\n */\n protected mappingTable: Record<string, Array<{\n fn: (e: FederatedEvent) => void,\n priority: number\n }>>;\n\n /**\n * State object for mapping methods.\n * @see EventBoundary#trackingData\n */\n protected mappingState: Record<string, any> = {\n trackingData: {}\n };\n\n /**\n * The event pool maps event constructors to an free pool of instances of those specific events.\n * @see EventBoundary#allocateEvent\n * @see EventBoundary#freeEvent\n */\n protected eventPool: Map<typeof FederatedEvent, FederatedEvent[]> = new Map();\n\n /** Every interactive element gathered from the scene. Only used in `pointermove` */\n private readonly _allInteractiveElements: Container[] = [];\n /** Every element that passed the hit test. Only used in `pointermove` */\n private _hitElements: Container[] = [];\n /** Whether or not to collect all the interactive elements from the scene. Enabled in `pointermove` */\n private _isPointerMoveEvent = false;\n\n /**\n * @param rootTarget - The holder of the event boundary.\n */\n constructor(rootTarget?: Container)\n {\n this.rootTarget = rootTarget;\n\n this.hitPruneFn = this.hitPruneFn.bind(this);\n this.hitTestFn = this.hitTestFn.bind(this);\n this.mapPointerDown = this.mapPointerDown.bind(this);\n this.mapPointerMove = this.mapPointerMove.bind(this);\n this.mapPointerOut = this.mapPointerOut.bind(this);\n this.mapPointerOver = this.mapPointerOver.bind(this);\n this.mapPointerUp = this.mapPointerUp.bind(this);\n this.mapPointerUpOutside = this.mapPointerUpOutside.bind(this);\n this.mapWheel = this.mapWheel.bind(this);\n\n this.mappingTable = {};\n this.addEventMapping('pointerdown', this.mapPointerDown);\n this.addEventMapping('pointermove', this.mapPointerMove);\n this.addEventMapping('pointerout', this.mapPointerOut);\n this.addEventMapping('pointerleave', this.mapPointerOut);\n this.addEventMapping('pointerover', this.mapPointerOver);\n this.addEventMapping('pointerup', this.mapPointerUp);\n this.addEventMapping('pointerupoutside', this.mapPointerUpOutside);\n this.addEventMapping('wheel', this.mapWheel);\n }\n\n /**\n * Adds an event mapping for the event `type` handled by `fn`.\n *\n * Event mappings can be used to implement additional or custom events. They take an event\n * coming from the upstream scene (or directly from the {@link EventSystem}) and dispatch new downstream events\n * generally trickling down and bubbling up to {@link EventBoundary.rootTarget this.rootTarget}.\n *\n * To modify the semantics of existing events, the built-in mapping methods of EventBoundary should be overridden\n * instead.\n * @param type - The type of upstream event to map.\n * @param fn - The mapping method. The context of this function must be bound manually, if desired.\n */\n public addEventMapping(type: string, fn: (e: FederatedEvent) => void): void\n {\n if (!this.mappingTable[type])\n {\n this.mappingTable[type] = [];\n }\n\n this.mappingTable[type].push({\n fn,\n priority: 0,\n });\n this.mappingTable[type].sort((a, b) => a.priority - b.priority);\n }\n\n /**\n * Dispatches the given event\n * @param e - The event to dispatch.\n * @param type - The type of event to dispatch. Defaults to `e.type`.\n */\n public dispatchEvent(e: FederatedEvent, type?: string): void\n {\n e.propagationStopped = false;\n e.propagationImmediatelyStopped = false;\n\n this.propagate(e, type);\n this.dispatch.emit(type || e.type, e);\n }\n\n /**\n * Maps the given upstream event through the event boundary and propagates it downstream.\n * @param e - The event to map.\n */\n public mapEvent(e: FederatedEvent): void\n {\n if (!this.rootTarget)\n {\n return;\n }\n\n const mappers = this.mappingTable[e.type];\n\n if (mappers)\n {\n for (let i = 0, j = mappers.length; i < j; i++)\n {\n mappers[i].fn(e);\n }\n }\n else\n {\n // #if _DEBUG\n warn(`[EventBoundary]: Event mapping not defined for ${e.type}`);\n // #endif\n }\n }\n\n /**\n * Finds the Container that is the target of a event at the given coordinates.\n *\n * The passed (x,y) coordinates are in the world space above this event boundary.\n * @param x - The x coordinate of the event.\n * @param y - The y coordinate of the event.\n */\n public hitTest(\n x: number,\n y: number,\n ): Container\n {\n EventsTicker.pauseUpdate = true;\n // if we are using global move events, we need to hit test the whole scene graph\n const useMove = this._isPointerMoveEvent && this.enableGlobalMoveEvents;\n const fn = useMove ? 'hitTestMoveRecursive' : 'hitTestRecursive';\n const invertedPath = this[fn](\n this.rootTarget,\n this.rootTarget.eventMode,\n tempHitLocation.set(x, y),\n this.hitTestFn,\n this.hitPruneFn,\n );\n\n return invertedPath && invertedPath[0];\n }\n\n /**\n * Propagate the passed event from from {@link EventBoundary.rootTarget this.rootTarget} to its\n * target `e.target`.\n * @param e - The event to propagate.\n * @param type - The type of event to propagate. Defaults to `e.type`.\n */\n public propagate(e: FederatedEvent, type?: string): void\n {\n if (!e.target)\n {\n // This usually occurs when the scene graph is not interactive.\n return;\n }\n\n const composedPath = e.composedPath();\n\n // Capturing phase\n e.eventPhase = e.CAPTURING_PHASE;\n\n for (let i = 0, j = composedPath.length - 1; i < j; i++)\n {\n e.currentTarget = composedPath[i];\n\n this.notifyTarget(e, type);\n\n if (e.propagationStopped || e.propagationImmediatelyStopped) return;\n }\n\n // At target phase\n e.eventPhase = e.AT_TARGET;\n e.currentTarget = e.target;\n\n this.notifyTarget(e, type);\n\n if (e.propagationStopped || e.propagationImmediatelyStopped) return;\n\n // Bubbling phase\n e.eventPhase = e.BUBBLING_PHASE;\n\n for (let i = composedPath.length - 2; i >= 0; i--)\n {\n e.currentTarget = composedPath[i];\n\n this.notifyTarget(e, type);\n\n if (e.propagationStopped || e.propagationImmediatelyStopped) return;\n }\n }\n\n /**\n * Emits the event `e` to all interactive containers. The event is propagated in the bubbling phase always.\n *\n * This is used in the `globalpointermove` event.\n * @param e - The emitted event.\n * @param type - The listeners to notify.\n * @param targets - The targets to notify.\n */\n public all(e: FederatedEvent, type?: string | string[], targets = this._allInteractiveElements): void\n {\n if (targets.length === 0) return;\n\n e.eventPhase = e.BUBBLING_PHASE;\n\n const events = Array.isArray(type) ? type : [type];\n\n // loop through all interactive elements and notify them of the event\n // loop through targets backwards\n for (let i = targets.length - 1; i >= 0; i--)\n {\n events.forEach((event) =>\n {\n e.currentTarget = targets[i];\n this.notifyTarget(e, event);\n });\n }\n }\n\n /**\n * Finds the propagation path from {@link EventBoundary.rootTarget rootTarget} to the passed\n * `target`. The last element in the path is `target`.\n * @param target - The target to find the propagation path to.\n */\n public propagationPath(target: Container): Container[]\n {\n const propagationPath = [target];\n\n for (let i = 0; i < PROPAGATION_LIMIT && (target !== this.rootTarget && target.parent); i++)\n {\n if (!target.parent)\n {\n throw new Error('Cannot find propagation path to disconnected target');\n }\n\n propagationPath.push(target.parent);\n\n target = target.parent;\n }\n\n propagationPath.reverse();\n\n return propagationPath;\n }\n\n protected hitTestMoveRecursive(\n currentTarget: Container,\n eventMode: EventMode,\n location: Point,\n testFn: (object: Container, pt: Point) => boolean,\n pruneFn: (object: Container, pt: Point) => boolean,\n ignore = false\n ): Container[]\n {\n let shouldReturn = false;\n\n // only bail out early if it is not interactive\n if (this._interactivePrune(currentTarget)) return null;\n\n if (currentTarget.eventMode === 'dynamic' || eventMode === 'dynamic')\n {\n EventsTicker.pauseUpdate = false;\n }\n\n if (currentTarget.interactiveChildren && currentTarget.children)\n {\n const children = currentTarget.children;\n\n for (let i = children.length - 1; i >= 0; i--)\n {\n const child = children[i] as Container;\n\n const nestedHit = this.hitTestMoveRecursive(\n child,\n this._isInteractive(eventMode) ? eventMode : child.eventMode,\n location,\n testFn,\n pruneFn,\n ignore || pruneFn(currentTarget, location)\n );\n\n if (nestedHit)\n {\n // Its a good idea to check if a child has lost its parent.\n // this means it has been removed whilst looping so its best\n if (nestedHit.length > 0 && !nestedHit[nestedHit.length - 1].parent)\n {\n continue;\n }\n\n // Only add the current hit-test target to the hit-test chain if the chain\n // has already started (i.e. the event target has been found) or if the current\n // target is interactive (i.e. it becomes the event target).\n const isInteractive = currentTarget.isInteractive();\n\n if (nestedHit.length > 0 || isInteractive)\n {\n if (isInteractive) this._allInteractiveElements.push(currentTarget);\n nestedHit.push(currentTarget);\n }\n\n // store all hit elements to be returned once we have traversed the whole tree\n if (this._hitElements.length === 0) this._hitElements = nestedHit;\n\n shouldReturn = true;\n }\n }\n }\n\n const isInteractiveMode = this._isInteractive(eventMode);\n const isInteractiveTarget = currentTarget.isInteractive();\n\n if (isInteractiveTarget && isInteractiveTarget) this._allInteractiveElements.push(currentTarget);\n\n // we don't carry on hit testing something once we have found a hit,\n // now only care about gathering the interactive elements\n if (ignore || this._hitElements.length > 0) return null;\n\n if (shouldReturn) return this._hitElements as Container[];\n\n // Finally, hit test this Container itself.\n if (isInteractiveMode && (!pruneFn(currentTarget, location) && testFn(currentTarget, location)))\n {\n // The current hit-test target is the event's target only if it is interactive. Otherwise,\n // the first interactive ancestor will be the event's target.\n return isInteractiveTarget ? [currentTarget] : [];\n }\n\n return null;\n }\n\n /**\n * Recursive implementation for {@link EventBoundary.hitTest hitTest}.\n * @param currentTarget - The Container that is to be hit tested.\n * @param eventMode - The event mode for the `currentTarget` or one of its parents.\n * @param location - The location that is being tested for overlap.\n * @param testFn - Callback that determines whether the target passes hit testing. This callback\n * can assume that `pruneFn` failed to prune the container.\n * @param pruneFn - Callback that determiness whether the target and all of its children\n * cannot pass the hit test. It is used as a preliminary optimization to prune entire subtrees\n * of the scene graph.\n * @returns An array holding the hit testing target and all its ancestors in order. The first element\n * is the target itself and the last is {@link EventBoundary.rootTarget rootTarget}. This is the opposite\n * order w.r.t. the propagation path. If no hit testing target is found, null is returned.\n */\n protected hitTestRecursive(\n currentTarget: Container,\n eventMode: EventMode,\n location: Point,\n testFn: (object: Container, pt: Point) => boolean,\n pruneFn: (object: Container, pt: Point) => boolean\n ): Container[]\n {\n // Attempt to prune this Container and its subtree as an optimization.\n if (this._interactivePrune(currentTarget) || pruneFn(currentTarget, location))\n {\n return null;\n }\n if (currentTarget.eventMode === 'dynamic' || eventMode === 'dynamic')\n {\n EventsTicker.pauseUpdate = false;\n }\n\n // Find a child that passes the hit testing and return one, if any.\n if (currentTarget.interactiveChildren && currentTarget.children)\n {\n const children = currentTarget.children;\n const relativeLocation = location;\n\n for (let i = children.length - 1; i >= 0; i--)\n {\n const child = children[i] as Container;\n\n const nestedHit = this.hitTestRecursive(\n child,\n this._isInteractive(eventMode) ? eventMode : child.eventMode,\n relativeLocation,\n testFn,\n pruneFn\n );\n\n if (nestedHit)\n {\n // Its a good idea to check if a child has lost its parent.\n // this means it has been removed whilst looping so its best\n if (nestedHit.length > 0 && !nestedHit[nestedHit.length - 1].parent)\n {\n continue;\n }\n\n // Only add the current hit-test target to the hit-test chain if the chain\n // has already started (i.e. the event target has been found) or if the current\n // target is interactive (i.e. it becomes the event target).\n const isInteractive = currentTarget.isInteractive();\n\n if (nestedHit.length > 0 || isInteractive) nestedHit.push(currentTarget);\n\n return nestedHit;\n }\n }\n }\n\n const isInteractiveMode = this._isInteractive(eventMode);\n const isInteractiveTarget = currentTarget.isInteractive();\n\n // Finally, hit test this Container itself.\n if (isInteractiveMode && testFn(currentTarget, location))\n {\n // The current hit-test target is the event's target only if it is interactive. Otherwise,\n // the first interactive ancestor will be the event's target.\n return isInteractiveTarget ? [currentTarget] : [];\n }\n\n return null;\n }\n\n private _isInteractive(int: EventMode): int is 'static' | 'dynamic'\n {\n return int === 'static' || int === 'dynamic';\n }\n\n private _interactivePrune(container: Container): boolean\n {\n // If container is a mask, invisible, or not renderable then it cannot be hit directly.\n if (!container || !container.visible || !container.renderable || !container.measurable)\n {\n return true;\n }\n\n // If this Container is none then it cannot be hit by anything.\n if (container.eventMode === 'none')\n {\n return true;\n }\n\n // If this Container is passive and it has no interactive children then it cannot be hit\n if (container.eventMode === 'passive' && !container.interactiveChildren)\n {\n return true;\n }\n\n return false;\n }\n\n /**\n * Checks whether the container or any of its children cannot pass the hit test at all.\n *\n * {@link EventBoundary}'s implementation uses the {@link Container.hitArea hitArea}\n * and {@link Container._maskEffect} for pruning.\n * @param container - The container to prune.\n * @param location - The location to test for overlap.\n */\n protected hitPruneFn(container: Container, location: Point): boolean\n {\n if (container.hitArea)\n {\n container.worldTransform.applyInverse(location, tempLocalMapping);\n\n if (!container.hitArea.contains(tempLocalMapping.x, tempLocalMapping.y))\n {\n return true;\n }\n }\n\n if (container.effects && container.effects.length)\n {\n for (let i = 0; i < container.effects.length; i++)\n {\n const effect = container.effects[i];\n\n if (effect.containsPoint)\n {\n const effectContainsPoint = effect.containsPoint(location, this.hitTestFn);\n\n if (!effectContainsPoint)\n {\n return true;\n }\n }\n }\n }\n\n return false;\n }\n\n /**\n * Checks whether the container passes hit testing for the given location.\n * @param container - The container to test.\n * @param location - The location to test for overlap.\n * @returns - Whether `container` passes hit testing for `location`.\n */\n protected hitTestFn(container: Container, location: Point): boolean\n {\n // If the container failed pruning with a hitArea, then it must pass it.\n if (container.hitArea)\n {\n return true;\n }\n\n if ((container as Renderable)?.containsPoint)\n {\n container.worldTransform.applyInverse(location, tempLocalMapping);\n\n return (container as Renderable).containsPoint(tempLocalMapping) as boolean;\n }\n\n // TODO: Should we hit test based on bounds?\n\n return false;\n }\n\n /**\n * Notify all the listeners to the event's `currentTarget`.\n *\n * If the `currentTarget` contains the property `on<type>`, then it is called here,\n * simulating the behavior from version 6.x and prior.\n * @param e - The event passed to the target.\n * @param type - The type of event to notify. Defaults to `e.type`.\n */\n protected notifyTarget(e: FederatedEvent, type?: string): void\n {\n if (!e.currentTarget.isInteractive())\n {\n return;\n }\n\n type ??= e.type;\n\n // call the `on${type}` for the current target if it exists\n const handlerKey = `on${type}` as keyof Container;\n\n (e.currentTarget[handlerKey] as FederatedEventHandler<FederatedEvent>)?.(e);\n\n const key = e.eventPhase === e.CAPTURING_PHASE || e.eventPhase === e.AT_TARGET ? `${type}capture` : type;\n\n this._notifyListeners(e, key);\n\n if (e.eventPhase === e.AT_TARGET)\n {\n this._notifyListeners(e, type);\n }\n }\n\n /**\n * Maps the upstream `pointerdown` events to a downstream `pointerdown` event.\n *\n * `touchstart`, `rightdown`, `mousedown` events are also dispatched for specific pointer types.\n * @param from - The upstream `pointerdown` event.\n */\n protected mapPointerDown(from: FederatedEvent): void\n {\n if (!(from instanceof FederatedPointerEvent))\n {\n // #if _DEBUG\n warn('EventBoundary cannot map a non-pointer event as a pointer event');\n // #endif\n\n return;\n }\n\n const e = this.createPointerEvent(from);\n\n this.dispatchEvent(e, 'pointerdown');\n\n if (e.pointerType === 'touch')\n {\n this.dispatchEvent(e, 'touchstart');\n }\n else if (e.pointerType === 'mouse' || e.pointerType === 'pen')\n {\n const isRightButton = e.button === 2;\n\n this.dispatchEvent(e, isRightButton ? 'rightdown' : 'mousedown');\n }\n\n const trackingData = this.trackingData(from.pointerId);\n\n trackingData.pressTargetsByButton[from.button] = e.composedPath();\n\n this.freeEvent(e);\n }\n\n /**\n * Maps the upstream `pointermove` to downstream `pointerout`, `pointerover`, and `pointermove` events, in that order.\n *\n * The tracking data for the specific pointer has an updated `overTarget`. `mouseout`, `mouseover`,\n * `mousemove`, and `touchmove` events are fired as well for specific pointer types.\n * @param from - The upstream `pointermove` event.\n */\n protected mapPointerMove(from: FederatedEvent): void\n {\n if (!(from instanceof FederatedPointerEvent))\n {\n // #if _DEBUG\n warn('EventBoundary cannot map a non-pointer event as a pointer event');\n // #endif\n\n return;\n }\n\n this._allInteractiveElements.length = 0;\n this._hitElements.length = 0;\n this._isPointerMoveEvent = true;\n const e = this.createPointerEvent(from);\n\n this._isPointerMoveEvent = false;\n const isMouse = e.pointerType === 'mouse' || e.pointerType === 'pen';\n const trackingData = this.trackingData(from.pointerId);\n const outTarget = this.findMountedTarget(trackingData.overTargets);\n\n // First pointerout/pointerleave\n if (trackingData.overTargets?.length > 0 && outTarget !== e.target)\n {\n // pointerout always occurs on the overTarget when the pointer hovers over another element.\n const outType = from.type === 'mousemove' ? 'mouseout' : 'pointerout';\n const outEvent = this.createPointerEvent(from, outType, outTarget);\n\n this.dispatchEvent(outEvent, 'pointerout');\n if (isMouse) this.dispatchEvent(outEvent, 'mouseout');\n\n // If the pointer exits overTarget and its descendants, then a pointerleave event is also fired. This event\n // is dispatched to all ancestors that no longer capture the pointer.\n if (!e.composedPath().includes(outTarget))\n {\n const leaveEvent = this.createPointerEvent(from, 'pointerleave', outTarget);\n\n leaveEvent.eventPhase = leaveEvent.AT_TARGET;\n\n while (leaveEvent.target && !e.composedPath().includes(leaveEvent.target))\n {\n leaveEvent.currentTarget = leaveEvent.target;\n\n this.notifyTarget(leaveEvent);\n if (isMouse) this.notifyTarget(leaveEvent, 'mouseleave');\n\n leaveEvent.target = leaveEvent.target.parent;\n }\n\n this.freeEvent(leaveEvent);\n }\n\n this.freeEvent(outEvent);\n }\n\n // Then pointerover\n if (outTarget !== e.target)\n {\n // pointerover always occurs on the new overTarget\n const overType = from.type === 'mousemove' ? 'mouseover' : 'pointerover';\n const overEvent = this.clonePointerEvent(e, overType);// clone faster\n\n this.dispatchEvent(overEvent, 'pointerover');\n if (isMouse) this.dispatchEvent(overEvent, 'mouseover');\n\n // Probe whether the newly hovered Container is an ancestor of the original overTarget.\n let overTargetAncestor = outTarget?.parent;\n\n while (overTargetAncestor && overTargetAncestor !== this.rootTarget.parent)\n {\n if (overTargetAncestor === e.target) break;\n\n overTargetAncestor = overTargetAncestor.parent;\n }\n\n // The pointer has entered a non-ancestor of the original overTarget. This means we need a pointerentered\n // event.\n const didPointerEnter = !overTargetAncestor || overTargetAncestor === this.rootTarget.parent;\n\n if (didPointerEnter)\n {\n const enterEvent = this.clonePointerEvent(e, 'pointerenter');\n\n enterEvent.eventPhase = enterEvent.AT_TARGET;\n\n while (enterEvent.target\n && enterEvent.target !== outTarget\n && enterEvent.target !== this.rootTarget.parent)\n {\n enterEvent.currentTarget = enterEvent.target;\n\n this.notifyTarget(enterEvent);\n if (isMouse) this.notifyTarget(enterEvent, 'mouseenter');\n\n enterEvent.target = enterEvent.target.parent;\n }\n\n this.freeEvent(enterEvent);\n }\n\n this.freeEvent(overEvent);\n }\n\n const allMethods: string[] = [];\n const allowGlobalPointerEvents = this.enableGlobalMoveEvents ?? true;\n\n this.moveOnAll ? allMethods.push('pointermove') : this.dispatchEvent(e, 'pointermove');\n allowGlobalPointerEvents && allMethods.push('globalpointermove');\n\n // Then pointermove\n if (e.pointerType === 'touch')\n {\n this.moveOnAll ? allMethods.splice(1, 0, 'touchmove') : this.dispatchEvent(e, 'touchmove');\n allowGlobalPointerEvents && allMethods.push('globaltouchmove');\n }\n\n if (isMouse)\n {\n this.moveOnAll ? allMethods.splice(1, 0, 'mousemove') : this.dispatchEvent(e, 'mousemove');\n allowGlobalPointerEvents && allMethods.push('globalmousemove');\n this.cursor = e.target?.cursor;\n }\n\n if (allMethods.length > 0)\n {\n this.all(e, allMethods);\n }\n this._allInteractiveElements.length = 0;\n this._hitElements.length = 0;\n\n trackingData.overTargets = e.composedPath();\n\n this.freeEvent(e);\n }\n\n /**\n * Maps the upstream `pointerover` to downstream `pointerover` and `pointerenter` events, in that order.\n *\n * The tracking data for the specific pointer gets a new `overTarget`.\n * @param from - The upstream `pointerover` event.\n */\n protected mapPointerOver(from: FederatedEvent): void\n {\n if (!(from instanceof FederatedPointerEvent))\n {\n // #if _DEBUG\n warn('EventBoundary cannot map a non-pointer event as a pointer event');\n // #endif\n\n return;\n }\n\n const trackingData = this.trackingData(from.pointerId);\n const e = this.createPointerEvent(from);\n const isMouse = e.pointerType === 'mouse' || e.pointerType === 'pen';\n\n this.dispatchEvent(e, 'pointerover');\n if (isMouse) this.dispatchEvent(e, 'mouseover');\n if (e.pointerType === 'mouse') this.cursor = e.target?.cursor;\n\n // pointerenter events must be fired since the pointer entered from upstream.\n const enterEvent = this.clonePointerEvent(e, 'pointerenter');\n\n enterEvent.eventPhase = enterEvent.AT_TARGET;\n\n while (enterEvent.target && enterEvent.target !== this.rootTarget.parent)\n {\n enterEvent.currentTarget = enterEvent.target;\n\n this.notifyTarget(enterEvent);\n if (isMouse) this.notifyTarget(enterEvent, 'mouseenter');\n\n enterEvent.target = enterEvent.target.parent;\n }\n\n trackingData.overTargets = e.composedPath();\n\n this.freeEvent(e);\n this.freeEvent(enterEvent);\n }\n\n /**\n * Maps the upstream `pointerout` to downstream `pointerout`, `pointerleave` events, in that order.\n *\n * The tracking data for the specific pointer is cleared of a `overTarget`.\n * @param from - The upstream `pointerout` event.\n */\n protected mapPointerOut(from: FederatedEvent): void\n {\n if (!(from instanceof FederatedPointerEvent))\n {\n // #if _DEBUG\n warn('EventBoundary cannot map a non-pointer event as a pointer event');\n // #endif\n\n return;\n }\n\n const trackingData = this.trackingData(from.pointerId);\n\n if (trackingData.overTargets)\n {\n const isMouse = from.pointerType === 'mouse' || from.pointerType === 'pen';\n const outTarget = this.findMountedTarget(trackingData.overTargets);\n\n // pointerout first\n const outEvent = this.createPointerEvent(from, 'pointerout', outTarget);\n\n this.dispatchEvent(outEvent);\n if (isMouse) this.dispatchEvent(outEvent, 'mouseout');\n\n // pointerleave(s) are also dispatched b/c the pointer must've left rootTarget and its descendants to\n // get an upstream pointerout event (upstream events do not know rootTarget has descendants).\n const leaveEvent = this.createPointerEvent(from, 'pointerleave', outTarget);\n\n leaveEvent.eventPhase = leaveEvent.AT_TARGET;\n\n while (leaveEvent.target && leaveEvent.target !== this.rootTarget.parent)\n {\n leaveEvent.currentTarget = leaveEvent.target;\n\n this.notifyTarget(leaveEvent);\n if (isMouse) this.notifyTarget(leaveEvent, 'mouseleave');\n\n leaveEvent.target = leaveEvent.target.parent;\n }\n\n trackingData.overTargets = null;\n\n this.freeEvent(outEvent);\n this.freeEvent(leaveEvent);\n }\n\n this.cursor = null;\n }\n\n /**\n * Maps the upstream `pointerup` event to downstream `pointerup`, `pointerupoutside`,\n * and `click`/`rightclick`/`pointertap` events, in that order.\n *\n * The `pointerupoutside` event bubbles from the original `pointerdown` target to the most specific\n * ancestor of the `pointerdown` and `pointerup` targets, which is also the `click` event's target. `touchend`,\n * `rightup`, `mouseup`, `touchendoutside`, `rightupoutside`, `mouseupoutside`, and `tap` are fired as well for\n * specific pointer types.\n * @param from - The upstream `pointerup` event.\n */\n protected mapPointerUp(from: FederatedEvent): void\n {\n if (!(from instanceof FederatedPointerEvent))\n {\n // #if _DEBUG\n warn('EventBoundary cannot map a non-pointer event as a pointer event');\n // #endif\n\n return;\n }\n\n const now = performance.now();\n const e = this.createPointerEvent(from);\n\n this.dispatchEvent(e, 'pointerup');\n\n if (e.pointerType === 'touch')\n {\n this.dispatchEvent(e, 'touchend');\n }\n else if (e.pointerType === 'mouse' || e.pointerType === 'pen')\n {\n const isRightButton = e.button === 2;\n\n this.dispatchEvent(e, isRightButton ? 'rightup' : 'mouseup');\n }\n\n const trackingData = this.trackingData(from.pointerId);\n const pressTarget = this.findMountedTarget(trackingData.pressTargetsByButton[from.button]);\n\n let clickTarget = pressTarget;\n\n // pointerupoutside only bubbles. It only bubbles upto the parent that doesn't contain\n // the pointerup location.\n if (pressTarget && !e.composedPath().includes(pressTarget))\n {\n let currentTarget = pressTarget;\n\n while (currentTarget && !e.composedPath().includes(currentTarget))\n {\n e.currentTarget = currentTarget;\n\n this.notifyTarget(e, 'pointerupoutside');\n\n if (e.pointerType === 'touch')\n {\n this.notifyTarget(e, 'touchendoutside');\n }\n else if (e.pointerType === 'mouse' || e.pointerType === 'pen')\n {\n const isRightButton = e.button === 2;\n\n this.notifyTarget(e, isRightButton ? 'rightupoutside' : 'mouseupoutside');\n }\n\n currentTarget = currentTarget.parent;\n }\n\n delete trackingData.pressTargetsByButton[from.button];\n\n // currentTarget is the most specific ancestor holding both the pointerdown and pointerup\n // targets. That is - it's our click target!\n clickTarget = currentTarget;\n }\n\n // click!\n if (clickTarget)\n {\n const clickEvent = this.clonePointerEvent(e, 'click');\n\n clickEvent.target = clickTarget;\n clickEvent.path = null;\n\n if (!trackingData.clicksByButton[from.button])\n {\n trackingData.clicksByButton[from.button] = {\n clickCount: 0,\n target: clickEvent.target,\n timeStamp: now,\n };\n }\n\n const clickHistory = trackingData.clicksByButton[from.button];\n\n if (clickHistory.target === clickEvent.target\n && now - clickHistory.timeStamp < 200)\n {\n ++clickHistory.clickCount;\n }\n else\n {\n clickHistory.clickCount = 1;\n }\n\n clickHistory.target = clickEvent.target;\n clickHistory.timeStamp = now;\n\n clickEvent.detail = clickHistory.clickCount;\n\n if (clickEvent.pointerType === 'mouse')\n {\n const isRightButton = clickEvent.button === 2;\n\n this.dispatchEvent(clickEvent, isRightButton ? 'rightclick' : 'click');\n }\n else if (clickEvent.pointerType === 'touch')\n {\n this.dispatchEvent(clickEvent, 'tap');\n }\n\n this.dispatchEvent(clickEvent, 'pointertap');\n\n this.freeEvent(clickEvent);\n }\n\n this.freeEvent(e);\n }\n\n /**\n * Maps the upstream `pointerupoutside` event to a downstream `pointerupoutside` event, bubbling from the original\n * `pointerdown` target to `rootTarget`.\n *\n * (The most specific ancestor of the `pointerdown` event and the `pointerup` event must the\n * `{@link EventBoundary}'s root because the `pointerup` event occurred outside of the boundary.)\n *\n * `touchendoutside`, `mouseupoutside`, and `rightupoutside` events are fired as well for specific pointer\n * types. The tracking data for the specific pointer is cleared of a `pressTarget`.\n * @param from - The upstream `pointerupoutside` event.\n */\n protected mapPointerUpOutside(from: FederatedEvent): void\n {\n if (!(from instanceof FederatedPointerEvent))\n {\n // #if _DEBUG\n warn('EventBoundary cannot map a non-pointer event as a pointer event');\n // #endif\n\n return;\n }\n\n const trackingData = this.trackingData(from.pointerId);\n const pressTarget = this.findMountedTarget(trackingData.pressTargetsByButton[from.button]);\n const e = this.createPointerEvent(from);\n\n if (pressTarget)\n {\n let currentTarget = pressTarget;\n\n while (currentTarget)\n {\n e.currentTarget = currentTarget;\n\n this.notifyTarget(e, 'pointerupoutside');\n\n if (e.pointerType === 'touch')\n {\n this.notifyTarget(e, 'touchendoutside');\n }\n else if (e.pointerType === 'mouse' || e.pointerType === 'pen')\n {\n this.notifyTarget(e, e.button === 2 ? 'rightupoutside' : 'mouseupoutside');\n }\n\n currentTarget = currentTarget.parent;\n }\n\n delete trackingData.pressTargetsByButton[from.button];\n }\n\n this.freeEvent(e);\n }\n\n /**\n * Maps the upstream `wheel` event to a downstream `wheel` event.\n * @param from - The upstream `wheel` event.\n */\n protected mapWheel(from: FederatedEvent): void\n {\n if (!(from instanceof FederatedWheelEvent))\n {\n // #if _DEBUG\n warn('EventBoundary cannot map a non-wheel event as a wheel event');\n // #endif\n\n return;\n }\n\n const wheelEvent = this.createWheelEvent(from);\n\n this.dispatchEvent(wheelEvent);\n this.freeEvent(wheelEvent);\n }\n\n /**\n * Finds the most specific event-target in the given propagation path that is still mounted in the scene graph.\n *\n * This is used to find the correct `pointerup` and `pointerout` target in the case that the original `pointerdown`\n * or `pointerover` target was unmounted from the scene graph.\n * @param propagationPath - The propagation path was valid in the past.\n * @returns - The most specific event-target still mounted at the same location in the scene graph.\n */\n protected findMountedTarget(propagationPath: Container[]): Container\n {\n if (!propagationPath)\n {\n return null;\n }\n\n let currentTarget = propagationPath[0];\n\n for (let i = 1; i < propagationPath.length; i++)\n {\n // Set currentTarget to the next target in the path only if it is still attached to the\n // scene graph (i.e. parent still points to the expected ancestor).\n if (propagationPath[i].parent === currentTarget)\n {\n currentTarget = propagationPath[i];\n }\n else\n {\n break;\n }\n }\n\n return currentTarget;\n }\n\n /**\n * Creates an event whose `originalEvent` is `from`, with an optional `type` and `target` override.\n *\n * The event is allocated using {@link EventBoundary#allocateEvent this.allocateEvent}.\n * @param from - The `originalEvent` for the returned event.\n * @param [type=from.type] - The type of the returned event.\n * @param target - The target of the returned event.\n */\n protected createPointerEvent(\n from: FederatedPointerEvent,\n type?: string,\n target?: Container\n ): FederatedPointerEvent\n {\n const event = this.allocateEvent(FederatedPointerEvent);\n\n this.copyPointerData(from, event);\n this.copyMouseData(from, event);\n this.copyData(from, event);\n\n event.nativeEvent = from.nativeEvent;\n event.originalEvent = from;\n event.target = target\n ?? this.hitTest(event.global.x, event.global.y) as Container\n ?? this._hitElements[0];\n\n if (typeof type === 'string')\n {\n event.type = type;\n }\n\n return event;\n }\n\n /**\n * Creates a wheel event whose `originalEvent` is `from`.\n *\n * The event is allocated using {@link EventBoundary#allocateEvent this.allocateEvent}.\n * @param from - The upstream wheel event.\n */\n protected createWheelEvent(from: FederatedWheelEvent): FederatedWheelEvent\n {\n const event = this.allocateEvent(FederatedWheelEvent);\n\n this.copyWheelData(from, event);\n this.copyMouseData(from, event);\n this.copyData(from, event);\n\n event.nativeEvent = from.nativeEvent;\n event.originalEvent = from;\n event.target = this.hitTest(event.global.x, event.global.y);\n\n return event;\n }\n\n /**\n * Clones the event `from`, with an optional `type` override.\n *\n * The event is allocated using {@link EventBoundary#allocateEvent this.allocateEvent}.\n * @param from - The event to clone.\n * @param [type=from.type] - The type of the returned event.\n */\n protected clonePointerEvent(from: FederatedPointerEvent, type?: string): FederatedPointerEvent\n {\n const event = this.allocateEvent(FederatedPointerEvent);\n\n event.nativeEvent = from.nativeEvent;\n event.originalEvent = from.originalEvent;\n\n this.copyPointerData(from, event);\n this.copyMouseData(from, event);\n this.copyData(from, event);\n\n // copy propagation path for perf\n event.target = from.target;\n event.path = from.composedPath().slice();\n event.type = type ?? event.type;\n\n return event;\n }\n\n /**\n * Copies wheel {@link FederatedWheelEvent} data from `from` into `to`.\n *\n * The following properties are copied:\n * + deltaMode\n * + deltaX\n * + deltaY\n * + deltaZ\n * @param from - The event to copy data from.\n * @param to - The event to copy data into.\n */\n protected copyWheelData(from: FederatedWheelEvent, to: FederatedWheelEvent): void\n {\n to.deltaMode = from.deltaMode;\n to.deltaX = from.deltaX;\n to.deltaY = from.deltaY;\n to.deltaZ = from.deltaZ;\n }\n\n /**\n * Copies pointer {@link FederatedPointerEvent} data from `from` into `to`.\n *\n * The following properties are copied:\n * + pointerId\n * + width\n * + height\n * + isPrimary\n * + pointerType\n * + pressure\n * + tangentialPressure\n * + tiltX\n * + tiltY\n * @param from - The event to copy data from.\n * @param to - The event to copy data into.\n */\n protected copyPointerData(from: FederatedEvent, to: FederatedEvent): void\n {\n if (!(from instanceof FederatedPointerEvent && to instanceof FederatedPointerEvent)) return;\n\n to.pointerId = from.pointerId;\n to.width = from.width;\n to.height = from.height;\n to.isPrimary = from.isPrimary;\n to.pointerType = from.pointerType;\n to.pressure = from.pressure;\n to.tangentialPressure = from.tangentialPressure;\n to.tiltX = from.tiltX;\n to.tiltY = from.tiltY;\n to.twist = from.twist;\n }\n\n /**\n * Copies mouse {@link FederatedMouseEvent} data from `from` to `to`.\n *\n * The following properties are copied:\n * + altKey\n * + button\n * + buttons\n * + clientX\n * + clientY\n * + metaKey\n * + movementX\n * + movementY\n * + pageX\n * + pageY\n * + x\n * + y\n * + screen\n * + shiftKey\n * + global\n * @param from - The event to copy data from.\n * @param to - The event to copy data into.\n */\n protected copyMouseData(from: FederatedEvent, to: FederatedEvent): void\n {\n if (!(from instanceof FederatedMouseEvent && to instanceof FederatedMouseEvent)) return;\n\n to.altKey = from.altKey;\n to.button = from.button;\n to.buttons = from.buttons;\n to.client.copyFrom(from.client);\n to.ctrlKey = from.ctrlKey;\n to.metaKey = from.metaKey;\n to.movement.copyFrom(from.movement);\n to.screen.copyFrom(from.screen);\n to.shiftKey = from.shiftKey;\n to.global.copyFrom(from.global);\n }\n\n /**\n * Copies base {@link FederatedEvent} data from `from` into `to`.\n *\n * The following properties are copied:\n * + isTrusted\n * + srcElement\n * + timeStamp\n * + type\n * @param from - The event to copy data from.\n * @param to - The event to copy data into.\n */\n protected copyData(from: FederatedEvent, to: FederatedEvent): void\n {\n to.isTrusted = from.isTrusted;\n to.srcElement = from.srcElement;\n to.timeStamp = performance.now();\n to.type = from.type;\n to.detail = from.detail;\n to.view = from.view;\n to.which = from.which;\n to.layer.copyFrom(from.layer);\n to.page.copyFrom(from.page);\n }\n\n /**\n * @param id - The pointer ID.\n * @returns The tracking data stored for the given pointer. If no data exists, a blank\n * state will be created.\n */\n protected trackingData(id: number): TrackingData\n {\n if