feat(components): add EditableColor component for color editing and enhance Props component to utilize it

Author: alvarosabu

client/components/EditableColor.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  modelValue: number
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: number): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const editValue = ref(props.modelValue)
+
+const finishEditing = () => {
+  emit('update:modelValue', editValue.value)
+}
+</script>
+
+<template>
+  <UPopover @blur="finishEditing">
+    <UButton
+      :label="editValue"
+      color="neutral"
+      size="xs"
+      variant="soft"
+    >
+      <template #leading>
+        <span
+          :style="{
+            backgroundColor: editValue,
+          }"
+          class="size-3 rounded-full"
+        />
+      </template>
+    </UButton>
+
+    <template #content>
+      <UColorPicker
+        v-model="editValue"
+        class="p-2"
+        @update:model-value="finishEditing"
+      />
+    </template>
+  </UPopover>
+</template>

client/components/EditableNumber.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 
 interface Props {
   modelValue: number

client/components/inspector/Props.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { TresObject } from '@tresjs/core'
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import { copyProp, copyValue, copyValueAsVector3, copyValueAsEuler, copyValueAsQuaternion } from '~/utils/clipboard'
 
 import { iconsMap } from '../../utils/graph'
@@ -31,7 +31,7 @@ const importantProperties: Record<string, string[]> = {
   OrthographicCamera: ['position', 'rotation', 'left', 'right', 'top', 'bottom', 'near', 'far'],
 
   // Light properties
-  DirectionalLight: ['color', 'intensity', 'position', 'target'],
+  DirectionalLight: ['color', 'intensity', 'position'],
   PointLight: ['color', 'intensity', 'position', 'distance', 'decay'],
   SpotLight: ['color', 'intensity', 'position', 'target', 'angle', 'penumbra'],
   AmbientLight: ['color', 'intensity'],
@@ -48,6 +48,14 @@ const importantProperties: Record<string, string[]> = {
   Scene: ['background', 'environment', 'fog'],
 }
 
+function formatValue(key: string, value: unknown): unknown {
+  // Handle Color objects
+  if (value && typeof value === 'object' && 'r' in value && 'g' in value && 'b' in value && 'getHexString' in value) {
+    return `#${(value as { getHexString: () => string }).getHexString()}`
+  }
+  return value
+}
+
 /**
  * Get the important properties for the current object type
  */
@@ -59,12 +67,17 @@ const keyProperties = computed(() => {
     const value = getNestedValue(props.object, prop)
     return {
       key: prop,
-      value,
-      displayValue: formatPropertyValue(prop, value),
+      value: formatValue(prop, value),
+      displayValue: formatPropertyDisplayValue(prop, value),
     }
   }).filter(prop => prop.value !== undefined)
 })
 
+watch(keyProperties, (newProps) => {
+  // Ensure Vector3 properties are reactive
+  console.log('Key properties updated:', newProps)
+}, { immediate: true })
+
 /**
  * Get nested property value (e.g., position.x, rotation.y)
  */
@@ -79,7 +92,7 @@ function getNestedValue(obj: unknown, path: string): unknown {
 /**
  * Format property values for display (compact inspector style)
  */
-function formatPropertyValue(key: string, value: unknown): string {
+function formatPropertyDisplayValue(key: string, value: unknown): string {
   if (value === null || value === undefined) return 'undefined'
 
   // Handle Vector3-like objects - will be handled separately in template
@@ -237,12 +250,11 @@ function getValueClass(value: unknown): string {
           />
 
           <!-- Color value with preview dot -->
-          <template v-else-if="prop.key === 'color' && prop.value && typeof prop.value === 'object' && 'getHexString' in prop.value">
-            <div
-              class="w-3 h-3 rounded-full border border-gray-300 dark:border-gray-600 ml-1 mr-1"
-              :style="{ backgroundColor: '#' + (prop.value as { getHexString: () => string }).getHexString() }"
+          <template v-else-if="prop.key === 'color'">
+            <EditableColor
+              v-model="prop.value"
+              @update:model-value="(val) => emit('update-value', prop.key, val)"
             />
-            <span :class="getValueClass(prop.value)">{{ prop.displayValue }}</span>
           </template>
 
           <EditableNumber

client/components/scene-graph/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { TresObject } from '@tresjs/core'
 import type { Mesh } from 'three'
+import { Color } from 'three'
 import { createHighlightMesh, getInspectorGraph } from '~/utils/graph'
 import { useDevtoolsHook } from '~/composables/useDevtoolsHook'
 import { computed, ref, shallowRef, toValue } from 'vue'
@@ -49,7 +50,10 @@ const handleValueUpdate = (path: string, value: unknown): void => {
   if (selectedObject.value) {
     setValueByPath(selectedObject.value, path, value)
     // Trigger reactive update
-    refreshTrigger.value++
+    if (!path.includes('color')) {
+      // Avoid excessive updates for color changes
+      refreshTrigger.value++
+    }
   }
 }
 
@@ -78,7 +82,12 @@ const setValueByPath = (obj: unknown, path: string, value: unknown): void => {
 
   // Set the value on the final property
   const finalKey = keys[keys.length - 1]!
-  current[finalKey] = value
+
+  // Check if value is a hex string and should be converted to Color
+  const isHexString = (val: unknown): val is string =>
+    typeof val === 'string' && /^#[0-9a-f]{6}$/i.test(val)
+
+  current[finalKey] = isHexString(value) ? new Color(value) : value
 
   // Check if this is a camera and update projection matrix if needed
   const rootObj = obj as any

playground/pages/basic/lights/index.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const { clearColor } = useControls({
+  clearColor: '#000',
+}, {
+  uuid: 'lights',
+})
+</script>
+
+<template>
+  <div class="w-full h-screen relative">
+    <ClientOnly>
+      <TresLeches uuid="lights" />
+    </ClientOnly>
+    <TresCanvas
+      :clear-color="clearColor"
+      shadows
+    >
+      <TresPerspectiveCamera />
+      <TresMesh
+        name="Im a pretty Box"
+        :position="[0, 1, 0]"
+        cast-shadow
+      >
+        <TresBoxGeometry />
+        <TresMeshToonMaterial color="teal" />
+      </TresMesh>
+      <TresMesh
+        ref="planeRef"
+        v-log:material
+        :rotation="[-Math.PI / 2, 0, 0]"
+        receive-shadow
+      >
+        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+        <TresMeshToonMaterial />
+      </TresMesh>
+      <TresDirectionalLight
+        color="white"
+        :intensity="1"
+        :position="[5, 5, -5]"
+        cast-shadow
+      />
+      <OrbitControls />
+    </TresCanvas>
+  </div>
+</template>