@industry-theme/repository-composition-panels 0.7.15 → 0.7.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/browserAll-XNN46GKF.js +7 -0
  2. package/dist/browserAll-XNN46GKF.js.map +1 -0
  3. package/dist/{index-pPFTSf2O.js → index-Bt-XsLNt.js} +16092 -689
  4. package/dist/{index-pPFTSf2O.js.map → index-Bt-XsLNt.js.map} +1 -1
  5. package/dist/index.d.ts +2 -2
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/init-Ccb5WXmw.js +4 -0
  8. package/dist/init-Ccb5WXmw.js.map +1 -0
  9. package/dist/panels/CollectionMapPanel.d.ts.map +1 -1
  10. package/dist/panels/overworld-map/OverworldMapPanel.d.ts.map +1 -1
  11. package/dist/panels/overworld-map/components/RepoSprite.d.ts +47 -0
  12. package/dist/panels/overworld-map/components/RepoSprite.d.ts.map +1 -0
  13. package/dist/panels/overworld-map/index.d.ts +3 -1
  14. package/dist/panels/overworld-map/index.d.ts.map +1 -1
  15. package/dist/panels.bundle.js +32 -31
  16. package/dist/webworkerAll-Ez5pUZRt.js +3 -0
  17. package/dist/webworkerAll-Ez5pUZRt.js.map +1 -0
  18. package/package.json +1 -1
  19. package/dist/BufferResource-DME1VWVJ.js +0 -593
  20. package/dist/BufferResource-DME1VWVJ.js.map +0 -1
  21. package/dist/CanvasRenderer-Md8Ayshs.js +0 -1525
  22. package/dist/CanvasRenderer-Md8Ayshs.js.map +0 -1
  23. package/dist/Filter-Bi2t_gmW.js +0 -81
  24. package/dist/Filter-Bi2t_gmW.js.map +0 -1
  25. package/dist/RenderTargetSystem-D98tiHim.js +0 -3046
  26. package/dist/RenderTargetSystem-D98tiHim.js.map +0 -1
  27. package/dist/WebGLRenderer-2YtxQhbh.js +0 -3884
  28. package/dist/WebGLRenderer-2YtxQhbh.js.map +0 -1
  29. package/dist/WebGPURenderer-kS6gO2Xc.js +0 -2142
  30. package/dist/WebGPURenderer-kS6gO2Xc.js.map +0 -1
  31. package/dist/browserAll-TZZf5l7B.js +0 -2687
  32. package/dist/browserAll-TZZf5l7B.js.map +0 -1
  33. package/dist/init-CfSmqCnm.js +0 -670
  34. package/dist/init-CfSmqCnm.js.map +0 -1
  35. package/dist/panels/overworld-map/spriteGenerator.d.ts +0 -53
  36. package/dist/panels/overworld-map/spriteGenerator.d.ts.map +0 -1
  37. package/dist/webworkerAll-TcJuZTza.js +0 -3
  38. package/dist/webworkerAll-TcJuZTza.js.map +0 -1
