react-three-game 0.0.7 → 0.0.8

package/src/tools/dragdrop/page.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Physics, RigidBody } from "@react-three/rapier";
+import { OrbitControls } from "@react-three/drei";
+import { useState } from "react";
+import { DragDropLoader } from "./DragDropLoader";
+import GameCanvas from "../../shared/GameCanvas";
+
+export default function Home() {
+    const [models, setModels] = useState<any[]>([]);
+
+    return (
+        <>
+            <DragDropLoader onModelLoaded={model => setModels(prev => [...prev, model])} />
+            <div className="w-full items-center justify-items-center min-h-screen" style={{ height: "100vh" }}>
+                <GameCanvas>
+                    <Physics>
+                        <RigidBody>
+                            <mesh castShadow>
+                                <boxGeometry args={[1, 1, 1]} />
+                                <meshStandardMaterial color="orange" />
+                            </mesh>
+                        </RigidBody>
+                        <RigidBody type="fixed">
+                            <mesh position={[0, -2, 0]} scale={[10, 0.1, 10]} receiveShadow>
+                                <boxGeometry />
+                                <meshStandardMaterial color="gray" />
+                            </mesh>
+                        </RigidBody>
+                        {/* Render loaded models */}
+                        {models.map((model, idx) => (
+                            <primitive object={model} key={idx} position={[0, 0, 0]} />
+                        ))}
+                        <ambientLight intensity={0.5} />
+                        <pointLight position={[10, 10, 10]} castShadow intensity={1000} />
+                        <OrbitControls />
+                    </Physics>
+                </GameCanvas>
+            </div>
+        </>
+    );
+}

package/src/tools/prefabeditor/EditorTree.tsx

