react-three-game 0.0.18 → 0.0.19

package/src/tools/prefabeditor/PrefabEditor.tsx

@@ -2,34 +2,29 @@
 
 import GameCanvas from "../../shared/GameCanvas";
 import { useState, useRef, useEffect } from "react";
-import { Group, } from "three";
-import { Prefab, } from "./types";
+import { Prefab } from "./types";
 import PrefabRoot from "./PrefabRoot";
 import { Physics } from "@react-three/rapier";
 import EditorUI from "./EditorUI";
+import { base, toolbar } from "./styles";
 
 const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }: { basePath?: string, initialPrefab?: Prefab, onPrefabChange?: (prefab: Prefab) => void, children?: React.ReactNode }) => {
     const [editMode, setEditMode] = useState(true);
     const [loadedPrefab, setLoadedPrefab] = useState<Prefab>(initialPrefab ?? {
-        "id": "prefab-default",
-        "name": "New Prefab",
-        "root": {
-            "id": "root",
-            "components": {
-                "transform": {
-                    "type": "Transform",
-                    "properties": {
-                        "position": [0, 0, 0],
-                        "rotation": [0, 0, 0],
-                        "scale": [1, 1, 1]
-                    }
+        id: "prefab-default",
+        name: "New Prefab",
+        root: {
+            id: "root",
+            components: {
+                transform: {
+                    type: "Transform",
+                    properties: { position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1] }
                 }
             }
         }
     });
     const [selectedId, setSelectedId] = useState<string | null>(null);
     const [transformMode, setTransformMode] = useState<"translate" | "rotate" | "scale">("translate");
-    const prefabRef = useRef<Group>(null);
 
     // Sync internal state with external initialPrefab prop
     useEffect(() => {
@@ -52,15 +47,11 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }: { b
                 <gridHelper args={[10, 10]} position={[0, -1, 0]} />
                 <PrefabRoot
                     data={loadedPrefab}
-                    ref={prefabRef}
-
-                    // props for edit mode
                     editMode={editMode}
                     onPrefabChange={updatePrefab}
                     selectedId={selectedId}
                     onSelect={setSelectedId}
                     transformMode={transformMode}
-                    setTransformMode={setTransformMode}
                     basePath={basePath}
                 />
                 {children}
@@ -98,189 +89,87 @@ const SaveDataPanel = ({
 }) => {
     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));
+    const throttleRef = useRef<NodeJS.Timeout | null>(null);
+    const lastDataRef = useRef<string>(JSON.stringify(currentData));
 
-    // Define undo/redo handlers
-    const handleUndo = () => {
+    const undo = () => {
         if (historyIndex > 0) {
             const newIndex = historyIndex - 1;
             setHistoryIndex(newIndex);
-            lastSavedDataRef.current = JSON.stringify(history[newIndex]);
+            lastDataRef.current = JSON.stringify(history[newIndex]);
             onDataChange(history[newIndex]);
         }
     };
 
-    const handleRedo = () => {
+    const redo = () => {
         if (historyIndex < history.length - 1) {
             const newIndex = historyIndex + 1;
             setHistoryIndex(newIndex);
-            lastSavedDataRef.current = JSON.stringify(history[newIndex]);
+            lastDataRef.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')) {
+                undo();
+            } else if ((e.ctrlKey || e.metaKey) && (e.shiftKey && e.key === 'z' || e.key === 'y')) {
                 e.preventDefault();
-                handleRedo();
+                redo();
             }
         };
-
         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;
-        }
+        const currentStr = JSON.stringify(currentData);
+        if (currentStr === lastDataRef.current) return;
 
-        // Clear existing throttle timeout
-        if (throttleTimeoutRef.current) {
-            clearTimeout(throttleTimeoutRef.current);
-        }
-
-        // Set new throttled update
-        throttleTimeoutRef.current = setTimeout(() => {
-            lastSavedDataRef.current = currentDataStr;
+        if (throttleRef.current) clearTimeout(throttleRef.current);
 
+        throttleRef.current = setTimeout(() => {
+            lastDataRef.current = currentStr;
             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;
+                const newHistory = [...prev.slice(0, historyIndex + 1), currentData];
+                return newHistory.length > 50 ? newHistory.slice(1) : newHistory;
             });
-
-            setHistoryIndex(prev => {
-                const newHistory = history.slice(0, prev + 1);
-                newHistory.push(currentData);
-                return Math.min(newHistory.length - 1, 49);
-            });
-        }, 500); // 500ms throttle
+            setHistoryIndex(prev => Math.min(prev + 1, 49));
+        }, 500);
 
         return () => {
-            if (throttleTimeoutRef.current) {
-                clearTimeout(throttleTimeoutRef.current);
-            }
+            if (throttleRef.current) clearTimeout(throttleRef.current);
         };
-    }, [currentData, historyIndex, history]);
+    }, [currentData]);
 
     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);
