refactor: reorganize devtools setup and imports (#991)

* refactor: reorganize devtools setup and imports

- Moved the `registerTresDevtools` import in `TresCanvas.vue` to improve clarity and ensure proper registration of devtools.
- Renamed `setupDevtools` to `setupTresDevtools` in `setupDevtools.ts` for consistency with the new naming convention.
- Updated the `registerTresDevtools` function in `plugin.ts` to call the renamed `setupTresDevtools`, ensuring proper integration of the devtools setup.
- Removed the unused `setupDevtools` call from `useTresContextProvider` to streamline the context provider logic.

* refactor: remove unused setupDevtools import from useTresContextProvider

- Eliminated the unused `setupDevtools` import from `useTresContextProvider` to streamline the context provider logic and improve code clarity.

src/components/TresCanvas.vue

@@ -33,8 +33,8 @@ import {
 import { extend } from '../core/catalogue'
 import { nodeOps } from '../core/nodeOps'
 
-import { registerTresDevtools } from '../devtools'
 import { disposeObject3D } from '../utils/'
+import { registerTresDevtools } from '../devtools'
 
 export interface TresCanvasProps
   extends Omit<WebGLRendererParameters, 'canvas'> {

src/composables/useTresContextProvider/index.ts

@@ -13,7 +13,6 @@ import { useRenderer } from '../useRenderer'
 import useSizes, { type SizesType } from '../useSizes'
 import { type TresEventManager, useTresEventManager } from '../useTresEventManager'
 import { useTresReady } from '../useTresReady'
-import { setupDevtools } from '../../devtools/setupDevtools'
 
 export interface InternalState {
   priority: Ref<number>
@@ -213,8 +212,6 @@ export function useTresContextProvider({
     ctx.loop.stop()
   })
 
-  setupDevtools(ctx)
-
   return ctx
 }
 

src/devtools/plugin.ts

@@ -10,6 +10,7 @@ import { bytesToKB, calculateMemoryUsage } from '../utils/perf'
 import { toastMessage } from './utils'
 
 import { isLight } from '../utils/is'
+import { setupTresDevtools } from './setupDevtools'
 
 export interface Tags {
   label: string
@@ -81,14 +82,6 @@ const createNode = (object: TresObject): SceneGraphObject => {
       tooltip: 'Position',
     })
   }
-  /* if (object.position) {
-    node.tags.push({
-      label: `x: ${object.position.x} y: ${object.position.y} z: ${object.position.z}`,
-      textColor: 0x9499A6,
-      backgroundColor: 0xF8F9FA,
-      tooltip: 'Position',
-    })
-  } */
   return node
 }
 
@@ -111,6 +104,7 @@ const state = reactive({
 })
 
 export function registerTresDevtools(app: any, tres: TresContext) {
+  setupTresDevtools(tres)
   setupDevtoolsPlugin(
     {
       id: 'dev.esm.tres',

src/devtools/setupDevtools.ts

@@ -4,7 +4,7 @@ import type { TresContext } from '../composables'
 import type { TresObject } from '../types'
 import { onUnmounted } from 'vue'
 
-export function setupDevtools(ctx: TresContext) {
+export function setupTresDevtools(ctx: TresContext) {
   if (!ctx) { return }
 
   // Performance