@@ -0,0 +1,277 @@
+import { Dispatch, SetStateAction, useState, MouseEvent } from 'react';
+import { Prefab, GameObject } from "./types";
+import { getComponent } from './components/ComponentRegistry';
+
+interface EditorTreeProps {
+    prefabData?: Prefab;
+    setPrefabData?: Dispatch<SetStateAction<Prefab>>;
+    selectedId: string | null;
+    setSelectedId: Dispatch<SetStateAction<string | null>>;
+}
+
+export default function EditorTree({ prefabData, setPrefabData, selectedId, setSelectedId }: EditorTreeProps) {
+    const [contextMenu, setContextMenu] = useState<{ x: number, y: number, nodeId: string } | null>(null);
+    const [draggedId, setDraggedId] = useState<string | null>(null);
+    const [collapsedIds, setCollapsedIds] = useState<Set<string>>(new Set());
+    const [isTreeCollapsed, setIsTreeCollapsed] = useState(false);
+
+    if (!prefabData || !setPrefabData) return null;
+
+    const handleContextMenu = (e: MouseEvent, nodeId: string) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setContextMenu({ x: e.clientX, y: e.clientY, nodeId });
+    };
+
+    const closeContextMenu = () => setContextMenu(null);
+
+    const toggleCollapse = (e: MouseEvent, id: string) => {
+        e.stopPropagation();
+        setCollapsedIds(prev => {
+            const next = new Set(prev);
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+            return next;
+        });
+    };
+
+    // Actions
+    const handleAddChild = (parentId: string) => {
+        const newNode: GameObject = {
+            id: crypto.randomUUID(),
+            enabled: true,
+            visible: true,
+            components: {
+                transform: {
+                    type: "Transform",
+                    properties: { ...getComponent('Transform')?.defaultProperties }
+                }
+            }
+        };
+
+        setPrefabData(prev => {
+            const newRoot = JSON.parse(JSON.stringify(prev.root)); // Deep clone for safety
+            const parent = findNode(newRoot, parentId);
+            if (parent) {
+                parent.children = parent.children || [];
+                parent.children.push(newNode);
+            }
+            return { ...prev, root: newRoot };
+        });
+        closeContextMenu();
+    };
+
+    const handleDuplicate = (nodeId: string) => {
+        if (nodeId === prefabData.root.id) return; // Cannot duplicate root
+
+        setPrefabData(prev => {
+            const newRoot = JSON.parse(JSON.stringify(prev.root));
+            const parent = findParent(newRoot, nodeId);
+            const node = findNode(newRoot, nodeId);
+
+            if (parent && node) {
+                const clone = cloneNode(node);
+                parent.children = parent.children || [];
+                parent.children.push(clone);
+            }
+            return { ...prev, root: newRoot };
+        });
+        closeContextMenu();
+    };
+
+    const handleDelete = (nodeId: string) => {
+        if (nodeId === prefabData.root.id) return; // Cannot delete root
+
+        setPrefabData(prev => {
+            const newRoot = deleteNodeFromTree(JSON.parse(JSON.stringify(prev.root)), nodeId);
+            return { ...prev, root: newRoot! };
+        });
+        if (selectedId === nodeId) setSelectedId(null);
+        closeContextMenu();
+    };
+
+    // Drag and Drop
+    const handleDragStart = (e: React.DragEvent, id: string) => {
+        e.stopPropagation();
+        if (id === prefabData.root.id) {
+            e.preventDefault(); // Cannot drag root
+            return;
+        }
+        setDraggedId(id);
+        e.dataTransfer.effectAllowed = "move";
+    };
+
+    const handleDragOver = (e: React.DragEvent, targetId: string) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!draggedId || draggedId === targetId) return;
+
+        // Check for cycles: target cannot be a descendant of dragged node
+        const draggedNode = findNode(prefabData.root, draggedId);
+        if (draggedNode && findNode(draggedNode, targetId)) return;
+
+        e.dataTransfer.dropEffect = "move";
+    };
+
+    const handleDrop = (e: React.DragEvent, targetId: string) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!draggedId || draggedId === targetId) return;
+
+        setPrefabData(prev => {
+            const newRoot = JSON.parse(JSON.stringify(prev.root));
+
+            // Check cycle again on the fresh tree
+            const draggedNodeRef = findNode(newRoot, draggedId);
+            if (draggedNodeRef && findNode(draggedNodeRef, targetId)) return prev;
+
+            // Remove from old parent
+            const parent = findParent(newRoot, draggedId);
+            if (!parent) return prev;
+
+            const nodeToMove = parent.children?.find(c => c.id === draggedId);
+            if (!nodeToMove) return prev;
+
+            parent.children = parent.children!.filter(c => c.id !== draggedId);
+
+            // Add to new parent
+            const target = findNode(newRoot, targetId);
+            if (target) {
+                target.children = target.children || [];
+                target.children.push(nodeToMove);
+            }
+
+            return { ...prev, root: newRoot };
+        });
+        setDraggedId(null);
+    };
+
+    const renderNode = (node: GameObject, depth: number = 0) => {
+        if (!node) return null;
+
+        const isSelected = node.id === selectedId;
+        const isCollapsed = collapsedIds.has(node.id);
+        const hasChildren = node.children && node.children.length > 0;
+
+        return (
+            <div key={node.id} className="select-none">
+                <div
+                    className={`flex items-center py-0.5 px-1 cursor-pointer border-b border-cyan-500/10 ${isSelected ? 'bg-cyan-500/30 hover:bg-cyan-500/40 border-cyan-400/30' : 'hover:bg-cyan-500/10'}`}
+                    style={{ paddingLeft: `${depth * 8 + 4}px` }}
+                    onClick={(e) => { e.stopPropagation(); setSelectedId(node.id); }}
+                    onContextMenu={(e) => handleContextMenu(e, node.id)}
+                    draggable={node.id !== prefabData.root.id}
+                    onDragStart={(e) => handleDragStart(e, node.id)}
+                    onDragOver={(e) => handleDragOver(e, node.id)}
+                    onDrop={(e) => handleDrop(e, node.id)}
+                >
+                    <span
+                        className={`mr-0.5 w-3 text-center text-cyan-400/50 hover:text-cyan-400 cursor-pointer text-[8px] ${hasChildren ? '' : 'invisible'}`}
+                        onClick={(e) => hasChildren && toggleCollapse(e, node.id)}
+                    >
+                        {isCollapsed ? '▶' : '▼'}
+                    </span>
+                    <span className="text-[10px] truncate font-mono text-cyan-300">
+                        {node.id}
+                    </span>
+                </div>
+                {!isCollapsed && node.children && (
+                    <div>
+                        {node.children.map(child => renderNode(child, depth + 1))}
+                    </div>
+                )}
+            </div>
+        );
+    };
+
+    return (
+        <>
+            <div className="bg-black/70 backdrop-blur-sm text-white border border-cyan-500/30 max-h-[85vh] overflow-y-auto flex flex-col" style={{ width: isTreeCollapsed ? 'auto' : '14rem' }} onClick={closeContextMenu}>
+                <div
+                    className="px-1.5 py-1 font-mono text-[10px] bg-cyan-500/10 border-b border-cyan-500/30 sticky top-0 uppercase tracking-wider text-cyan-400/80 cursor-pointer hover:bg-cyan-500/20 flex items-center justify-between"
+                    onClick={(e) => { e.stopPropagation(); setIsTreeCollapsed(!isTreeCollapsed); }}
+                >
+                    <span>Prefab Graph</span>
+                    <span className="text-[8px]">{isTreeCollapsed ? '▶' : '◀'}</span>
+                </div>
+                {!isTreeCollapsed && (
+                    <div className="flex-1 py-0.5">
+                        {renderNode(prefabData.root)}
+                    </div>
+                )}
+            </div>
+
+            {contextMenu && (
+                <div
+                    className="fixed bg-black/90 backdrop-blur-sm border border-cyan-500/40 z-50 min-w-[100px]"
+                    style={{ top: contextMenu.y, left: contextMenu.x }}
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <button
+                        className="w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20"
+                        onClick={() => handleAddChild(contextMenu.nodeId)}
+                    >
+                        Add Child
+                    </button>
+                    {contextMenu.nodeId !== prefabData.root.id && (
+                        <>
+                            <button
+                                className="w-full text-left px-2 py-1 hover:bg-cyan-500/20 text-[10px] text-cyan-300 font-mono border-b border-cyan-500/20"
+                                onClick={() => handleDuplicate(contextMenu.nodeId)}
+                            >
+                                Duplicate
+                            </button>
+                            <button
+                                className="w-full text-left px-2 py-1 hover:bg-red-500/20 text-[10px] text-red-400 font-mono"
+                                onClick={() => handleDelete(contextMenu.nodeId)}
+                            >
+                                Delete
+                            </button>
+                        </>
+                    )}
+                </div>
+            )}
+        </>
+    );
+}
+
+// --- Helpers ---
+
+function findNode(root: GameObject, id: string): GameObject | null {
+    if (root.id === id) return root;
+    if (root.children) {
+        for (const child of root.children) {
+            const found = findNode(child, id);
+            if (found) return found;
+        }
+    }
+    return null;
+}
+
+function findParent(root: GameObject, id: string): GameObject | null {
+    if (!root.children) return null;
+    for (const child of root.children) {
+        if (child.id === id) return root;
+        const found = findParent(child, id);
+        if (found) return found;
+    }
+    return null;
+}
+
+function deleteNodeFromTree(root: GameObject, id: string): GameObject | null {
+    if (root.id === id) return null;
+    if (root.children) {
+        root.children = root.children
+            .map(child => deleteNodeFromTree(child, id))
+            .filter((child): child is GameObject => child !== null);
+    }
+    return root;
+}
+
+function cloneNode(node: GameObject): GameObject {
+    const newNode = { ...node, id: crypto.randomUUID() };
+    if (newNode.children) {
+        newNode.children = newNode.children.map(child => cloneNode(child));
+    }
+    return newNode;
+}

