react-three-game 0.0.14 → 0.0.16

package/src/tools/prefabeditor/PrefabEditor.tsx

@@ -15,8 +15,6 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }: { b
         "name": "New Prefab",
         "root": {
             "id": "root",
-            "enabled": true,
-            "visible": true,
             "components": {
                 "transform": {
                     "type": "Transform",
@@ -69,26 +67,88 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }: { b
             </Physics>
         </GameCanvas>
 
-        <div style={{ position: "absolute", top: "0.5rem", left: "50%", transform: "translateX(-50%)" }} className="bg-black/70 backdrop-blur-sm border border-cyan-500/30 px-2 py-1 flex items-center gap-1">
+        <div
+            style={{
+                position: "absolute",
+                top: 8,
+                left: "50%",
+                transform: "translateX(-50%)",
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                padding: "2px 4px",
+                background: "rgba(0,0,0,0.55)",
+                border: "1px solid rgba(255,255,255,0.12)",
+                borderRadius: 4,
+                color: "rgba(255,255,255,0.9)",
+                fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+                fontSize: 11,
+                lineHeight: 1,
+                WebkitUserSelect: "none",
+                userSelect: "none",
+            }}
+        >
             <button
-                className="px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30"
+                style={{
+                    padding: "2px 6px",
+                    font: "inherit",
+                    background: "transparent",
+                    color: "inherit",
+                    border: "1px solid rgba(255,255,255,0.18)",
+                    borderRadius: 3,
+                    cursor: "pointer",
+                }}
                 onClick={() => setEditMode(!editMode)}
+                onPointerEnter={(e) => {
+                    (e.currentTarget as HTMLButtonElement).style.background = "rgba(255,255,255,0.08)";
+                }}
+                onPointerLeave={(e) => {
+                    (e.currentTarget as HTMLButtonElement).style.background = "transparent";
+                }}
             >
                 {editMode ? "▶" : "⏸"}
             </button>
-            <span className="text-cyan-500/30 text-[10px]">|</span>
+            <span style={{ opacity: 0.35 }}>|</span>
             <button
-                className="px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30"
+                style={{
+                    padding: "2px 6px",
+                    font: "inherit",
+                    background: "transparent",
+                    color: "inherit",
+                    border: "1px solid rgba(255,255,255,0.18)",
+                    borderRadius: 3,
+                    cursor: "pointer",
+                }}
                 onClick={async () => {
                     const prefab = await loadJson();
                     if (prefab) setLoadedPrefab(prefab);
                 }}
+                onPointerEnter={(e) => {
+                    (e.currentTarget as HTMLButtonElement).style.background = "rgba(255,255,255,0.08)";
+                }}
+                onPointerLeave={(e) => {
+                    (e.currentTarget as HTMLButtonElement).style.background = "transparent";
+                }}
             >
                 📥
             </button>
             <button
-                className="px-1 py-0.5 text-[10px] font-mono text-cyan-300 hover:bg-cyan-500/20 border border-cyan-500/30"
+                style={{
+                    padding: "2px 6px",
+                    font: "inherit",
+                    background: "transparent",
+                    color: "inherit",
+                    border: "1px solid rgba(255,255,255,0.18)",
+                    borderRadius: 3,
+                    cursor: "pointer",
+                }}
                 onClick={() => saveJson(loadedPrefab, "prefab")}
+                onPointerEnter={(e) => {
+                    (e.currentTarget as HTMLButtonElement).style.background = "rgba(255,255,255,0.08)";
+                }}
+                onPointerLeave={(e) => {
+                    (e.currentTarget as HTMLButtonElement).style.background = "transparent";
+                }}
             >
                 💾
             </button>

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -59,15 +59,6 @@ export const PrefabRoot = forwardRef<Group, {
         }
     }, [selectedId]);
 
-
-    // const [transformMode, setTransformMode] = useState<"translate" | "rotate" | "scale">("translate"); // Removed local state
-
-    const updateNode = (updater: (node: GameObjectType) => GameObjectType) => {
-        if (!selectedId || !onPrefabChange) return;
-        const newRoot = updatePrefabNode(data.root, selectedId, updater);
-        onPrefabChange({ ...data, root: newRoot });
-    };
-
     const onTransformChange = () => {
         if (!selectedId || !onPrefabChange) return;
         const obj = objectRefs.current[selectedId];
@@ -167,7 +158,7 @@ export const PrefabRoot = forwardRef<Group, {
                 loadedModels={loadedModels}
                 loadedTextures={loadedTextures}
                 editMode={editMode}
-                parentMatrix={new Matrix4()}   // 👈 identity = world root
+                parentMatrix={new Matrix4()}
             />
         </GameInstanceProvider>
 
@@ -242,7 +233,7 @@ function GameObjectRenderer({
         clickValid.current = false;
     };
 
-    if (!gameObject.enabled || !gameObject.visible) return null;
+    if (gameObject.disabled === true || gameObject.hidden === true) return null;
 
     // --- 2. If instanced, short-circuit to a tiny clean branch ---
     const isInstanced = !!gameObject.components?.model?.properties?.instanced;
@@ -269,8 +260,6 @@ function GameObjectRenderer({
     ));
 
     // --- 4. Wrap with physics if needed ---
-    // Only wrap the core content (geometry/model), not children
-    // Children should be siblings, not inside the physics body
     const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
 
     // --- 6. Final group wrapper ---

package/src/tools/prefabeditor/types.ts

@@ -1,8 +1,8 @@
-import { ThreeElements } from "@react-three/fiber"
+// import { ThreeElements } from "@react-three/fiber"
 
 export interface Prefab {
-    id: string;
-    name: string;
+    id?: string;
+    name?: string;
     description?: string;
     author?: string;
     version?: string;
@@ -13,8 +13,8 @@ export interface Prefab {
 
 export interface GameObject {
     id: string;
-    enabled: boolean;
-    visible: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
     ref?: any;
     children?: GameObject[];
     components?: {