+            lastDataRef.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)}>
+    return <div style={toolbar.panel}>
+        <button style={base.btn} 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>
+        </button>
+        <div style={toolbar.divider} />
+        <button style={{ ...base.btn, ...(canUndo ? {} : toolbar.disabled) }} onClick={undo} disabled={!canUndo}>↶</button>
+        <button style={{ ...base.btn, ...(canRedo ? {} : toolbar.disabled) }} onClick={redo} disabled={!canRedo}>↷</button>
+        <div style={toolbar.divider} />
+        <button style={base.btn} onClick={handleLoad}>📥</button>
+        <button style={base.btn} onClick={() => saveJson(currentData, "prefab")}>💾</button>
     </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

@@ -1,31 +1,18 @@
 "use client";
 
 import { MapControls, TransformControls } from "@react-three/drei";
-import { useState, useRef, useEffect, forwardRef, useMemo, useCallback } from "react";
-import { Vector3, Euler, Quaternion, ClampToEdgeWrapping, DoubleSide, Group, Object3D, RepeatWrapping, SRGBColorSpace, Texture, TextureLoader, Matrix4 } from "three";
+import { useState, useRef, useEffect, forwardRef, useCallback } from "react";
+import { Vector3, Euler, Quaternion, Group, Object3D, SRGBColorSpace, Texture, TextureLoader, Matrix4 } from "three";
 import { Prefab, GameObject as GameObjectType } from "./types";
-import { getComponent } from "./components/ComponentRegistry";
+import { getComponent, registerComponent } from "./components/ComponentRegistry";
 import { ThreeEvent } from "@react-three/fiber";
 import { loadModel } from "../dragdrop/modelLoader";
 import { GameInstance, GameInstanceProvider } from "./InstanceProvider";
-
-// register all components
-import { registerComponent } from './components/ComponentRegistry';
+import { updateNode } from "./utils";
 import components from './components/';
-components.forEach(registerComponent);
 
