import { PerformanceViewerCollector } from "babylonjs/Misc/PerformanceViewer/performanceViewerCollector" ; import { Observable } from "babylonjs/Misc/observable" ; import * as React from "react" ; import { useEffect , useRef } from "react" ; import { CanvasGraphService } from "./canvasGraphService" ; import { IPerfLayoutSize , IVisibleRangeChangedObservableProps } from "./graphSupportingTypes" ; import { IPerfMetadata } from "babylonjs/Misc/interfaces/iPerfViewer" ; import { Scene } from "babylonjs/scene" ; interface ICanvasGraphComponentProps { id : string ; scene : Scene ; collector : PerformanceViewerCollector ; layoutObservable ? : Observable < IPerfLayoutSize > ; returnToPlayheadObservable ? : Observable < void > ; onVisibleRangeChangedObservable ? : Observable < IVisibleRangeChangedObservableProps > ; } export const CanvasGraphComponent = ( props ) => { const { id , collector , scene , layoutObservable , returnToPlayheadObservable , onVisibleRangeChangedObservable } = props ; const canvasRef = useRef ( null ) ; useEffect ( ( ) => { if ( ! canvasRef . current ) { return ; } let cs ; try { cs = new CanvasGraphService ( canvasRef . current , { datasets : collector . datasets , onVisibleRangeChangedObservable } ) ; } catch ( error ) { console . error ( error ) ; return ; } const layoutUpdated = ( newSize ) => { if ( ! canvasRef . current ) { return ; } const { left , top } = canvasRef . current . getBoundingClientRect ( ) ; newSize . width = newSize . width - left ; newSize . height = newSize . height - top ; cs ?. resize ( newSize ) ; } ; const dataUpdated = ( ) => { cs ?. update ( ) ; } ; const metaUpdated = ( meta ) => { if ( ! cs ) { return ; } cs . metadata = meta ; cs . update ( ) ; } ; const resetDataPosition = ( ) => { cs ?. resetDataPosition ( ) ; } ; scene . onAfterRenderObservable . add ( dataUpdated ) ; collector . metadataObservable . add ( metaUpdated ) ; layoutObservable ?. add ( layoutUpdated ) ; returnToPlayheadObservable ?. add ( resetDataPosition ) ; return ( ) => { cs ?. destroy ( ) ; layoutObservable ?. removeCallback ( layoutUpdated ) ; scene . onAfterRenderObservable . removeCallback ( dataUpdated ) ; collector . metadataObservable . removeCallback ( metaUpdated ) ; } ; } , [ canvasRef ] ) ; return < canvas id = { id } ref = { canvasRef } > < /canvas>; } ;