package/src/tools/prefabeditor/EditorUI.tsx

@@ -0,0 +1,273 @@
+import { Dispatch, SetStateAction, useState, useEffect } from 'react';
+import { Prefab, GameObject as GameObjectType } from "./types";
+import EditorTree from './EditorTree';
+import { getAllComponents } from './components/ComponentRegistry';
+
+
+function EditorUI({ prefabData, setPrefabData, selectedId, setSelectedId, transformMode, setTransformMode, basePath }: {
+    prefabData?: Prefab;
+    setPrefabData?: Dispatch<SetStateAction<Prefab>>;
+    selectedId: string | null;
+    setSelectedId: Dispatch<SetStateAction<string | null>>;
+    transformMode: "translate" | "rotate" | "scale";
+    setTransformMode: (m: "translate" | "rotate" | "scale") => void;
+    basePath?: string;
+}) {
+    const [isInspectorCollapsed, setIsInspectorCollapsed] = useState(false);
+
+    const updateNode = (updater: (n: GameObjectType) => GameObjectType) => {
+        if (!prefabData || !setPrefabData || !selectedId) return;
+        setPrefabData(prev => ({
+            ...prev,
+            root: updatePrefabNode(prev.root, selectedId, updater)
+        }));
+    };
+
+    const deleteNode = () => {
+        if (!prefabData || !setPrefabData || !selectedId) return;
+        if (selectedId === prefabData.root.id) {
+            alert("Cannot delete root node");
+            return;
+        }
+        setPrefabData(prev => {
+            const newRoot = deletePrefabNode(prev.root, selectedId);
+            return { ...prev, root: newRoot! };
+        });
+        setSelectedId(null);
+    };
+
+    const selectedNode = selectedId && prefabData ? findNode(prefabData.root, selectedId) : null;
+
+    // if (!selectedNode) return null;
+    return <>
+        <div style={{ position: 'absolute', top: "0.5rem", right: "0.5rem", zIndex: 20, backgroundColor: "rgba(0,0,0,0.7)", backdropFilter: "blur(4px)", color: "white", border: "1px solid rgba(0,255,255,0.3)" }} >
+            <div
+                className="px-1.5 py-1 font-mono text-[10px] bg-cyan-500/10 border-b border-cyan-500/30 sticky top-0 uppercase tracking-wider text-cyan-400/80 cursor-pointer hover:bg-cyan-500/20 flex items-center justify-between"
+                onClick={() => setIsInspectorCollapsed(!isInspectorCollapsed)}
+            >
+                <span>Inspector</span>
+                <span className="text-[8px]">{isInspectorCollapsed ? '◀' : '▶'}</span>
+            </div>
+            {!isInspectorCollapsed && selectedNode && (
+                <NodeInspector
+                    node={selectedNode}
+                    updateNode={updateNode}
+                    deleteNode={deleteNode}
+                    transformMode={transformMode}
+                    setTransformMode={setTransformMode}
+                    basePath={basePath}
+                />
+            )}
+        </div>
+        <div style={{ position: 'absolute', top: "0.5rem", left: "0.5rem", zIndex: 20 }} >
+            <EditorTree
+                prefabData={prefabData}
+                setPrefabData={setPrefabData}
+                selectedId={selectedId}
+                setSelectedId={setSelectedId}
+            />
+        </div>
+    </>;
+}
+
+function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransformMode, basePath }: {
+    node: GameObjectType;
+    updateNode: (updater: (n: GameObjectType) => GameObjectType) => void;
+    deleteNode: () => void;
+    transformMode: "translate" | "rotate" | "scale";
+    setTransformMode: (m: "translate" | "rotate" | "scale") => void;
+    basePath?: string;
+}) {
+    const ALL_COMPONENTS = getAllComponents();
+    const allComponentKeys = Object.keys(ALL_COMPONENTS);
+    const [addComponentType, setAddComponentType] = useState(allComponentKeys[0]);
+
+    const componentKeys = Object.keys(node.components || {}).join(',');
+    useEffect(() => {
+        // Components stored on nodes use lowercase keys (e.g. 'geometry'),
+        // while the registry keys are the component names (e.g. 'Geometry').
+        const available = allComponentKeys.filter(k => !node.components?.[k.toLowerCase()]);
+        if (!available.includes(addComponentType)) {
+            setAddComponentType(available[0] || "");
+        }
+    }, [componentKeys, addComponentType, node.components, allComponentKeys]);
+
+    return <div className="flex flex-col gap-1 text-[11px] max-w-[250px] max-h-[80vh] overflow-y-auto">
+        <div className="border-b border-cyan-500/20 pb-1 px-1.5 pt-1">
+            <input
+                className="w-full bg-black/40 border border-cyan-500/30 px-1 py-0.5 text-[11px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50"
+                value={node.id}
+                onChange={e => updateNode(n => ({ ...n, id: e.target.value }))}
+            />
+        </div>
+
+        <div className="flex justify-between items-center px-1.5 py-0.5 border-b border-cyan-500/20">
+            <label className="text-[10px] font-mono text-cyan-400/80 uppercase tracking-wider">Components</label>
+            <button onClick={deleteNode} className="text-[10px] text-red-400/80 hover:text-red-400">✕</button>
+        </div>
+
+        <div className="px-1.5 py-1 border-b border-cyan-500/20">
+            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Mode</label>
+            <div className="flex gap-0.5">
+                {["translate", "rotate", "scale"].map(mode => (
+                    <button
+                        key={mode}
+                        onClick={() => setTransformMode(mode as any)}
+                        className={`flex-1 px-1 py-0.5 text-[10px] font-mono border ${transformMode === mode ? 'bg-cyan-500/30 border-cyan-400/50 text-cyan-200' : 'bg-black/30 border-cyan-500/20 text-cyan-400/60 hover:border-cyan-400/30'}`}
+                    >
+                        {mode[0].toUpperCase()}
+                    </button>
+                ))}
+            </div>
+        </div>
+
+        {/* Components */}
+        {/* {node.components && Object.entries(node.components).map(([key, comp]: [string, any]) => {
+            if (!comp) return null;
+            return (
+                <div key={key} className="border border-cyan-500/20 mx-1 my-0.5 bg-black/20">
+                    <div className="flex justify-between items-center px-1 py-0.5 border-b border-cyan-500/20 bg-cyan-500/5">
+                        <span className="font-mono text-[10px] text-cyan-300 uppercase">{key}</span>
+                        <button
+                            onClick={() => updateNode(n => {
+                                const components = { ...n.components };
+                                delete components[key as keyof typeof components];
+                                return { ...n, components };
+                            })}
+                            className="text-[9px] text-red-400/60 hover:text-red-400"
+                        >
+                            ✕
+                        </button>
+                    </div>
+                    <div className="px-1 py-0.5">
+                        <ComponentEditor component={comp} onChange={(newComp: any) => updateNode(n => ({
+                            ...n,
+                            components: { ...n.components, [key]: newComp }
+                        }))} />
+                    </div>
+                </div>
+            );
+        })} */}
+
+        {node.components && Object.entries(node.components).map(([key, comp]: [string, any]) => {
+            if (!comp) return null;
+            const componentDef = ALL_COMPONENTS[comp.type];
+            if (!componentDef) return <div key={key} className="px-1 py-0.5 text-red-400 text-[10px]">Unknown component type: {comp.type}
+                <textarea defaultValue={JSON.stringify(comp)} />
+            </div>;
+
+            const EditorComp = componentDef.Editor;
+            return (
+                <div key={key} className='px-1'>
+                    <div className="flex justify-between items-center py-0.5 border-b border-cyan-500/20 bg-cyan-500/5">
+                        <span className="font-mono text-[10px] text-cyan-300 uppercase">{key}</span>
+                        <button
+                            onClick={() => updateNode(n => {
+                                const components = { ...n.components };
+                                delete components[key as keyof typeof components];
+                                return { ...n, components };
+                            })}
+                            className="text-[9px] text-red-400/60 hover:text-red-400"
+                        >
+                            ✕
+                        </button>
+                    </div>
+                    {EditorComp ? (
+                        <EditorComp
+                            component={comp}
+                            onUpdate={(newProps: any) => updateNode(n => ({
+                                ...n,
+                                components: {
+                                    ...n.components,
+                                    [key]: {
+                                        ...comp,
+                                        properties: { ...comp.properties, ...newProps }
+                                    }
+                                }
+                            }))}
+                            basePath={basePath}
+                        />
+                    ) : null}
+                </div>
+            );
+        })}
+
+        {/* Add Component */}
+        <div className="px-1.5 py-1 border-t border-cyan-500/20">
+            <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">Add Component</label>
+            <div className="flex gap-0.5">
+                <select
+                    className="bg-black/40 border border-cyan-500/30 px-1 py-0.5 flex-1 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50"
+                    value={addComponentType}
+                    onChange={e => setAddComponentType(e.target.value)}
+                >
+                    {allComponentKeys.filter(k => !node.components?.[k.toLowerCase()]).map(k => (
+                        <option key={k} value={k}>{k}</option>
+                    ))}
+                </select>
+                <button
+                    className="bg-cyan-500/20 hover:bg-cyan-500/30 border border-cyan-500/30 px-2 py-0.5 text-[10px] text-cyan-300 font-mono disabled:opacity-30"
+                    disabled={!addComponentType}
+                    onClick={() => {
+                        if (!addComponentType) return;
+                        const def = ALL_COMPONENTS[addComponentType];
+                        if (def && !node.components?.[addComponentType.toLowerCase()]) {
+                            const key = addComponentType.toLowerCase();
+                            updateNode(n => ({
+                                ...n,
+                                components: {
+                                    ...n.components,
+                                    [key]: { type: def.name, properties: def.defaultProperties }
+                                }
+                            }));
+                        }
+                    }}
+                >
+                    +
+                </button>
+            </div>
+        </div>
+
+
+    </div>
+}
+
+function findNode(root: GameObjectType, id: string): GameObjectType | null {
+    if (root.id === id) return root;
+    if (root.children) {
+        for (const child of root.children) {
+            const found = findNode(child, id);
+            if (found) return found;
+        }
+    }
+    return null;
+}
+
+function updatePrefabNode(root: GameObjectType, id: string, update: (node: GameObjectType) => GameObjectType): GameObjectType {
+    if (root.id === id) {
+        return update(root);
+    }
+    if (root.children) {
+        return {
+            ...root,
+            children: root.children.map(child => updatePrefabNode(child, id, update))
+        };
+    }
+    return root;
+}
+
+function deletePrefabNode(root: GameObjectType, id: string): GameObjectType | null {
+    if (root.id === id) return null;
+
+    if (root.children) {
+        return {
+            ...root,
+            children: root.children
+                .map(child => deletePrefabNode(child, id))
+                .filter((child): child is GameObjectType => child !== null)
+        };
+    }
+    return root;
+}
+
+export default EditorUI;

package/src/tools/prefabeditor/EventSystem.tsx

@@ -0,0 +1,36 @@
+import { useRef, useImperativeHandle, forwardRef, useCallback } from 'react';
+
+interface EventSystemRef {
+    fire: (eventType: string, data?: any) => void;
+}
+
+const EventSystemHook = forwardRef<EventSystemRef, { entityId: string }>(
+    ({ entityId }, ref) => {
+        const targetRef = useRef<EventTarget>(typeof window !== 'undefined' ? window : null);
+
+        // Fire a global JS event with entityId as source
+        const fire = useCallback((eventType: string, data?: any) => {
+            if (!targetRef.current) return;
+
+            const event = new CustomEvent(eventType, {
+                detail: {
+                    entityId,
+                    data,
+                },
+            });
+
+            targetRef.current.dispatchEvent(event);
+        }, [entityId]);
+
+        // Expose ref API
+        useImperativeHandle(ref, () => ({
+            fire,
+        }), [fire]);
+
+        return null;
+    }
+);
+
+EventSystemHook.displayName = 'EventSystemHook';
+
+export default EventSystemHook;