react-three-game 0.0.16 → 0.0.18

package/src/tools/prefabeditor/PrefabEditor.tsx

@@ -67,92 +67,12 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }: { b
             </Physics>
         </GameCanvas>
 
-        <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
-                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 style={{ opacity: 0.35 }}>|</span>
-            <button
-                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
-                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>
-        </div>
+        <SaveDataPanel
+            currentData={loadedPrefab}
+            onDataChange={updatePrefab}
+            editMode={editMode}
+            onEditModeChange={setEditMode}
+        />
         {editMode && <EditorUI
             prefabData={loadedPrefab}
             setPrefabData={updatePrefab}
@@ -165,6 +85,202 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }: { b
     </>
 }
 
+const SaveDataPanel = ({
+    currentData,
+    onDataChange,
+    editMode,
+    onEditModeChange
+}: {
+    currentData: Prefab;
+    onDataChange: (data: Prefab) => void;
+    editMode: boolean;
+    onEditModeChange: (mode: boolean) => void;
+}) => {
+    const [history, setHistory] = useState<Prefab[]>([currentData]);
+    const [historyIndex, setHistoryIndex] = useState(0);
+    const throttleTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const lastSavedDataRef = useRef<string>(JSON.stringify(currentData));
+
+    // Define undo/redo handlers
+    const handleUndo = () => {
+        if (historyIndex > 0) {
+            const newIndex = historyIndex - 1;
+            setHistoryIndex(newIndex);
+            lastSavedDataRef.current = JSON.stringify(history[newIndex]);
+            onDataChange(history[newIndex]);
+        }
+    };
+
+    const handleRedo = () => {
+        if (historyIndex < history.length - 1) {
+            const newIndex = historyIndex + 1;
+            setHistoryIndex(newIndex);
+            lastSavedDataRef.current = JSON.stringify(history[newIndex]);
+            onDataChange(history[newIndex]);
+        }
+    };
+
+    // Keyboard shortcuts for undo/redo
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            // Undo: Ctrl+Z (Cmd+Z on Mac)
+            if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+                e.preventDefault();
+                handleUndo();
+            }
+            // Redo: Ctrl+Shift+Z or Ctrl+Y (Cmd+Shift+Z or Cmd+Y on Mac)
+            else if ((e.ctrlKey || e.metaKey) && (e.shiftKey && e.key === 'z' || e.key === 'y')) {
+                e.preventDefault();
+                handleRedo();
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [historyIndex, history]);
+
+    // Throttled history update when currentData changes
+    useEffect(() => {
+        const currentDataStr = JSON.stringify(currentData);
+
+        // Skip if data hasn't actually changed
+        if (currentDataStr === lastSavedDataRef.current) {
+            return;
+        }
+
+        // Clear existing throttle timeout
+        if (throttleTimeoutRef.current) {
+            clearTimeout(throttleTimeoutRef.current);
+        }
+
+        // Set new throttled update
+        throttleTimeoutRef.current = setTimeout(() => {
+            lastSavedDataRef.current = currentDataStr;
+
+            setHistory(prev => {
+                // Slice history at current index (discard future states)
+                const newHistory = prev.slice(0, historyIndex + 1);
+                // Add new state
+                newHistory.push(currentData);
+                // Limit history size to 50 states
+                if (newHistory.length > 50) {
+                    newHistory.shift();
+                    return newHistory;
+                }
+                return newHistory;
+            });
+
+            setHistoryIndex(prev => {
+                const newHistory = history.slice(0, prev + 1);
+                newHistory.push(currentData);
+                return Math.min(newHistory.length - 1, 49);
+            });
+        }, 500); // 500ms throttle
+
+        return () => {
+            if (throttleTimeoutRef.current) {
+                clearTimeout(throttleTimeoutRef.current);
+            }
+        };
+    }, [currentData, historyIndex, history]);
+
+    const handleLoad = async () => {
+        const prefab = await loadJson();
+        if (prefab) {
+            onDataChange(prefab);
+            // Reset history when loading new file
+            setHistory([prefab]);
+            setHistoryIndex(0);
+            lastSavedDataRef.current = JSON.stringify(prefab);
+        }
+    };
+
+    const canUndo = historyIndex > 0;
+    const canRedo = historyIndex < history.length - 1;
+
+    return <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",
+    }}>
+        <PanelButton onClick={() => onEditModeChange(!editMode)}>
+            {editMode ? "▶" : "⏸"}
+        </PanelButton>
+
+        <span style={{ opacity: 0.35 }}>|</span>
+
+        <PanelButton onClick={handleUndo} disabled={!canUndo} title="Undo (Ctrl+Z)">
+            ↶
+        </PanelButton>
+
+        <PanelButton onClick={handleRedo} disabled={!canRedo} title="Redo (Ctrl+Shift+Z)">
+            ↷
+        </PanelButton>
+
+        <span style={{ opacity: 0.35 }}>|</span>
+
+        <PanelButton onClick={handleLoad} title="Load JSON">
+            📥
+        </PanelButton>
+
+        <PanelButton onClick={() => saveJson(currentData, "prefab")} title="Save JSON">
+            💾
+        </PanelButton>
+    </div>;
+};
+
+const PanelButton = ({
+    onClick,
+    disabled,
+    title,
+    children
+}: {
+    onClick: () => void;
+    disabled?: boolean;
+    title?: string;
+    children: React.ReactNode;
+}) => {
+    return <button
+        style={{
+            padding: "2px 6px",
+            font: "inherit",
+            background: "transparent",
+            color: disabled ? "rgba(255,255,255,0.3)" : "inherit",
+            border: "1px solid rgba(255,255,255,0.18)",
+            borderRadius: 3,
+            cursor: disabled ? "not-allowed" : "pointer",
+            opacity: disabled ? 0.5 : 1,
+        }}
+        onClick={onClick}
+        disabled={disabled}
+        title={title}
+        onPointerEnter={(e) => {
+            if (!disabled) {
+                (e.currentTarget as HTMLButtonElement).style.background = "rgba(255,255,255,0.08)";
+            }
+        }}
+        onPointerLeave={(e) => {
+            (e.currentTarget as HTMLButtonElement).style.background = "transparent";
+        }}
+    >
+        {children}
+    </button>;
+};
+
 const saveJson = (data: any, filename: string) => {
     const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
     const downloadAnchorNode = document.createElement('a');

package/src/tools/prefabeditor/PrefabRoot.tsx

@@ -203,11 +203,12 @@ function GameObjectRenderer({
 
     // Early return if gameObject is null or undefined
     if (!gameObject) return null;
+    if (gameObject.disabled === true || gameObject.hidden === true) return null;
 
-    // Build a small context object to avoid long param lists
+    // Build context object for passing to helper functions
     const ctx = { gameObject, selectedId, onSelect, registerRef, loadedModels, loadedTextures, editMode };
 
-    // --- 1. Transform (local + world) ---
+    // --- 1. Compute transforms (local + world) ---
     const transformProps = getNodeTransformProps(gameObject);
     const localMatrix = new Matrix4().compose(
         new Vector3(...transformProps.position),
@@ -216,7 +217,7 @@ function GameObjectRenderer({
     );
     const worldMatrix = parentMatrix.clone().multiply(localMatrix);
 
-    // preserve click/drag detection from previous implementation
+    // --- 2. Handle selection interaction (edit mode only) ---
     const clickValid = useRef(false);
     const handlePointerDown = (e: ThreeEvent<PointerEvent>) => {
         e.stopPropagation();
@@ -233,18 +234,19 @@ function GameObjectRenderer({
         clickValid.current = false;
     };
 
-    if (gameObject.disabled === true || gameObject.hidden === true) return null;
-
-    // --- 2. If instanced, short-circuit to a tiny clean branch ---
+    // --- 3. If instanced model, short-circuit to GameInstance (terminal node) ---
     const isInstanced = !!gameObject.components?.model?.properties?.instanced;
     if (isInstanced) {
         return renderInstancedNode(gameObject, worldMatrix, ctx);
     }
 
-    // --- 3. Core content decided by component registry ---
+    // --- 4. Render core content using component system ---
     const core = renderCoreNode(gameObject, ctx, parentMatrix);
 
-    // --- 5. Render children (always relative transforms) ---
+    // --- 5. Wrap with physics if needed (except in edit mode) ---
+    const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
+
+    // --- 6. Render children recursively (always relative transforms) ---
     const children = (gameObject.children ?? []).map((child) => (
         <GameObjectRenderer
             key={child.id}
@@ -259,10 +261,7 @@ function GameObjectRenderer({
         />
     ));
 
-    // --- 4. Wrap with physics if needed ---
-    const physicsWrapped = wrapPhysicsIfNeeded(gameObject, core, ctx);
-
-    // --- 6. Final group wrapper ---
+    // --- 7. Final group wrapper with local transform ---
     return (
         <group
             ref={(el) => registerRef(gameObject.id, el)}
@@ -300,18 +299,17 @@ function renderInstancedNode(gameObject: GameObjectType, worldMatrix: Matrix4, c
     );
 }
 
-// Helper: render main model/geometry content for a non-instanced node
+// Helper: render main content for a non-instanced node using the component system
 function renderCoreNode(gameObject: GameObjectType, ctx: any, parentMatrix: Matrix4 | undefined) {
     const geometry = gameObject.components?.geometry;
     const material = gameObject.components?.material;
-    const modelComp = gameObject.components?.model;
+    const model = gameObject.components?.model;
 
     const geometryDef = geometry ? getComponent('Geometry') : undefined;
     const materialDef = material ? getComponent('Material') : undefined;
+    const modelDef = model ? getComponent('Model') : undefined;
 
-    const isModelAvailable = !!(modelComp && modelComp.properties && modelComp.properties.filename && ctx.loadedModels[modelComp.properties.filename]);
-
-    // Generic component views (exclude geometry/material/model)
+    // Context props for all component Views
     const contextProps = {
         loadedModels: ctx.loadedModels,
         loadedTextures: ctx.loadedTextures,
@@ -320,61 +318,71 @@ function renderCoreNode(gameObject: GameObjectType, ctx: any, parentMatrix: Matr
         parentMatrix,
         registerRef: ctx.registerRef,
     };
-    const allComponentViews = gameObject.components
-        ? Object.entries(gameObject.components)
-            .filter(([key]) => key !== 'geometry' && key !== 'material' && key !== 'model' && key !== 'transform' && key !== 'physics')
-            .map(([key, comp]) => {
-                if (!comp || !comp.type) return null;
+
+    // Collect wrapper and leaf components (excluding transform/physics which are handled separately)
+    const wrapperComponents: Array<{ key: string; View: any; properties: any }> = [];
+    const leafComponents: React.ReactNode[] = [];
+
+    if (gameObject.components) {
+        Object.entries(gameObject.components)
+            .filter(([key]) => !['geometry', 'material', 'model', 'transform', 'physics'].includes(key))
+            .forEach(([key, comp]) => {
+                if (!comp || !comp.type) return;
                 const def = getComponent(comp.type);
-                if (!def || !def.View) return null;
-                return <def.View key={key} properties={comp.properties} {...contextProps} />;
-            })
-        : null;
-
-    // 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 (
-            <primitive object={modelObj}>
+                if (!def || !def.View) return;
+
+                // Components that accept children are wrappers, others are leaves
+                const viewString = def.View.toString();
+                if (viewString.includes('children')) {
+                    wrapperComponents.push({ key, View: def.View, properties: comp.properties });
+                } else {
+                    leafComponents.push(<def.View key={key} properties={comp.properties} {...contextProps} />);
+                }
+            });
+    }
+
+    // Build core content based on what components exist
+    let coreContent: React.ReactNode;
+
+    // Priority: Model > Geometry + Material > Empty
+    if (model && modelDef && modelDef.View) {
+        // Model component wraps its children (including material override)
+        coreContent = (
+            <modelDef.View properties={model.properties} {...contextProps}>
                 {material && materialDef && materialDef.View && (
                     <materialDef.View
                         key="material"
                         properties={material.properties}
-                        loadedTextures={ctx.loadedTextures}
-                        isSelected={ctx.selectedId === gameObject.id}
-                        editMode={ctx.editMode}
-                        parentMatrix={parentMatrix}
-                        registerRef={ctx.registerRef}
+                        {...contextProps}
                     />
                 )}
-                {allComponentViews}
-            </primitive>
+                {leafComponents}
+            </modelDef.View>
         );
-    }
-
-    // Otherwise, if geometry present, render a mesh
-    if (geometry && geometryDef && geometryDef.View) {
-        return (
-            <mesh>
-                <geometryDef.View key="geometry" properties={geometry.properties} {...contextProps} />
+    } else if (geometry && geometryDef && geometryDef.View) {
+        // Geometry + Material = mesh
+        coreContent = (
+            <mesh castShadow receiveShadow>
+                <geometryDef.View properties={geometry.properties} {...contextProps} />
                 {material && materialDef && materialDef.View && (
                     <materialDef.View
                         key="material"
                         properties={material.properties}
-                        loadedTextures={ctx.loadedTextures}
-                        isSelected={ctx.selectedId === gameObject.id}
-                        editMode={ctx.editMode}
-                        parentMatrix={parentMatrix}
-                        registerRef={ctx.registerRef}
+                        {...contextProps}
                     />
                 )}
-                {allComponentViews}
+                {leafComponents}
             </mesh>
         );
+    } else {
+        // No visual component - just render leaves
+        coreContent = <>{leafComponents}</>;
     }
 
-    // Default: render other component views (no geometry/model)
-    return <>{allComponentViews}</>;
+    // Wrap core content with wrapper components (in order)
+    return wrapperComponents.reduce((content, { key, View, properties }) => {
+        return <View key={key} properties={properties} {...contextProps}>{content}</View>;
+    }, coreContent);
 }
 
 // Helper: wrap core content with physics component when necessary

package/src/tools/prefabeditor/components/ComponentRegistry.ts

@@ -2,7 +2,13 @@ import { FC } from "react";
 
 export interface Component {
     name: string;
-    Editor: FC<{ component: any; onUpdate: (newComp: any) => void; basePath?: string }>;
+    Editor: FC<{ 
+        component: any; 
+        onUpdate: (newComp: any) => void; 
+        basePath?: string;
+        transformMode?: "translate" | "rotate" | "scale";
+        setTransformMode?: (m: "translate" | "rotate" | "scale") => void;
+    }>;
     defaultProperties: any;
     // Allow View to accept extra props for special cases (like material)
     View?: FC<any>;