react-three-game 0.0.28 → 0.0.30

package/src/tools/prefabeditor/components/SpotLightComponent.tsx

@@ -11,74 +11,74 @@ function SpotLightComponentEditor({ component, onUpdate }: { component: any; onU
         castShadow: component.properties.castShadow ?? true
     };
 
-    return <div className="flex flex-col gap-2">
+    return <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
         <div>
-            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Color</label>
-            <div className="flex gap-0.5">
+            <label style={{ display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 2 }}>Color</label>
+            <div style={{ display: 'flex', gap: 2 }}>
                 <input
                     type="color"
-                    className="h-5 w-5 bg-transparent border-none cursor-pointer"
+                    style={{ height: 20, width: 20, backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }}
                     value={props.color}
                     onChange={e => onUpdate({ ...component.properties, 'color': e.target.value })}
                 />
                 <input
                     type="text"
-                    className="flex-1 bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50"
+                    style={{ flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }}
                     value={props.color}
                     onChange={e => onUpdate({ ...component.properties, 'color': e.target.value })}
                 />
             </div>
         </div>
         <div>
-            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Intensity</label>
+            <label style={{ display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 2 }}>Intensity</label>
             <input
                 type="number"
                 step="0.1"
-                className="w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50"
+                style={{ width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }}
                 value={props.intensity}
                 onChange={e => onUpdate({ ...component.properties, 'intensity': parseFloat(e.target.value) })}
             />
         </div>
         <div>
-            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Angle</label>
+            <label style={{ display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 2 }}>Angle</label>
             <input
                 type="number"
                 step="0.1"
                 min="0"
                 max={Math.PI}
-                className="w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50"
+                style={{ width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }}
                 value={props.angle}
                 onChange={e => onUpdate({ ...component.properties, 'angle': parseFloat(e.target.value) })}
             />
         </div>
         <div>
-            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Penumbra</label>
+            <label style={{ display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 2 }}>Penumbra</label>
             <input
                 type="number"
                 step="0.1"
                 min="0"
                 max="1"
-                className="w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50"
+                style={{ width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }}
                 value={props.penumbra}
                 onChange={e => onUpdate({ ...component.properties, 'penumbra': parseFloat(e.target.value) })}
             />
         </div>
         <div>
-            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Distance</label>
+            <label style={{ display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 2 }}>Distance</label>
             <input
                 type="number"
                 step="1"
                 min="0"
-                className="w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50"
+                style={{ width: '100%', backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', padding: '2px 4px', fontSize: '10px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none' }}
                 value={props.distance}
                 onChange={e => onUpdate({ ...component.properties, 'distance': parseFloat(e.target.value) })}
             />
         </div>
         <div>
-            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Cast Shadow</label>
+            <label style={{ display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 2 }}>Cast Shadow</label>
             <input
                 type="checkbox"
-                className="h-4 w-4 bg-black/40 border border-cyan-500/30 cursor-pointer"
+                style={{ height: 16, width: 16, backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', cursor: 'pointer' }}
                 checked={props.castShadow}
                 onChange={e => onUpdate({ ...component.properties, 'castShadow': e.target.checked })}
             />

package/src/tools/prefabeditor/components/TransformComponent.tsx

@@ -1,4 +1,4 @@
-
+import { useEffect, useRef, useState } from "react";
 import { Component } from "./ComponentRegistry";
 
 function TransformComponentEditor({ component, onUpdate, transformMode, setTransformMode }: {
@@ -22,10 +22,10 @@ function TransformComponentEditor({ component, onUpdate, transformMode, setTrans
         },
     };
 
-    return <div className="flex flex-col">
+    return <div style={{ display: 'flex', flexDirection: 'column' }}>
         {transformMode && setTransformMode && (
-            <div className="mb-2">
-                <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1">Transform Mode</label>
+            <div style={{ marginBottom: 8 }}>
+                <label style={{ display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>Transform Mode</label>
                 <div style={{ display: 'flex', gap: 6 }}>
                     {["translate", "rotate", "scale"].map(mode => (
                         <button
@@ -67,36 +67,131 @@ const TransformComponent: Component = {
 
 export default TransformComponent;
 
+export function Vector3Input({
+    label,
+    value,
+    onChange
+}: {
+    label: string;
+    value: [number, number, number];
+    onChange: (v: [number, number, number]) => void;
+}) {
+    const [draft, setDraft] = useState<[string, string, string]>(
+        () => value.map(v => v.toString()) as any
+    );
+
+    // Sync external changes (gizmo, undo, etc.)
+    useEffect(() => {
+        setDraft(value.map(v => v.toString()) as any);
+    }, [value[0], value[1], value[2]]);
+
+    const dragState = useRef<{
+        index: number;
+        startX: number;
+        startValue: number;
+    } | null>(null);
+
+    const commit = (index: number) => {
+        const num = parseFloat(draft[index]);
+        if (Number.isFinite(num)) {
+            const next = [...value] as [number, number, number];
+            next[index] = num;
+            onChange(next);
+        }
+    };
+
+    const startScrub = (e: React.PointerEvent, index: number) => {
+        e.preventDefault();
+
+        dragState.current = {
+            index,
+            startX: e.clientX,
+            startValue: value[index]
+        };
+
+        (e.target as HTMLElement).setPointerCapture(e.pointerId);
+        document.body.style.cursor = "ew-resize";
+    };
+
+    const onScrubMove = (e: React.PointerEvent) => {
+        if (!dragState.current) return;
+
+        const { index, startX, startValue } = dragState.current;
+        const dx = e.clientX - startX;
+
+        let speed = 0.02;
+        if (e.shiftKey) speed *= 0.1; // fine
+        if (e.altKey) speed *= 5;     // coarse
 
-export function Vector3Input({ label, value, onChange }: { label: string, value: [number, number, number], onChange: (v: [number, number, number]) => void }) {
-    const handleChange = (index: number, val: string) => {
-        const newValue = [...value] as [number, number, number];
-        newValue[index] = parseFloat(val) || 0;
-        onChange(newValue);
+        const nextValue = startValue + dx * speed;
+        const next = [...value] as [number, number, number];
+        next[index] = nextValue;
+
+        setDraft(d => {
+            const copy = [...d] as any;
+            copy[index] = nextValue.toFixed(3);
+            return copy;
+        });
+
+        onChange(next);
+    };
+
+    const endScrub = (e: React.PointerEvent) => {
+        if (!dragState.current) return;
+
+        dragState.current = null;
+        document.body.style.cursor = "";
+        (e.target as HTMLElement).releasePointerCapture(e.pointerId);
     };
 
     const axes = [
-        { key: 'x', color: 'red', index: 0 },
-        { key: 'y', color: 'green', index: 1 },
-        { key: 'z', color: 'blue', index: 2 }
+        { key: "x", color: "red", index: 0 },
+        { key: "y", color: "green", index: 1 },
+        { key: "z", color: "blue", index: 2 }
     ] as const;
 
-    return <div className="mb-2">
-        <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1">{label}</label>
-        <div className="flex gap-1">
-            {axes.map(({ key, color, index }) => (
-                <div key={key} className="flex-1 flex items-center gap-1 bg-black/30 border border-cyan-500/20 rounded px-1.5 py-1 min-h-[32px]">
-                    <span className={`text-xs font-bold text-${color}-400 w-3`}>{key.toUpperCase()}</span>
-                    <input
-                        className="flex-1 bg-transparent text-xs text-cyan-200 font-mono outline-none w-full min-w-0"
-                        type="number"
-                        step="0.1"
-                        value={value[index].toFixed(2)}
-                        onChange={e => handleChange(index, e.target.value)}
-                        onFocus={e => e.target.select()}
-                    />
-                </div>
-            ))}
+    return (
+        <div style={{ marginBottom: 8 }}>
+            <label style={{ display: 'block', fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>
+                {label}
+            </label>
+
+            <div style={{ display: 'flex', gap: 4 }}>
+                {axes.map(({ key, color, index }) => (
+                    <div
+                        key={key}
+                        style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 4, backgroundColor: 'rgba(0, 0, 0, 0.3)', border: '1px solid rgba(34, 211, 238, 0.2)', borderRadius: 4, padding: '4px 6px', minHeight: 32 }}
+                    >
+                        {/* SCRUB HANDLE */}
+                        <span
+                            style={{ fontSize: '12px', fontWeight: 'bold', color: color === 'red' ? 'rgba(248, 113, 113, 1)' : color === 'green' ? 'rgba(134, 239, 172, 1)' : 'rgba(96, 165, 250, 1)', width: 12, cursor: 'ew-resize', userSelect: 'none' }}
+                            onPointerDown={e => startScrub(e, index)}
+                            onPointerMove={onScrubMove}
+                            onPointerUp={endScrub}
+                        >
+                            {key.toUpperCase()}
+                        </span>
+
+                        {/* TEXT INPUT */}
+                        <input
+                            style={{ flex: 1, backgroundColor: 'transparent', fontSize: '12px', color: 'rgba(165, 243, 252, 1)', fontFamily: 'monospace', outline: 'none', width: '100%', minWidth: 0 }}
+                            type="text"
+                            value={draft[index]}
+                            onChange={e => {
+                                const next = [...draft] as any;
+                                next[index] = e.target.value;
+                                setDraft(next);
+                            }}
+                            onBlur={() => commit(index)}
+                            onKeyDown={e => {
+                                if (e.key === "Enter") {
+                                    (e.target as HTMLInputElement).blur();
+                                }
+                            }}
+                        />
+                    </div>
+                ))}
+            </div>
         </div>
-    </div>
-}
+    );
+}

package/src/tools/prefabeditor/types.ts

@@ -6,6 +6,7 @@ export interface Prefab {
 
 export interface GameObject {
     id: string;
+    name?: string;
     disabled?: boolean;
     hidden?: boolean;
     children?: GameObject[];

package/src/tools/prefabeditor/utils.ts

@@ -69,6 +69,7 @@ export function cloneNode(node: GameObject): GameObject {
     return {
         ...node,
         id: crypto.randomUUID(),
+        name: `${node.name ?? "Node"} Copy`,
         children: node.children?.map(cloneNode)
     };
 }
@@ -78,3 +79,32 @@ export function getComponent<T = any>(node: GameObject, type: string): T | undef
     const comp = Object.values(node.components ?? {}).find(c => c?.type === type);
     return comp?.properties as T | undefined;
 }
+
+export function updateNodeById(
+  root: GameObject,
+  id: string,
+  updater: (node: GameObject) => GameObject
+): GameObject {
+  if (root.id === id) {
+    return updater(root);
+  }
+
+  if (!root.children) {
+    return root;
+  }
+
+  let didChange = false;
+
+  const newChildren = root.children.map(child => {
+    const updated = updateNodeById(child, id, updater);
+    if (updated !== child) didChange = true;
+    return updated;
+  });
+
+  if (!didChange) return root;
+
+  return {
+    ...root,
+    children: newChildren
+  };
+}