canvasScheduler.tsx 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. import {useEffect, useMemo} from 'react';
  2. import {mat3} from 'gl-matrix';
  3. import {Rect} from './gl/utils';
  4. import {FlamegraphFrame} from './flamegraphFrame';
  5. import {SpanChartNode} from './spanChart';
  6. type DrawFn = () => void;
  7. type ArgumentTypes<F> = F extends (...args: infer A) => any ? A : never;
  8. export interface FlamegraphEvents {
  9. ['highlight frame']: (
  10. frame: FlamegraphFrame[] | null,
  11. mode: 'hover' | 'selected'
  12. ) => void;
  13. ['highlight span']: (frame: SpanChartNode[] | null, mode: 'hover' | 'selected') => void;
  14. ['reset zoom']: () => void;
  15. ['set config view']: (configView: Rect) => void;
  16. ['show in table view']: (frame: FlamegraphFrame) => void;
  17. ['transform config view']: (transform: mat3) => void;
  18. ['zoom at frame']: (frame: FlamegraphFrame, strategy: 'min' | 'exact') => void;
  19. ['zoom at span']: (frame: SpanChartNode, strategy: 'min' | 'exact') => void;
  20. }
  21. type EventStore = {[K in keyof FlamegraphEvents]: Set<FlamegraphEvents[K]>};
  22. export class CanvasScheduler {
  23. beforeFrameCallbacks: Set<DrawFn> = new Set();
  24. afterFrameCallbacks: Set<DrawFn> = new Set();
  25. onDisposeCallbacks: Set<() => void> = new Set();
  26. requestAnimationFrame: number | null = null;
  27. events: EventStore = {
  28. ['show in table view']: new Set<FlamegraphEvents['show in table view']>(),
  29. ['reset zoom']: new Set<FlamegraphEvents['reset zoom']>(),
  30. ['highlight frame']: new Set<FlamegraphEvents['highlight frame']>(),
  31. ['highlight span']: new Set<FlamegraphEvents['highlight span']>(),
  32. ['set config view']: new Set<FlamegraphEvents['set config view']>(),
  33. ['transform config view']: new Set<FlamegraphEvents['transform config view']>(),
  34. ['zoom at frame']: new Set<FlamegraphEvents['zoom at frame']>(),
  35. ['zoom at span']: new Set<FlamegraphEvents['zoom at span']>(),
  36. };
  37. onDispose(cb: () => void): void {
  38. if (this.onDisposeCallbacks.has(cb)) {
  39. return;
  40. }
  41. this.onDisposeCallbacks.add(cb);
  42. }
  43. on<K extends keyof FlamegraphEvents>(eventName: K, cb: FlamegraphEvents[K]): void {
  44. const set = this.events[eventName] as unknown as Set<FlamegraphEvents[K]>;
  45. if (set.has(cb)) {
  46. return;
  47. }
  48. set.add(cb);
  49. }
  50. off<K extends keyof FlamegraphEvents>(eventName: K, cb: FlamegraphEvents[K]): void {
  51. const set = this.events[eventName] as unknown as Set<FlamegraphEvents[K]>;
  52. if (set.has(cb)) {
  53. set.delete(cb);
  54. }
  55. }
  56. dispatch<K extends keyof FlamegraphEvents>(
  57. event: K,
  58. ...args: ArgumentTypes<FlamegraphEvents[K]>
  59. ): void {
  60. for (const handler of this.events[event]) {
  61. // @ts-ignore
  62. handler(...args);
  63. }
  64. }
  65. private registerCallback(cb: DrawFn, pool: Set<DrawFn>) {
  66. if (pool.has(cb)) {
  67. return;
  68. }
  69. pool.add(cb);
  70. }
  71. private unregisterCallback(cb: DrawFn, pool: Set<DrawFn>) {
  72. if (pool.has(cb)) {
  73. pool.delete(cb);
  74. }
  75. }
  76. registerBeforeFrameCallback(cb: DrawFn): void {
  77. this.registerCallback(cb, this.beforeFrameCallbacks);
  78. }
  79. unregisterBeforeFrameCallback(cb: DrawFn): void {
  80. this.unregisterCallback(cb, this.beforeFrameCallbacks);
  81. }
  82. registerAfterFrameCallback(cb: DrawFn): void {
  83. this.registerCallback(cb, this.afterFrameCallbacks);
  84. }
  85. unregisterAfterFrameCallback(cb: DrawFn): void {
  86. this.unregisterCallback(cb, this.afterFrameCallbacks);
  87. }
  88. dispose(): void {
  89. for (const cb of this.onDisposeCallbacks) {
  90. this.onDisposeCallbacks.delete(cb);
  91. cb();
  92. }
  93. for (const type in this.events) {
  94. this.events[type].clear();
  95. }
  96. }
  97. drawSync(): void {
  98. for (const cb of this.beforeFrameCallbacks) {
  99. cb();
  100. }
  101. for (const cb of this.afterFrameCallbacks) {
  102. cb();
  103. }
  104. }
  105. draw(): void {
  106. if (this.requestAnimationFrame) {
  107. window.cancelAnimationFrame(this.requestAnimationFrame);
  108. }
  109. this.requestAnimationFrame = window.requestAnimationFrame(() => {
  110. for (const cb of this.beforeFrameCallbacks) {
  111. cb();
  112. }
  113. for (const cb of this.afterFrameCallbacks) {
  114. cb();
  115. }
  116. this.requestAnimationFrame = null;
  117. });
  118. }
  119. }
  120. export class CanvasPoolManager {
  121. schedulers: Set<CanvasScheduler> = new Set();
  122. registerScheduler(scheduler: CanvasScheduler): void {
  123. if (this.schedulers.has(scheduler)) {
  124. return;
  125. }
  126. this.schedulers.add(scheduler);
  127. }
  128. dispatch<K extends keyof FlamegraphEvents>(
  129. event: K,
  130. args: ArgumentTypes<FlamegraphEvents[K]>
  131. ): void {
  132. for (const scheduler of this.schedulers) {
  133. scheduler.dispatch(event, ...args);
  134. }
  135. }
  136. unregisterScheduler(scheduler: CanvasScheduler): void {
  137. if (this.schedulers.has(scheduler)) {
  138. scheduler.dispose();
  139. this.schedulers.delete(scheduler);
  140. }
  141. }
  142. drawSync(): void {
  143. for (const scheduler of this.schedulers) {
  144. scheduler.drawSync();
  145. }
  146. }
  147. draw(): void {
  148. for (const scheduler of this.schedulers) {
  149. scheduler.draw();
  150. }
  151. }
  152. }
  153. /**
  154. * Creates a new instance of CanvasScheduler and registers it
  155. * with the provided CanvasPoolManager.
  156. * @param canvasPoolManager
  157. * @returns
  158. */
  159. export function useCanvasScheduler(canvasPoolManager: CanvasPoolManager) {
  160. const scheduler = useMemo(() => new CanvasScheduler(), []);
  161. useEffect(() => {
  162. canvasPoolManager.registerScheduler(scheduler);
  163. return () => canvasPoolManager.unregisterScheduler(scheduler);
  164. }, [canvasPoolManager, scheduler]);
  165. return scheduler;
  166. }