-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;
-}
+// Register all components
+components.forEach(registerComponent);
 
 export const PrefabRoot = forwardRef<Group, {
     editMode?: boolean;
@@ -34,29 +21,21 @@ export const PrefabRoot = forwardRef<Group, {
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
     transformMode?: "translate" | "rotate" | "scale";
-    setTransformMode?: (mode: "translate" | "rotate" | "scale") => void;
     basePath?: string;
-}>(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, setTransformMode, basePath = "" }, ref) => {
+}>(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, basePath = "" }, ref) => {
     const [loadedModels, setLoadedModels] = useState<Record<string, Object3D>>({});
     const [loadedTextures, setLoadedTextures] = useState<Record<string, Texture>>({});
-    // const [prefabRoot, setPrefabRoot] = useState<Prefab>(data); // Removed local state
     const loadingRefs = useRef<Set<string>>(new Set());
     const objectRefs = useRef<Record<string, Object3D | null>>({});
     const [selectedObject, setSelectedObject] = useState<Object3D | null>(null);
 
     const registerRef = useCallback((id: string, obj: Object3D | null) => {
         objectRefs.current[id] = obj;
-        if (id === selectedId) {
-            setSelectedObject(obj);
-        }
+        if (id === selectedId) setSelectedObject(obj);
     }, [selectedId]);
 
     useEffect(() => {
-        if (selectedId) {
-            setSelectedObject(objectRefs.current[selectedId] || null);
-        } else {
-            setSelectedObject(null);
-        }
+        setSelectedObject(selectedId ? objectRefs.current[selectedId] || null : null);
     }, [selectedId]);
 
     const onTransformChange = () => {
@@ -82,10 +61,10 @@ export const PrefabRoot = forwardRef<Group, {
         const le = new Euler().setFromQuaternion(lq);
 
         // 4. Write back LOCAL transform into the prefab node
-        const newRoot = updatePrefabNode(data.root, selectedId, (node) => ({
+        const newRoot = updateNode(data.root, selectedId, (node) => ({
             ...node,
             components: {
-                ...node?.components,
+                ...node.components,
                 transform: {
                     type: "Transform",
                     properties: {

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

@@ -193,37 +193,54 @@ function DirectionalLightView({ properties, editMode }: { properties: any; editM
     const { scene } = useThree();
     const directionalLightRef = useRef<DirectionalLight>(null);
     const targetRef = useRef<Object3D>(new Object3D());
-    const lastUpdate = useRef(0);
     const cameraHelperRef = useRef<CameraHelper | null>(null);
-    const lastPositionRef = useRef<Vector3>(new Vector3());
 
-    // Add target to scene
+    // Add target to scene once
     useEffect(() => {
-        if (targetRef.current) {
-            scene.add(targetRef.current);
-            return () => {
-                scene.remove(targetRef.current);
-            };
-        }
+        const target = targetRef.current;
+        scene.add(target);
+        return () => {
+            scene.remove(target);
+        };
     }, [scene]);
 
-    // Update target position when light position or offset changes
+    // Set up light target reference once
     useEffect(() => {
-        if (directionalLightRef.current && targetRef.current) {
-            const lightWorldPos = new Vector3();
-            directionalLightRef.current.getWorldPosition(lightWorldPos);
-            targetRef.current.position.set(
-                lightWorldPos.x + targetOffset[0],
-                lightWorldPos.y + targetOffset[1],
-                lightWorldPos.z + targetOffset[2]
-            );
+        if (directionalLightRef.current) {
             directionalLightRef.current.target = targetRef.current;
         }
+    }, []);
+
+    // Update target position and mark shadow for update when light moves or offset changes
+    useFrame(() => {
+        if (!directionalLightRef.current) return;
+
+        const lightWorldPos = new Vector3();
+        directionalLightRef.current.getWorldPosition(lightWorldPos);
+
+        const newTargetPos = new Vector3(
+            lightWorldPos.x + targetOffset[0],
+            lightWorldPos.y + targetOffset[1],
+            lightWorldPos.z + targetOffset[2]
+        );
+
+        // Only update if position actually changed
+        if (!targetRef.current.position.equals(newTargetPos)) {
+            targetRef.current.position.copy(newTargetPos);
+            if (directionalLightRef.current.shadow) {
+                directionalLightRef.current.shadow.needsUpdate = true;
+            }
+        }
+
+        // Update camera helper in edit mode
+        if (editMode && cameraHelperRef.current) {
+            cameraHelperRef.current.update();
+        }
     });
 
+    // Create/destroy camera helper for edit mode
     useEffect(() => {
-        // Create camera helper for edit mode and add to scene
-        if (editMode && directionalLightRef.current && directionalLightRef.current.shadow.camera) {
+        if (editMode && directionalLightRef.current?.shadow.camera) {
             const helper = new CameraHelper(directionalLightRef.current.shadow.camera);
             cameraHelperRef.current = helper;
             scene.add(helper);
@@ -232,44 +249,12 @@ function DirectionalLightView({ properties, editMode }: { properties: any; editM
                 if (cameraHelperRef.current) {
                     scene.remove(cameraHelperRef.current);
                     cameraHelperRef.current.dispose();
+                    cameraHelperRef.current = null;
                 }
             };
         }
     }, [editMode, scene]);
 
-    useFrame(({ clock }) => {
-        if (!directionalLightRef.current || !directionalLightRef.current.shadow) return;
-
-        // Disable auto-update for shadows
-        if (directionalLightRef.current.shadow.autoUpdate) {
-            directionalLightRef.current.shadow.autoUpdate = false;
-            directionalLightRef.current.shadow.needsUpdate = true;
-        }
-
-        // Check if position has changed
-        const currentPosition = new Vector3();
-        directionalLightRef.current.getWorldPosition(currentPosition);
-
-        const positionChanged = !currentPosition.equals(lastPositionRef.current);
-
-        if (positionChanged) {
-            lastPositionRef.current.copy(currentPosition);
-            directionalLightRef.current.shadow.needsUpdate = true;
-            lastUpdate.current = clock.elapsedTime; // Reset timer on position change
-        }
-
-        // Update shadow map infrequently (every 5 seconds) if position hasn't changed
-        if (!editMode && !positionChanged && clock.elapsedTime - lastUpdate.current > 5) {
-            lastUpdate.current = clock.elapsedTime;
-            directionalLightRef.current.shadow.needsUpdate = true;
-        }
-
-        // Update camera helper in edit mode
-        if (editMode && cameraHelperRef.current) {
-            cameraHelperRef.current.update();
-        }
-    });
-
     return (
         <>
             <directionalLight

package/src/tools/prefabeditor/styles.ts

@@ -0,0 +1,195 @@
+// Shared editor styles - single source of truth for all prefab editor UI
+
+export const colors = {
+    bg: 'rgba(0,0,0,0.6)',
+    bgLight: 'rgba(255,255,255,0.06)',
+    bgHover: 'rgba(255,255,255,0.1)',
+    border: 'rgba(255,255,255,0.15)',
+    borderLight: 'rgba(255,255,255,0.1)',
+    borderFaint: 'rgba(255,255,255,0.05)',
+    text: '#fff',
+    textMuted: 'rgba(255,255,255,0.7)',
+    danger: '#ffaaaa',
+    dangerBg: 'rgba(255,80,80,0.2)',
+    dangerBorder: 'rgba(255,80,80,0.4)',
+};
+
+export const fonts = {
+    family: 'system-ui, sans-serif',
+    size: 11,
+    sizeSm: 10,
+};
+
+// Base component styles
+export const base = {
+    panel: {
+        background: colors.bg,
+        color: colors.text,
+        border: `1px solid ${colors.border}`,
+        borderRadius: 4,
+        overflow: 'hidden',
+        backdropFilter: 'blur(8px)',
+        fontFamily: fonts.family,
+        fontSize: fonts.size,
+    } as React.CSSProperties,
+
+    header: {
+        padding: '6px 8px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        cursor: 'pointer',
+        background: colors.bgLight,
+        borderBottom: `1px solid ${colors.borderLight}`,
+        fontSize: fonts.size,
+        fontWeight: 500,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    } as React.CSSProperties,
+
+    input: {
+        width: '100%',
+        background: colors.bgHover,
+        border: `1px solid ${colors.border}`,
+        borderRadius: 3,
+        padding: '4px 6px',
+        color: colors.text,
+        fontSize: fonts.size,
+        outline: 'none',
+    } as React.CSSProperties,
+
+    btn: {
+        background: colors.bgHover,
+        border: `1px solid ${colors.border}`,
+        borderRadius: 3,
+        padding: '4px 8px',
+        color: colors.text,
+        fontSize: fonts.size,
+        cursor: 'pointer',
+        outline: 'none',
+    } as React.CSSProperties,
+
+    btnDanger: {
+        background: colors.dangerBg,
+        borderColor: colors.dangerBorder,
+        color: colors.danger,
+    } as React.CSSProperties,
+
+    label: {
+        fontSize: fonts.sizeSm,
+        opacity: 0.7,
+        marginBottom: 4,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    } as React.CSSProperties,
+
+    row: {
+        display: 'flex',
+        gap: 6,
+    } as React.CSSProperties,
+
+    section: {
+        paddingBottom: 8,
+        borderBottom: `1px solid ${colors.borderLight}`,
+    } as React.CSSProperties,
+};
+
+// Specific panel styles
+export const inspector = {
+    panel: {
+        ...base.panel,
+        position: 'absolute' as const,
+        top: 8,
+        right: 8,
+        zIndex: 20,
+        width: 260,
+    },
+    content: {
+        padding: 8,
+        maxHeight: '80vh',
+        overflowY: 'auto' as const,
+        display: 'flex',
+        flexDirection: 'column' as const,
+        gap: 8,
+    },
+};
+
+export const tree = {
+    panel: {
+        ...base.panel,
+        maxHeight: '85vh',
+        display: 'flex',
+        flexDirection: 'column' as const,
+        userSelect: 'none' as const,
+    },
+    scroll: {
+        overflowY: 'auto' as const,
+        padding: 4,
+    },
+    row: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '3px 6px',
+        borderBottom: `1px solid ${colors.borderFaint}`,
+        cursor: 'pointer',
+        whiteSpace: 'nowrap' as const,
+    } as React.CSSProperties,
+    selected: {
+        background: 'rgba(255,255,255,0.12)',
+    },
+};
+
+export const menu = {
+    container: {
+        position: 'fixed' as const,
+        zIndex: 50,
+        minWidth: 120,
+        background: 'rgba(0,0,0,0.85)',
+        border: `1px solid ${colors.border}`,
+        borderRadius: 4,
+        overflow: 'hidden',
+        boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
+        backdropFilter: 'blur(8px)',
+    },
+    item: {
+        width: '100%',
+        textAlign: 'left' as const,
+        padding: '6px 8px',
+        background: 'transparent',
+        border: 'none',
+        color: colors.text,
+        fontSize: fonts.size,
+        cursor: 'pointer',
+        outline: 'none',
+    } as React.CSSProperties,
+    danger: {
+        color: colors.danger,
+    },
+};
+
+export const toolbar = {
+    panel: {
+        position: 'absolute' as const,
+        top: 8,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        display: 'flex',
+        gap: 6,
+        padding: '4px 6px',
+        background: colors.bg,
+        border: `1px solid ${colors.border}`,
+        borderRadius: 4,
+        color: colors.text,
+        fontFamily: fonts.family,
+        fontSize: fonts.size,
+        backdropFilter: 'blur(8px)',
+    },
+    divider: {
+        width: 1,
+        background: 'rgba(255,255,255,0.2)',
+    },
+    disabled: {
+        opacity: 0.4,
+        cursor: 'not-allowed',
+    },
+};