react-three-game 0.0.37 → 0.0.38

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { MapControls, TransformControls, useHelper } from "@react-three/drei";
-import { forwardRef, useCallback, useEffect, useRef, useState, } from "react";
+import { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { BoxHelper, Euler, Group, Matrix4, Object3D, Quaternion, SRGBColorSpace, Texture, TextureLoader, Vector3, } from "three";
 import { ThreeEvent } from "@react-three/fiber";
 
@@ -12,61 +12,61 @@ import { loadModel } from "../dragdrop/modelLoader";
 import { GameInstance, GameInstanceProvider, useInstanceCheck } from "./InstanceProvider";
 import { updateNode } from "./utils";
 import { PhysicsProps } from "./components/PhysicsComponent";
-
-/* -------------------------------------------------- */
-/* Setup */
-/* -------------------------------------------------- */
+import { EditorContext } from "./EditorContext";
 
 components.forEach(registerComponent);
 
 const IDENTITY = new Matrix4();
 
-/* -------------------------------------------------- */
-/* PrefabRoot */
-/* -------------------------------------------------- */
+export interface PrefabRootRef {
+    root: Group | null;
+}
 
-export const PrefabRoot = forwardRef<Group, {
+export const PrefabRoot = forwardRef<PrefabRootRef, {
     editMode?: boolean;
     data: Prefab;
     onPrefabChange?: (data: Prefab) => void;
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
     onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
-    transformMode?: "translate" | "rotate" | "scale";
     basePath?: string;
-}>(({ editMode, data, onPrefabChange, selectedId, onSelect, onClick, transformMode, basePath = "" }, ref) => {
+}>(({ editMode, data, onPrefabChange, selectedId, onSelect, onClick, basePath = "" }, ref) => {
 
+    // optional editor context
+    const editorContext = useContext(EditorContext);
+    const transformMode = editorContext?.transformMode ?? "translate";
+    const snapResolution = editorContext?.snapResolution ?? 0;
+
+    // prefab root state
     const [models, setModels] = useState<Record<string, Object3D>>({});
     const [textures, setTextures] = useState<Record<string, Texture>>({});
     const loading = useRef(new Set<string>());
     const objectRefs = useRef<Record<string, Object3D | null>>({});
     const [selectedObject, setSelectedObject] = useState<Object3D | null>(null);
+    const rootRef = useRef<Group>(null);
+
+    useImperativeHandle(ref, () => ({
+        root: rootRef.current
+    }), []);
 
     const registerRef = useCallback((id: string, obj: Object3D | null) => {
         objectRefs.current[id] = obj;
         if (id === selectedId) setSelectedObject(obj);
     }, [selectedId]);
 
-    // Suppress TransformControls scene graph warnings during transitions
     useEffect(() => {
         const originalError = console.error;
         console.error = (...args: any[]) => {
-            if (typeof args[0] === 'string' && args[0].includes('TransformControls') && args[0].includes('scene graph')) {
-                return; // Suppress this specific error
-            }
+            if (typeof args[0] === 'string' && args[0].includes('TransformControls') && args[0].includes('scene graph')) return;
             originalError.apply(console, args);
         };
-        return () => {
-            console.error = originalError;
-        };
+        return () => { console.error = originalError; };
     }, []);
 
     useEffect(() => {
         setSelectedObject(selectedId ? objectRefs.current[selectedId] ?? null : null);
     }, [selectedId]);
 
-    /* ---------------- Transform writeback ---------------- */
-
     const onTransformChange = () => {
         if (!selectedId || !onPrefabChange) return;
 
@@ -92,8 +92,6 @@ export const PrefabRoot = forwardRef<Group, {
         onPrefabChange({ ...data, root });
     };
 
-    /* ---------------- Asset loading ---------------- */
-
     useEffect(() => {
         const modelsToLoad = new Set<string>();
         const texturesToLoad = new Set<string>();
@@ -134,10 +132,8 @@ export const PrefabRoot = forwardRef<Group, {
         });
     }, [data, models, textures]);
 
-    /* ---------------- Render ---------------- */
-
     return (
-        <group ref={ref}>
+        <group ref={rootRef}>
             <GameInstanceProvider
                 models={models}
                 selectedId={selectedId}
@@ -163,10 +159,14 @@ export const PrefabRoot = forwardRef<Group, {
                     <MapControls makeDefault />
                     {selectedObject && (
                         <TransformControls
+                            key={`transform-${snapResolution}`}
                             object={selectedObject}
                             mode={transformMode}
                             space="local"
                             onObjectChange={onTransformChange}
+                            translationSnap={snapResolution > 0 ? snapResolution : undefined}
+                            rotationSnap={snapResolution > 0 ? snapResolution : undefined}
+                            scaleSnap={snapResolution > 0 ? snapResolution : undefined}
                         />
                     )}
                 </>
@@ -175,10 +175,6 @@ export const PrefabRoot = forwardRef<Group, {
     );
 });
 
-/* -------------------------------------------------- */
-/* Renderer Switch */
-/* -------------------------------------------------- */
-
 export function GameObjectRenderer(props: RendererProps) {
     const node = props.gameObject;
     if (!node || node.hidden || node.disabled) return null;
@@ -188,17 +184,14 @@ export function GameObjectRenderer(props: RendererProps) {
     const [isTransitioning, setIsTransitioning] = useState(false);
 
     useEffect(() => {
-        // Detect instanced mode change
         if (prevInstancedRef.current !== undefined && prevInstancedRef.current !== isInstanced) {
             setIsTransitioning(true);
-            // Wait for cleanup, then allow new mode to render
             const timer = setTimeout(() => setIsTransitioning(false), 100);
             return () => clearTimeout(timer);
         }
         prevInstancedRef.current = isInstanced;
     }, [isInstanced]);
 
-    // Don't render during transition to avoid physics conflicts
     if (isTransitioning) return null;
 
     const key = `${node.id}_${isInstanced ? 'instanced' : 'standard'}`;
@@ -207,9 +200,6 @@ export function GameObjectRenderer(props: RendererProps) {
         : <StandardNode key={key} {...props} />;
 }
 
-/* -------------------------------------------------- */
-/* InstancedNode (terminal) */
-/* -------------------------------------------------- */
 function isPhysicsProps(v: any): v is PhysicsProps {
     return v?.type === "fixed" || v?.type === "dynamic";
 }
@@ -217,8 +207,6 @@ function isPhysicsProps(v: any): v is PhysicsProps {
 function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, registerRef, selectedId: _selectedId, onSelect, onClick }: RendererProps) {
     const world = parentMatrix.clone().multiply(compose(gameObject));
     const { position: worldPosition, rotation: worldRotation, scale: worldScale } = decompose(world);
-
-    // Get local transform for proxy group (used by transform controls)
     const localTransform = getNodeTransformProps(gameObject);
 
     const physicsProps = isPhysicsProps(
@@ -239,12 +227,9 @@ function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, register
 
     const modelUrl = gameObject.components?.model?.properties?.filename;
 
-    // In edit mode, create a proxy group at the same position for transform controls
-    // The GameInstance still needs the actual position so it renders correctly
     if (editMode) {
         return (
             <>
-                {/* Proxy group for transform controls - uses LOCAL transform */}
                 <group
                     ref={groupRef}
                     position={localTransform.position}
@@ -261,12 +246,10 @@ function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, register
                         clickValid.current = false;
                     }}
                 >
-                    {/* Tiny invisible mesh for raycasting/selection */}
                     <mesh visible={false}>
                         <boxGeometry args={[0.01, 0.01, 0.01]} />
                     </mesh>
                 </group>
-                {/* Actual instance rendered by provider - uses WORLD transform */}
                 <GameInstance
                     id={gameObject.id}
                     modelUrl={modelUrl}
@@ -291,10 +274,6 @@ function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, register
     );
 }
 
-/* -------------------------------------------------- */
-/* StandardNode */
-/* -------------------------------------------------- */
-
 function StandardNode({
     gameObject,
     selectedId,
@@ -311,11 +290,8 @@ function StandardNode({
     const helperRef = useRef<Object3D | null>(null);
     const clickValid = useRef(false);
     const isSelected = selectedId === gameObject.id;
-
-    // Check if this object still exists as an instance (to prevent physics overlap)
     const stillInstanced = useInstanceCheck(gameObject.id);
 
-    // Use helperRef for BoxHelper (shows actual content bounds at correct position)
     useHelper(
         editMode && isSelected ? helperRef as React.RefObject<Object3D> : null,
         BoxHelper,
@@ -348,8 +324,6 @@ function StandardNode({
         loadedModels[gameObject.components.model.properties.filename];
     const hasPhysics = physics && ready && !stillInstanced;
     const transform = getNodeTransformProps(gameObject);
-
-    // Prepare physics wrapper if needed
     const physicsDef = hasPhysics ? getComponent("Physics") : null;
     const isInstanced = gameObject.components?.model?.properties?.instanced;
     const physicsKey = `physics_${gameObject.id}_${isInstanced ? 'instanced' : 'standard'}`;
@@ -364,7 +338,6 @@ function StandardNode({
             {gameObject.children?.map(child => (
                 <GameObjectRenderer
                     key={child.id}
-                    {...{ child }}
                     gameObject={child}
                     selectedId={selectedId}
                     onSelect={onSelect}
@@ -379,23 +352,19 @@ function StandardNode({
         </group>
     );
 
-    // In edit mode, use proxy group pattern
     if (editMode) {
         return (
             <>
-                {/* Proxy group for transform controls - uses LOCAL transform */}
                 <group
                     ref={groupRef}
                     position={transform.position}
                     rotation={transform.rotation}
                     scale={transform.scale}
                 >
-                    {/* Tiny invisible mesh for raycasting/selection */}
                     <mesh visible={false}>
                         <boxGeometry args={[0.01, 0.01, 0.01]} />
                     </mesh>
                 </group>
-                {/* Helper group for BoxHelper - same transform as proxy, contains actual geometry */}
                 <group
                     ref={helperRef}
                     position={transform.position}
@@ -404,7 +373,6 @@ function StandardNode({
                 >
                     {inner}
                 </group>
-                {/* Actual content with physics wrapper if needed */}
                 {hasPhysics && physicsDef?.View ? (
                     <physicsDef.View
                         key={physicsKey}
@@ -419,7 +387,6 @@ function StandardNode({
         );
     }
 
-    // In play mode, apply transform directly to content
     if (hasPhysics && physicsDef?.View) {
         return (
             <physicsDef.View
@@ -448,12 +415,8 @@ function StandardNode({
     );
 }
 
-/* -------------------------------------------------- */
-/* Types & Helpers */
-/* -------------------------------------------------- */
-
 interface RendererProps {
-    gameObject: GameObjectType; // ← no longer optional
+    gameObject: GameObjectType;
     selectedId?: string | null;
     onSelect?: (id: string) => void;
     onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
@@ -551,7 +514,6 @@ function renderCoreNode(
                 const def = getComponent(comp.type);
                 if (!def?.View) return;
 
-                // crude but works with your existing component API
                 if (def.View.toString().includes("children")) {
                     wrappers.push({ key, View: def.View, properties: comp.properties });
                 } else {

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

@@ -52,12 +52,19 @@ export function Label({ children }: { children: React.ReactNode }) {
 export function Vector3Input({
     label,
     value,
-    onChange
+    onChange,
+    snap
 }: {
     label: string;
     value: [number, number, number];
     onChange: (v: [number, number, number]) => void;
+    snap?: number;
 }) {
+    const snapValue = (num: number) => {
+        if (!snap) return num;
+        return Math.round(num / snap) * snap;
+    };
+
     const [draft, setDraft] = useState<[string, string, string]>(
         () => value.map(v => v.toString()) as any
     );
@@ -77,7 +84,7 @@ export function Vector3Input({
         const num = parseFloat(draft[index]);
         if (Number.isFinite(num)) {
             const next = [...value] as [number, number, number];
-            next[index] = num;
+            next[index] = snapValue(num);
             onChange(next);
         }
     };
@@ -105,7 +112,8 @@ export function Vector3Input({
         if (e.shiftKey) speed *= 0.1; // fine
         if (e.altKey) speed *= 5;     // coarse
 
-        const nextValue = startValue + dx * speed;
+        const rawValue = startValue + dx * speed;
+        const nextValue = snapValue(rawValue);
         const next = [...value] as [number, number, number];
         next[index] = nextValue;
 

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

@@ -1,5 +1,6 @@
 import { Component } from "./ComponentRegistry";
 import { Vector3Input, Label } from "./Input";
+import { useEditorContext } from "../EditorContext";
 
 const buttonStyle = {
     padding: '2px 6px',
@@ -18,10 +19,12 @@ function TransformComponentEditor({ component, onUpdate, transformMode, setTrans
     transformMode?: "translate" | "rotate" | "scale";
     setTransformMode?: (m: "translate" | "rotate" | "scale") => void;
 }) {
+    const { snapResolution, setSnapResolution } = useEditorContext();
+
     return <div style={{ display: 'flex', flexDirection: 'column' }}>
         {transformMode && setTransformMode && (
             <div style={{ marginBottom: 8 }}>
-                <Label>Transform Mode</Label>
+                <Label>Transform Mode {snapResolution > 0 && `(Snap: ${snapResolution})`}</Label>
                 <div style={{ display: 'flex', gap: 6 }}>
                     {["translate", "rotate", "scale"].map(mode => {
                         const isActive = transformMode === mode;
@@ -45,11 +48,29 @@ function TransformComponentEditor({ component, onUpdate, transformMode, setTrans
                         );
                     })}
                 </div>
+                <div style={{ marginTop: 6 }}>
+                    <button
+                        onClick={() => setSnapResolution(snapResolution > 0 ? 0 : 0.1)}
+                        style={{
+                            ...buttonStyle,
+                            background: snapResolution > 0 ? 'rgba(255,255,255,0.10)' : 'transparent',
+                            width: '100%',
+                        }}
+                        onPointerEnter={(e) => {
+                            if (snapResolution === 0) e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                        }}
+                        onPointerLeave={(e) => {
+                            if (snapResolution === 0) e.currentTarget.style.background = 'transparent';
+                        }}
+                    >
+                        Snap: {snapResolution > 0 ? `ON (${snapResolution})` : 'OFF'}
+                    </button>
+                </div>
             </div>
         )}
-        <Vector3Input label="Position" value={component.properties.position} onChange={v => onUpdate({ position: v })} />
-        <Vector3Input label="Rotation" value={component.properties.rotation} onChange={v => onUpdate({ rotation: v })} />
-        <Vector3Input label="Scale" value={component.properties.scale} onChange={v => onUpdate({ scale: v })} />
+        <Vector3Input label="Position" value={component.properties.position} onChange={v => onUpdate({ position: v })} snap={snapResolution} />
+        <Vector3Input label="Rotation" value={component.properties.rotation} onChange={v => onUpdate({ rotation: v })} snap={snapResolution} />
+        <Vector3Input label="Scale" value={component.properties.scale} onChange={v => onUpdate({ scale: v })} snap={snapResolution} />
     </div>;
 }
 

package/src/tools/prefabeditor/utils.ts

@@ -1,4 +1,37 @@
-import { GameObject } from "./types";
+import { GameObject, Prefab } from "./types";
+
+/** Save a prefab as JSON file */
+export function saveJson(data: Prefab, filename: string) {
+    const a = document.createElement('a');
+    a.href = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
+    a.download = `${filename || 'prefab'}.json`;
+    a.click();
+}
+
+/** Load a prefab from JSON file */
+export function loadJson(): Promise<Prefab | undefined> {
+    return new Promise(resolve => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = '.json,application/json';
+        input.onchange = e => {
+            const file = (e.target as HTMLInputElement).files?.[0];
+            if (!file) return resolve(undefined);
+            const reader = new FileReader();
+            reader.onload = e => {
+                try {
+                    const text = e.target?.result;
+                    if (typeof text === 'string') resolve(JSON.parse(text) as Prefab);
+                } catch (err) {
+                    console.error('Error parsing prefab JSON:', err);
+                    resolve(undefined);
+                }
+            };
+            reader.readAsText(file);
+        };
+        input.click();
+    });
+}
 
 /** Find a node by ID in the tree */
 export function findNode(root: GameObject, id: string): GameObject | null {
@@ -74,6 +107,15 @@ export function cloneNode(node: GameObject): GameObject {
     };
 }
 
+/** Recursively update all IDs in a node tree */
+export function regenerateIds(node: GameObject): GameObject {
+    return {
+        ...node,
+        id: crypto.randomUUID(),
+        children: node.children?.map(regenerateIds)
+    };
+}
+
 /** Get component data from a node */
 export function getComponent<T = any>(node: GameObject, type: string): T | undefined {
     const comp = Object.values(node.components ?? {}).find(c => c?.type === type);