react-three-game 0.0.16 → 0.0.17

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -188,7 +188,7 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
     const geometryDef = geometry ? getComponent('Geometry') : undefined;
     const materialDef = material ? getComponent('Material') : undefined;
     const isModelAvailable = !!(modelComp && modelComp.properties && modelComp.properties.filename && ctx.loadedModels[modelComp.properties.filename]);
-    // Generic component views (exclude geometry/material/model)
+    // Generic component views (exclude geometry/material/model/transform/physics)
     const contextProps = {
         loadedModels: ctx.loadedModels,
         loadedTextures: ctx.loadedTextures,
@@ -197,29 +197,48 @@ function renderCoreNode(gameObject, ctx, parentMatrix) {
         parentMatrix,
         registerRef: ctx.registerRef,
     };
-    const allComponentViews = gameObject.components
-        ? Object.entries(gameObject.components)
+    // Separate wrapper components (that accept children) from leaf components
+    const wrapperComponents = [];
+    const leafComponents = [];
+    if (gameObject.components) {
+        Object.entries(gameObject.components)
             .filter(([key]) => key !== 'geometry' && key !== 'material' && key !== 'model' && key !== 'transform' && key !== 'physics')
-            .map(([key, comp]) => {
+            .forEach(([key, comp]) => {
             if (!comp || !comp.type)
-                return null;
+                return;
             const def = getComponent(comp.type);
             if (!def || !def.View)
-                return null;
-            return _jsx(def.View, Object.assign({ properties: comp.properties }, contextProps), key);
-        })
-        : null;
+                return;
+            // Check if the component View accepts children by checking function signature
+            // Components that wrap content should accept children prop
+            const viewString = def.View.toString();
+            if (viewString.includes('children')) {
+                wrapperComponents.push({ key, View: def.View, properties: comp.properties });
+            }
+            else {
+                leafComponents.push(_jsx(def.View, Object.assign({ properties: comp.properties }, contextProps), key));
+            }
+        });
+    }
+    // Build the core content (model or mesh)
+    let coreContent;
     // If we have a model (non-instanced) render it as a primitive with material override
     if (isModelAvailable) {
         const modelObj = ctx.loadedModels[modelComp.properties.filename].clone();
-        return (_jsxs("primitive", { object: modelObj, children: [material && materialDef && materialDef.View && (_jsx(materialDef.View, { properties: material.properties, loadedTextures: ctx.loadedTextures, isSelected: ctx.selectedId === gameObject.id, editMode: ctx.editMode, parentMatrix: parentMatrix, registerRef: ctx.registerRef }, "material")), allComponentViews] }));
+        coreContent = (_jsxs("primitive", { object: modelObj, children: [material && materialDef && materialDef.View && (_jsx(materialDef.View, { properties: material.properties, loadedTextures: ctx.loadedTextures, isSelected: ctx.selectedId === gameObject.id, editMode: ctx.editMode, parentMatrix: parentMatrix, registerRef: ctx.registerRef }, "material")), leafComponents] }));
+    }
+    else if (geometry && geometryDef && geometryDef.View) {
+        // Otherwise, if geometry present, render a mesh
+        coreContent = (_jsxs("mesh", { children: [_jsx(geometryDef.View, Object.assign({ properties: geometry.properties }, contextProps), "geometry"), material && materialDef && materialDef.View && (_jsx(materialDef.View, { properties: material.properties, loadedTextures: ctx.loadedTextures, isSelected: ctx.selectedId === gameObject.id, editMode: ctx.editMode, parentMatrix: parentMatrix, registerRef: ctx.registerRef }, "material")), leafComponents] }));
     }
-    // Otherwise, if geometry present, render a mesh
-    if (geometry && geometryDef && geometryDef.View) {
-        return (_jsxs("mesh", { children: [_jsx(geometryDef.View, Object.assign({ properties: geometry.properties }, contextProps), "geometry"), material && materialDef && materialDef.View && (_jsx(materialDef.View, { properties: material.properties, loadedTextures: ctx.loadedTextures, isSelected: ctx.selectedId === gameObject.id, editMode: ctx.editMode, parentMatrix: parentMatrix, registerRef: ctx.registerRef }, "material")), allComponentViews] }));
+    else {
+        // No geometry or model, just render leaf components
+        coreContent = _jsx(_Fragment, { children: leafComponents });
     }
-    // Default: render other component views (no geometry/model)
-    return _jsx(_Fragment, { children: allComponentViews });
+    // Wrap core content with wrapper components (in order)
+    return wrapperComponents.reduce((content, { key, View, properties }) => {
+        return _jsx(View, Object.assign({ properties: properties }, contextProps, { children: content }), key);
+    }, coreContent);
 }
 // Helper: wrap core content with physics component when necessary
 function wrapPhysicsIfNeeded(gameObject, content, ctx) {

package/dist/tools/prefabeditor/components/ComponentRegistry.d.ts

@@ -5,6 +5,8 @@ export interface Component {
         component: any;
         onUpdate: (newComp: any) => void;
         basePath?: string;
+        transformMode?: "translate" | "rotate" | "scale";
+        setTransformMode?: (m: "translate" | "rotate" | "scale") => void;
     }>;
     defaultProperties: any;
     View?: FC<any>;

package/dist/tools/prefabeditor/components/RotatorComponent.d.ts

@@ -0,0 +1,3 @@
+import { Component } from "./ComponentRegistry";
+declare const RotatorComponent: Component;
+export default RotatorComponent;

package/dist/tools/prefabeditor/components/RotatorComponent.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFrame } from "@react-three/fiber";
+import { useRef } from "react";
+function RotatorComponentEditor({ component, onUpdate }) {
+    var _a, _b;
+    const props = {
+        speed: (_a = component.properties.speed) !== null && _a !== void 0 ? _a : 1.0,
+        axis: (_b = component.properties.axis) !== null && _b !== void 0 ? _b : 'y'
+    };
+    return _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Rotation Speed" }), _jsx("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", value: props.speed, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { speed: parseFloat(e.target.value) })) })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: "Rotation Axis" }), _jsxs("select", { 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", value: props.axis, onChange: e => onUpdate(Object.assign(Object.assign({}, component.properties), { axis: e.target.value })), children: [_jsx("option", { value: "x", children: "X" }), _jsx("option", { value: "y", children: "Y" }), _jsx("option", { value: "z", children: "Z" })] })] })] });
+}
+// The view component for Rotator
+function RotatorView({ properties, children }) {
+    var _a, _b;
+    const groupRef = useRef(null);
+    const speed = (_a = properties.speed) !== null && _a !== void 0 ? _a : 1.0;
+    const axis = (_b = properties.axis) !== null && _b !== void 0 ? _b : 'y';
+    useFrame((state, delta) => {
+        if (groupRef.current) {
+            if (axis === 'x') {
+                groupRef.current.rotation.x += delta * speed;
+            }
+            else if (axis === 'y') {
+                groupRef.current.rotation.y += delta * speed;
+            }
+            else if (axis === 'z') {
+                groupRef.current.rotation.z += delta * speed;
+            }
+        }
+    });
+    return (_jsx("group", { ref: groupRef, children: children }));
+}
+const RotatorComponent = {
+    name: 'Rotator',
+    Editor: RotatorComponentEditor,
+    View: RotatorView,
+    defaultProperties: {
+        speed: 1.0,
+        axis: 'y'
+    }
+};
+export default RotatorComponent;

