diff --git a/src/core/StatsGl.tsx b/src/core/StatsGl.tsx index 0c99b2f00..296e8e3cc 100644 --- a/src/core/StatsGl.tsx +++ b/src/core/StatsGl.tsx @@ -1,37 +1,55 @@ -import * as React from 'react' +import { ForwardRefComponent } from '../helpers/ts-utils' import { addAfterEffect, useThree } from '@react-three/fiber' +import * as React from 'react' + import Stats from 'stats-gl' type Props = Partial & { - showPanel?: number - className?: string - parent?: React.RefObject + id?: string + clearStatsGlStyle?: boolean + showPanel?: number + className?: string + parent?: React.RefObject + ref?: React.RefObject } -export function StatsGl({ className, parent, ...props }: Props) { - const gl: any = useThree((state) => state.gl) - - const stats = React.useMemo(() => { - const stats = new Stats({ - ...props, - }) - stats.init(gl) - return stats - }, [gl]) - - React.useEffect(() => { - if (stats) { - const node = (parent && parent.current) || document.body - node?.appendChild(stats.dom) - const classNames = (className ?? '').split(' ').filter((cls) => cls) - if (classNames.length) stats.dom.classList.add(...classNames) - const end = addAfterEffect(() => stats.update()) - return () => { - if (classNames.length) stats.dom.classList.remove(...classNames) - node?.removeChild(stats.dom) - end() - } +export const StatsGl: ForwardRefComponent = /* @__PURE__ */ React.forwardRef( + ({ className, parent, id, clearStatsGlStyle, ...props }: Props, fref) => { + const gl: any = useThree((state) => state.gl) + + const stats = React.useMemo(() => { + const stats = new Stats({ + ...props, + }) + stats.init(gl) + return stats + }, [gl]) + + React.useImperativeHandle(fref, () => stats.dom) + + React.useEffect(() => { + if (stats) { + const node = (parent && parent.current) || document.body + node?.appendChild(stats.dom) + stats.dom.querySelectorAll('canvas').forEach((canvas) => { + canvas.style.removeProperty('position') + }) + if (id) stats.dom.id = id + if (clearStatsGlStyle) stats.dom.removeAttribute('style') + stats.dom.removeAttribute('style') + const classNames = (className ?? '').split(' ').filter((cls) => cls) + if (classNames.length) stats.dom.classList.add(...classNames) + const end = addAfterEffect(() => stats.update()) + return () => { + if (classNames.length) stats.dom.classList.remove(...classNames) + node?.removeChild(stats.dom) + end() + } + } + }, [parent, stats, className, id, clearStatsGlStyle]) + + return null } - }, [parent, stats, className]) - return null -} +) + +StatsGl.displayName = 'StatsGl'