feat: overall scrolls on inspector state

plugins/vite-plugin-tres/client/.nuxt/manifest/latest.json

@@ -1 +1 @@
-{"id":"dev","timestamp":1704731621284}
+{"id":"dev","timestamp":1704885707754}

plugins/vite-plugin-tres/client/.nuxt/manifest/meta/dev.json

@@ -1 +1 @@
-{"id":"dev","timestamp":1704731621284,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}
+{"id":"dev","timestamp":1704885707754,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":[]}

plugins/vite-plugin-tres/client/.nuxt/nitro.json

@@ -1,5 +1,5 @@
 {
-  "date": "2024-01-08T16:33:50.487Z",
+  "date": "2024-01-10T11:21:58.549Z",
   "preset": "nitro-dev",
   "framework": {
     "name": "nuxt",
@@ -9,9 +9,9 @@
     "nitro": "2.8.1"
   },
   "dev": {
-    "pid": 43585,
+    "pid": 82846,
     "workerAddress": {
-      "socketPath": "/var/folders/66/14k3nnbx1g505216sq4xdfdc0000gn/T/nitro/worker-43585-2.sock"
+      "socketPath": "/var/folders/66/14k3nnbx1g505216sq4xdfdc0000gn/T/nitro/worker-82846-2.sock"
     }
   }
 }

plugins/vite-plugin-tres/client/components/inspector/InspectorBranch.vue

@@ -31,6 +31,8 @@ const toggleCollapse = (uuid) => {
 }
 
 const isExpanded = uuid => collapsedKeys[uuid]
+
+const editableKeys = reactive({})
 </script>
 
 <template>
@@ -40,7 +42,7 @@ const isExpanded = uuid => collapsedKeys[uuid]
     class="pb1 text-sm"
   >
     <!-- Check if the item is expandable (either an object or an array) -->
-    <template v-if="item.expandable && depth < 2">
+    <template v-if="item.expandable && depth < 1">
       <div
         class="flex items-center"
         @click="toggleCollapse(item.uuid)"
@@ -49,7 +51,7 @@ const isExpanded = uuid => collapsedKeys[uuid]
           class="mr-2"
           :name="isExpanded(item.uuid) ? 'i-carbon-caret-down' : 'i-carbon-caret-right'"
         />
-        {{ item.key }} : {{ isArray(item.value) ? 'Array' : 'Object' }}
+        <span class="text-purple-400"> {{ item.key }}</span>  : {{ isArray(item.value) ? 'Array' : 'Object' }}
       </div>
       <div
         v-show="isExpanded(item.uuid)"
@@ -57,10 +59,10 @@ const isExpanded = uuid => collapsedKeys[uuid]
       >
         <!-- Handle Objects -->
         <template v-if="isObject(item.value)">
-          <InspectorBranch
+          <!--  <InspectorBranch
             :entry="item.value"
             :depth="depth + 1"
-          />
+          /> -->
         </template>
         <!-- Handle Arrays -->
         <template v-if="isArray(item.value)">
@@ -77,8 +79,12 @@ const isExpanded = uuid => collapsedKeys[uuid]
     <!-- Non-expandable items (primitive types) -->
     <template v-else>
       <div class="flex gap-1">
-        <label for="">{{ item.key }}</label> : 
+        <label
+          for=""
+          class="text-purple-400"
+        >{{ item.key }}</label> :
         <input
+          class="text-red-400"
           :value="item.value"
           :type="typeof item.value"
         >

plugins/vite-plugin-tres/client/components/inspector/InspectorState.vue

@@ -2,7 +2,7 @@
 import CodeView from '../CodeView.vue'
 import InspectorTree from './InspectorTree.vue'
 
-const tabs = ref([
+const tabs = [
   {
     slug: 'inspector-tree',
     name: 'Inspector Tree',
@@ -17,7 +17,7 @@ const tabs = ref([
     path: '/code-view',
     icon: 'i-iconoir-code',
   },
-])
+]
 const currentTab = ref(0)
 
 const { internal } = useDevtoolsHook()

plugins/vite-plugin-tres/client/composables/useDevtoolsHook.ts

@@ -1,7 +1,7 @@
 import type { TresContext, TresObject } from '@tresjs/core'
 import { DoubleSide, MeshBasicMaterial } from 'three'
 import type { Mesh, Object3D, type Scene, type WebGLRenderer } from 'three'
-import { reactive } from 'vue'
+import { reactive, shallowReactive } from 'vue'
 import type { SceneGraphObject } from '../types'
 import { HightlightMesh } from '../utils/highlightedMesh'
 
@@ -221,8 +221,7 @@ function highlightObject(object: TresObject) {
 }
 
 function selectObject(object: TresObject) {
-  const [instance] = scene.value.getObjectsByProperty('uuid', object.uuid)
-  gl.internal.selectedObject = instance
+  gl.internal.selectedObject = object
 }
 
 export function useDevtoolsHook(): DevtoolsHookReturn {
@@ -231,6 +230,8 @@ export function useDevtoolsHook(): DevtoolsHookReturn {
     cb(context: TresContext) {
       scene.value = context.scene.value
       scene.objects = countObjectsInScene(context.scene.value)
+      scene.graph = getSceneGraph(context.scene.value as unknown as TresObject)
+
       Object.assign(gl.renderer.info.render, context.renderer.value.info.render)
       Object.assign(gl.renderer.info.memory, context.renderer.value.info.memory)
       gl.renderer.info.programs = [...context.renderer.value.info.programs as WebGLProgram[]]
@@ -238,7 +239,7 @@ export function useDevtoolsHook(): DevtoolsHookReturn {
       gl.fps.accumulator = [...context.perf.fps.accumulator]
       Object.assign(gl.memory, context.perf.memory)
       gl.memory.accumulator = [...context.perf.memory.accumulator]
-      scene.graph = getSceneGraph(context.scene.value as unknown as TresObject)
+
       /* 
       console.log('Devtools hook updated', context.renderer.value.info.render.triangles) */
     },

plugins/vite-plugin-tres/client/pages/scene-graph.vue

@@ -9,7 +9,7 @@ const { scene, internal } = useDevtoolsHook()
     class="h-full"
   >
     <Pane
-      class="h-full p4"
+      class="h-full p4 overflow-y-scroll"
       min-size="20"
     >
       <div v-if="scene.objects > 0">
@@ -19,7 +19,7 @@ const { scene, internal } = useDevtoolsHook()
     <Pane
       class="h-full"
     >
-      <InspectorState v-if="internal?.selectedObject" />
+      <!-- <InspectorState v-if="internal?.selectedObject" /> -->
     </Pane>
   </Splitpanes>
 </template>

plugins/vite-plugin-tres/package.json

@@ -37,7 +37,8 @@
     "sirv": "^2.0.4",
     "splitpanes": "^3.1.5",
     "vue": "^3.4.5",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue-virtual-scroller": "^1.1.2"
   },
   "devDependencies": {
     "@alvarosabu/eslint-config-vue": "^0.4.0",

pnpm-lock.yaml

@@ -218,6 +218,9 @@ importers:
       vue-router:
         specifier: ^4.2.5
         version: 4.2.5(vue@3.4.5)
+      vue-virtual-scroller:
+        specifier: ^1.1.2
+        version: 1.1.2(vue@3.4.5)
     devDependencies:
       '@alvarosabu/eslint-config-vue':
         specifier: ^0.4.0
@@ -11522,6 +11525,10 @@ packages:
       ajv: 6.12.6
       ajv-keywords: 3.5.2(ajv@6.12.6)
 
+  /scrollparent@2.1.0:
+    resolution: {integrity: sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA==}
+    dev: false
+
   /scule@1.1.1:
     resolution: {integrity: sha512-sHtm/SsIK9BUBI3EFT/Gnp9VoKfY6QLvlkvAE6YK7454IF8FSgJEAnJpVdSC7K5/pjI5NfxhzBLW2JAfYA/shQ==}
 
@@ -13760,6 +13767,18 @@ packages:
       - supports-color
     dev: true
 
+  /vue-observe-visibility@0.4.6:
+    resolution: {integrity: sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q==}
+    dev: false
+
+  /vue-resize@0.4.5(vue@3.4.5):
+    resolution: {integrity: sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==}
+    peerDependencies:
+      vue: ^2.3.0
+    dependencies:
+      vue: 3.4.5(typescript@5.3.3)
+    dev: false
+
   /vue-router@4.2.5(vue@3.4.5):
     resolution: {integrity: sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==}
     peerDependencies:
@@ -13787,6 +13806,17 @@ packages:
       typescript: 5.3.3
     dev: true
 
+  /vue-virtual-scroller@1.1.2(vue@3.4.5):
+    resolution: {integrity: sha512-SkUyc7QHCJFB5h1Fya7LxVizlVzOZZuFVipBGHYoTK8dwLs08bIz/tclvRApYhksaJIm/nn51inzO2UjpGJPMQ==}
+    peerDependencies:
+      vue: ^2.6.11
+    dependencies:
+      scrollparent: 2.1.0
+      vue: 3.4.5(typescript@5.3.3)
+      vue-observe-visibility: 0.4.6
+      vue-resize: 0.4.5(vue@3.4.5)
+    dev: false
+
   /vue@3.4.3(typescript@5.3.3):
     resolution: {integrity: sha512-GjN+culMAGv/mUbkIv8zMKItno8npcj5gWlXkSxf1SPTQf8eJ4A+YfHIvQFyL1IfuJcMl3soA7SmN1fRxbf/wA==}
     peerDependencies: