From a603061771155c30b201c3176293cf1af39a5993 Mon Sep 17 00:00:00 2001
From: Davide Cristini <davcri91@gmail.com>
Date: Mon, 15 Jul 2024 15:41:39 +0200
Subject: [PATCH 1/2] fix: allow StatsGl style customization via prop and
 forward ref

---
 src/core/StatsGl.tsx | 78 +++++++++++++++++++++++++++-----------------
 1 file changed, 48 insertions(+), 30 deletions(-)

diff --git a/src/core/StatsGl.tsx b/src/core/StatsGl.tsx
index 0c99b2f00..5aae24409 100644
--- a/src/core/StatsGl.tsx
+++ b/src/core/StatsGl.tsx
@@ -1,37 +1,55 @@
-import * as React from 'react'
+import { ForwardRefComponent } from '@react-three/drei/helpers/ts-utils'
 import { addAfterEffect, useThree } from '@react-three/fiber'
+import * as React from 'react'
+
 import Stats from 'stats-gl'
 
 type Props = Partial<Stats> & {
-  showPanel?: number
-  className?: string
-  parent?: React.RefObject<HTMLElement>
+    id?: string
+    clearStatsGlStyle?: boolean
+    showPanel?: number
+    className?: string
+    parent?: React.RefObject<HTMLElement>
+    ref?: React.RefObject<HTMLElement>
 }
 
-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<Props, HTMLDivElement> = /* @__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'

From 048034e97af5be7af9c5fd138133b5522cd75483 Mon Sep 17 00:00:00 2001
From: Davide Cristini <davcri91@gmail.com>
Date: Tue, 16 Jul 2024 16:26:23 +0200
Subject: [PATCH 2/2] Update StatsGl.tsx

---
 src/core/StatsGl.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/StatsGl.tsx b/src/core/StatsGl.tsx
index 5aae24409..296e8e3cc 100644
--- a/src/core/StatsGl.tsx
+++ b/src/core/StatsGl.tsx
@@ -1,4 +1,4 @@
-import { ForwardRefComponent } from '@react-three/drei/helpers/ts-utils'
+import { ForwardRefComponent } from '../helpers/ts-utils'
 import { addAfterEffect, useThree } from '@react-three/fiber'
 import * as React from 'react'