package/dist/tools/prefabeditor/components/TransformComponent.js

@@ -1,6 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function TransformComponentEditor({ component, onUpdate }) {
-    return _jsxs("div", { className: "flex flex-col", children: [_jsx(Vector3Input, { label: "Position", value: component.properties.position, onChange: v => onUpdate({ position: v }) }), _jsx(Vector3Input, { label: "Rotation", value: component.properties.rotation, onChange: v => onUpdate({ rotation: v }) }), _jsx(Vector3Input, { label: "Scale", value: component.properties.scale, onChange: v => onUpdate({ scale: v }) })] });
+function TransformComponentEditor({ component, onUpdate, transformMode, setTransformMode }) {
+    const s = {
+        button: {
+            padding: '2px 6px',
+            background: 'transparent',
+            color: 'rgba(255,255,255,0.9)',
+            border: '1px solid rgba(255,255,255,0.14)',
+            borderRadius: 4,
+            cursor: 'pointer',
+            font: 'inherit',
+        },
+        buttonActive: {
+            background: 'rgba(255,255,255,0.10)',
+        },
+    };
+    return _jsxs("div", { className: "flex flex-col", children: [transformMode && setTransformMode && (_jsxs("div", { className: "mb-2", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1", children: "Transform Mode" }), _jsx("div", { style: { display: 'flex', gap: 6 }, children: ["translate", "rotate", "scale"].map(mode => (_jsx("button", { onClick: () => setTransformMode(mode), style: Object.assign(Object.assign(Object.assign({}, s.button), { flex: 1 }), (transformMode === mode ? s.buttonActive : {})), onPointerEnter: (e) => {
+                                if (transformMode !== mode)
+                                    e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                            }, onPointerLeave: (e) => {
+                                if (transformMode !== mode)
+                                    e.currentTarget.style.background = 'transparent';
+                            }, children: mode }, mode))) })] })), _jsx(Vector3Input, { label: "Position", value: component.properties.position, onChange: v => onUpdate({ position: v }) }), _jsx(Vector3Input, { label: "Rotation", value: component.properties.rotation, onChange: v => onUpdate({ rotation: v }) }), _jsx(Vector3Input, { label: "Scale", value: component.properties.scale, onChange: v => onUpdate({ scale: v }) })] });
 }
 const TransformComponent = {
     name: 'Transform',
@@ -18,5 +38,10 @@ export function Vector3Input({ label, value, onChange }) {
         newValue[index] = parseFloat(val) || 0;
         onChange(newValue);
     };
-    return _jsxs("div", { className: "mb-1", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5", children: label }), _jsxs("div", { className: "flex gap-0.5", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx("span", { className: "absolute left-0.5 top-0 text-[8px] text-red-400/80 font-mono", children: "X" }), _jsx("input", { className: "w-full bg-black/40 border border-cyan-500/30 pl-3 pr-0.5 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", type: "number", step: "0.1", value: value[0], onChange: e => handleChange(0, e.target.value) })] }), _jsxs("div", { className: "relative flex-1", children: [_jsx("span", { className: "absolute left-0.5 top-0 text-[8px] text-green-400/80 font-mono", children: "Y" }), _jsx("input", { className: "w-full bg-black/40 border border-cyan-500/30 pl-3 pr-0.5 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", type: "number", step: "0.1", value: value[1], onChange: e => handleChange(1, e.target.value) })] }), _jsxs("div", { className: "relative flex-1", children: [_jsx("span", { className: "absolute left-0.5 top-0 text-[8px] text-blue-400/80 font-mono", children: "Z" }), _jsx("input", { className: "w-full bg-black/40 border border-cyan-500/30 pl-3 pr-0.5 py-0.5 text-[10px] text-cyan-300 font-mono focus:outline-none focus:border-cyan-400/50", type: "number", step: "0.1", value: value[2], onChange: e => handleChange(2, e.target.value) })] })] })] });
+    const axes = [
+        { key: 'x', color: 'red', index: 0 },
+        { key: 'y', color: 'green', index: 1 },
+        { key: 'z', color: 'blue', index: 2 }
+    ];
+    return _jsxs("div", { className: "mb-2", children: [_jsx("label", { className: "block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1", children: label }), _jsx("div", { className: "flex gap-1", children: axes.map(({ key, color, index }) => (_jsxs("div", { 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]", children: [_jsx("span", { className: `text-xs font-bold text-${color}-400 w-3`, children: key.toUpperCase() }), _jsx("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() })] }, key))) })] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Batteries included React Three Fiber game engine",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -17,12 +17,12 @@
   "type": "module",
   "workspaces": ["docs"],
   "peerDependencies": {
-    "@react-three/fiber": "^9.0.0",
-    "@react-three/drei": "^10.0.0",
-    "@react-three/rapier": "^2.0.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "three": "^0.181.0"
+    "@react-three/fiber": ">=9.0.0",
+    "@react-three/drei": ">=10.0.0",
+    "@react-three/rapier": ">=2.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "three": ">=0.181.0"
   },
   "devDependencies": {
     "@react-three/drei": "^10.7.7",

package/src/index.ts

@@ -10,6 +10,10 @@ export {
   SharedCanvas,
 } from './tools/assetviewer/page';
 
+// Component Registry
+export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
+export type { Component } from './tools/prefabeditor/components/ComponentRegistry';
+
 // Helpers
 export * from './helpers';
 

package/src/tools/prefabeditor/EditorTree.tsx

@@ -74,6 +74,17 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
             overflow: "hidden",
             textOverflow: "ellipsis",
         },
+        dragHandle: {
+            width: 14,
+            height: 14,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            marginRight: 4,
+            opacity: 0.4,
+            cursor: "grab",
+            fontSize: 10,
+        },
         contextMenu: {
             position: "fixed",
             zIndex: 50,
@@ -179,40 +190,38 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
 
     // Drag and Drop
     const handleDragStart = (e: React.DragEvent, id: string) => {
-        e.stopPropagation();
         if (id === prefabData.root.id) {
-            e.preventDefault(); // Cannot drag root
+            e.preventDefault();
             return;
         }
-        setDraggedId(id);
         e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", id);
+        setDraggedId(id);
+    };
+
+    const handleDragEnd = () => {
+        setDraggedId(null);
     };
 
     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.preventDefault();
         e.dataTransfer.dropEffect = "move";
     };
 
     const handleDrop = (e: React.DragEvent, targetId: string) => {
-        e.preventDefault();
-        e.stopPropagation();
         if (!draggedId || draggedId === targetId) return;
 
+        e.preventDefault();
+
         setPrefabData(prev => {
             const newRoot = JSON.parse(JSON.stringify(prev.root));
+            const draggedNode = findNode(newRoot, draggedId);
+            if (draggedNode && findNode(draggedNode, targetId)) return prev;
 
-            // 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;
 
@@ -221,7 +230,6 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
 
             parent.children = parent.children!.filter(c => c.id !== draggedId);
 
-            // Add to new parent
             const target = findNode(newRoot, targetId);
             if (target) {
                 target.children = target.children || [];
@@ -247,11 +255,13 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                         ...styles.row,
                         ...(isSelected ? styles.rowSelected : null),
                         paddingLeft: `${depth * 10 + 6}px`,
+                        cursor: node.id !== prefabData.root.id ? "grab" : "pointer",
                     }}
+                    draggable={node.id !== prefabData.root.id}
                     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)}
+                    onDragEnd={handleDragEnd}
                     onDragOver={(e) => handleDragOver(e, node.id)}
                     onDrop={(e) => handleDrop(e, node.id)}
                     onPointerEnter={(e) => {
@@ -276,6 +286,19 @@ export default function EditorTree({ prefabData, setPrefabData, selectedId, setS
                     >
                         {isCollapsed ? '▶' : '▼'}
                     </span>
+                    {node.id !== prefabData.root.id && (
+                        <span
+                            style={styles.dragHandle}
+                            onPointerEnter={(e) => {
+                                (e.currentTarget as HTMLSpanElement).style.opacity = "0.9";
+                            }}
+                            onPointerLeave={(e) => {
+                                (e.currentTarget as HTMLSpanElement).style.opacity = "0.4";
+                            }}
+                        >
+                            ⋮⋮
+                        </span>
+                    )}
                     <span style={styles.idText}>
                         {node.id}
                     </span>

package/src/tools/prefabeditor/EditorUI.tsx

@@ -256,33 +256,6 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
             </button>
         </div>
 
-        <div style={s.section}>
-            <label style={s.label}>Mode</label>
-            <div style={{ display: 'flex', gap: 6 }}>
-                {["translate", "rotate", "scale"].map(mode => (
-                    <button
-                        key={mode}
-                        onClick={() => setTransformMode(mode as any)}
-                        style={{
-                            ...s.button,
-                            flex: 1,
-                            ...(transformMode === mode ? s.buttonActive : null),
-                        }}
-                        onPointerEnter={(e) => {
-                            if (transformMode !== mode) (e.currentTarget as HTMLButtonElement).style.background = 'rgba(255,255,255,0.08)';
-                        }}
-                        onPointerLeave={(e) => {
-                            if (transformMode !== mode) (e.currentTarget as HTMLButtonElement).style.background = 'transparent';
-                        }}
-                    >
-                        {mode[0].toUpperCase()}
-                    </button>
-                ))}
-            </div>
-        </div>
-
-        {/* Components (legacy renderer removed) */}
-
         {node.components && Object.entries(node.components).map(([key, comp]: [string, any]) => {
             if (!comp) return null;
             const componentDef = ALL_COMPONENTS[comp.type];
@@ -322,6 +295,8 @@ function NodeInspector({ node, updateNode, deleteNode, transformMode, setTransfo
                                 }
                             }))}
                             basePath={basePath}
+                            transformMode={transformMode}
+                            setTransformMode={setTransformMode}
                         />
                     ) : null}
                 </div>