interfaces.d.ts 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  1. import type RBush from 'rbush';
  2. import type { GlobalRuntime } from '..';
  3. import type { ICamera } from '../camera';
  4. import type { RBushNodeAABB } from '../components';
  5. import type { DisplayObject } from '../display-objects';
  6. import type { ContextService, EventService, RenderingContext, RenderingPlugin, RenderingService } from '../services';
  7. import type { AABB, PointLike, Rectangle } from '../shapes';
  8. import type { BaseStyleProps, CanvasConfig, InteractivePointerEvent, Shape, TypeEasingFunction } from '../types';
  9. import type { CustomElementRegistry } from './CustomElementRegistry';
  10. import type { FederatedEvent } from './FederatedEvent';
  11. /**
  12. * built-in events for element
  13. * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationEvent
  14. *
  15. * TODO: use MutationObserver instead
  16. * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
  17. */
  18. export declare enum ElementEvent {
  19. REPARENT = "reparent",
  20. DESTROY = "destroy",
  21. /**
  22. * @see https://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified
  23. */
  24. ATTR_MODIFIED = "DOMAttrModified",
  25. /**
  26. * it has been inserted
  27. * @see https://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted
  28. */
  29. INSERTED = "DOMNodeInserted",
  30. /**
  31. * it is being removed
  32. * @see https://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved
  33. */
  34. REMOVED = "removed",
  35. /**
  36. * @see https://www.w3.org/TR/DOM-Level-3-Events/#domnodeinsertedintodocument
  37. */
  38. MOUNTED = "DOMNodeInsertedIntoDocument",
  39. /**
  40. * @see https://www.w3.org/TR/DOM-Level-3-Events/#domnoderemovedfromdocument
  41. */
  42. UNMOUNTED = "DOMNodeRemovedFromDocument",
  43. BOUNDS_CHANGED = "bounds-changed",
  44. CULLED = "culled"
  45. }
  46. export interface IEventTarget {
  47. addEventListener: (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void;
  48. removeEventListener: (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void;
  49. dispatchEvent: <T extends FederatedEvent>(e: T, skipPropagate?: boolean) => boolean;
  50. }
  51. export interface INode extends IEventTarget {
  52. shadow: boolean;
  53. /**
  54. * Returns node's node document's document base URL.
  55. */
  56. readonly baseURI: string;
  57. /**
  58. * Returns the children.
  59. */
  60. readonly childNodes: IChildNode[];
  61. /**
  62. * Returns the first child.
  63. */
  64. readonly firstChild: IChildNode | null;
  65. /**
  66. * Returns true if node is connected and false otherwise.
  67. */
  68. isConnected: boolean;
  69. /**
  70. * Returns the last child.
  71. */
  72. readonly lastChild: IChildNode | null;
  73. /**
  74. * Returns the next sibling.
  75. */
  76. readonly nextSibling: IChildNode | null;
  77. /**
  78. * Returns a string appropriate for the type of node.
  79. */
  80. readonly nodeName: string;
  81. /**
  82. * Returns the type of node.
  83. */
  84. readonly nodeType: number;
  85. nodeValue: string | null;
  86. /**
  87. * Returns the node document. Returns null for documents.
  88. */
  89. ownerDocument: IDocument | null;
  90. /**
  91. * Returns the parent element.
  92. */
  93. readonly parentElement: IElement | null;
  94. /**
  95. * Returns the parent.
  96. */
  97. parentNode: (INode & IParentNode) | null;
  98. /**
  99. * Returns the previous sibling.
  100. */
  101. readonly previousSibling: IChildNode | null;
  102. textContent: string | null;
  103. appendChild: <T extends INode>(newChild: T, index?: number) => T;
  104. /**
  105. * Returns a copy of node. If deep is true, the copy also includes the node's descendants.
  106. */
  107. cloneNode: (deep?: boolean) => INode;
  108. /**
  109. * Returns a bitmask indicating the position of other relative to node.
  110. */
  111. compareDocumentPosition: (other: INode) => number;
  112. /**
  113. * Returns true if other is an inclusive descendant of node, and false otherwise.
  114. */
  115. contains: (other: INode | null) => boolean;
  116. /**
  117. * Returns node's root.
  118. */
  119. getRootNode: (options?: GetRootNodeOptions) => INode;
  120. /**
  121. * Returns node's ancestor.
  122. */
  123. getAncestor: (n: number) => INode | null;
  124. /**
  125. * Traverse in sub tree.
  126. */
  127. forEach: (callback: (o: INode) => void | boolean, assigned?: boolean) => void;
  128. /**
  129. * Returns whether node has children.
  130. */
  131. hasChildNodes: () => boolean;
  132. insertBefore: <T extends INode>(newChild: T, refChild: INode | null) => T;
  133. isDefaultNamespace: (namespace: string | null) => boolean;
  134. /**
  135. * Returns whether node and otherNode have the same properties.
  136. */
  137. isEqualNode: (otherNode: INode | null) => boolean;
  138. isSameNode: (otherNode: INode | null) => boolean;
  139. lookupNamespaceURI: (prefix: string | null) => string | null;
  140. lookupPrefix: (namespace: string | null) => string | null;
  141. /**
  142. * Removes empty exclusive Text nodes and concatenates the data of remaining contiguous exclusive Text nodes into the first of their nodes.
  143. */
  144. normalize: () => void;
  145. removeChild: <T extends INode>(oldChild: T) => T;
  146. replaceChild: <T extends INode>(newChild: INode, oldChild: T) => T;
  147. /**
  148. * Destroy itself.
  149. */
  150. destroy: () => void;
  151. }
  152. export interface IParentNode {
  153. readonly childElementCount: number;
  154. /**
  155. * Returns the child elements.
  156. */
  157. readonly children: IElement[];
  158. /**
  159. * Returns the first child that is an element, and null otherwise.
  160. */
  161. readonly firstElementChild: IElement | null;
  162. /**
  163. * Returns the last child that is an element, and null otherwise.
  164. */
  165. readonly lastElementChild: IElement | null;
  166. /**
  167. * Inserts nodes after the last child of node, while replacing strings in nodes with equivalent Text nodes.
  168. *
  169. * Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.
  170. */
  171. append: (...nodes: INode[]) => void;
  172. /**
  173. * Inserts nodes before the first child of node, while replacing strings in nodes with equivalent Text nodes.
  174. *
  175. * Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.
  176. */
  177. prepend: (...nodes: INode[]) => void;
  178. /**
  179. * Returns the first element that is a descendant of node that matches selectors.
  180. */
  181. querySelector: <E extends IElement = IElement>(selectors: string) => E | null;
  182. /**
  183. * Returns all element descendants of node that match selectors.
  184. */
  185. querySelectorAll: <E extends IElement = IElement>(selectors: string) => E[];
  186. /**
  187. * Similar to querySelector, use custom filter instead of selectors.
  188. */
  189. find: <E extends IElement = IElement>(filter: (node: E) => boolean) => E | null;
  190. /**
  191. * Similar to querySelectorAll, use custom filter instead of selectors.
  192. */
  193. findAll: <E extends IElement = IElement>(filter: (node: E) => boolean) => E[];
  194. }
  195. export interface IChildNode extends INode {
  196. /**
  197. * Inserts nodes just after node, while replacing strings in nodes with equivalent Text nodes.
  198. *
  199. * Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.
  200. */
  201. after: (...nodes: INode[]) => void;
  202. /**
  203. * Inserts nodes just before node, while replacing strings in nodes with equivalent Text nodes.
  204. *
  205. * Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.
  206. */
  207. before: (...nodes: INode[]) => void;
  208. /**
  209. * Removes node.
  210. */
  211. remove: () => void;
  212. /**
  213. * Replaces node with nodes, while replacing strings in nodes with equivalent Text nodes.
  214. *
  215. * Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.
  216. */
  217. replaceWith: (...nodes: INode[]) => void;
  218. }
  219. export interface DisplayObjectConfig<StyleProps> {
  220. /**
  221. * element's identifier, must be unique in a document.
  222. * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/id
  223. */
  224. id?: string;
  225. name?: string;
  226. /**
  227. * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/className
  228. */
  229. class?: string;
  230. className?: string;
  231. /**
  232. * all styles properties, not read-only
  233. * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
  234. */
  235. style?: StyleProps;
  236. initialParsedStyle?: any;
  237. /**
  238. * compatible with G 3.0
  239. * @alias style
  240. * @deprecated
  241. */
  242. attrs?: StyleProps;
  243. type?: Shape | string;
  244. /**
  245. * @deprecated use `style.zIndex` instead
  246. */
  247. zIndex?: number;
  248. /**
  249. * @deprecated use `style.visibility = 'visible'` instead
  250. */
  251. visible?: boolean;
  252. /**
  253. * compatible with G 3.0
  254. * @alias interactive
  255. * @deprecated
  256. */
  257. capture?: boolean;
  258. /**
  259. * enable interaction events for the DisplayObject
  260. * @deprecated use `style.pointerEvents = 'auto'` instead
  261. */
  262. interactive?: boolean;
  263. }
  264. export interface IElement<StyleProps = any, ParsedStyleProps = any> extends INode, IChildNode, IParentNode {
  265. /**
  266. * Returns the value of element's id content attribute. Can be set to change it.
  267. */
  268. id: string;
  269. /**
  270. * Returns the qualified name.
  271. */
  272. tagName: string;
  273. name: string;
  274. /**
  275. * Returns the value of element's class content attribute. Can be set to change it.
  276. */
  277. className: string;
  278. classList: string[];
  279. /**
  280. * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes
  281. */
  282. attributes: StyleProps;
  283. /**
  284. * compatible with `style`
  285. * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
  286. */
  287. style: StyleProps & ICSSStyleDeclaration<StyleProps>;
  288. parsedStyle: ParsedStyleProps;
  289. getElementById: <E extends IElement = IElement>(id: string) => E | null;
  290. getElementsByName: <E extends IElement = IElement>(name: string) => E[];
  291. getElementsByClassName: <E extends IElement = IElement>(className: string) => E[];
  292. getElementsByTagName: <E extends IElement = IElement>(tagName: string) => E[];
  293. scrollLeft: number;
  294. scrollTop: number;
  295. clientLeft: number;
  296. clientTop: number;
  297. getGeometryBounds(): AABB;
  298. getRenderBounds(): AABB;
  299. getBounds(): AABB;
  300. getLocalBounds(): AABB;
  301. getBoundingClientRect(): Rectangle;
  302. getClientRects(): Rectangle[];
  303. /**
  304. * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
  305. */
  306. setAttribute: <Key extends keyof StyleProps>(attributeName: Key, value: StyleProps[Key], force?: boolean) => void;
  307. /**
  308. * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
  309. */
  310. getAttribute: (attributeName: keyof StyleProps) => StyleProps[keyof StyleProps] | undefined;
  311. /**
  312. * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute
  313. */
  314. removeAttribute: (attributeName: keyof StyleProps) => void;
  315. hasAttribute: (qualifiedName: string) => boolean;
  316. }
  317. export interface IAnimationTimeline {
  318. currentTime: number | null;
  319. destroy: () => void;
  320. play: (target: IElement, keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined) => IAnimation;
  321. restart: () => boolean;
  322. getAnimations: () => IAnimation[];
  323. }
  324. export interface IAnimation {
  325. effect: IKeyframeEffect;
  326. timeline: IAnimationTimeline;
  327. id: string;
  328. pending: boolean;
  329. playState: AnimationPlayState;
  330. ready: Promise<this>;
  331. finished: Promise<this>;
  332. onfinish: ((this: this, ev: AnimationPlaybackEvent) => any) | null;
  333. oncancel: ((this: this, ev: AnimationPlaybackEvent) => any) | null;
  334. onframe: ((this: this, ev: AnimationPlaybackEvent) => any) | null;
  335. currentTime: number;
  336. startTime: number;
  337. playbackRate: number;
  338. totalDuration: number;
  339. play: () => void;
  340. pause: () => void;
  341. finish: () => void;
  342. cancel: () => void;
  343. reverse: () => void;
  344. updatePlaybackRate: (playbackRate: number) => void;
  345. tick: (timelineTime: number, isAnimationFrame: boolean) => void;
  346. }
  347. export interface IAnimationEffectTiming extends EffectTiming {
  348. easingFunction: TypeEasingFunction;
  349. }
  350. export interface IKeyframeEffect {
  351. composite: CompositeOperation;
  352. iterationComposite: IterationCompositeOperation;
  353. target: IElement | null;
  354. animation: IAnimation | null;
  355. timing: IAnimationEffectTiming;
  356. normalizedKeyframes: ComputedKeyframe[];
  357. applyInterpolations: () => void;
  358. update: (localTime: number | null) => boolean;
  359. getKeyframes: () => ComputedKeyframe[];
  360. setKeyframes: (keyframes: Keyframe[] | PropertyIndexedKeyframes | null) => void;
  361. getComputedTiming: () => ComputedEffectTiming;
  362. getTiming: () => EffectTiming;
  363. updateTiming: (timing?: OptionalEffectTiming) => void;
  364. }
  365. export interface IDocument extends INode, IParentNode {
  366. /**
  367. * Returns the Window object of the active document.
  368. */
  369. readonly defaultView: ICanvas | null;
  370. /**
  371. * Gets a reference to the root node of the document.
  372. */
  373. readonly documentElement: IElement;
  374. readonly ownerDocument: null;
  375. readonly timeline: IAnimationTimeline;
  376. /**
  377. * Creates an instance of the element for the specified tag.
  378. */
  379. createElement: <T extends DisplayObject<StyleProps>, StyleProps extends BaseStyleProps>(tagName: string, options: DisplayObjectConfig<StyleProps>) => T;
  380. elementFromPoint: (x: number, y: number) => Promise<DisplayObject>;
  381. elementsFromPoint: (x: number, y: number) => Promise<DisplayObject[]>;
  382. elementsFromBBox: (minX: number, minY: number, maxX: number, maxY: number) => DisplayObject[];
  383. }
  384. /**
  385. * @see https://developer.mozilla.org/zh-CN/docs/Web/API/CSSStyleDeclaration
  386. */
  387. export interface ICSSStyleDeclaration<StyleProps> {
  388. setProperty: <Key extends keyof StyleProps>(propertyName: Key, value: StyleProps[Key], priority?: string) => void;
  389. getPropertyValue: (propertyName: keyof StyleProps) => StyleProps[keyof StyleProps] | undefined;
  390. removeProperty: (propertyName: keyof StyleProps) => void;
  391. item: (index: number) => string;
  392. }
  393. export interface CanvasContext {
  394. config: Partial<CanvasConfig>;
  395. camera: ICamera;
  396. /**
  397. * ContextServiceContribution
  398. */
  399. ContextService: new (context: GlobalRuntime & CanvasContext) => ContextService<unknown>;
  400. contextService: ContextService<unknown>;
  401. renderingService: RenderingService;
  402. eventService: EventService;
  403. rBushRoot: RBush<RBushNodeAABB>;
  404. renderingContext: RenderingContext;
  405. renderingPlugins: RenderingPlugin[];
  406. }
  407. export interface ICanvas extends IEventTarget {
  408. document: IDocument;
  409. customElements: CustomElementRegistry;
  410. devicePixelRatio: number;
  411. requestAnimationFrame: (callback: FrameRequestCallback) => number;
  412. cancelAnimationFrame: (handle: number) => void;
  413. supportsTouchEvents: boolean;
  414. supportsPointerEvents: boolean;
  415. isTouchEvent: (event: InteractivePointerEvent) => event is TouchEvent;
  416. isMouseEvent: (event: InteractivePointerEvent) => event is MouseEvent;
  417. render: () => void;
  418. destroy: (destroyScenegraph?: boolean) => void;
  419. resize: (width: number, height: number) => void;
  420. context: CanvasContext;
  421. mountChildren: (parent: INode) => void;
  422. unmountChildren: (parent: INode) => void;
  423. getConfig: () => Partial<CanvasConfig>;
  424. getCamera: () => ICamera;
  425. getContextService: () => ContextService<unknown>;
  426. getRenderingService: () => RenderingService;
  427. getEventService: () => EventService;
  428. client2Viewport: (client: PointLike) => PointLike;
  429. viewport2Client: (viewport: PointLike) => PointLike;
  430. canvas2Viewport: (canvas: PointLike) => PointLike;
  431. viewport2Canvas: (viewport: PointLike) => PointLike;
  432. }
  433. interface EventListener {
  434. (evt: FederatedEvent): void;
  435. }
  436. interface EventListenerObject {
  437. handleEvent(object: FederatedEvent): void;
  438. }
  439. export type EventListenerOrEventListenerObject = EventListener | EventListenerObject;
  440. export {};
  441. //# sourceMappingURL=interfaces.d.ts.map