fix: tweak fpsgraph extra height on calculation

Author: alvarosabu

playground/src/pages/index.vue

@@ -3,11 +3,13 @@ import {
   advancedRoutes,
   basicRoutes,
   controlsRoutes,
+  miscRoutes,
 } from '../router/routes'
 
 const sections = [
   { icon: '📦', title: 'Basic', routes: basicRoutes },
   { icon: '🎛️', title: 'Controls', routes: controlsRoutes },
+  { icon: '🐶', title: 'Misc', routes: miscRoutes },
   { icon: '🤓', title: 'Advanced', routes: advancedRoutes },
 ]
 </script>

playground/src/pages/misc/FPSgraphDemo.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { OrbitControls } from '@tresjs/cientos'
+
+useControls('fpsgraph')
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas clearColor="#82DBC5">
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+    <OrbitControls />
+    <TresMesh>
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+  </TresCanvas>
+</template>

playground/src/router/routes/index.ts

@@ -1,15 +1,18 @@
 import { advancedRoutes } from './advanced'
 import { basicRoutes } from './basic'
 import { controlsRoutes } from './controls'
+import { miscRoutes } from './misc'
 
 export const allRoutes = [
   ...basicRoutes,
   ...controlsRoutes,
   ...advancedRoutes,
+  ...miscRoutes,
 ]
 
 export {
   advancedRoutes,
   basicRoutes,
   controlsRoutes,
+  miscRoutes,
 }

playground/src/router/routes/misc.ts

@@ -0,0 +1,7 @@
+export const miscRoutes = [
+  {
+    path: '/misc/fpsgraph',
+    name: 'FPSgraph',
+    component: () => import('../../pages/misc/FPSgraphDemo.vue'),
+  },
+]

src/components/TresLeches.vue

@@ -38,7 +38,7 @@ const COLLAPSED_SIZE = 36
 const MIN_HEIGHT = 100 // Minimum height for the panel
 const MAX_HEIGHT = 600 // Maximum height for the panel
 const CONTROL_HEIGHT = 46 // Approximate height per control
-const FPS_GRAPH_EXTRA_HEIGHT = 12 // Extra padding needed for FPS graph
+const FPS_GRAPH_EXTRA_HEIGHT = 20 // Extra padding needed for FPS graph
 const MARGIN_FROM_BOTTOM = 42 // Margin to keep from bottom of viewport
 
 const panelWidth = ref(DEFAULT_WIDTH)