react-three-game 0.0.16 → 0.0.17

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

@@ -311,7 +311,7 @@ function renderCoreNode(gameObject: GameObjectType, ctx: any, parentMatrix: Matr
 
     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,
@@ -320,21 +320,37 @@ function renderCoreNode(gameObject: GameObjectType, ctx: any, parentMatrix: Matr
         parentMatrix,
         registerRef: ctx.registerRef,
     };
-    const allComponentViews = gameObject.components
-        ? Object.entries(gameObject.components)
+
+    // Separate wrapper components (that accept children) from leaf components
+    const wrapperComponents: Array<{ key: string; View: any; properties: any }> = [];
+    const leafComponents: React.ReactNode[] = [];
+
+    if (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;
+            .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 (!def || !def.View) 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(<def.View key={key} properties={comp.properties} {...contextProps} />);
+                }
+            });
+    }
+
+    // Build the core content (model or mesh)
+    let coreContent: React.ReactNode;
 
     // 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 (
+        coreContent = (
             <primitive object={modelObj}>
                 {material && materialDef && materialDef.View && (
                     <materialDef.View
@@ -347,14 +363,12 @@ function renderCoreNode(gameObject: GameObjectType, ctx: any, parentMatrix: Matr
                         registerRef={ctx.registerRef}
                     />
                 )}
-                {allComponentViews}
+                {leafComponents}
             </primitive>
         );
-    }
-
-    // Otherwise, if geometry present, render a mesh
-    if (geometry && geometryDef && geometryDef.View) {
-        return (
+    } else if (geometry && geometryDef && geometryDef.View) {
+        // Otherwise, if geometry present, render a mesh
+        coreContent = (
             <mesh>
                 <geometryDef.View key="geometry" properties={geometry.properties} {...contextProps} />
                 {material && materialDef && materialDef.View && (
@@ -368,13 +382,18 @@ function renderCoreNode(gameObject: GameObjectType, ctx: any, parentMatrix: Matr
                         registerRef={ctx.registerRef}
                     />
                 )}
-                {allComponentViews}
+                {leafComponents}
             </mesh>
         );
+    } else {
+        // No geometry or model, just render leaf components
+        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>;

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

@@ -1,8 +1,54 @@
 
 import { Component } from "./ComponentRegistry";
 
-function TransformComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
+function TransformComponentEditor({ component, onUpdate, transformMode, setTransformMode }: {
+    component: any;
+    onUpdate: (newComp: any) => void;
+    transformMode?: "translate" | "rotate" | "scale";
+    setTransformMode?: (m: "translate" | "rotate" | "scale") => void;
+}) {
+    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 <div className="flex flex-col">
+        {transformMode && setTransformMode && (
+            <div className="mb-2">
+                <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1">Transform 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 : {}),
+                            }}
+                            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}
+                        </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 })} />
@@ -29,21 +75,28 @@ export function Vector3Input({ label, value, onChange }: { label: string, value:
         onChange(newValue);
     };
 
-    return <div className="mb-1">
-        <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-0.5">{label}</label>
-        <div className="flex gap-0.5">
-            <div className="relative flex-1">
-                <span className="absolute left-0.5 top-0 text-[8px] text-red-400/80 font-mono">X</span>
-                <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)} />
-            </div>
-            <div className="relative flex-1">
-                <span className="absolute left-0.5 top-0 text-[8px] text-green-400/80 font-mono">Y</span>
-                <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)} />
-            </div>
-            <div className="relative flex-1">
-                <span className="absolute left-0.5 top-0 text-[8px] text-blue-400/80 font-mono">Z</span>
-                <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)} />
-            </div>
+    const axes = [
+        { key: 'x', color: 'red', index: 0 },
+        { key: 'y', color: 'green', index: 1 },
+        { key: 'z', color: 'blue', index: 2 }
+    ] as const;
+
+    return <div className="mb-2">
+        <label className="block text-[9px] text-cyan-400/60 uppercase tracking-wider mb-1">{label}</label>
+        <div className="flex gap-1">
+            {axes.map(({ key, color, index }) => (
+                <div key={key} 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]">
+                    <span className={`text-xs font-bold text-${color}-400 w-3`}>{key.toUpperCase()}</span>
+                    <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()}
+                    />
+                </div>
+            ))}
         </div>
     </div>
 }