From 8368efc6432ee3b4943fd5c3ba850bca352e1a85 Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Wed, 6 Dec 2023 17:54:22 +0100
Subject: [PATCH] feat: change name to scenegraphitem

---
 .../{TreeItem.vue => SceneGraphItem.vue}      | 52 ++++++++++++++++++-
 client/pages/index.vue                        |  3 +-
 package.json                                  |  2 +-
 3 files changed, 53 insertions(+), 4 deletions(-)
 rename client/components/{TreeItem.vue => SceneGraphItem.vue} (83%)

diff --git a/client/components/TreeItem.vue b/client/components/SceneGraphItem.vue
similarity index 83%
rename from client/components/TreeItem.vue
rename to client/components/SceneGraphItem.vue
index 9a20230..2fd2358 100644
--- a/client/components/TreeItem.vue
+++ b/client/components/SceneGraphItem.vue
@@ -34,6 +34,56 @@ function roundNumber(num: number) {
         >
           {{ item.name }}
         </UBadge>
+        <template v-if="item.type.includes('Light') && !isExpanded">
+          <UBadge
+            color="gray"
+            variant="soft"
+          > 
+            <span
+              class="w4 h4 rounded-full mr-2 border border-gray-200"
+              :style="{ backgroundColor: `#${item.color}` }"
+            />
+            #{{ item.color }}
+          </UBadge>
+          <UBadge
+            color="green"
+            variant="soft"
+          > 
+            {{ item.intensity }}
+          </UBadge>
+        </template>
+        <template v-if="item.type.includes('Camera') && !isExpanded">
+          <UTooltip
+              text="X"
+            >
+              <UBadge
+                color="gray"
+                variant="soft"
+              >
+                {{ roundNumber(item.position.x) }}
+              </UBadge>
+            </UTooltip>
+            <UTooltip
+              text="Y"
+            >
+              <UBadge
+                color="gray"
+                variant="soft"
+              >
+                {{ roundNumber(item.position.y) }}
+              </UBadge>
+            </UTooltip>
+            <UTooltip
+              text="Z"
+            >
+              <UBadge
+                color="gray"
+                variant="soft"
+              >
+                {{ roundNumber(item.position.z) }}
+              </UBadge>
+            </UTooltip>
+        </template>
       </div>
     </div>
     <div
@@ -42,7 +92,7 @@ function roundNumber(num: number) {
       :class="{ 'border-l border-gray-300': item.children.length > 0 }"
     >
       <template v-if="item.children.length > 0">
-        <TreeItem
+        <SceneGraphItem
           v-for="(child, index) in item.children"
           :key="index"
           :depth="depth + 1"
diff --git a/client/pages/index.vue b/client/pages/index.vue
index ea53dae..773e391 100644
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'
-import { bytesToMB } from '../utils'
 import { useDevtoolsHook } from '~/composables/useDevtoolsHook'
 
 const client = useDevtoolsClient()
@@ -55,7 +54,7 @@ const icons: Record<string, string> = {
         text="Scene Graph"
         :description="`Total Objects ${scene.objects}`"
       >
-        <TreeItem :item="scene.graph" />
+        <SceneGraphItem :item="scene.graph" />
       </NSectionBlock>
       <NSectionBlock
         icon="i-iconoir-dashboard-speed"
diff --git a/package.json b/package.json
index 2df6389..409817c 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "dist"
   ],
   "scripts": {
-    "prepack": "nuxt-module-build",
+    "prepack": "nuxt-module-build && npm run client:build",
     "client:build": "nuxi generate client",
     "client:dev": "nuxi dev client --port 3300",
     "dev": "nuxi dev playground",