index.d.ts 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. /// <reference path="./global.d.ts" />
  2. import type { AbstractRenderer } from '@pixi/core';
  3. import type { DisplayObject } from '@pixi/display';
  4. import type { ExtensionMetadata } from '@pixi/core';
  5. import type { Rectangle } from '@pixi/math';
  6. import type { Renderer } from '@pixi/core';
  7. /**
  8. * The Accessibility manager recreates the ability to tab and have content read by screen readers.
  9. * This is very important as it can possibly help people with disabilities access PixiJS content.
  10. *
  11. * A DisplayObject can be made accessible just like it can be made interactive. This manager will map the
  12. * events as if the mouse was being used, minimizing the effort required to implement.
  13. *
  14. * An instance of this class is automatically created by default, and can be found at `renderer.plugins.accessibility`
  15. * @class
  16. * @memberof PIXI
  17. */
  18. export declare class AccessibilityManager {
  19. /** @ignore */
  20. static extension: ExtensionMetadata;
  21. /** Setting this to true will visually show the divs. */
  22. debug: boolean;
  23. /**
  24. * The renderer this accessibility manager works for.
  25. * @type {PIXI.CanvasRenderer|PIXI.Renderer}
  26. */
  27. renderer: AbstractRenderer | Renderer;
  28. /** Internal variable, see isActive getter. */
  29. private _isActive;
  30. /** Internal variable, see isMobileAccessibility getter. */
  31. private _isMobileAccessibility;
  32. /** Button element for handling touch hooks. */
  33. private _hookDiv;
  34. /** This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. */
  35. private div;
  36. /** A simple pool for storing divs. */
  37. private pool;
  38. /** This is a tick used to check if an object is no longer being rendered. */
  39. private renderId;
  40. /** The array of currently active accessible items. */
  41. private children;
  42. /** Count to throttle div updates on android devices. */
  43. private androidUpdateCount;
  44. /** The frequency to update the div elements. */
  45. private androidUpdateFrequency;
  46. /**
  47. * @param {PIXI.CanvasRenderer|PIXI.Renderer} renderer - A reference to the current renderer
  48. */
  49. constructor(renderer: AbstractRenderer | Renderer);
  50. /**
  51. * Value of `true` if accessibility is currently active and accessibility layers are showing.
  52. * @member {boolean}
  53. * @readonly
  54. */
  55. get isActive(): boolean;
  56. /**
  57. * Value of `true` if accessibility is enabled for touch devices.
  58. * @member {boolean}
  59. * @readonly
  60. */
  61. get isMobileAccessibility(): boolean;
  62. /**
  63. * Creates the touch hooks.
  64. * @private
  65. */
  66. private createTouchHook;
  67. /**
  68. * Destroys the touch hooks.
  69. * @private
  70. */
  71. private destroyTouchHook;
  72. /**
  73. * Activating will cause the Accessibility layer to be shown.
  74. * This is called when a user presses the tab key.
  75. * @private
  76. */
  77. private activate;
  78. /**
  79. * Deactivating will cause the Accessibility layer to be hidden.
  80. * This is called when a user moves the mouse.
  81. * @private
  82. */
  83. private deactivate;
  84. /**
  85. * This recursive function will run through the scene graph and add any new accessible objects to the DOM layer.
  86. * @private
  87. * @param {PIXI.Container} displayObject - The DisplayObject to check.
  88. */
  89. private updateAccessibleObjects;
  90. /**
  91. * Before each render this function will ensure that all divs are mapped correctly to their DisplayObjects.
  92. * @private
  93. */
  94. private update;
  95. /**
  96. * private function that will visually add the information to the
  97. * accessability div
  98. * @param {HTMLElement} div -
  99. */
  100. updateDebugHTML(div: IAccessibleHTMLElement): void;
  101. /**
  102. * Adjust the hit area based on the bounds of a display object
  103. * @param {PIXI.Rectangle} hitArea - Bounds of the child
  104. */
  105. capHitArea(hitArea: Rectangle): void;
  106. /**
  107. * Adds a DisplayObject to the accessibility manager
  108. * @private
  109. * @param {PIXI.DisplayObject} displayObject - The child to make accessible.
  110. */
  111. private addChild;
  112. /**
  113. * Maps the div button press to pixi's InteractionManager (click)
  114. * @private
  115. * @param {MouseEvent} e - The click event.
  116. */
  117. private _onClick;
  118. /**
  119. * Maps the div focus events to pixi's InteractionManager (mouseover)
  120. * @private
  121. * @param {FocusEvent} e - The focus event.
  122. */
  123. private _onFocus;
  124. /**
  125. * Maps the div focus events to pixi's InteractionManager (mouseout)
  126. * @private
  127. * @param {FocusEvent} e - The focusout event.
  128. */
  129. private _onFocusOut;
  130. /**
  131. * Is called when a key is pressed
  132. * @private
  133. * @param {KeyboardEvent} e - The keydown event.
  134. */
  135. private _onKeyDown;
  136. /**
  137. * Is called when the mouse moves across the renderer element
  138. * @private
  139. * @param {MouseEvent} e - The mouse event.
  140. */
  141. private _onMouseMove;
  142. /** Destroys the accessibility manager */
  143. destroy(): void;
  144. }
  145. /**
  146. * Default property values of accessible objects
  147. * used by {@link PIXI.AccessibilityManager}.
  148. * @private
  149. * @function accessibleTarget
  150. * @memberof PIXI
  151. * @type {object}
  152. * @example
  153. * function MyObject() {}
  154. *
  155. * Object.assign(
  156. * MyObject.prototype,
  157. * PIXI.accessibleTarget
  158. * );
  159. */
  160. export declare const accessibleTarget: IAccessibleTarget;
  161. export declare interface IAccessibleHTMLElement extends HTMLElement {
  162. type?: string;
  163. displayObject?: DisplayObject;
  164. }
  165. export declare interface IAccessibleTarget {
  166. accessible: boolean;
  167. accessibleTitle: string;
  168. accessibleHint: string;
  169. tabIndex: number;
  170. _accessibleActive: boolean;
  171. _accessibleDiv: IAccessibleHTMLElement;
  172. accessibleType: string;
  173. accessiblePointerEvents: PointerEvents;
  174. accessibleChildren: boolean;
  175. renderId: number;
  176. }
  177. export declare type PointerEvents = 'auto' | 'none' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all' | 'inherit';
  178. export { }