@@ -1,2687 +0,0 @@
1
- import { x as Ticker, y as UPDATE_PRIORITY, P as Point, z as removeItems, E as ExtensionType, k as EventEmitter, w as warn, f as extensions, H as Container } from "./index-pPFTSf2O.js";
2
- import "./init-CfSmqCnm.js";
3
- class CanvasObserver {
4
- constructor(options) {
5
- this._lastTransform = "";
6
- this._observer = null;
7
- this._tickerAttached = false;
8
- this.updateTranslation = () => {
9
- if (!this._canvas) return;
10
- const rect = this._canvas.getBoundingClientRect();
11
- const contentWidth = this._canvas.width;
12
- const contentHeight = this._canvas.height;
13
- const sx = rect.width / contentWidth * this._renderer.resolution;
14
- const sy = rect.height / contentHeight * this._renderer.resolution;
15
- const tx = rect.left;
16
- const ty = rect.top;
17
- const newTransform = `translate(${tx}px, ${ty}px) scale(${sx}, ${sy})`;
18
- if (newTransform !== this._lastTransform) {
19
- this._domElement.style.transform = newTransform;
20
- this._lastTransform = newTransform;
21
- }
22
- };
23
- this._domElement = options.domElement;
24
- this._renderer = options.renderer;
25
- if (globalThis.OffscreenCanvas && this._renderer.canvas instanceof OffscreenCanvas) return;
26
- this._canvas = this._renderer.canvas;
27
- this._attachObserver();
28
- }
29
- /** The canvas element that this CanvasObserver is associated with. */
30
- get canvas() {
31
- return this._canvas;
32
- }
33
- /** Attaches the DOM element to the canvas parent if it is not already attached. */
34
- ensureAttached() {
35
- if (!this._domElement.parentNode && this._canvas.parentNode) {
36
- this._canvas.parentNode.appendChild(this._domElement);
37
- this.updateTranslation();
38
- }
39
- }
40
- /** Sets up a ResizeObserver if available. This ensures that the DOM element is kept in sync with the canvas size . */
41
- _attachObserver() {
42
- if ("ResizeObserver" in globalThis) {
43
- if (this._observer) {
44
- this._observer.disconnect();
45
- this._observer = null;
46
- }
47
- this._observer = new ResizeObserver((entries) => {
48
- for (const entry of entries) {
49
- if (entry.target !== this._canvas) {
50
- continue;
51
- }
52
- const contentWidth = this.canvas.width;
53
- const contentHeight = this.canvas.height;
54
- const sx = entry.contentRect.width / contentWidth * this._renderer.resolution;
55
- const sy = entry.contentRect.height / contentHeight * this._renderer.resolution;
56
- const needsUpdate = this._lastScaleX !== sx || this._lastScaleY !== sy;
57
- if (needsUpdate) {
58
- this.updateTranslation();
59
- this._lastScaleX = sx;
60
- this._lastScaleY = sy;
61
- }
62
- }
63
- });
64
- this._observer.observe(this._canvas);
65
- } else if (!this._tickerAttached) {
66
- Ticker.shared.add(this.updateTranslation, this, UPDATE_PRIORITY.HIGH);
67
- }
68
- }
69
- /** Destroys the CanvasObserver instance, cleaning up observers and Ticker. */
70
- destroy() {
71
- if (this._observer) {
72
- this._observer.disconnect();
73
- this._observer = null;
74
- } else if (this._tickerAttached) {
75
- Ticker.shared.remove(this.updateTranslation);
76
- }
77
- this._domElement = null;
78
- this._renderer = null;
79
- this._canvas = null;
80
- this._tickerAttached = false;
81
- this._lastTransform = "";
82
- this._lastScaleX = null;
83
- this._lastScaleY = null;
84
- }
85
- }
86
- class FederatedEvent {
87
- /**
88
- * @param manager - The event boundary which manages this event. Propagation can only occur
89
- * within the boundary's jurisdiction.
90
- */
91
- constructor(manager) {
92
- this.bubbles = true;
93
- this.cancelBubble = true;
94
- this.cancelable = false;
95
- this.composed = false;
96
- this.defaultPrevented = false;
97
- this.eventPhase = FederatedEvent.prototype.NONE;
98
- this.propagationStopped = false;
99
- this.propagationImmediatelyStopped = false;
100
- this.layer = new Point();
101
- this.page = new Point();
102
- this.NONE = 0;
103
- this.CAPTURING_PHASE = 1;
104
- this.AT_TARGET = 2;
105
- this.BUBBLING_PHASE = 3;
106
- this.manager = manager;
107
- }
108
- /** @readonly */
109
- get layerX() {
110
- return this.layer.x;
111
- }
112
- /** @readonly */
113
- get layerY() {
114
- return this.layer.y;
115
- }
116
- /** @readonly */
117
- get pageX() {
118
- return this.page.x;
119
- }
120
- /** @readonly */
121
- get pageY() {
122
- return this.page.y;
123
- }
124
- /**
125
- * Fallback for the deprecated `InteractionEvent.data`.
126
- * @deprecated since 7.0.0
127
- */
128
- get data() {
129
- return this;
130
- }
131
- /**
132
- * The propagation path for this event. Alias for {@link EventBoundary.propagationPath}.
133
- * @advanced
134
- */
135
- composedPath() {
136
- if (this.manager && (!this.path || this.path[this.path.length - 1] !== this.target)) {
137
- this.path = this.target ? this.manager.propagationPath(this.target) : [];
138
- }
139
- return this.path;
140
- }
141
- /**
142
- * Unimplemented method included for implementing the DOM interface `Event`. It will throw an `Error`.
143
- * @deprecated
144
- * @ignore
145
- * @param _type
146
- * @param _bubbles
147
- * @param _cancelable
148
- */
149
- initEvent(_type, _bubbles, _cancelable) {
150
- throw new Error("initEvent() is a legacy DOM API. It is not implemented in the Federated Events API.");
151
- }
152
- /**
153
- * Unimplemented method included for implementing the DOM interface `UIEvent`. It will throw an `Error`.
154
- * @ignore
155
- * @deprecated
156
- * @param _typeArg
157
- * @param _bubblesArg
158
- * @param _cancelableArg
159
- * @param _viewArg
160
- * @param _detailArg
161
- */
162
- initUIEvent(_typeArg, _bubblesArg, _cancelableArg, _viewArg, _detailArg) {
163
- throw new Error("initUIEvent() is a legacy DOM API. It is not implemented in the Federated Events API.");
164
- }
165
- /**
166
- * Prevent default behavior of both PixiJS and the user agent.
167
- * @example
168
- * ```ts
169
- * sprite.on('click', (event) => {
170
- * // Prevent both browser's default click behavior
171
- * // and PixiJS's default handling
172
- * event.preventDefault();
173
- *
174
- * // Custom handling
175
- * customClickHandler();
176
- * });
177
- * ```
178
- * @remarks
179
- * - Only works if the native event is cancelable
180
- * - Does not stop event propagation
181
- */
182
- preventDefault() {
183
- if (this.nativeEvent instanceof Event && this.nativeEvent.cancelable) {
184
- this.nativeEvent.preventDefault();
185
- }
186
- this.defaultPrevented = true;
187
- }
188
- /**
189
- * Stop this event from propagating to any additional listeners, including those
190
- * on the current target and any following targets in the propagation path.
191
- * @example
192
- * ```ts
193
- * container.on('pointerdown', (event) => {
194
- * // Stop all further event handling
195
- * event.stopImmediatePropagation();
196
- *
197
- * // These handlers won't be called:
198
- * // - Other pointerdown listeners on this container
199
- * // - Any pointerdown listeners on parent containers
200
- * });
201
- * ```
202
- * @remarks
203
- * - Immediately stops all event propagation
204
- * - Prevents other listeners on same target from being called
205
- * - More aggressive than stopPropagation()
206
- */
207
- stopImmediatePropagation() {
208
- this.propagationImmediatelyStopped = true;
209
- }
210
- /**
211
- * Stop this event from propagating to the next target in the propagation path.
212
- * The rest of the listeners on the current target will still be notified.
213
- * @example
214
- * ```ts
215
- * child.on('pointermove', (event) => {
216
- * // Handle event on child
217
- * updateChild();
218
- *
219
- * // Prevent parent handlers from being called
220
- * event.stopPropagation();
221
- * });
222
- *
223
- * // This won't be called if child handles the event
224
- * parent.on('pointermove', (event) => {
225
- * updateParent();
226
- * });
227
- * ```
228
- * @remarks
229
- * - Stops event bubbling to parent containers
230
- * - Does not prevent other listeners on same target
231
- * - Less aggressive than stopImmediatePropagation()
232
- */
233
- stopPropagation() {
234
- this.propagationStopped = true;
235
- }
236
- }
237
- var appleIphone = /iPhone/i;
238
- var appleIpod = /iPod/i;
239
- var appleTablet = /iPad/i;
240
- var appleUniversal = /\biOS-universal(?:.+)Mac\b/i;
241
- var androidPhone = /\bAndroid(?:.+)Mobile\b/i;
242
- var androidTablet = /Android/i;
243
- var amazonPhone = /(?:SD4930UR|\bSilk(?:.+)Mobile\b)/i;
244
- var amazonTablet = /Silk/i;
245
- var windowsPhone = /Windows Phone/i;
246
- var windowsTablet = /\bWindows(?:.+)ARM\b/i;
247
- var otherBlackBerry = /BlackBerry/i;
248
- var otherBlackBerry10 = /BB10/i;
249
- var otherOpera = /Opera Mini/i;
250
- var otherChrome = /\b(CriOS|Chrome)(?:.+)Mobile/i;
251
- var otherFirefox = /Mobile(?:.+)Firefox\b/i;
252
- var isAppleTabletOnIos13 = function(navigator2) {
253
- return typeof navigator2 !== "undefined" && navigator2.platform === "MacIntel" && typeof navigator2.maxTouchPoints === "number" && navigator2.maxTouchPoints > 1 && typeof MSStream === "undefined";
254
- };
255
- function createMatch(userAgent) {
256
- return function(regex) {
257
- return regex.test(userAgent);
258
- };
259
- }
260
- function isMobile$1(param) {
261
- var nav = {
262
- userAgent: "",
263
- platform: "",
264
- maxTouchPoints: 0
265
- };
266
- if (!param && typeof navigator !== "undefined") {
267
- nav = {
268
- userAgent: navigator.userAgent,
269
- platform: navigator.platform,
270
- maxTouchPoints: navigator.maxTouchPoints || 0
271
- };
272
- } else if (typeof param === "string") {
273
- nav.userAgent = param;
274
- } else if (param && param.userAgent) {
275
- nav = {
276
- userAgent: param.userAgent,
277
- platform: param.platform,
278
- maxTouchPoints: param.maxTouchPoints || 0
279
- };
280
- }
281
- var userAgent = nav.userAgent;
282
- var tmp = userAgent.split("[FBAN");
283
- if (typeof tmp[1] !== "undefined") {
284
- userAgent = tmp[0];
285
- }
286
- tmp = userAgent.split("Twitter");
287
- if (typeof tmp[1] !== "undefined") {
288
- userAgent = tmp[0];
289
- }
290
- var match = createMatch(userAgent);
291
- var result = {
292
- apple: {
293
- phone: match(appleIphone) && !match(windowsPhone),
294
- ipod: match(appleIpod),
295
- tablet: !match(appleIphone) && (match(appleTablet) || isAppleTabletOnIos13(nav)) && !match(windowsPhone),
296
- universal: match(appleUniversal),
297
- device: (match(appleIphone) || match(appleIpod) || match(appleTablet) || match(appleUniversal) || isAppleTabletOnIos13(nav)) && !match(windowsPhone)
298
- },
299
- amazon: {
300
- phone: match(amazonPhone),
301
- tablet: !match(amazonPhone) && match(amazonTablet),
302
- device: match(amazonPhone) || match(amazonTablet)
303
- },
304
- android: {
305
- phone: !match(windowsPhone) && match(amazonPhone) || !match(windowsPhone) && match(androidPhone),
306
- tablet: !match(windowsPhone) && !match(amazonPhone) && !match(androidPhone) && (match(amazonTablet) || match(androidTablet)),
307
- device: !match(windowsPhone) && (match(amazonPhone) || match(amazonTablet) || match(androidPhone) || match(androidTablet)) || match(/\bokhttp\b/i)
308
- },
309
- windows: {
310
- phone: match(windowsPhone),
311
- tablet: match(windowsTablet),
312
- device: match(windowsPhone) || match(windowsTablet)
313
- },
314
- other: {
315
- blackberry: match(otherBlackBerry),
316
- blackberry10: match(otherBlackBerry10),
317
- opera: match(otherOpera),
318
- firefox: match(otherFirefox),
319
- chrome: match(otherChrome),
320
- device: match(otherBlackBerry) || match(otherBlackBerry10) || match(otherOpera) || match(otherFirefox) || match(otherChrome)
321
- },
322
- any: false,
323
- phone: false,
324
- tablet: false
325
- };
326
- result.any = result.apple.device || result.android.device || result.windows.device || result.other.device;
327
- result.phone = result.apple.phone || result.android.phone || result.windows.phone;
328
- result.tablet = result.apple.tablet || result.android.tablet || result.windows.tablet;
329
- return result;
330
- }
331
- const isMobileCall = isMobile$1.default ?? isMobile$1;
332
- const isMobile = isMobileCall(globalThis.navigator);
333
- const KEY_CODE_TAB = 9;
334
- const DIV_TOUCH_SIZE = 100;
335
- const DIV_TOUCH_POS_X = 0;
336
- const DIV_TOUCH_POS_Y = 0;
337
- const DIV_TOUCH_ZINDEX = 2;
338
- const DIV_HOOK_SIZE = 1;
339
- const DIV_HOOK_POS_X = -1e3;
340
- const DIV_HOOK_POS_Y = -1e3;
341
- const DIV_HOOK_ZINDEX = 2;
342
- const _AccessibilitySystem = class _AccessibilitySystem2 {
343
- // eslint-disable-next-line jsdoc/require-param
344
- /**
345
- * @param {WebGLRenderer|WebGPURenderer} renderer - A reference to the current renderer
346
- */
347
- constructor(renderer, _mobileInfo = isMobile) {
348
- this._mobileInfo = _mobileInfo;
349
- this.debug = false;
350
- this._activateOnTab = true;
351
- this._deactivateOnMouseMove = true;
352
- this._isActive = false;
353
- this._isMobileAccessibility = false;
354
- this._div = null;
355
- this._pools = {};
356
- this._renderId = 0;
357
- this._children = [];
358
- this._androidUpdateCount = 0;
359
- this._androidUpdateFrequency = 500;
360
- this._isRunningTests = false;
361
- this._boundOnKeyDown = this._onKeyDown.bind(this);
362
- this._boundOnMouseMove = this._onMouseMove.bind(this);
363
- this._hookDiv = null;
364
- if (_mobileInfo.tablet || _mobileInfo.phone) {
365
- this._createTouchHook();
366
- }
367
- this._renderer = renderer;
368
- }
369
- /**
370
- * Value of `true` if accessibility is currently active and accessibility layers are showing.
371
- * @type {boolean}
372
- * @readonly
373
- */
374
- get isActive() {
375
- return this._isActive;
376
- }
377
- /**
378
- * Value of `true` if accessibility is enabled for touch devices.
379
- * @type {boolean}
380
- * @readonly
381
- */
382
- get isMobileAccessibility() {
383
- return this._isMobileAccessibility;
384
- }
385
- /**
386
- * Button element for handling touch hooks.
387
- * @readonly
388
- */
389
- get hookDiv() {
390
- return this._hookDiv;
391
- }
392
- /**
393
- * The DOM element that will sit over the PixiJS element. This is where the div overlays will go.
394
- * @readonly
395
- */
396
- get div() {
397
- return this._div;
398
- }
399
- /**
400
- * Creates the touch hooks.
401
- * @private
402
- */
403
- _createTouchHook() {
404
- const hookDiv = document.createElement("button");
405
- hookDiv.style.width = `${DIV_HOOK_SIZE}px`;
406
- hookDiv.style.height = `${DIV_HOOK_SIZE}px`;
407
- hookDiv.style.position = "absolute";
408
- hookDiv.style.top = `${DIV_HOOK_POS_X}px`;
409
- hookDiv.style.left = `${DIV_HOOK_POS_Y}px`;
410
- hookDiv.style.zIndex = DIV_HOOK_ZINDEX.toString();
411
- hookDiv.style.backgroundColor = "#FF0000";
412
- hookDiv.title = "select to enable accessibility for this content";
413
- hookDiv.addEventListener("focus", () => {
414
- this._isMobileAccessibility = true;
415
- this._activate();
416
- this._destroyTouchHook();
417
- });
418
- document.body.appendChild(hookDiv);
419
- this._hookDiv = hookDiv;
420
- }
421
- /**
422
- * Destroys the touch hooks.
423
- * @private
424
- */
425
- _destroyTouchHook() {
426
- if (!this._hookDiv) {
427
- return;
428
- }
429
- document.body.removeChild(this._hookDiv);
430
- this._hookDiv = null;
431
- }
432
- /**
433
- * Activating will cause the Accessibility layer to be shown.
434
- * This is called when a user presses the tab key.
435
- * @private
436
- */
437
- _activate() {
438
- if (this._isActive) {
439
- return;
440
- }
441
- this._isActive = true;
442
- if (!this._div) {
443
- this._div = document.createElement("div");
444
- this._div.style.position = "absolute";
445
- this._div.style.top = `${DIV_TOUCH_POS_X}px`;
446
- this._div.style.left = `${DIV_TOUCH_POS_Y}px`;
447
- this._div.style.pointerEvents = "none";
448
- this._div.style.zIndex = DIV_TOUCH_ZINDEX.toString();
449
- this._canvasObserver = new CanvasObserver({
450
- domElement: this._div,
451
- renderer: this._renderer
452
- });
453
- }
454
- if (this._activateOnTab) {
455
- globalThis.addEventListener("keydown", this._boundOnKeyDown, false);
456
- }
457
- if (this._deactivateOnMouseMove) {
458
- globalThis.document.addEventListener("mousemove", this._boundOnMouseMove, true);
459
- }
460
- const canvas = this._renderer.view.canvas;
461
- if (!canvas.parentNode) {
462
- const observer = new MutationObserver(() => {
463
- if (canvas.parentNode) {
464
- observer.disconnect();
465
- this._canvasObserver.ensureAttached();
466
- this._initAccessibilitySetup();
467
- }
468
- });
469
- observer.observe(document.body, { childList: true, subtree: true });
470
- } else {
471
- this._canvasObserver.ensureAttached();
472
- this._initAccessibilitySetup();
473
- }
474
- }
475
- // New method to handle initialization after div is ready
476
- _initAccessibilitySetup() {
477
- this._renderer.runners.postrender.add(this);
478
- if (this._renderer.lastObjectRendered) {
479
- this._updateAccessibleObjects(this._renderer.lastObjectRendered);
480
- }
481
- }
482
- /**
483
- * Deactivates the accessibility system. Removes listeners and accessibility elements.
484
- * @private
485
- */
486
- _deactivate() {
487
- var _a, _b;
488
- if (!this._isActive || this._isMobileAccessibility) {
489
- return;
490
- }
491
- this._isActive = false;
492
- globalThis.document.removeEventListener("mousemove", this._boundOnMouseMove, true);
493
- if (this._activateOnTab) {
494
- globalThis.addEventListener("keydown", this._boundOnKeyDown, false);
495
- }
496
- this._renderer.runners.postrender.remove(this);
497
- for (const child of this._children) {
498
- if ((_a = child._accessibleDiv) == null ? void 0 : _a.parentNode) {
499
- child._accessibleDiv.parentNode.removeChild(child._accessibleDiv);
500
- child._accessibleDiv = null;
501
- }
502
- child._accessibleActive = false;
503
- }
504
- for (const accessibleType in this._pools) {
505
- const pool = this._pools[accessibleType];
506
- pool.forEach((div) => {
507
- if (div.parentNode) {
508
- div.parentNode.removeChild(div);
509
- }
510
- });
511
- delete this._pools[accessibleType];
512
- }
513
- if ((_b = this._div) == null ? void 0 : _b.parentNode) {
514
- this._div.parentNode.removeChild(this._div);
515
- }
516
- this._pools = {};
517
- this._children = [];
518
- }
519
- /**
520
- * This recursive function will run through the scene graph and add any new accessible objects to the DOM layer.
521
- * @private
522
- * @param {Container} container - The Container to check.
523
- */
524
- _updateAccessibleObjects(container) {
525
- if (!container.visible || !container.accessibleChildren) {
526
- return;
527
- }
528
- if (container.accessible) {
529
- if (!container._accessibleActive) {
530
- this._addChild(container);
531
- }
532
- container._renderId = this._renderId;
533
- }
534
- const children = container.children;
535
- if (children) {
536
- for (let i = 0; i < children.length; i++) {
537
- this._updateAccessibleObjects(children[i]);
538
- }
539
- }
540
- }
541
- /**
542
- * Runner init called, view is available at this point.
543
- * @ignore
544
- */
545
- init(options) {
546
- const defaultOpts = _AccessibilitySystem2.defaultOptions;
547
- const mergedOptions = {
548
- accessibilityOptions: {
549
- ...defaultOpts,
550
- ...(options == null ? void 0 : options.accessibilityOptions) || {}
551
- }
552
- };
553
- this.debug = mergedOptions.accessibilityOptions.debug;
554
- this._activateOnTab = mergedOptions.accessibilityOptions.activateOnTab;
555
- this._deactivateOnMouseMove = mergedOptions.accessibilityOptions.deactivateOnMouseMove;
556
- if (mergedOptions.accessibilityOptions.enabledByDefault) {
557
- this._activate();
558
- }
559
- this._renderer.runners.postrender.remove(this);
560
- }
561
- /**
562
- * Updates the accessibility layer during rendering.
563
- * - Removes divs for containers no longer in the scene
564
- * - Updates the position and dimensions of the root div
565
- * - Updates positions of active accessibility divs
566
- * Only fires while the accessibility system is active.
567
- * @ignore
568
- */
569
- postrender() {
570
- const now = performance.now();
571
- if (this._mobileInfo.android.device && now < this._androidUpdateCount) {
572
- return;
573
- }
574
- this._androidUpdateCount = now + this._androidUpdateFrequency;
575
- if ((!this._renderer.renderingToScreen || !this._renderer.view.canvas) && !this._isRunningTests) {
576
- return;
577
- }
578
- const activeIds = /* @__PURE__ */ new Set();
579
- if (this._renderer.lastObjectRendered) {
580
- this._updateAccessibleObjects(this._renderer.lastObjectRendered);
581
- for (const child of this._children) {
582
- if (child._renderId === this._renderId) {
583
- activeIds.add(this._children.indexOf(child));
584
- }
585
- }
586
- }
587
- for (let i = this._children.length - 1; i >= 0; i--) {
588
- const child = this._children[i];
589
- if (!activeIds.has(i)) {
590
- if (child._accessibleDiv && child._accessibleDiv.parentNode) {
591
- child._accessibleDiv.parentNode.removeChild(child._accessibleDiv);
592
- const pool = this._getPool(child.accessibleType);
593
- pool.push(child._accessibleDiv);
594
- child._accessibleDiv = null;
595
- }
596
- child._accessibleActive = false;
597
- removeItems(this._children, i, 1);
598
- }
599
- }
600
- if (this._renderer.renderingToScreen) {
601
- this._canvasObserver.ensureAttached();
602
- }
603
- for (let i = 0; i < this._children.length; i++) {
604
- const child = this._children[i];
605
- if (!child._accessibleActive || !child._accessibleDiv) {
606
- continue;
607
- }
608
- const div = child._accessibleDiv;
609
- const hitArea = child.hitArea || child.getBounds().rectangle;
610
- if (child.hitArea) {
611
- const wt = child.worldTransform;
612
- div.style.left = `${wt.tx + hitArea.x * wt.a}px`;
613
- div.style.top = `${wt.ty + hitArea.y * wt.d}px`;
614
- div.style.width = `${hitArea.width * wt.a}px`;
615
- div.style.height = `${hitArea.height * wt.d}px`;
616
- } else {
617
- this._capHitArea(hitArea);
618
- div.style.left = `${hitArea.x}px`;
619
- div.style.top = `${hitArea.y}px`;
620
- div.style.width = `${hitArea.width}px`;
621
- div.style.height = `${hitArea.height}px`;
622
- }
623
- }
624
- this._renderId++;
625
- }
626
- /**
627
- * private function that will visually add the information to the
628
- * accessibility div
629
- * @param {HTMLElement} div -
630
- */
631
- _updateDebugHTML(div) {
632
- div.innerHTML = `type: ${div.type}</br> title : ${div.title}</br> tabIndex: ${div.tabIndex}`;
633
- }
634
- /**
635
- * Adjust the hit area based on the bounds of a display object
636
- * @param {Rectangle} hitArea - Bounds of the child
637
- */
638
- _capHitArea(hitArea) {
639
- if (hitArea.x < 0) {
640
- hitArea.width += hitArea.x;
641
- hitArea.x = 0;
642
- }
643
- if (hitArea.y < 0) {
644
- hitArea.height += hitArea.y;
645
- hitArea.y = 0;
646
- }
647
- const { width: viewWidth, height: viewHeight } = this._renderer;
648
- if (hitArea.x + hitArea.width > viewWidth) {
649
- hitArea.width = viewWidth - hitArea.x;
650
- }
651
- if (hitArea.y + hitArea.height > viewHeight) {
652
- hitArea.height = viewHeight - hitArea.y;
653
- }
654
- }
655
- /**
656
- * Creates or reuses a div element for a Container and adds it to the accessibility layer.
657
- * Sets up ARIA attributes, event listeners, and positioning based on the container's properties.
658
- * @private
659
- * @param {Container} container - The child to make accessible.
660
- */
661
- _addChild(container) {
662
- const pool = this._getPool(container.accessibleType);
663
- let div = pool.pop();
664
- if (div) {
665
- div.innerHTML = "";
666
- div.removeAttribute("title");
667
- div.removeAttribute("aria-label");
668
- div.tabIndex = 0;
669
- } else {
670
- if (container.accessibleType === "button") {
671
- div = document.createElement("button");
672
- } else {
673
- div = document.createElement(container.accessibleType);
674
- div.style.cssText = `
675
- color: transparent;
676
- pointer-events: none;
677
- padding: 0;
678
- margin: 0;
679
- border: 0;
680
- outline: 0;
681
- background: transparent;
682
- box-sizing: border-box;
683
- user-select: none;
684
- -webkit-user-select: none;
685
- -moz-user-select: none;
686
- -ms-user-select: none;
687
- `;
688
- if (container.accessibleText) {
689
- div.innerText = container.accessibleText;
690
- }
691
- }
692
- div.style.width = `${DIV_TOUCH_SIZE}px`;
693
- div.style.height = `${DIV_TOUCH_SIZE}px`;
694
- div.style.backgroundColor = this.debug ? "rgba(255,255,255,0.5)" : "transparent";
695
- div.style.position = "absolute";
696
- div.style.zIndex = DIV_TOUCH_ZINDEX.toString();
697
- div.style.borderStyle = "none";
698
- if (navigator.userAgent.toLowerCase().includes("chrome")) {
699
- div.setAttribute("aria-live", "off");
700
- } else {
701
- div.setAttribute("aria-live", "polite");
702
- }
703
- if (navigator.userAgent.match(/rv:.*Gecko\//)) {
704
- div.setAttribute("aria-relevant", "additions");
705
- } else {
706
- div.setAttribute("aria-relevant", "text");
707
- }
708
- div.addEventListener("click", this._onClick.bind(this));
709
- div.addEventListener("focus", this._onFocus.bind(this));
710
- div.addEventListener("focusout", this._onFocusOut.bind(this));
711
- }
712
- div.style.pointerEvents = container.accessiblePointerEvents;
713
- div.type = container.accessibleType;
714
- if (container.accessibleTitle && container.accessibleTitle !== null) {
715
- div.title = container.accessibleTitle;
716
- } else if (!container.accessibleHint || container.accessibleHint === null) {
717
- div.title = `container ${container.tabIndex}`;
718
- }
719
- if (container.accessibleHint && container.accessibleHint !== null) {
720
- div.setAttribute("aria-label", container.accessibleHint);
721
- }
722
- if (container.interactive) {
723
- div.tabIndex = container.tabIndex;
724
- } else {
725
- div.tabIndex = 0;
726
- }
727
- if (this.debug) {
728
- this._updateDebugHTML(div);
729
- }
730
- container._accessibleActive = true;
731
- container._accessibleDiv = div;
732
- div.container = container;
733
- this._children.push(container);
734
- this._div.appendChild(container._accessibleDiv);
735
- }
736
- /**
737
- * Dispatch events with the EventSystem.
738
- * @param e
739
- * @param type
740
- * @private
741
- */
742
- _dispatchEvent(e, type) {
743
- const { container: target } = e.target;
744
- const boundary = this._renderer.events.rootBoundary;
745
- const event = Object.assign(new FederatedEvent(boundary), { target });
746
- boundary.rootTarget = this._renderer.lastObjectRendered;
747
- type.forEach((type2) => boundary.dispatchEvent(event, type2));
748
- }
749
- /**
750
- * Maps the div button press to pixi's EventSystem (click)
751
- * @private
752
- * @param {MouseEvent} e - The click event.
753
- */
754
- _onClick(e) {
755
- this._dispatchEvent(e, ["click", "pointertap", "tap"]);
756
- }
757
- /**
758
- * Maps the div focus events to pixi's EventSystem (mouseover)
759
- * @private
760
- * @param {FocusEvent} e - The focus event.
761
- */
762
- _onFocus(e) {
763
- if (!e.target.getAttribute("aria-live")) {
764
- e.target.setAttribute("aria-live", "assertive");
765
- }
766
- this._dispatchEvent(e, ["mouseover"]);
767
- }
768
- /**
769
- * Maps the div focus events to pixi's EventSystem (mouseout)
770
- * @private
771
- * @param {FocusEvent} e - The focusout event.
772
- */
773
- _onFocusOut(e) {
774
- if (!e.target.getAttribute("aria-live")) {
775
- e.target.setAttribute("aria-live", "polite");
776
- }
777
- this._dispatchEvent(e, ["mouseout"]);
778
- }
779
- /**
780
- * Is called when a key is pressed
781
- * @private
782
- * @param {KeyboardEvent} e - The keydown event.
783
- */
784
- _onKeyDown(e) {
785
- if (e.keyCode !== KEY_CODE_TAB || !this._activateOnTab) {
786
- return;
787
- }
788
- this._activate();
789
- }
790
- /**
791
- * Is called when the mouse moves across the renderer element
792
- * @private
793
- * @param {MouseEvent} e - The mouse event.
794
- */
795
- _onMouseMove(e) {
796
- if (e.movementX === 0 && e.movementY === 0) {
797
- return;
798
- }
799
- this._deactivate();
800
- }
801
- /**
802
- * Destroys the accessibility system. Removes all elements and listeners.
803
- * > [!IMPORTANT] This is typically called automatically when the {@link Application} is destroyed.
804
- * > A typically user should not need to call this method directly.
805
- */
806
- destroy() {
807
- var _a;
808
- this._deactivate();
809
- this._destroyTouchHook();
810
- (_a = this._canvasObserver) == null ? void 0 : _a.destroy();
811
- this._canvasObserver = null;
812
- this._div = null;
813
- this._pools = null;
814
- this._children = null;
815
- this._renderer = null;
816
- this._hookDiv = null;
817
- globalThis.removeEventListener("keydown", this._boundOnKeyDown);
818
- this._boundOnKeyDown = null;
819
- globalThis.document.removeEventListener("mousemove", this._boundOnMouseMove, true);
820
- this._boundOnMouseMove = null;
821
- }
822
- /**
823
- * Enables or disables the accessibility system.
824
- * @param enabled - Whether to enable or disable accessibility.
825
- * @example
826
- * ```js
827
- * app.renderer.accessibility.setAccessibilityEnabled(true); // Enable accessibility
828
- * app.renderer.accessibility.setAccessibilityEnabled(false); // Disable accessibility
829
- * ```
830
- */
831
- setAccessibilityEnabled(enabled) {
832
- if (enabled) {
833
- this._activate();
834
- } else {
835
- this._deactivate();
836
- }
837
- }
838
- _getPool(accessibleType) {
839
- if (!this._pools[accessibleType]) {
840
- this._pools[accessibleType] = [];
841
- }
842
- return this._pools[accessibleType];
843
- }
844
- };
845
- _AccessibilitySystem.extension = {
846
- type: [
847
- ExtensionType.WebGLSystem,
848
- ExtensionType.WebGPUSystem
849
- ],
850
- name: "accessibility"
851
- };
852
- _AccessibilitySystem.defaultOptions = {
853
- /**
854
- * Whether to enable accessibility features on initialization
855
- * @default false
856
- */
857
- enabledByDefault: false,
858
- /**
859
- * Whether to visually show the accessibility divs for debugging
860
- * @default false
861
- */
862
- debug: false,
863
- /**
864
- * Whether to activate accessibility when tab key is pressed
865
- * @default true
866
- */
867
- activateOnTab: true,
868
- /**
869
- * Whether to deactivate accessibility when mouse moves
870
- * @default true
871
- */
872
- deactivateOnMouseMove: true
873
- };
874
- let AccessibilitySystem = _AccessibilitySystem;
875
- const accessibilityTarget = {
876
- accessible: false,
877
- accessibleTitle: null,
878
- accessibleHint: null,
879
- tabIndex: 0,
880
- accessibleType: "button",
881
- accessibleText: null,
882
- accessiblePointerEvents: "auto",
883
- accessibleChildren: true,
884
- _accessibleActive: false,
885
- _accessibleDiv: null,
886
- _renderId: -1
887
- };
888
- class EventsTickerClass {
889
- constructor() {
890
- this.interactionFrequency = 10;
891
- this._deltaTime = 0;
892
- this._didMove = false;
893
- this._tickerAdded = false;
894
- this._pauseUpdate = true;
895
- }
896
- /**
897
- * Initializes the event ticker.
898
- * @param events - The event system.
899
- */
900
- init(events) {
901
- this.removeTickerListener();
902
- this.events = events;
903
- this.interactionFrequency = 10;
904
- this._deltaTime = 0;
905
- this._didMove = false;
906
- this._tickerAdded = false;
907
- this._pauseUpdate = true;
908
- }
909
- /** Whether to pause the update checks or not. */
910
- get pauseUpdate() {
911
- return this._pauseUpdate;
912
- }
913
- set pauseUpdate(paused) {
914
- this._pauseUpdate = paused;
915
- }
916
- /** Adds the ticker listener. */
917
- addTickerListener() {
918
- if (this._tickerAdded || !this.domElement) {
919
- return;
920
- }
921
- Ticker.system.add(this._tickerUpdate, this, UPDATE_PRIORITY.INTERACTION);
922
- this._tickerAdded = true;
923
- }
924
- /** Removes the ticker listener. */
925
- removeTickerListener() {
926
- if (!this._tickerAdded) {
927
- return;
928
- }
929
- Ticker.system.remove(this._tickerUpdate, this);
930
- this._tickerAdded = false;
931
- }
932
- /** Sets flag to not fire extra events when the user has already moved there mouse */
933
- pointerMoved() {
934
- this._didMove = true;
935
- }
936
- /** Updates the state of interactive objects. */
937
- _update() {
938
- if (!this.domElement || this._pauseUpdate) {
939
- return;
940
- }
941
- if (this._didMove) {
942
- this._didMove = false;
943
- return;
944
- }
945
- const rootPointerEvent = this.events["_rootPointerEvent"];
946
- if (this.events.supportsTouchEvents && rootPointerEvent.pointerType === "touch") {
947
- return;
948
- }
949
- globalThis.document.dispatchEvent(this.events.supportsPointerEvents ? new PointerEvent("pointermove", {
950
- clientX: rootPointerEvent.clientX,
951
- clientY: rootPointerEvent.clientY,
952
- pointerType: rootPointerEvent.pointerType,
953
- pointerId: rootPointerEvent.pointerId
954
- }) : new MouseEvent("mousemove", {
955
- clientX: rootPointerEvent.clientX,
956
- clientY: rootPointerEvent.clientY
957
- }));
958
- }
959
- /**
960
- * Updates the state of interactive objects if at least {@link interactionFrequency}
961
- * milliseconds have passed since the last invocation.
962
- *
963
- * Invoked by a throttled ticker update from {@link Ticker.system}.
964
- * @param ticker - The throttled ticker.
965
- */
966
- _tickerUpdate(ticker) {
967
- this._deltaTime += ticker.deltaTime;
968
- if (this._deltaTime < this.interactionFrequency) {
969
- return;
970
- }
971
- this._deltaTime = 0;
972
- this._update();
973
- }
974
- /** Destroys the event ticker. */
975
- destroy() {
976
- this.removeTickerListener();
977
- this.events = null;
978
- this.domElement = null;
979
- this._deltaTime = 0;
980
- this._didMove = false;
981
- this._tickerAdded = false;
982
- this._pauseUpdate = true;
983
- }
984
- }
985
- const EventsTicker = new EventsTickerClass();
986
- class FederatedMouseEvent extends FederatedEvent {
987
- constructor() {
988
- super(...arguments);
989
- this.client = new Point();
990
- this.movement = new Point();
991
- this.offset = new Point();
992
- this.global = new Point();
993
- this.screen = new Point();
994
- }
995
- /** @readonly */
996
- get clientX() {
997
- return this.client.x;
998
- }
999
- /** @readonly */
1000
- get clientY() {
1001
- return this.client.y;
1002
- }
1003
- /**
1004
- * Alias for {@link FederatedMouseEvent.clientX this.clientX}.
1005
- * @readonly
1006
- */
1007
- get x() {
1008
- return this.clientX;
1009
- }
1010
- /**
1011
- * Alias for {@link FederatedMouseEvent.clientY this.clientY}.
1012
- * @readonly
1013
- */
1014
- get y() {
1015
- return this.clientY;
1016
- }
1017
- /** @readonly */
1018
- get movementX() {
1019
- return this.movement.x;
1020
- }
1021
- /** @readonly */
1022
- get movementY() {
1023
- return this.movement.y;
1024
- }
1025
- /** @readonly */
1026
- get offsetX() {
1027
- return this.offset.x;
1028
- }
1029
- /** @readonly */
1030
- get offsetY() {
1031
- return this.offset.y;
1032
- }
1033
- /** @readonly */
1034
- get globalX() {
1035
- return this.global.x;
1036
- }
1037
- /** @readonly */
1038
- get globalY() {
1039
- return this.global.y;
1040
- }
1041
- /**
1042
- * The pointer coordinates in the renderer's screen. Alias for `screen.x`.
1043
- * @readonly
1044
- */
1045
- get screenX() {
1046
- return this.screen.x;
1047
- }
1048
- /**
1049
- * The pointer coordinates in the renderer's screen. Alias for `screen.y`.
1050
- * @readonly
1051
- */
1052
- get screenY() {
1053
- return this.screen.y;
1054
- }
1055
- /**
1056
- * Converts global coordinates into container-local coordinates.
1057
- *
1058
- * This method transforms coordinates from world space to a container's local space,
1059
- * useful for precise positioning and hit testing.
1060
- * @param container - The Container to get local coordinates for
1061
- * @param point - Optional Point object to store the result. If not provided, a new Point will be created
1062
- * @param globalPos - Optional custom global coordinates. If not provided, the event's global position is used
1063
- * @returns The local coordinates as a Point object
1064
- * @example
1065
- * ```ts
1066
- * // Basic usage - get local coordinates relative to a container
1067
- * sprite.on('pointermove', (event: FederatedMouseEvent) => {
1068
- * // Get position relative to the sprite
1069
- * const localPos = event.getLocalPosition(sprite);
1070
- * console.log('Local position:', localPos.x, localPos.y);
1071
- * });
1072
- * // Using custom global coordinates
1073
- * const customGlobal = new Point(100, 100);
1074
- * sprite.on('pointermove', (event: FederatedMouseEvent) => {
1075
- * // Transform custom coordinates
1076
- * const localPos = event.getLocalPosition(sprite, undefined, customGlobal);
1077
- * console.log('Custom local position:', localPos.x, localPos.y);
1078
- * });
1079
- * ```
1080
- * @see {@link Container.worldTransform} For the transformation matrix
1081
- * @see {@link Point} For the point class used to store coordinates
1082
- */
1083
- getLocalPosition(container, point, globalPos) {
1084
- return container.worldTransform.applyInverse(globalPos || this.global, point);
1085
- }
1086
- /**
1087
- * Whether the modifier key was pressed when this event natively occurred.
1088
- * @param key - The modifier key.
1089
- */
1090
- getModifierState(key) {
1091
- return "getModifierState" in this.nativeEvent && this.nativeEvent.getModifierState(key);
1092
- }
1093
- /**
1094
- * Not supported.
1095
- * @param _typeArg
1096
- * @param _canBubbleArg
1097
- * @param _cancelableArg
1098
- * @param _viewArg
1099
- * @param _detailArg
1100
- * @param _screenXArg
1101
- * @param _screenYArg
1102
- * @param _clientXArg
1103
- * @param _clientYArg
1104
- * @param _ctrlKeyArg
1105
- * @param _altKeyArg
1106
- * @param _shiftKeyArg
1107
- * @param _metaKeyArg
1108
- * @param _buttonArg
1109
- * @param _relatedTargetArg
1110
- * @deprecated since 7.0.0
1111
- * @ignore
1112
- */
1113
- // eslint-disable-next-line max-params
1114
- initMouseEvent(_typeArg, _canBubbleArg, _cancelableArg, _viewArg, _detailArg, _screenXArg, _screenYArg, _clientXArg, _clientYArg, _ctrlKeyArg, _altKeyArg, _shiftKeyArg, _metaKeyArg, _buttonArg, _relatedTargetArg) {
1115
- throw new Error("Method not implemented.");
1116
- }
1117
- }
1118
- class FederatedPointerEvent extends FederatedMouseEvent {
1119
- constructor() {
1120
- super(...arguments);
1121
- this.width = 0;
1122
- this.height = 0;
1123
- this.isPrimary = false;
1124
- }
1125
- /**
1126
- * Only included for completeness for now
1127
- * @ignore
1128
- */
1129
- getCoalescedEvents() {
1130
- if (this.type === "pointermove" || this.type === "mousemove" || this.type === "touchmove") {
1131
- return [this];
1132
- }
1133
- return [];
1134
- }
1135
- /**
1136
- * Only included for completeness for now
1137
- * @ignore
1138
- */
1139
- getPredictedEvents() {
1140
- throw new Error("getPredictedEvents is not supported!");
1141
- }
1142
- }
1143
- class FederatedWheelEvent extends FederatedMouseEvent {
1144
- constructor() {
1145
- super(...arguments);
1146
- this.DOM_DELTA_PIXEL = 0;
1147
- this.DOM_DELTA_LINE = 1;
1148
- this.DOM_DELTA_PAGE = 2;
1149
- }
1150
- }
1151
- FederatedWheelEvent.DOM_DELTA_PIXEL = 0;
1152
- FederatedWheelEvent.DOM_DELTA_LINE = 1;
1153
- FederatedWheelEvent.DOM_DELTA_PAGE = 2;
1154
- const PROPAGATION_LIMIT = 2048;
1155
- const tempHitLocation = new Point();
1156
- const tempLocalMapping = new Point();
1157
- class EventBoundary {
1158
- /**
1159
- * @param rootTarget - The holder of the event boundary.
1160
- */
1161
- constructor(rootTarget) {
1162
- this.dispatch = new EventEmitter();
1163
- this.moveOnAll = false;
1164
- this.enableGlobalMoveEvents = true;
1165
- this.mappingState = {
1166
- trackingData: {}
1167
- };
1168
- this.eventPool = /* @__PURE__ */ new Map();
1169
- this._allInteractiveElements = [];
1170
- this._hitElements = [];
1171
- this._isPointerMoveEvent = false;
1172
- this.rootTarget = rootTarget;
1173
- this.hitPruneFn = this.hitPruneFn.bind(this);
1174
- this.hitTestFn = this.hitTestFn.bind(this);
1175
- this.mapPointerDown = this.mapPointerDown.bind(this);
1176
- this.mapPointerMove = this.mapPointerMove.bind(this);
1177
- this.mapPointerOut = this.mapPointerOut.bind(this);
1178
- this.mapPointerOver = this.mapPointerOver.bind(this);
1179
- this.mapPointerUp = this.mapPointerUp.bind(this);
1180
- this.mapPointerUpOutside = this.mapPointerUpOutside.bind(this);
1181
- this.mapWheel = this.mapWheel.bind(this);
1182
- this.mappingTable = {};
1183
- this.addEventMapping("pointerdown", this.mapPointerDown);
1184
- this.addEventMapping("pointermove", this.mapPointerMove);
1185
- this.addEventMapping("pointerout", this.mapPointerOut);
1186
- this.addEventMapping("pointerleave", this.mapPointerOut);
1187
- this.addEventMapping("pointerover", this.mapPointerOver);
1188
- this.addEventMapping("pointerup", this.mapPointerUp);
1189
- this.addEventMapping("pointerupoutside", this.mapPointerUpOutside);
1190
- this.addEventMapping("wheel", this.mapWheel);
1191
- }
1192
- /**
1193
- * Adds an event mapping for the event `type` handled by `fn`.
1194
- *
1195
- * Event mappings can be used to implement additional or custom events. They take an event
1196
- * coming from the upstream scene (or directly from the {@link EventSystem}) and dispatch new downstream events
1197
- * generally trickling down and bubbling up to {@link EventBoundary.rootTarget this.rootTarget}.
1198
- *
1199
- * To modify the semantics of existing events, the built-in mapping methods of EventBoundary should be overridden
1200
- * instead.
1201
- * @param type - The type of upstream event to map.
1202
- * @param fn - The mapping method. The context of this function must be bound manually, if desired.
1203
- */
1204
- addEventMapping(type, fn) {
1205
- if (!this.mappingTable[type]) {
1206
- this.mappingTable[type] = [];
1207
- }
1208
- this.mappingTable[type].push({
1209
- fn,
1210
- priority: 0
1211
- });
1212
- this.mappingTable[type].sort((a, b) => a.priority - b.priority);
1213
- }
1214
- /**
1215
- * Dispatches the given event
1216
- * @param e - The event to dispatch.
1217
- * @param type - The type of event to dispatch. Defaults to `e.type`.
1218
- */
1219
- dispatchEvent(e, type) {
1220
- e.propagationStopped = false;
1221
- e.propagationImmediatelyStopped = false;
1222
- this.propagate(e, type);
1223
- this.dispatch.emit(type || e.type, e);
1224
- }
1225
- /**
1226
- * Maps the given upstream event through the event boundary and propagates it downstream.
1227
- * @param e - The event to map.
1228
- */
1229
- mapEvent(e) {
1230
- if (!this.rootTarget) {
1231
- return;
1232
- }
1233
- const mappers = this.mappingTable[e.type];
1234
- if (mappers) {
1235
- for (let i = 0, j = mappers.length; i < j; i++) {
1236
- mappers[i].fn(e);
1237
- }
1238
- } else {
1239
- warn(`[EventBoundary]: Event mapping not defined for ${e.type}`);
1240
- }
1241
- }
1242
- /**
1243
- * Finds the Container that is the target of a event at the given coordinates.
1244
- *
1245
- * The passed (x,y) coordinates are in the world space above this event boundary.
1246
- * @param x - The x coordinate of the event.
1247
- * @param y - The y coordinate of the event.
1248
- */
1249
- hitTest(x, y) {
1250
- EventsTicker.pauseUpdate = true;
1251
- const useMove = this._isPointerMoveEvent && this.enableGlobalMoveEvents;
1252
- const fn = useMove ? "hitTestMoveRecursive" : "hitTestRecursive";
1253
- const invertedPath = this[fn](
1254
- this.rootTarget,
1255
- this.rootTarget.eventMode,
1256
- tempHitLocation.set(x, y),
1257
- this.hitTestFn,
1258
- this.hitPruneFn
1259
- );
1260
- return invertedPath && invertedPath[0];
1261
- }
1262
- /**
1263
- * Propagate the passed event from from {@link EventBoundary.rootTarget this.rootTarget} to its
1264
- * target `e.target`.
1265
- * @param e - The event to propagate.
1266
- * @param type - The type of event to propagate. Defaults to `e.type`.
1267
- */
1268
- propagate(e, type) {
1269
- if (!e.target) {
1270
- return;
1271
- }
1272
- const composedPath = e.composedPath();
1273
- e.eventPhase = e.CAPTURING_PHASE;
1274
- for (let i = 0, j = composedPath.length - 1; i < j; i++) {
1275
- e.currentTarget = composedPath[i];
1276
- this.notifyTarget(e, type);
1277
- if (e.propagationStopped || e.propagationImmediatelyStopped) return;
1278
- }
1279
- e.eventPhase = e.AT_TARGET;
1280
- e.currentTarget = e.target;
1281
- this.notifyTarget(e, type);
1282
- if (e.propagationStopped || e.propagationImmediatelyStopped) return;
1283
- e.eventPhase = e.BUBBLING_PHASE;
1284
- for (let i = composedPath.length - 2; i >= 0; i--) {
1285
- e.currentTarget = composedPath[i];
1286
- this.notifyTarget(e, type);
1287
- if (e.propagationStopped || e.propagationImmediatelyStopped) return;
1288
- }
1289
- }
1290
- /**
1291
- * Emits the event `e` to all interactive containers. The event is propagated in the bubbling phase always.
1292
- *
1293
- * This is used in the `globalpointermove` event.
1294
- * @param e - The emitted event.
1295
- * @param type - The listeners to notify.
1296
- * @param targets - The targets to notify.
1297
- */
1298
- all(e, type, targets = this._allInteractiveElements) {
1299
- if (targets.length === 0) return;
1300
- e.eventPhase = e.BUBBLING_PHASE;
1301
- const events = Array.isArray(type) ? type : [type];
1302
- for (let i = targets.length - 1; i >= 0; i--) {
1303
- events.forEach((event) => {
1304
- e.currentTarget = targets[i];
1305
- this.notifyTarget(e, event);
1306
- });
1307
- }
1308
- }
1309
- /**
1310
- * Finds the propagation path from {@link EventBoundary.rootTarget rootTarget} to the passed
1311
- * `target`. The last element in the path is `target`.
1312
- * @param target - The target to find the propagation path to.
1313
- */
1314
- propagationPath(target) {
1315
- const propagationPath = [target];
1316
- for (let i = 0; i < PROPAGATION_LIMIT && (target !== this.rootTarget && target.parent); i++) {
1317
- if (!target.parent) {
1318
- throw new Error("Cannot find propagation path to disconnected target");
1319
- }
1320
- propagationPath.push(target.parent);
1321
- target = target.parent;
1322
- }
1323
- propagationPath.reverse();
1324
- return propagationPath;
1325
- }
1326
- hitTestMoveRecursive(currentTarget, eventMode, location, testFn, pruneFn, ignore = false) {
1327
- let shouldReturn = false;
1328
- if (this._interactivePrune(currentTarget)) return null;
1329
- if (currentTarget.eventMode === "dynamic" || eventMode === "dynamic") {
1330
- EventsTicker.pauseUpdate = false;
1331
- }
1332
- if (currentTarget.interactiveChildren && currentTarget.children) {
1333
- const children = currentTarget.children;
1334
- for (let i = children.length - 1; i >= 0; i--) {
1335
- const child = children[i];
1336
- const nestedHit = this.hitTestMoveRecursive(
1337
- child,
1338
- this._isInteractive(eventMode) ? eventMode : child.eventMode,
1339
- location,
1340
- testFn,
1341
- pruneFn,
1342
- ignore || pruneFn(currentTarget, location)
1343
- );
1344
- if (nestedHit) {
1345
- if (nestedHit.length > 0 && !nestedHit[nestedHit.length - 1].parent) {
1346
- continue;
1347
- }
1348
- const isInteractive = currentTarget.isInteractive();
1349
- if (nestedHit.length > 0 || isInteractive) {
1350
- if (isInteractive) this._allInteractiveElements.push(currentTarget);
1351
- nestedHit.push(currentTarget);
1352
- }
1353
- if (this._hitElements.length === 0) this._hitElements = nestedHit;
1354
- shouldReturn = true;
1355
- }
1356
- }
1357
- }
1358
- const isInteractiveMode = this._isInteractive(eventMode);
1359
- const isInteractiveTarget = currentTarget.isInteractive();
1360
- if (isInteractiveTarget && isInteractiveTarget) this._allInteractiveElements.push(currentTarget);
1361
- if (ignore || this._hitElements.length > 0) return null;
1362
- if (shouldReturn) return this._hitElements;
1363
- if (isInteractiveMode && (!pruneFn(currentTarget, location) && testFn(currentTarget, location))) {
1364
- return isInteractiveTarget ? [currentTarget] : [];
1365
- }
1366
- return null;
1367
- }
1368
- /**
1369
- * Recursive implementation for {@link EventBoundary.hitTest hitTest}.
1370
- * @param currentTarget - The Container that is to be hit tested.
1371
- * @param eventMode - The event mode for the `currentTarget` or one of its parents.
1372
- * @param location - The location that is being tested for overlap.
1373
- * @param testFn - Callback that determines whether the target passes hit testing. This callback
1374
- * can assume that `pruneFn` failed to prune the container.
1375
- * @param pruneFn - Callback that determiness whether the target and all of its children
1376
- * cannot pass the hit test. It is used as a preliminary optimization to prune entire subtrees
1377
- * of the scene graph.
1378
- * @returns An array holding the hit testing target and all its ancestors in order. The first element
1379
- * is the target itself and the last is {@link EventBoundary.rootTarget rootTarget}. This is the opposite
1380
- * order w.r.t. the propagation path. If no hit testing target is found, null is returned.
1381
- */
1382
- hitTestRecursive(currentTarget, eventMode, location, testFn, pruneFn) {
1383
- if (this._interactivePrune(currentTarget) || pruneFn(currentTarget, location)) {
1384
- return null;
1385
- }
1386
- if (currentTarget.eventMode === "dynamic" || eventMode === "dynamic") {
1387
- EventsTicker.pauseUpdate = false;
1388
- }
1389
- if (currentTarget.interactiveChildren && currentTarget.children) {
1390
- const children = currentTarget.children;
1391
- const relativeLocation = location;
1392
- for (let i = children.length - 1; i >= 0; i--) {
1393
- const child = children[i];
1394
- const nestedHit = this.hitTestRecursive(
1395
- child,
1396
- this._isInteractive(eventMode) ? eventMode : child.eventMode,
1397
- relativeLocation,
1398
- testFn,
1399
- pruneFn
1400
- );
1401
- if (nestedHit) {
1402
- if (nestedHit.length > 0 && !nestedHit[nestedHit.length - 1].parent) {
1403
- continue;
1404
- }
1405
- const isInteractive = currentTarget.isInteractive();
1406
- if (nestedHit.length > 0 || isInteractive) nestedHit.push(currentTarget);
1407
- return nestedHit;
1408
- }
1409
- }
1410
- }
1411
- const isInteractiveMode = this._isInteractive(eventMode);
1412
- const isInteractiveTarget = currentTarget.isInteractive();
1413
- if (isInteractiveMode && testFn(currentTarget, location)) {
1414
- return isInteractiveTarget ? [currentTarget] : [];
1415
- }
1416
- return null;
1417
- }
1418
- _isInteractive(int) {
1419
- return int === "static" || int === "dynamic";
1420
- }
1421
- _interactivePrune(container) {
1422
- if (!container || !container.visible || !container.renderable || !container.measurable) {
1423
- return true;
1424
- }
1425
- if (container.eventMode === "none") {
1426
- return true;
1427
- }
1428
- if (container.eventMode === "passive" && !container.interactiveChildren) {
1429
- return true;
1430
- }
1431
- return false;
1432
- }
1433
- /**
1434
- * Checks whether the container or any of its children cannot pass the hit test at all.
1435
- *
1436
- * {@link EventBoundary}'s implementation uses the {@link Container.hitArea hitArea}
1437
- * and {@link Container._maskEffect} for pruning.
1438
- * @param container - The container to prune.
1439
- * @param location - The location to test for overlap.
1440
- */
1441
- hitPruneFn(container, location) {
1442
- if (container.hitArea) {
1443
- container.worldTransform.applyInverse(location, tempLocalMapping);
1444
- if (!container.hitArea.contains(tempLocalMapping.x, tempLocalMapping.y)) {
1445
- return true;
1446
- }
1447
- }
1448
- if (container.effects && container.effects.length) {
1449
- for (let i = 0; i < container.effects.length; i++) {
1450
- const effect = container.effects[i];
1451
- if (effect.containsPoint) {
1452
- const effectContainsPoint = effect.containsPoint(location, this.hitTestFn);
1453
- if (!effectContainsPoint) {
1454
- return true;
1455
- }
1456
- }
1457
- }
1458
- }
1459
- return false;
1460
- }
1461
- /**
1462
- * Checks whether the container passes hit testing for the given location.
1463
- * @param container - The container to test.
1464
- * @param location - The location to test for overlap.
1465
- * @returns - Whether `container` passes hit testing for `location`.
1466
- */
1467
- hitTestFn(container, location) {
1468
- if (container.hitArea) {
1469
- return true;
1470
- }
1471
- if (container == null ? void 0 : container.containsPoint) {
1472
- container.worldTransform.applyInverse(location, tempLocalMapping);
1473
- return container.containsPoint(tempLocalMapping);
1474
- }
1475
- return false;
1476
- }
1477
- /**
1478
- * Notify all the listeners to the event's `currentTarget`.
1479
- *
1480
- * If the `currentTarget` contains the property `on<type>`, then it is called here,
1481
- * simulating the behavior from version 6.x and prior.
1482
- * @param e - The event passed to the target.
1483
- * @param type - The type of event to notify. Defaults to `e.type`.
1484
- */
1485
- notifyTarget(e, type) {
1486
- var _a, _b;
1487
- if (!e.currentTarget.isInteractive()) {
1488
- return;
1489
- }
1490
- type ?? (type = e.type);
1491
- const handlerKey = `on${type}`;
1492
- (_b = (_a = e.currentTarget)[handlerKey]) == null ? void 0 : _b.call(_a, e);
1493
- const key = e.eventPhase === e.CAPTURING_PHASE || e.eventPhase === e.AT_TARGET ? `${type}capture` : type;
1494
- this._notifyListeners(e, key);
1495
- if (e.eventPhase === e.AT_TARGET) {
1496
- this._notifyListeners(e, type);
1497
- }
1498
- }
1499
- /**
1500
- * Maps the upstream `pointerdown` events to a downstream `pointerdown` event.
1501
- *
1502
- * `touchstart`, `rightdown`, `mousedown` events are also dispatched for specific pointer types.
1503
- * @param from - The upstream `pointerdown` event.
1504
- */
1505
- mapPointerDown(from) {
1506
- if (!(from instanceof FederatedPointerEvent)) {
1507
- warn("EventBoundary cannot map a non-pointer event as a pointer event");
1508
- return;
1509
- }
1510
- const e = this.createPointerEvent(from);
1511
- this.dispatchEvent(e, "pointerdown");
1512
- if (e.pointerType === "touch") {
1513
- this.dispatchEvent(e, "touchstart");
1514
- } else if (e.pointerType === "mouse" || e.pointerType === "pen") {
1515
- const isRightButton = e.button === 2;
1516
- this.dispatchEvent(e, isRightButton ? "rightdown" : "mousedown");
1517
- }
1518
- const trackingData = this.trackingData(from.pointerId);
1519
- trackingData.pressTargetsByButton[from.button] = e.composedPath();
1520
- this.freeEvent(e);
1521
- }
1522
- /**
1523
- * Maps the upstream `pointermove` to downstream `pointerout`, `pointerover`, and `pointermove` events, in that order.
1524
- *
1525
- * The tracking data for the specific pointer has an updated `overTarget`. `mouseout`, `mouseover`,
1526
- * `mousemove`, and `touchmove` events are fired as well for specific pointer types.
1527
- * @param from - The upstream `pointermove` event.
1528
- */
1529
- mapPointerMove(from) {
1530
- var _a, _b;
1531
- if (!(from instanceof FederatedPointerEvent)) {
1532
- warn("EventBoundary cannot map a non-pointer event as a pointer event");
1533
- return;
1534
- }
1535
- this._allInteractiveElements.length = 0;
1536
- this._hitElements.length = 0;
1537
- this._isPointerMoveEvent = true;
1538
- const e = this.createPointerEvent(from);
1539
- this._isPointerMoveEvent = false;
1540
- const isMouse = e.pointerType === "mouse" || e.pointerType === "pen";
1541
- const trackingData = this.trackingData(from.pointerId);
1542
- const outTarget = this.findMountedTarget(trackingData.overTargets);
1543
- if (((_a = trackingData.overTargets) == null ? void 0 : _a.length) > 0 && outTarget !== e.target) {
1544
- const outType = from.type === "mousemove" ? "mouseout" : "pointerout";
1545
- const outEvent = this.createPointerEvent(from, outType, outTarget);
1546
- this.dispatchEvent(outEvent, "pointerout");
1547
- if (isMouse) this.dispatchEvent(outEvent, "mouseout");
1548
- if (!e.composedPath().includes(outTarget)) {
1549
- const leaveEvent = this.createPointerEvent(from, "pointerleave", outTarget);
1550
- leaveEvent.eventPhase = leaveEvent.AT_TARGET;
1551
- while (leaveEvent.target && !e.composedPath().includes(leaveEvent.target)) {
1552
- leaveEvent.currentTarget = leaveEvent.target;
1553
- this.notifyTarget(leaveEvent);
1554
- if (isMouse) this.notifyTarget(leaveEvent, "mouseleave");
1555
- leaveEvent.target = leaveEvent.target.parent;
1556
- }
1557
- this.freeEvent(leaveEvent);
1558
- }
1559
- this.freeEvent(outEvent);
1560
- }
1561
- if (outTarget !== e.target) {
1562
- const overType = from.type === "mousemove" ? "mouseover" : "pointerover";
1563
- const overEvent = this.clonePointerEvent(e, overType);
1564
- this.dispatchEvent(overEvent, "pointerover");
1565
- if (isMouse) this.dispatchEvent(overEvent, "mouseover");
1566
- let overTargetAncestor = outTarget == null ? void 0 : outTarget.parent;
1567
- while (overTargetAncestor && overTargetAncestor !== this.rootTarget.parent) {
1568
- if (overTargetAncestor === e.target) break;
1569
- overTargetAncestor = overTargetAncestor.parent;
1570
- }
1571
- const didPointerEnter = !overTargetAncestor || overTargetAncestor === this.rootTarget.parent;
1572
- if (didPointerEnter) {
1573
- const enterEvent = this.clonePointerEvent(e, "pointerenter");
1574
- enterEvent.eventPhase = enterEvent.AT_TARGET;
1575
- while (enterEvent.target && enterEvent.target !== outTarget && enterEvent.target !== this.rootTarget.parent) {
1576
- enterEvent.currentTarget = enterEvent.target;
1577
- this.notifyTarget(enterEvent);
1578
- if (isMouse) this.notifyTarget(enterEvent, "mouseenter");
1579
- enterEvent.target = enterEvent.target.parent;
1580
- }
1581
- this.freeEvent(enterEvent);
1582
- }
1583
- this.freeEvent(overEvent);
1584
- }
1585
- const allMethods = [];
1586
- const allowGlobalPointerEvents = this.enableGlobalMoveEvents ?? true;
1587
- this.moveOnAll ? allMethods.push("pointermove") : this.dispatchEvent(e, "pointermove");
1588
- allowGlobalPointerEvents && allMethods.push("globalpointermove");
1589
- if (e.pointerType === "touch") {
1590
- this.moveOnAll ? allMethods.splice(1, 0, "touchmove") : this.dispatchEvent(e, "touchmove");
1591
- allowGlobalPointerEvents && allMethods.push("globaltouchmove");
1592
- }
1593
- if (isMouse) {
1594
- this.moveOnAll ? allMethods.splice(1, 0, "mousemove") : this.dispatchEvent(e, "mousemove");
1595
- allowGlobalPointerEvents && allMethods.push("globalmousemove");
1596
- this.cursor = (_b = e.target) == null ? void 0 : _b.cursor;
1597
- }
1598
- if (allMethods.length > 0) {
1599
- this.all(e, allMethods);
1600
- }
1601
- this._allInteractiveElements.length = 0;
1602
- this._hitElements.length = 0;
1603
- trackingData.overTargets = e.composedPath();
1604
- this.freeEvent(e);
1605
- }
1606
- /**
1607
- * Maps the upstream `pointerover` to downstream `pointerover` and `pointerenter` events, in that order.
1608
- *
1609
- * The tracking data for the specific pointer gets a new `overTarget`.
1610
- * @param from - The upstream `pointerover` event.
1611
- */
1612
- mapPointerOver(from) {
1613
- var _a;
1614
- if (!(from instanceof FederatedPointerEvent)) {
1615
- warn("EventBoundary cannot map a non-pointer event as a pointer event");
1616
- return;
1617
- }
1618
- const trackingData = this.trackingData(from.pointerId);
1619
- const e = this.createPointerEvent(from);
1620
- const isMouse = e.pointerType === "mouse" || e.pointerType === "pen";
1621
- this.dispatchEvent(e, "pointerover");
1622
- if (isMouse) this.dispatchEvent(e, "mouseover");
1623
- if (e.pointerType === "mouse") this.cursor = (_a = e.target) == null ? void 0 : _a.cursor;
1624
- const enterEvent = this.clonePointerEvent(e, "pointerenter");
1625
- enterEvent.eventPhase = enterEvent.AT_TARGET;
1626
- while (enterEvent.target && enterEvent.target !== this.rootTarget.parent) {
1627
- enterEvent.currentTarget = enterEvent.target;
1628
- this.notifyTarget(enterEvent);
1629
- if (isMouse) this.notifyTarget(enterEvent, "mouseenter");
1630
- enterEvent.target = enterEvent.target.parent;
1631
- }
1632
- trackingData.overTargets = e.composedPath();
1633
- this.freeEvent(e);
1634
- this.freeEvent(enterEvent);
1635
- }
1636
- /**
1637
- * Maps the upstream `pointerout` to downstream `pointerout`, `pointerleave` events, in that order.
1638
- *
1639
- * The tracking data for the specific pointer is cleared of a `overTarget`.
1640
- * @param from - The upstream `pointerout` event.
1641
- */
1642
- mapPointerOut(from) {
1643
- if (!(from instanceof FederatedPointerEvent)) {
1644
- warn("EventBoundary cannot map a non-pointer event as a pointer event");
1645
- return;
1646
- }
1647
- const trackingData = this.trackingData(from.pointerId);
1648
- if (trackingData.overTargets) {
1649
- const isMouse = from.pointerType === "mouse" || from.pointerType === "pen";
1650
- const outTarget = this.findMountedTarget(trackingData.overTargets);
1651
- const outEvent = this.createPointerEvent(from, "pointerout", outTarget);
1652
- this.dispatchEvent(outEvent);
1653
- if (isMouse) this.dispatchEvent(outEvent, "mouseout");
1654
- const leaveEvent = this.createPointerEvent(from, "pointerleave", outTarget);
1655
- leaveEvent.eventPhase = leaveEvent.AT_TARGET;
1656
- while (leaveEvent.target && leaveEvent.target !== this.rootTarget.parent) {
1657
- leaveEvent.currentTarget = leaveEvent.target;
1658
- this.notifyTarget(leaveEvent);
1659
- if (isMouse) this.notifyTarget(leaveEvent, "mouseleave");
1660
- leaveEvent.target = leaveEvent.target.parent;
1661
- }
1662
- trackingData.overTargets = null;
1663
- this.freeEvent(outEvent);
1664
- this.freeEvent(leaveEvent);
1665
- }
1666
- this.cursor = null;
1667
- }
1668
- /**
1669
- * Maps the upstream `pointerup` event to downstream `pointerup`, `pointerupoutside`,
1670
- * and `click`/`rightclick`/`pointertap` events, in that order.
1671
- *
1672
- * The `pointerupoutside` event bubbles from the original `pointerdown` target to the most specific
1673
- * ancestor of the `pointerdown` and `pointerup` targets, which is also the `click` event's target. `touchend`,
1674
- * `rightup`, `mouseup`, `touchendoutside`, `rightupoutside`, `mouseupoutside`, and `tap` are fired as well for
1675
- * specific pointer types.
1676
- * @param from - The upstream `pointerup` event.
1677
- */
1678
- mapPointerUp(from) {
1679
- if (!(from instanceof FederatedPointerEvent)) {
1680
- warn("EventBoundary cannot map a non-pointer event as a pointer event");
1681
- return;
1682
- }
1683
- const now = performance.now();
1684
- const e = this.createPointerEvent(from);
1685
- this.dispatchEvent(e, "pointerup");
1686
- if (e.pointerType === "touch") {
1687
- this.dispatchEvent(e, "touchend");
1688
- } else if (e.pointerType === "mouse" || e.pointerType === "pen") {
1689
- const isRightButton = e.button === 2;
1690
- this.dispatchEvent(e, isRightButton ? "rightup" : "mouseup");
1691
- }
1692
- const trackingData = this.trackingData(from.pointerId);
1693
- const pressTarget = this.findMountedTarget(trackingData.pressTargetsByButton[from.button]);
1694
- let clickTarget = pressTarget;
1695
- if (pressTarget && !e.composedPath().includes(pressTarget)) {
1696
- let currentTarget = pressTarget;
1697
- while (currentTarget && !e.composedPath().includes(currentTarget)) {
1698
- e.currentTarget = currentTarget;
1699
- this.notifyTarget(e, "pointerupoutside");
1700
- if (e.pointerType === "touch") {
1701
- this.notifyTarget(e, "touchendoutside");
1702
- } else if (e.pointerType === "mouse" || e.pointerType === "pen") {
1703
- const isRightButton = e.button === 2;
1704
- this.notifyTarget(e, isRightButton ? "rightupoutside" : "mouseupoutside");
1705
- }
1706
- currentTarget = currentTarget.parent;
1707
- }
1708
- delete trackingData.pressTargetsByButton[from.button];
1709
- clickTarget = currentTarget;
1710
- }
1711
- if (clickTarget) {
1712
- const clickEvent = this.clonePointerEvent(e, "click");
1713
- clickEvent.target = clickTarget;
1714
- clickEvent.path = null;
1715
- if (!trackingData.clicksByButton[from.button]) {
1716
- trackingData.clicksByButton[from.button] = {
1717
- clickCount: 0,
1718
- target: clickEvent.target,
1719
- timeStamp: now
1720
- };
1721
- }
1722
- const clickHistory = trackingData.clicksByButton[from.button];
1723
- if (clickHistory.target === clickEvent.target && now - clickHistory.timeStamp < 200) {
1724
- ++clickHistory.clickCount;
1725
- } else {
1726
- clickHistory.clickCount = 1;
1727
- }
1728
- clickHistory.target = clickEvent.target;
1729
- clickHistory.timeStamp = now;
1730
- clickEvent.detail = clickHistory.clickCount;
1731
- if (clickEvent.pointerType === "mouse") {
1732
- const isRightButton = clickEvent.button === 2;
1733
- this.dispatchEvent(clickEvent, isRightButton ? "rightclick" : "click");
1734
- } else if (clickEvent.pointerType === "touch") {
1735
- this.dispatchEvent(clickEvent, "tap");
1736
- }
1737
- this.dispatchEvent(clickEvent, "pointertap");
1738
- this.freeEvent(clickEvent);
1739
- }
1740
- this.freeEvent(e);
1741
- }
1742
- /**
1743
- * Maps the upstream `pointerupoutside` event to a downstream `pointerupoutside` event, bubbling from the original
1744
- * `pointerdown` target to `rootTarget`.
1745
- *
1746
- * (The most specific ancestor of the `pointerdown` event and the `pointerup` event must the
1747
- * `{@link EventBoundary}'s root because the `pointerup` event occurred outside of the boundary.)
1748
- *
1749
- * `touchendoutside`, `mouseupoutside`, and `rightupoutside` events are fired as well for specific pointer
1750
- * types. The tracking data for the specific pointer is cleared of a `pressTarget`.
1751
- * @param from - The upstream `pointerupoutside` event.
1752
- */
1753
- mapPointerUpOutside(from) {
1754
- if (!(from instanceof FederatedPointerEvent)) {
1755
- warn("EventBoundary cannot map a non-pointer event as a pointer event");
1756
- return;
1757
- }
1758
- const trackingData = this.trackingData(from.pointerId);
1759
- const pressTarget = this.findMountedTarget(trackingData.pressTargetsByButton[from.button]);
1760
- const e = this.createPointerEvent(from);
1761
- if (pressTarget) {
1762
- let currentTarget = pressTarget;
1763
- while (currentTarget) {
1764
- e.currentTarget = currentTarget;
1765
- this.notifyTarget(e, "pointerupoutside");
1766
- if (e.pointerType === "touch") {
1767
- this.notifyTarget(e, "touchendoutside");
1768
- } else if (e.pointerType === "mouse" || e.pointerType === "pen") {
1769
- this.notifyTarget(e, e.button === 2 ? "rightupoutside" : "mouseupoutside");
1770
- }
1771
- currentTarget = currentTarget.parent;
1772
- }
1773
- delete trackingData.pressTargetsByButton[from.button];
1774
- }
1775
- this.freeEvent(e);
1776
- }
1777
- /**
1778
- * Maps the upstream `wheel` event to a downstream `wheel` event.
1779
- * @param from - The upstream `wheel` event.
1780
- */
1781
- mapWheel(from) {
1782
- if (!(from instanceof FederatedWheelEvent)) {
1783
- warn("EventBoundary cannot map a non-wheel event as a wheel event");
1784
- return;
1785
- }
1786
- const wheelEvent = this.createWheelEvent(from);
1787
- this.dispatchEvent(wheelEvent);
1788
- this.freeEvent(wheelEvent);
1789
- }
1790
- /**
1791
- * Finds the most specific event-target in the given propagation path that is still mounted in the scene graph.
1792
- *
1793
- * This is used to find the correct `pointerup` and `pointerout` target in the case that the original `pointerdown`
1794
- * or `pointerover` target was unmounted from the scene graph.
1795
- * @param propagationPath - The propagation path was valid in the past.
1796
- * @returns - The most specific event-target still mounted at the same location in the scene graph.
1797
- */
1798
- findMountedTarget(propagationPath) {
1799
- if (!propagationPath) {
1800
- return null;
1801
- }
1802
- let currentTarget = propagationPath[0];
1803
- for (let i = 1; i < propagationPath.length; i++) {
1804
- if (propagationPath[i].parent === currentTarget) {
1805
- currentTarget = propagationPath[i];
1806
- } else {
1807
- break;
1808
- }
1809
- }
1810
- return currentTarget;
1811
- }
1812
- /**
1813
- * Creates an event whose `originalEvent` is `from`, with an optional `type` and `target` override.
1814
- *
1815
- * The event is allocated using {@link EventBoundary#allocateEvent this.allocateEvent}.
1816
- * @param from - The `originalEvent` for the returned event.
1817
- * @param [type=from.type] - The type of the returned event.
1818
- * @param target - The target of the returned event.
1819
- */
1820
- createPointerEvent(from, type, target) {
1821
- const event = this.allocateEvent(FederatedPointerEvent);
1822
- this.copyPointerData(from, event);
1823
- this.copyMouseData(from, event);
1824
- this.copyData(from, event);
1825
- event.nativeEvent = from.nativeEvent;
1826
- event.originalEvent = from;
1827
- event.target = target ?? this.hitTest(event.global.x, event.global.y) ?? this._hitElements[0];
1828
- if (typeof type === "string") {
1829
- event.type = type;
1830
- }
1831
- return event;
1832
- }
1833
- /**
1834
- * Creates a wheel event whose `originalEvent` is `from`.
1835
- *
1836
- * The event is allocated using {@link EventBoundary#allocateEvent this.allocateEvent}.
1837
- * @param from - The upstream wheel event.
1838
- */
1839
- createWheelEvent(from) {
1840
- const event = this.allocateEvent(FederatedWheelEvent);
1841
- this.copyWheelData(from, event);
1842
- this.copyMouseData(from, event);
1843
- this.copyData(from, event);
1844
- event.nativeEvent = from.nativeEvent;
1845
- event.originalEvent = from;
1846
- event.target = this.hitTest(event.global.x, event.global.y);
1847
- return event;
1848
- }
1849
- /**
1850
- * Clones the event `from`, with an optional `type` override.
1851
- *
1852
- * The event is allocated using {@link EventBoundary#allocateEvent this.allocateEvent}.
1853
- * @param from - The event to clone.
1854
- * @param [type=from.type] - The type of the returned event.
1855
- */
1856
- clonePointerEvent(from, type) {
1857
- const event = this.allocateEvent(FederatedPointerEvent);
1858
- event.nativeEvent = from.nativeEvent;
1859
- event.originalEvent = from.originalEvent;
1860
- this.copyPointerData(from, event);
1861
- this.copyMouseData(from, event);
1862
- this.copyData(from, event);
1863
- event.target = from.target;
1864
- event.path = from.composedPath().slice();
1865
- event.type = type ?? event.type;
1866
- return event;
1867
- }
1868
- /**
1869
- * Copies wheel {@link FederatedWheelEvent} data from `from` into `to`.
1870
- *
1871
- * The following properties are copied:
1872
- * + deltaMode
1873
- * + deltaX
1874
- * + deltaY
1875
- * + deltaZ
1876
- * @param from - The event to copy data from.
1877
- * @param to - The event to copy data into.
1878
- */
1879
- copyWheelData(from, to) {
1880
- to.deltaMode = from.deltaMode;
1881
- to.deltaX = from.deltaX;
1882
- to.deltaY = from.deltaY;
1883
- to.deltaZ = from.deltaZ;
1884
- }
1885
- /**
1886
- * Copies pointer {@link FederatedPointerEvent} data from `from` into `to`.
1887
- *
1888
- * The following properties are copied:
1889
- * + pointerId
1890
- * + width
1891
- * + height
1892
- * + isPrimary
1893
- * + pointerType
1894
- * + pressure
1895
- * + tangentialPressure
1896
- * + tiltX
1897
- * + tiltY
1898
- * @param from - The event to copy data from.
1899
- * @param to - The event to copy data into.
1900
- */
1901
- copyPointerData(from, to) {
1902
- if (!(from instanceof FederatedPointerEvent && to instanceof FederatedPointerEvent)) return;
1903
- to.pointerId = from.pointerId;
1904
- to.width = from.width;
1905
- to.height = from.height;
1906
- to.isPrimary = from.isPrimary;
1907
- to.pointerType = from.pointerType;
1908
- to.pressure = from.pressure;
1909
- to.tangentialPressure = from.tangentialPressure;
1910
- to.tiltX = from.tiltX;
1911
- to.tiltY = from.tiltY;
1912
- to.twist = from.twist;
1913
- }
1914
- /**
1915
- * Copies mouse {@link FederatedMouseEvent} data from `from` to `to`.
1916
- *
1917
- * The following properties are copied:
1918
- * + altKey
1919
- * + button
1920
- * + buttons
1921
- * + clientX
1922
- * + clientY
1923
- * + metaKey
1924
- * + movementX
1925
- * + movementY
1926
- * + pageX
1927
- * + pageY
1928
- * + x
1929
- * + y
1930
- * + screen
1931
- * + shiftKey
1932
- * + global
1933
- * @param from - The event to copy data from.
1934
- * @param to - The event to copy data into.
1935
- */
1936
- copyMouseData(from, to) {
1937
- if (!(from instanceof FederatedMouseEvent && to instanceof FederatedMouseEvent)) return;
1938
- to.altKey = from.altKey;
1939
- to.button = from.button;
1940
- to.buttons = from.buttons;
1941
- to.client.copyFrom(from.client);
1942
- to.ctrlKey = from.ctrlKey;
1943
- to.metaKey = from.metaKey;
1944
- to.movement.copyFrom(from.movement);
1945
- to.screen.copyFrom(from.screen);
1946
- to.shiftKey = from.shiftKey;
1947
- to.global.copyFrom(from.global);
1948
- }
1949
- /**
1950
- * Copies base {@link FederatedEvent} data from `from` into `to`.
1951
- *
1952
- * The following properties are copied:
1953
- * + isTrusted
1954
- * + srcElement
1955
- * + timeStamp
1956
- * + type
1957
- * @param from - The event to copy data from.
1958
- * @param to - The event to copy data into.
1959
- */
1960
- copyData(from, to) {
1961
- to.isTrusted = from.isTrusted;
1962
- to.srcElement = from.srcElement;
1963
- to.timeStamp = performance.now();
1964
- to.type = from.type;
1965
- to.detail = from.detail;
1966
- to.view = from.view;
1967
- to.which = from.which;
1968
- to.layer.copyFrom(from.layer);
1969
- to.page.copyFrom(from.page);
1970
- }
1971
- /**
1972
- * @param id - The pointer ID.
1973
- * @returns The tracking data stored for the given pointer. If no data exists, a blank
1974
- * state will be created.
1975
- */
1976
- trackingData(id) {
1977
- if (!this.mappingState.trackingData[id]) {
1978
- this.mappingState.trackingData[id] = {
1979
- pressTargetsByButton: {},
1980
- clicksByButton: {},
1981
- overTarget: null
1982
- };
1983
- }
1984
- return this.mappingState.trackingData[id];
1985
- }
1986
- /**
1987
- * Allocate a specific type of event from {@link EventBoundary#eventPool this.eventPool}.
1988
- *
1989
- * This allocation is constructor-agnostic, as long as it only takes one argument - this event
1990
- * boundary.
1991
- * @param constructor - The event's constructor.
1992
- * @returns An event of the given type.
1993
- */
1994
- allocateEvent(constructor) {
1995
- if (!this.eventPool.has(constructor)) {
1996
- this.eventPool.set(constructor, []);
1997
- }
1998
- const event = this.eventPool.get(constructor).pop() || new constructor(this);
1999
- event.eventPhase = event.NONE;
2000
- event.currentTarget = null;
2001
- event.defaultPrevented = false;
2002
- event.path = null;
2003
- event.target = null;
2004
- return event;
2005
- }
2006
- /**
2007
- * Frees the event and puts it back into the event pool.
2008
- *
2009
- * It is illegal to reuse the event until it is allocated again, using `this.allocateEvent`.
2010
- *
2011
- * It is also advised that events not allocated from {@link EventBoundary#allocateEvent this.allocateEvent}
2012
- * not be freed. This is because of the possibility that the same event is freed twice, which can cause
2013
- * it to be allocated twice & result in overwriting.
2014
- * @param event - The event to be freed.
2015
- * @throws Error if the event is managed by another event boundary.
2016
- */
2017
- freeEvent(event) {
2018
- if (event.manager !== this) throw new Error("It is illegal to free an event not managed by this EventBoundary!");
2019
- const constructor = event.constructor;
2020
- if (!this.eventPool.has(constructor)) {
2021
- this.eventPool.set(constructor, []);
2022
- }
2023
- this.eventPool.get(constructor).push(event);
2024
- }
2025
- /**
2026
- * Similar to {@link EventEmitter.emit}, except it stops if the `propagationImmediatelyStopped` flag
2027
- * is set on the event.
2028
- * @param e - The event to call each listener with.
2029
- * @param type - The event key.
2030
- */
2031
- _notifyListeners(e, type) {
2032
- const listeners = e.currentTarget._events[type];
2033
- if (!listeners) return;
2034
- if ("fn" in listeners) {
2035
- if (listeners.once) e.currentTarget.removeListener(type, listeners.fn, void 0, true);
2036
- listeners.fn.call(listeners.context, e);
2037
- } else {
2038
- for (let i = 0, j = listeners.length; i < j && !e.propagationImmediatelyStopped; i++) {
2039
- if (listeners[i].once) e.currentTarget.removeListener(type, listeners[i].fn, void 0, true);
2040
- listeners[i].fn.call(listeners[i].context, e);
2041
- }
2042
- }
2043
- }
2044
- }
2045
- const MOUSE_POINTER_ID = 1;
2046
- const TOUCH_TO_POINTER = {
2047
- touchstart: "pointerdown",
2048
- touchend: "pointerup",
2049
- touchendoutside: "pointerupoutside",
2050
- touchmove: "pointermove",
2051
- touchcancel: "pointercancel"
2052
- };
2053
- const _EventSystem = class _EventSystem2 {
2054
- /**
2055
- * @param {Renderer} renderer
2056
- */
2057
- constructor(renderer) {
2058
- this.supportsTouchEvents = "ontouchstart" in globalThis;
2059
- this.supportsPointerEvents = !!globalThis.PointerEvent;
2060
- this.domElement = null;
2061
- this.resolution = 1;
2062
- this.renderer = renderer;
2063
- this.rootBoundary = new EventBoundary(null);
2064
- EventsTicker.init(this);
2065
- this.autoPreventDefault = true;
2066
- this._eventsAdded = false;
2067
- this._rootPointerEvent = new FederatedPointerEvent(null);
2068
- this._rootWheelEvent = new FederatedWheelEvent(null);
2069
- this.cursorStyles = {
2070
- default: "inherit",
2071
- pointer: "pointer"
2072
- };
2073
- this.features = new Proxy({ ..._EventSystem2.defaultEventFeatures }, {
2074
- set: (target, key, value) => {
2075
- if (key === "globalMove") {
2076
- this.rootBoundary.enableGlobalMoveEvents = value;
2077
- }
2078
- target[key] = value;
2079
- return true;
2080
- }
2081
- });
2082
- this._onPointerDown = this._onPointerDown.bind(this);
2083
- this._onPointerMove = this._onPointerMove.bind(this);
2084
- this._onPointerUp = this._onPointerUp.bind(this);
2085
- this._onPointerOverOut = this._onPointerOverOut.bind(this);
2086
- this.onWheel = this.onWheel.bind(this);
2087
- }
2088
- /**
2089
- * The default interaction mode for all display objects.
2090
- * @see Container.eventMode
2091
- * @type {EventMode}
2092
- * @readonly
2093
- * @since 7.2.0
2094
- */
2095
- static get defaultEventMode() {
2096
- return this._defaultEventMode;
2097
- }
2098
- /**
2099
- * Runner init called, view is available at this point.
2100
- * @ignore
2101
- */
2102
- init(options) {
2103
- const { canvas, resolution } = this.renderer;
2104
- this.setTargetElement(canvas);
2105
- this.resolution = resolution;
2106
- _EventSystem2._defaultEventMode = options.eventMode ?? "passive";
2107
- Object.assign(this.features, options.eventFeatures ?? {});
2108
- this.rootBoundary.enableGlobalMoveEvents = this.features.globalMove;
2109
- }
2110
- /**
2111
- * Handle changing resolution.
2112
- * @ignore
2113
- */
2114
- resolutionChange(resolution) {
2115
- this.resolution = resolution;
2116
- }
2117
- /** Destroys all event listeners and detaches the renderer. */
2118
- destroy() {
2119
- EventsTicker.destroy();
2120
- this.setTargetElement(null);
2121
- this.renderer = null;
2122
- this._currentCursor = null;
2123
- }
2124
- /**
2125
- * Sets the current cursor mode, handling any callbacks or CSS style changes.
2126
- * The cursor can be a CSS cursor string, a custom callback function, or a key from the cursorStyles dictionary.
2127
- * @param mode - Cursor mode to set. Can be:
2128
- * - A CSS cursor string (e.g., 'pointer', 'grab')
2129
- * - A key from the cursorStyles dictionary
2130
- * - null/undefined to reset to default
2131
- * @example
2132
- * ```ts
2133
- * // Using predefined cursor styles
2134
- * app.renderer.events.setCursor('pointer'); // Set standard pointer cursor
2135
- * app.renderer.events.setCursor('grab'); // Set grab cursor
2136
- * app.renderer.events.setCursor(null); // Reset to default
2137
- *
2138
- * // Using custom cursor styles
2139
- * app.renderer.events.cursorStyles.custom = 'url("cursor.png"), auto';
2140
- * app.renderer.events.setCursor('custom'); // Apply custom cursor
2141
- *
2142
- * // Using callback-based cursor
2143
- * app.renderer.events.cursorStyles.dynamic = (mode) => {
2144
- * document.body.style.cursor = mode === 'hover' ? 'pointer' : 'default';
2145
- * };
2146
- * app.renderer.events.setCursor('dynamic'); // Trigger cursor callback
2147
- * ```
2148
- * @remarks
2149
- * - Has no effect on OffscreenCanvas except for callback-based cursors
2150
- * - Caches current cursor to avoid unnecessary DOM updates
2151
- * - Supports CSS cursor values, style objects, and callback functions
2152
- * @see {@link EventSystem.cursorStyles} For defining custom cursor styles
2153
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/cursor} MDN Cursor Reference
2154
- */
2155
- setCursor(mode) {
2156
- mode || (mode = "default");
2157
- let applyStyles = true;
2158
- if (globalThis.OffscreenCanvas && this.domElement instanceof OffscreenCanvas) {
2159
- applyStyles = false;
2160
- }
2161
- if (this._currentCursor === mode) {
2162
- return;
2163
- }
2164
- this._currentCursor = mode;
2165
- const style = this.cursorStyles[mode];
2166
- if (style) {
2167
- switch (typeof style) {
2168
- case "string":
2169
- if (applyStyles) {
2170
- this.domElement.style.cursor = style;
2171
- }
2172
- break;
2173
- case "function":
2174
- style(mode);
2175
- break;
2176
- case "object":
2177
- if (applyStyles) {
2178
- Object.assign(this.domElement.style, style);
2179
- }
2180
- break;
2181
- }
2182
- } else if (applyStyles && typeof mode === "string" && !Object.prototype.hasOwnProperty.call(this.cursorStyles, mode)) {
2183
- this.domElement.style.cursor = mode;
2184
- }
2185
- }
2186
- /**
2187
- * The global pointer event instance containing the most recent pointer state.
2188
- * This is useful for accessing pointer information without listening to events.
2189
- * @example
2190
- * ```ts
2191
- * // Access current pointer position at any time
2192
- * const eventSystem = app.renderer.events;
2193
- * const pointer = eventSystem.pointer;
2194
- *
2195
- * // Get global coordinates
2196
- * console.log('Position:', pointer.global.x, pointer.global.y);
2197
- *
2198
- * // Check button state
2199
- * console.log('Buttons pressed:', pointer.buttons);
2200
- *
2201
- * // Get pointer type and pressure
2202
- * console.log('Type:', pointer.pointerType);
2203
- * console.log('Pressure:', pointer.pressure);
2204
- * ```
2205
- * @readonly
2206
- * @since 7.2.0
2207
- * @see {@link FederatedPointerEvent} For all available pointer properties
2208
- */
2209
- get pointer() {
2210
- return this._rootPointerEvent;
2211
- }
2212
- /**
2213
- * Event handler for pointer down events on {@link EventSystem#domElement this.domElement}.
2214
- * @param nativeEvent - The native mouse/pointer/touch event.
2215
- */
2216
- _onPointerDown(nativeEvent) {
2217
- if (!this.features.click) return;
2218
- this.rootBoundary.rootTarget = this.renderer.lastObjectRendered;
2219
- const events = this._normalizeToPointerData(nativeEvent);
2220
- if (this.autoPreventDefault && events[0].isNormalized) {
2221
- const cancelable = nativeEvent.cancelable || !("cancelable" in nativeEvent);
2222
- if (cancelable) {
2223
- nativeEvent.preventDefault();
2224
- }
2225
- }
2226
- for (let i = 0, j = events.length; i < j; i++) {
2227
- const nativeEvent2 = events[i];
2228
- const federatedEvent = this._bootstrapEvent(this._rootPointerEvent, nativeEvent2);
2229
- this.rootBoundary.mapEvent(federatedEvent);
2230
- }
2231
- this.setCursor(this.rootBoundary.cursor);
2232
- }
2233
- /**
2234
- * Event handler for pointer move events on on {@link EventSystem#domElement this.domElement}.
2235
- * @param nativeEvent - The native mouse/pointer/touch events.
2236
- */
2237
- _onPointerMove(nativeEvent) {
2238
- if (!this.features.move) return;
2239
- this.rootBoundary.rootTarget = this.renderer.lastObjectRendered;
2240
- EventsTicker.pointerMoved();
2241
- const normalizedEvents = this._normalizeToPointerData(nativeEvent);
2242
- for (let i = 0, j = normalizedEvents.length; i < j; i++) {
2243
- const event = this._bootstrapEvent(this._rootPointerEvent, normalizedEvents[i]);
2244
- this.rootBoundary.mapEvent(event);
2245
- }
2246
- this.setCursor(this.rootBoundary.cursor);
2247
- }
2248
- /**
2249
- * Event handler for pointer up events on {@link EventSystem#domElement this.domElement}.
2250
- * @param nativeEvent - The native mouse/pointer/touch event.
2251
- */
2252
- _onPointerUp(nativeEvent) {
2253
- if (!this.features.click) return;
2254
- this.rootBoundary.rootTarget = this.renderer.lastObjectRendered;
2255
- let target = nativeEvent.target;
2256
- if (nativeEvent.composedPath && nativeEvent.composedPath().length > 0) {
2257
- target = nativeEvent.composedPath()[0];
2258
- }
2259
- const outside = target !== this.domElement ? "outside" : "";
2260
- const normalizedEvents = this._normalizeToPointerData(nativeEvent);
2261
- for (let i = 0, j = normalizedEvents.length; i < j; i++) {
2262
- const event = this._bootstrapEvent(this._rootPointerEvent, normalizedEvents[i]);
2263
- event.type += outside;
2264
- this.rootBoundary.mapEvent(event);
2265
- }
2266
- this.setCursor(this.rootBoundary.cursor);
2267
- }
2268
- /**
2269
- * Event handler for pointer over & out events on {@link EventSystem#domElement this.domElement}.
2270
- * @param nativeEvent - The native mouse/pointer/touch event.
2271
- */
2272
- _onPointerOverOut(nativeEvent) {
2273
- if (!this.features.click) return;
2274
- this.rootBoundary.rootTarget = this.renderer.lastObjectRendered;
2275
- const normalizedEvents = this._normalizeToPointerData(nativeEvent);
2276
- for (let i = 0, j = normalizedEvents.length; i < j; i++) {
2277
- const event = this._bootstrapEvent(this._rootPointerEvent, normalizedEvents[i]);
2278
- this.rootBoundary.mapEvent(event);
2279
- }
2280
- this.setCursor(this.rootBoundary.cursor);
2281
- }
2282
- /**
2283
- * Passive handler for `wheel` events on {@link EventSystem.domElement this.domElement}.
2284
- * @param nativeEvent - The native wheel event.
2285
- */
2286
- onWheel(nativeEvent) {
2287
- if (!this.features.wheel) return;
2288
- const wheelEvent = this.normalizeWheelEvent(nativeEvent);
2289
- this.rootBoundary.rootTarget = this.renderer.lastObjectRendered;
2290
- this.rootBoundary.mapEvent(wheelEvent);
2291
- }
2292
- /**
2293
- * Sets the {@link EventSystem#domElement domElement} and binds event listeners.
2294
- * This method manages the DOM event bindings for the event system, allowing you to
2295
- * change or remove the target element that receives input events.
2296
- * > [!IMPORTANT] This will default to the canvas element of the renderer, so you
2297
- * > should not need to call this unless you are using a custom element.
2298
- * @param element - The new DOM element to bind events to, or null to remove all event bindings
2299
- * @example
2300
- * ```ts
2301
- * // Set a new canvas element as the target
2302
- * const canvas = document.createElement('canvas');
2303
- * app.renderer.events.setTargetElement(canvas);
2304
- *
2305
- * // Remove all event bindings
2306
- * app.renderer.events.setTargetElement(null);
2307
- *
2308
- * // Switch to a different canvas
2309
- * const newCanvas = document.querySelector('#game-canvas');
2310
- * app.renderer.events.setTargetElement(newCanvas);
2311
- * ```
2312
- * @remarks
2313
- * - Automatically removes event listeners from previous element
2314
- * - Required for the event system to function
2315
- * - Safe to call multiple times
2316
- * @see {@link EventSystem#domElement} The current DOM element
2317
- * @see {@link EventsTicker} For the ticker system that tracks pointer movement
2318
- */
2319
- setTargetElement(element) {
2320
- this._removeEvents();
2321
- this.domElement = element;
2322
- EventsTicker.domElement = element;
2323
- this._addEvents();
2324
- }
2325
- /** Register event listeners on {@link Renderer#domElement this.domElement}. */
2326
- _addEvents() {
2327
- if (this._eventsAdded || !this.domElement) {
2328
- return;
2329
- }
2330
- EventsTicker.addTickerListener();
2331
- const style = this.domElement.style;
2332
- if (style) {
2333
- if (globalThis.navigator.msPointerEnabled) {
2334
- style.msContentZooming = "none";
2335
- style.msTouchAction = "none";
2336
- } else if (this.supportsPointerEvents) {
2337
- style.touchAction = "none";
2338
- }
2339
- }
2340
- if (this.supportsPointerEvents) {
2341
- globalThis.document.addEventListener("pointermove", this._onPointerMove, true);
2342
- this.domElement.addEventListener("pointerdown", this._onPointerDown, true);
2343
- this.domElement.addEventListener("pointerleave", this._onPointerOverOut, true);
2344
- this.domElement.addEventListener("pointerover", this._onPointerOverOut, true);
2345
- globalThis.addEventListener("pointerup", this._onPointerUp, true);
2346
- } else {
2347
- globalThis.document.addEventListener("mousemove", this._onPointerMove, true);
2348
- this.domElement.addEventListener("mousedown", this._onPointerDown, true);
2349
- this.domElement.addEventListener("mouseout", this._onPointerOverOut, true);
2350
- this.domElement.addEventListener("mouseover", this._onPointerOverOut, true);
2351
- globalThis.addEventListener("mouseup", this._onPointerUp, true);
2352
- if (this.supportsTouchEvents) {
2353
- this.domElement.addEventListener("touchstart", this._onPointerDown, true);
2354
- this.domElement.addEventListener("touchend", this._onPointerUp, true);
2355
- this.domElement.addEventListener("touchmove", this._onPointerMove, true);
2356
- }
2357
- }
2358
- this.domElement.addEventListener("wheel", this.onWheel, {
2359
- passive: true,
2360
- capture: true
2361
- });
2362
- this._eventsAdded = true;
2363
- }
2364
- /** Unregister event listeners on {@link EventSystem#domElement this.domElement}. */
2365
- _removeEvents() {
2366
- if (!this._eventsAdded || !this.domElement) {
2367
- return;
2368
- }
2369
- EventsTicker.removeTickerListener();
2370
- const style = this.domElement.style;
2371
- if (style) {
2372
- if (globalThis.navigator.msPointerEnabled) {
2373
- style.msContentZooming = "";
2374
- style.msTouchAction = "";
2375
- } else if (this.supportsPointerEvents) {
2376
- style.touchAction = "";
2377
- }
2378
- }
2379
- if (this.supportsPointerEvents) {
2380
- globalThis.document.removeEventListener("pointermove", this._onPointerMove, true);
2381
- this.domElement.removeEventListener("pointerdown", this._onPointerDown, true);
2382
- this.domElement.removeEventListener("pointerleave", this._onPointerOverOut, true);
2383
- this.domElement.removeEventListener("pointerover", this._onPointerOverOut, true);
2384
- globalThis.removeEventListener("pointerup", this._onPointerUp, true);
2385
- } else {
2386
- globalThis.document.removeEventListener("mousemove", this._onPointerMove, true);
2387
- this.domElement.removeEventListener("mousedown", this._onPointerDown, true);
2388
- this.domElement.removeEventListener("mouseout", this._onPointerOverOut, true);
2389
- this.domElement.removeEventListener("mouseover", this._onPointerOverOut, true);
2390
- globalThis.removeEventListener("mouseup", this._onPointerUp, true);
2391
- if (this.supportsTouchEvents) {
2392
- this.domElement.removeEventListener("touchstart", this._onPointerDown, true);
2393
- this.domElement.removeEventListener("touchend", this._onPointerUp, true);
2394
- this.domElement.removeEventListener("touchmove", this._onPointerMove, true);
2395
- }
2396
- }
2397
- this.domElement.removeEventListener("wheel", this.onWheel, true);
2398
- this.domElement = null;
2399
- this._eventsAdded = false;
2400
- }
2401
- /**
2402
- * Maps coordinates from DOM/screen space into PixiJS normalized coordinates.
2403
- * This takes into account the current scale, position, and resolution of the DOM element.
2404
- * @param point - The point to store the mapped coordinates in
2405
- * @param x - The x coordinate in DOM/client space
2406
- * @param y - The y coordinate in DOM/client space
2407
- * @example
2408
- * ```ts
2409
- * // Map mouse coordinates to PixiJS space
2410
- * const point = new Point();
2411
- * app.renderer.events.mapPositionToPoint(
2412
- * point,
2413
- * event.clientX,
2414
- * event.clientY
2415
- * );
2416
- * console.log('Mapped position:', point.x, point.y);
2417
- *
2418
- * // Using with pointer events
2419
- * sprite.on('pointermove', (event) => {
2420
- * // event.global already contains mapped coordinates
2421
- * console.log('Global:', event.global.x, event.global.y);
2422
- *
2423
- * // Map to local coordinates
2424
- * const local = event.getLocalPosition(sprite);
2425
- * console.log('Local:', local.x, local.y);
2426
- * });
2427
- * ```
2428
- * @remarks
2429
- * - Accounts for element scaling and positioning
2430
- * - Adjusts for device pixel ratio/resolution
2431
- */
2432
- mapPositionToPoint(point, x, y) {
2433
- const rect = this.domElement.isConnected ? this.domElement.getBoundingClientRect() : {
2434
- width: this.domElement.width,
2435
- height: this.domElement.height,
2436
- left: 0,
2437
- top: 0
2438
- };
2439
- const resolutionMultiplier = 1 / this.resolution;
2440
- point.x = (x - rect.left) * (this.domElement.width / rect.width) * resolutionMultiplier;
2441
- point.y = (y - rect.top) * (this.domElement.height / rect.height) * resolutionMultiplier;
2442
- }
2443
- /**
2444
- * Ensures that the original event object contains all data that a regular pointer event would have
2445
- * @param event - The original event data from a touch or mouse event
2446
- * @returns An array containing a single normalized pointer event, in the case of a pointer
2447
- * or mouse event, or a multiple normalized pointer events if there are multiple changed touches
2448
- */
2449
- _normalizeToPointerData(event) {
2450
- const normalizedEvents = [];
2451
- if (this.supportsTouchEvents && event instanceof TouchEvent) {
2452
- for (let i = 0, li = event.changedTouches.length; i < li; i++) {
2453
- const touch = event.changedTouches[i];
2454
- if (typeof touch.button === "undefined") touch.button = 0;
2455
- if (typeof touch.buttons === "undefined") touch.buttons = 1;
2456
- if (typeof touch.isPrimary === "undefined") {
2457
- touch.isPrimary = event.touches.length === 1 && event.type === "touchstart";
2458
- }
2459
- if (typeof touch.width === "undefined") touch.width = touch.radiusX || 1;
2460
- if (typeof touch.height === "undefined") touch.height = touch.radiusY || 1;
2461
- if (typeof touch.tiltX === "undefined") touch.tiltX = 0;
2462
- if (typeof touch.tiltY === "undefined") touch.tiltY = 0;
2463
- if (typeof touch.pointerType === "undefined") touch.pointerType = "touch";
2464
- if (typeof touch.pointerId === "undefined") touch.pointerId = touch.identifier || 0;
2465
- if (typeof touch.pressure === "undefined") touch.pressure = touch.force || 0.5;
2466
- if (typeof touch.twist === "undefined") touch.twist = 0;
2467
- if (typeof touch.tangentialPressure === "undefined") touch.tangentialPressure = 0;
2468
- if (typeof touch.layerX === "undefined") touch.layerX = touch.offsetX = touch.clientX;
2469
- if (typeof touch.layerY === "undefined") touch.layerY = touch.offsetY = touch.clientY;
2470
- touch.isNormalized = true;
2471
- touch.type = event.type;
2472
- normalizedEvents.push(touch);
2473
- }
2474
- } else if (!globalThis.MouseEvent || event instanceof MouseEvent && (!this.supportsPointerEvents || !(event instanceof globalThis.PointerEvent))) {
2475
- const tempEvent = event;
2476
- if (typeof tempEvent.isPrimary === "undefined") tempEvent.isPrimary = true;
2477
- if (typeof tempEvent.width === "undefined") tempEvent.width = 1;
2478
- if (typeof tempEvent.height === "undefined") tempEvent.height = 1;
2479
- if (typeof tempEvent.tiltX === "undefined") tempEvent.tiltX = 0;
2480
- if (typeof tempEvent.tiltY === "undefined") tempEvent.tiltY = 0;
2481
- if (typeof tempEvent.pointerType === "undefined") tempEvent.pointerType = "mouse";
2482
- if (typeof tempEvent.pointerId === "undefined") tempEvent.pointerId = MOUSE_POINTER_ID;
2483
- if (typeof tempEvent.pressure === "undefined") tempEvent.pressure = 0.5;
2484
- if (typeof tempEvent.twist === "undefined") tempEvent.twist = 0;
2485
- if (typeof tempEvent.tangentialPressure === "undefined") tempEvent.tangentialPressure = 0;
2486
- tempEvent.isNormalized = true;
2487
- normalizedEvents.push(tempEvent);
2488
- } else {
2489
- normalizedEvents.push(event);
2490
- }
2491
- return normalizedEvents;
2492
- }
2493
- /**
2494
- * Normalizes the native {@link https://w3c.github.io/uievents/#interface-wheelevent WheelEvent}.
2495
- *
2496
- * The returned {@link FederatedWheelEvent} is a shared instance. It will not persist across
2497
- * multiple native wheel events.
2498
- * @param nativeEvent - The native wheel event that occurred on the canvas.
2499
- * @returns A federated wheel event.
2500
- */
2501
- normalizeWheelEvent(nativeEvent) {
2502
- const event = this._rootWheelEvent;
2503
- this._transferMouseData(event, nativeEvent);
2504
- event.deltaX = nativeEvent.deltaX;
2505
- event.deltaY = nativeEvent.deltaY;
2506
- event.deltaZ = nativeEvent.deltaZ;
2507
- event.deltaMode = nativeEvent.deltaMode;
2508
- this.mapPositionToPoint(event.screen, nativeEvent.clientX, nativeEvent.clientY);
2509
- event.global.copyFrom(event.screen);
2510
- event.offset.copyFrom(event.screen);
2511
- event.nativeEvent = nativeEvent;
2512
- event.type = nativeEvent.type;
2513
- return event;
2514
- }
2515
- /**
2516
- * Normalizes the `nativeEvent` into a federateed {@link FederatedPointerEvent}.
2517
- * @param event
2518
- * @param nativeEvent
2519
- */
2520
- _bootstrapEvent(event, nativeEvent) {
2521
- event.originalEvent = null;
2522
- event.nativeEvent = nativeEvent;
2523
- event.pointerId = nativeEvent.pointerId;
2524
- event.width = nativeEvent.width;
2525
- event.height = nativeEvent.height;
2526
- event.isPrimary = nativeEvent.isPrimary;
2527
- event.pointerType = nativeEvent.pointerType;
2528
- event.pressure = nativeEvent.pressure;
2529
- event.tangentialPressure = nativeEvent.tangentialPressure;
2530
- event.tiltX = nativeEvent.tiltX;
2531
- event.tiltY = nativeEvent.tiltY;
2532
- event.twist = nativeEvent.twist;
2533
- this._transferMouseData(event, nativeEvent);
2534
- this.mapPositionToPoint(event.screen, nativeEvent.clientX, nativeEvent.clientY);
2535
- event.global.copyFrom(event.screen);
2536
- event.offset.copyFrom(event.screen);
2537
- event.isTrusted = nativeEvent.isTrusted;
2538
- if (event.type === "pointerleave") {
2539
- event.type = "pointerout";
2540
- }
2541
- if (event.type.startsWith("mouse")) {
2542
- event.type = event.type.replace("mouse", "pointer");
2543
- }
2544
- if (event.type.startsWith("touch")) {
2545
- event.type = TOUCH_TO_POINTER[event.type] || event.type;
2546
- }
2547
- return event;
2548
- }
2549
- /**
2550
- * Transfers base & mouse event data from the `nativeEvent` to the federated event.
2551
- * @param event
2552
- * @param nativeEvent
2553
- */
2554
- _transferMouseData(event, nativeEvent) {
2555
- event.isTrusted = nativeEvent.isTrusted;
2556
- event.srcElement = nativeEvent.srcElement;
2557
- event.timeStamp = performance.now();
2558
- event.type = nativeEvent.type;
2559
- event.altKey = nativeEvent.altKey;
2560
- event.button = nativeEvent.button;
2561
- event.buttons = nativeEvent.buttons;
2562
- event.client.x = nativeEvent.clientX;
2563
- event.client.y = nativeEvent.clientY;
2564
- event.ctrlKey = nativeEvent.ctrlKey;
2565
- event.metaKey = nativeEvent.metaKey;
2566
- event.movement.x = nativeEvent.movementX;
2567
- event.movement.y = nativeEvent.movementY;
2568
- event.page.x = nativeEvent.pageX;
2569
- event.page.y = nativeEvent.pageY;
2570
- event.relatedTarget = null;
2571
- event.shiftKey = nativeEvent.shiftKey;
2572
- }
2573
- };
2574
- _EventSystem.extension = {
2575
- name: "events",
2576
- type: [
2577
- ExtensionType.WebGLSystem,
2578
- ExtensionType.CanvasSystem,
2579
- ExtensionType.WebGPUSystem
2580
- ],
2581
- priority: -1
2582
- };
2583
- _EventSystem.defaultEventFeatures = {
2584
- /** Enables pointer events associated with pointer movement. */
2585
- move: true,
2586
- /** Enables global pointer move events. */
2587
- globalMove: true,
2588
- /** Enables pointer events associated with clicking. */
2589
- click: true,
2590
- /** Enables wheel events. */
2591
- wheel: true
2592
- };
2593
- let EventSystem = _EventSystem;
2594
- const FederatedContainer = {
2595
- onclick: null,
2596
- onmousedown: null,
2597
- onmouseenter: null,
2598
- onmouseleave: null,
2599
- onmousemove: null,
2600
- onglobalmousemove: null,
2601
- onmouseout: null,
2602
- onmouseover: null,
2603
- onmouseup: null,
2604
- onmouseupoutside: null,
2605
- onpointercancel: null,
2606
- onpointerdown: null,
2607
- onpointerenter: null,
2608
- onpointerleave: null,
2609
- onpointermove: null,
2610
- onglobalpointermove: null,
2611
- onpointerout: null,
2612
- onpointerover: null,
2613
- onpointertap: null,
2614
- onpointerup: null,
2615
- onpointerupoutside: null,
2616
- onrightclick: null,
2617
- onrightdown: null,
2618
- onrightup: null,
2619
- onrightupoutside: null,
2620
- ontap: null,
2621
- ontouchcancel: null,
2622
- ontouchend: null,
2623
- ontouchendoutside: null,
2624
- ontouchmove: null,
2625
- onglobaltouchmove: null,
2626
- ontouchstart: null,
2627
- onwheel: null,
2628
- get interactive() {
2629
- return this.eventMode === "dynamic" || this.eventMode === "static";
2630
- },
2631
- set interactive(value) {
2632
- this.eventMode = value ? "static" : "passive";
2633
- },
2634
- _internalEventMode: void 0,
2635
- get eventMode() {
2636
- return this._internalEventMode ?? EventSystem.defaultEventMode;
2637
- },
2638
- set eventMode(value) {
2639
- this._internalEventMode = value;
2640
- },
2641
- isInteractive() {
2642
- return this.eventMode === "static" || this.eventMode === "dynamic";
2643
- },
2644
- interactiveChildren: true,
2645
- hitArea: null,
2646
- addEventListener(type, listener, options) {
2647
- const capture = typeof options === "boolean" && options || typeof options === "object" && options.capture;
2648
- const signal = typeof options === "object" ? options.signal : void 0;
2649
- const once = typeof options === "object" ? options.once === true : false;
2650
- const context = typeof listener === "function" ? void 0 : listener;
2651
- type = capture ? `${type}capture` : type;
2652
- const listenerFn = typeof listener === "function" ? listener : listener.handleEvent;
2653
- const emitter = this;
2654
- if (signal) {
2655
- signal.addEventListener("abort", () => {
2656
- emitter.off(type, listenerFn, context);
2657
- });
2658
- }
2659
- if (once) {
2660
- emitter.once(type, listenerFn, context);
2661
- } else {
2662
- emitter.on(type, listenerFn, context);
2663
- }
2664
- },
2665
- removeEventListener(type, listener, options) {
2666
- const capture = typeof options === "boolean" && options || typeof options === "object" && options.capture;
2667
- const context = typeof listener === "function" ? void 0 : listener;
2668
- type = capture ? `${type}capture` : type;
2669
- listener = typeof listener === "function" ? listener : listener.handleEvent;
2670
- this.off(type, listener, context);
2671
- },
2672
- dispatchEvent(e) {
2673
- if (!(e instanceof FederatedEvent)) {
2674
- throw new Error("Container cannot propagate events outside of the Federated Events API");
2675
- }
2676
- e.defaultPrevented = false;
2677
- e.path = null;
2678
- e.target = this;
2679
- e.manager.dispatchEvent(e);
2680
- return !e.defaultPrevented;
2681
- }
2682
- };
2683
- extensions.add(AccessibilitySystem);
2684
- extensions.mixin(Container, accessibilityTarget);
2685
- extensions.add(EventSystem);
2686
- extensions.mixin(Container, FederatedContainer);
2687
- //# sourceMappingURL=browserAll-TZZf5l7B.js.map