feat: change name to scenegraphitem

Tresjs · Dec 6, 2023 · 8368efc · 8368efc
1 parent e35d546
commit 8368efc
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 4 deletions.
diff --git a/client/components/TreeItem.vue → client/components/SceneGraphItem.vue b/client/components/TreeItem.vue → 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
@@ -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
@@ -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",