allow sub-interactive objects management

src/components/GameDesigner/GameDesigner.vue

@@ -58,14 +58,17 @@
     </v-toolbar>
     <v-navigation-drawer location="right">
         <v-list selectable color="primary" @update:selected="loadScene($event[0])" :items="scenes"></v-list>
-        <v-list selectable @update:selected="selectObject($event[0])" color="secondary">
-            <v-list-item v-for="(v, k) in sceneObjects" :title="v.__title" :subtitle="k" :value="k">
+        <v-list selectable @update:selected="selectObject($event[0])" v-model:selected="selectedObject" color="secondary">
+            <v-list-item v-for="(v, k) in flatObjects" :title="v.value.__title" :subtitle="v.key" :value="k" :class="`ml-${v.value.__level * 3}`">
                 <template v-slot:prepend>
-                    <v-btn variant="plain" density="comfortable" size="small" v-if="v.__o"
-                        :icon="`mdi-eye${v.__o.visible ? '' : '-off'}`"
-                        @click.stop="v.__o.visible = !v.__o.visible"></v-btn>
+                    <v-btn variant="plain" density="comfortable" size="small" v-if="v.value.__o"
+                        :icon="`mdi-eye${v.value.__o.visible ? '' : '-off'}`"
+                        @click.stop="v.value.__o.visible = !v.value.__o.visible"></v-btn>
                     <!-- <v-icon :icon="components[item.name].icon" size="small"></v-icon> -->
                 </template>
+                <template v-slot:append>
+                    <v-img :src="`/asset/thumb/${v.value.__type}.webp`" width="30"></v-img>
+                </template>
             </v-list-item>
         </v-list>
     </v-navigation-drawer>
@@ -88,7 +91,9 @@ export default {
             scenes: [],
             currentScene: null,
             sceneObjects: {},
+            flatObjects: [],
             currentObject: null,
+            selectedObject: [],
             objectAnimations: [],
             mode: 'translate',
             pointerDownTime: 0,
@@ -115,6 +120,12 @@ export default {
                 sceneObjects[data.id].__o = markRaw(object3d);
                 sceneObjects[data.id].__animations = markRaw(source.animations || []);
                 sceneObjects[data.id].__title = data.title;
+                sceneObjects[data.id].__type = data.type;
+                sceneObjects[data.id].__level = data.level || 0;
+                object3d.__pn_id = this.flatObjects.length;
+                this.flatObjects.push({
+                    key: data.id, value: sceneObjects[data.id]
+                });
             }
         });
         this.scenes = manager.scenarioData.scenes.map(s=>({
@@ -172,6 +183,7 @@ export default {
 
     methods:{
         async loadScene(sceneId){
+            this.flatObjects = [];
             await manager.loadScene(sceneId)
             this.currentScene = manager.scenarioData.scenes.find(sc=>sc.data.id == sceneId);
             this.sceneObjects = this.modelValue.scenes?.[sceneId]?.objects
@@ -201,7 +213,9 @@ export default {
         },
 
         selectObject(oid){
-            this.currentObject = this.sceneObjects[oid];
+            console.log('Selecting object', oid)
+            this.currentObject = this.flatObjects[oid]?.value;
+            this.selectedObject = [oid];
             engine.transformControls.attach(this.currentObject.__o);
             engine.gizmo.target = this.currentObject.position;
             engine.camera.updateProjectionMatrix();

src/lib/GameManager.js

@@ -180,11 +180,23 @@ class GameManager extends EventManager{
             console.log('autoscaling', data.id, autoScaleFactor);
             this.engine.meshUtils.autoScale(object3d, autoScaleFactor);
         }
-        sceneObjects[data.id] = sceneObjects[data.id] || {};
+        sceneObjects[data.id] ??= {};
         if (this.opts.onObjectLoad){
             this.opts.onObjectLoad(sceneObjects, data, object3d, source)
         }
-        object3d.__pn_id = data.id;
+        if (object3d.hasIndividualChildren){
+            sceneObjects[data.id].children ??= {};
+            object3d.traverse(c=>{
+                if (c.isIndividual){
+                    this.setObjectAttributes(sceneObjects[data.id].children, {
+                        id: c.name,
+                        title: `${data.title}: ${c.name}`,
+                        type: data.type,
+                        level: (data.level || 0) + 1
+                    }, c, c, null);
+                }
+            })
+        }
     }
 }