feat(inspector): add support for copying Quaternion values and enhance handling in Props and Tree components

Author: alvarosabu

client/components/inspector/Props.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TresObject } from '@tresjs/core'
 import { computed, watch } from 'vue'
-import { copyPath, copyProp, copyPropAsArray, copyValue, copyValueAsArray, copyValueAsJSON, copyValueAsVector3, copyValueAsEuler } from '~/utils/clipboard'
+import { copyPath, copyProp, copyPropAsArray, copyValue, copyValueAsArray, copyValueAsJSON, copyValueAsVector3, copyValueAsEuler, copyValueAsQuaternion } from '~/utils/clipboard'
 
 import { iconsMap } from '../../utils/graph'
 import MaterialBadge from './MaterialBadge.vue'
@@ -298,6 +298,18 @@ function getValueClass(value: unknown): string {
                        })),
                      }),
                 },
+              prop.displayValue === 'vector' && prop.key === 'quaternion'
+                && { label: 'Copy as Quaternion',
+                     icon: 'i-lucide:rotate-3d',
+                     onSelect: () => copyValueAsQuaternion({
+                       children: [
+                         { label: 'x', value: prop.value.x },
+                         { label: 'y', value: prop.value.y },
+                         { label: 'z', value: prop.value.z },
+                         { label: 'w', value: prop.value.w || 1 },
+                       ],
+                     }),
+                },
 
             ].filter(Boolean)"
             :ui="{

client/components/inspector/Tree.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import type { InspectorNode } from '~/client/types'
-import { copyPath, copyProp, copyPropAsArray, copyValue, copyValueAsArray, copyValueAsJSON, copyValueAsVector3, copyValueAsEuler } from '~/utils/clipboard'
+import { copyPath, copyProp, copyPropAsArray, copyValue, copyValueAsArray, copyValueAsJSON, copyValueAsVector3, copyValueAsEuler, copyValueAsQuaternion } from '~/utils/clipboard'
 
 interface Props {
   node: InspectorNode
@@ -168,8 +168,9 @@ const indentStyle = computed(() => ({ paddingLeft: `${props.level * 16}px` }))
               { label: 'Copy value as Array', icon: 'i-material-symbols:data-array', onSelect: () => copyValueAsArray(node) },
               node.value === '_Vector3' ? { label: 'Copy value as Vector3', icon: 'i-lucide:pen-line', onSelect: () => copyValueAsVector3(node) } : null,
               node.value === '_Euler' ? { label: 'Copy as Euler', icon: 'i-lucide:rotate-3d', onSelect: () => copyValueAsEuler(node) } : null,
+              node.value === '_Quaternion' ? { label: 'Copy as Quaternion', icon: 'i-lucide:rotate-3d', onSelect: () => copyValueAsQuaternion(node) } : null,
               { label: 'Copy value as JSON', icon: 'i-material-symbols:data-object', onSelect: () => copyValueAsJSON(node) },
-              node.value === '_Vector3' || node.value === '_Euler' ? { label: 'Copy as Prop', icon: 'i-lucide:code', onSelect: () => copyPropAsArray(node) } : null,
+              node.value === '_Vector3' || node.value === '_Euler' || node.value === '_Quaternion' ? { label: 'Copy as Prop', icon: 'i-lucide:code', onSelect: () => copyPropAsArray(node) } : null,
             ].filter(Boolean)"
             :ui="{
               content: 'w-48',

client/utils/clipboard.ts

@@ -97,3 +97,22 @@ export const copyValueAsEuler = async (node: InspectorNode): Promise<void> => {
     console.error('Failed to copy value as Euler:', error)
   }
 }
+
+export const copyValueAsQuaternion = async (node: InspectorNode): Promise<void> => {
+  try {
+    const xChild = node.children?.find(child => child.label === 'x')
+    const yChild = node.children?.find(child => child.label === 'y')
+    const zChild = node.children?.find(child => child.label === 'z')
+    const wChild = node.children?.find(child => child.label === 'w')
+
+    const x = xChild?.value || 0
+    const y = yChild?.value || 0
+    const z = zChild?.value || 0
+    const w = wChild?.value || 1
+
+    await navigator.clipboard.writeText(`new Quaternion(${x}, ${y}, ${z}, ${w})`)
+  }
+  catch (error) {
+    console.error('Failed to copy value as Quaternion:', error)
+  }
+}

client/utils/graph.ts

@@ -125,7 +125,7 @@ export function getInspectorGraph(obj: unknown, label = 'root', path = 'root', s
   // Handle objects
   const children: InspectorNode[] = []
   const objectName = (obj as object).constructor?.name || 'Object'
-  
+
   // Special handling for Three.js Euler objects
   if (objectName === '_Euler') {
     console.log('Processing _Euler object:', obj, 'Constructor name:', objectName)
@@ -138,7 +138,17 @@ export function getInspectorGraph(obj: unknown, label = 'root', path = 'root', s
       children.push(getInspectorGraph(val, key, childPath, seen))
     }
   }
-  // Special handling for Three.js Vector3 objects  
+  // Special handling for Three.js Quaternion objects
+  else if (objectName === 'Quaternion') {
+    const quaternionObj = obj as { x: number, y: number, z: number, w: number }
+    const quaternionProps = ['x', 'y', 'z', 'w']
+    for (const key of quaternionProps) {
+      const val = quaternionObj[key as keyof typeof quaternionObj]
+      const childPath = path === 'root' ? key : `${path}.${key}`
+      children.push(getInspectorGraph(val, key, childPath, seen))
+    }
+  }
+  // Special handling for Three.js Vector3 objects
   else if (objectName === '_Vector3') {
     const vectorObj = obj as { x: number, y: number, z: number }
     const vectorProps = ['x', 'y', 'z']
@@ -167,7 +177,7 @@ export function getInspectorGraph(obj: unknown, label = 'root', path = 'root', s
     label,
     type: 'object',
     path,
-    value: objectName === '_Euler' ? '_Euler' : objectName === '_Vector3' ? '_Vector3' : objectName,
+    value: objectName === 'Euler' ? 'Euler' : objectName === 'Quaternion' ? 'Quaternion' : objectName === 'Vector3' ? 'Vector3' : objectName,
     defaultExpanded: path === 'root',
     children,
   }