feat: improve debug ui

fibbojs · Aug 15, 2024 · 0155134 · 0155134
1 parent 65163c8
commit 0155134
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 37 deletions.
diff --git a/packages/2d/src/FScene2d.ts b/packages/2d/src/FScene2d.ts
@@ -75,9 +75,9 @@ export class FScene2d extends FScene {
     // Resize the renderer
     this.app.renderer.resize(SCREEN_WIDTH, SCREEN_HEIGHT)
 
-    // Modify background color to 0x121212
+    // Modify background color to 0x222324
     const backgroundSystem = new PIXI.BackgroundSystem()
-    backgroundSystem.color = new PIXI.Color(0x121212)
+    backgroundSystem.color = new PIXI.Color(0x222324)
     this.app.renderer.background = backgroundSystem
 
     /**

diff --git a/packages/3d/src/FScene3d.ts b/packages/3d/src/FScene3d.ts
@@ -67,7 +67,7 @@ export class FScene3d extends FScene {
   init() {
     // Create scene, camera, and renderer
     this.scene = new THREE.Scene()
-    this.scene.background = new THREE.Color(0x121212)
+    this.scene.background = new THREE.Color(0x222324)
     this.debugCamera = new FFixedCamera()
     this.debugCamera.position.set(5, 5, 5)
     this.camera = this.debugCamera

diff --git a/packages/devtools/src/components/2d/FComponent2d.vue b/packages/devtools/src/components/2d/FComponent2d.vue
@@ -1,33 +1,41 @@
 <template>
   <div class="f-component f-component-2d">
-    <FComponentIcon :icon-name="iconName" />
-    <h4 class="f-component-id">
-      {{ component.constructor.name }} ({{ component.__ID__ }})
-    </h4>
-    <div class="f-component-property">
-      <div class="f-component-property-group">
+    <FComponentHeader
+      :component="component"
+      :show-details="showDetails"
+      @click="showDetails = !showDetails"
+    />
+    <div class="f-component-properties" :class="{ 'f-component-properties--hidden': !showDetails }">
+      <div class="f-component-property">
         <p>Position</p>
-        <p>x : {{ component.position.x }}</p>
-        <p>y : {{ component.position.y }}</p>
+        <div class="f-component-property-group">
+          <p>x : {{ cropValue(component.position.x) }}</p>
+          <p>y : {{ cropValue(component.position.y) }}</p>
+        </div>
+      </div>
+      <div class="f-component-property">
+        <p>Rotation</p>
+        <div class="f-component-property-group">
+          <p>r : {{ cropValue(component.rotation) }}</p>
+        </div>
       </div>
-      <p>r : {{ component.rotation }}</p>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { defineProps } from 'vue'
+import { defineProps, ref } from 'vue'
 import type { FComponent2d } from '@fibbojs/2d'
-import FComponentIcon from '../icons/FComponentIcon.vue'
-import { useComponentIcon } from '../../composables/useComponentIcon'
+import FComponentHeader from '../common/FComponentHeader.vue'
+import { cropValue } from '../../utils/cropValue'
 
-const props = defineProps({
+defineProps({
   component: {
     type: Object as PropType<FComponent2d>,
     required: true,
   },
 })
 
-const iconName = useComponentIcon(props.component)
+const showDetails = ref(false)
 </script>
diff --git a/packages/devtools/src/components/3d/FComponent3d.vue b/packages/devtools/src/components/3d/FComponent3d.vue
@@ -1,39 +1,44 @@
 <template>
   <div class="f-component f-component-3d">
-    <FComponentIcon :icon-name="iconName" />
-    <h4 class="f-component-id">
-      {{ component.constructor.name }} ({{ component.__ID__ }})
-    </h4>
-    <div class="f-component-property">
-      <div class="f-component-property-group">
+    <FComponentHeader
+      :component="component"
+      :show-details="showDetails"
+      @click="showDetails = !showDetails"
+    />
+    <div class="f-component-properties" :class="{ 'f-component-properties--hidden': !showDetails }">
+      <div class="f-component-property">
         <p>Position</p>
-        <p>x : {{ component.position.x }}</p>
-        <p>y : {{ component.position.y }}</p>
-        <p>z : {{ component.position.z }}</p>
+        <div class="f-component-property-group">
+          <p>x : {{ cropValue(component.position.x) }}</p>
+          <p>y : {{ cropValue(component.position.y) }}</p>
+          <p>z : {{ cropValue(component.position.z) }}</p>
+        </div>
       </div>
-      <div class="f-component-property-group">
+      <div class="f-component-property">
         <p>Rotation</p>
-        <p>x : {{ component.rotation.x }}</p>
-        <p>y : {{ component.rotation.y }}</p>
-        <p>z : {{ component.rotation.z }}</p>
+        <div class="f-component-property-group">
+          <p>x : {{ cropValue(component.rotation.x) }}</p>
+          <p>y : {{ cropValue(component.rotation.y) }}</p>
+          <p>z : {{ cropValue(component.rotation.z) }}</p>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { defineProps } from 'vue'
+import { defineProps, ref } from 'vue'
 import type { FComponent3d } from '@fibbojs/3d'
-import FComponentIcon from '../icons/FComponentIcon.vue'
-import { useComponentIcon } from '../../composables/useComponentIcon'
+import FComponentHeader from '../common/FComponentHeader.vue'
+import { cropValue } from '../../utils/cropValue'
 
-const props = defineProps({
+defineProps({
   component: {
     type: Object as PropType<FComponent3d>,
     required: true,
   },
 })
 
-const iconName = useComponentIcon(props.component)
+const showDetails = ref(false)
 </script>
diff --git a/packages/devtools/src/components/FDebugPanel.ce.vue b/packages/devtools/src/components/FDebugPanel.ce.vue
@@ -34,7 +34,7 @@ defineProps({
 })
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .f-debug-panel {
   position: absolute;
   top: 10px;
@@ -55,7 +55,83 @@ defineProps({
   }
 
   .f-components {
-    margin: 10px;
+    display: flex;
+    flex-direction: column;
+    margin: 8px;
+    row-gap: 2px;
+  }
+
+  .f-component {
+    .f-component-header {
+      display: flex;
+      flex-direction: row;
+      column-gap: 8px;
+      align-items: center;
+      border-radius: 8px;
+      transition: background 0.1s;
+      cursor: pointer;
+
+      .f-component-header-arrow {
+        display: grid;
+        place-items: center;
+        width: 16px;
+        transition: transform 0.1s;
+      }
+
+      .f-component-name {
+        margin: 0;
+      }
+
+      .f-component-id {
+        color: #4d4e4e;
+      }
+
+      &:hover {
+        background: #1E1F20;
+      }
+    }
+
+    .f-component-header--open {
+      .f-component-header-arrow {
+        transform: rotate(90deg);
+      }
+    }
+
+    .f-component-properties {
+      display: flex;
+      flex-direction: column;
+
+      p {
+        margin: 0;
+      }
+
+      .f-component-property {
+        margin-left: 24px;
+
+        .f-component-property-group {
+          display: flex;
+          flex-direction: row;
+          column-gap: 2px;
+
+          > p {
+            padding: 0 4px;
+            border-radius: 4px;
+            background: #1E1F20;
+          }
+        }
+      }
+    }
+
+    .f-component-properties--hidden {
+      display: none;
+    }
+  }
+
+  .f-component-icon {
+    width: 16px;
+    height: 16px;
+    display: grid;
+    place-items: center;
   }
 }
 </style>
diff --git a/packages/devtools/src/components/common/FComponentHeader.vue b/packages/devtools/src/components/common/FComponentHeader.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="f-component-header" :class="{ 'f-component-header--open': showDetails }">
+    <div class="f-component-header-arrow">
+      <svg xmlns="http://www.w3.org/2000/svg" width="0.5em" height="1em" viewBox="0 0 12 24"><path fill="currentColor" fill-rule="evenodd" d="M10.157 12.711L4.5 18.368l-1.414-1.414l4.95-4.95l-4.95-4.95L4.5 5.64l5.657 5.657a1 1 0 0 1 0 1.414" /></svg>
+    </div>
+    <FComponentIcon :icon-name="iconName" />
+    <p class="f-component-name">
+      {{ component.constructor.name }} <span class="f-component-id">({{ component.__ID__ }})</span>
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { defineProps } from 'vue'
+import type { FComponent } from '@fibbojs/core'
+import FComponentIcon from '../icons/FComponentIcon.vue'
+import { useComponentIcon } from '../../composables/useComponentIcon'
+
+const props = defineProps({
+  component: {
+    type: Object as PropType<FComponent>,
+    required: true,
+  },
+  showDetails: Boolean,
+})
+
+const iconName = useComponentIcon(props.component)
+</script>
diff --git a/packages/devtools/src/utils/cropValue.ts b/packages/devtools/src/utils/cropValue.ts
@@ -0,0 +1,8 @@
+/**
+ * Crop a given value to a certain length.
+ * Always convert to string and return as string.
+ */
+export function cropValue(value: any, length: number = 5): string {
+  const str = String(value)
+  return str.length > length ? str.slice(0, length) : str
+}