31 lines
950 B
TypeScript
31 lines
950 B
TypeScript
import { useEffect, useRef } from "react";
|
|
import { observer } from "mobx-react-lite";
|
|
import { state } from "../state";
|
|
import { chartRef } from "./chartRef";
|
|
|
|
export const RenderInfoView = observer(function () {
|
|
const info = state.renderInfo;
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const el = containerRef.current;
|
|
if (!el)
|
|
return;
|
|
el.appendChild(chartRef.current);
|
|
return () => { el.removeChild(chartRef.current); };
|
|
}, []);
|
|
|
|
return <>
|
|
<div className="chart" ref={containerRef} />
|
|
{info != null && (
|
|
<div className="metrics">
|
|
<span>draw: {info.calls}</span>
|
|
<span>tri: {info.triangles}</span>
|
|
<span>shaders: {info.shaders}</span>
|
|
<span>geometries: {info.geometries}</span>
|
|
<span>textures: {info.textures}</span>
|
|
</div>
|
|
)}
|
|
</>;
|
|
});
|