react-three-game 0.0.18 → 0.0.19

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -14,28 +14,24 @@ import { useState, useRef, useEffect } from "react";
 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 }) => {
     const [editMode, setEditMode] = useState(true);
     const [loadedPrefab, setLoadedPrefab] = useState(initialPrefab !== null && initialPrefab !== void 0 ? 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(null);
     const [transformMode, setTransformMode] = useState("translate");
-    const prefabRef = useRef(null);
     // Sync internal state with external initialPrefab prop
     useEffect(() => {
         if (initialPrefab) {
@@ -48,136 +44,74 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }) =>
         const resolved = typeof newPrefab === 'function' ? newPrefab(loadedPrefab) : newPrefab;
         onPrefabChange === null || onPrefabChange === void 0 ? void 0 : onPrefabChange(resolved);
     };
-    return _jsxs(_Fragment, { children: [_jsx(GameCanvas, { children: _jsxs(Physics, { paused: editMode, children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { data: loadedPrefab, ref: prefabRef, 
-                            // props for edit mode
-                            editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath }), children] }) }), _jsx(SaveDataPanel, { currentData: loadedPrefab, onDataChange: updatePrefab, editMode: editMode, onEditModeChange: setEditMode }), editMode && _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath })] });
+    return _jsxs(_Fragment, { children: [_jsx(GameCanvas, { children: _jsxs(Physics, { paused: editMode, children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { data: loadedPrefab, editMode: editMode, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, transformMode: transformMode, basePath: basePath }), children] }) }), _jsx(SaveDataPanel, { currentData: loadedPrefab, onDataChange: updatePrefab, editMode: editMode, onEditModeChange: setEditMode }), editMode && _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, transformMode: transformMode, setTransformMode: setTransformMode, basePath: basePath })] });
 };
 const SaveDataPanel = ({ currentData, onDataChange, editMode, onEditModeChange }) => {
     const [history, setHistory] = useState([currentData]);
     const [historyIndex, setHistoryIndex] = useState(0);
-    const throttleTimeoutRef = useRef(null);
-    const lastSavedDataRef = useRef(JSON.stringify(currentData));
-    // Define undo/redo handlers
-    const handleUndo = () => {
+    const throttleRef = useRef(null);
+    const lastDataRef = useRef(JSON.stringify(currentData));
+    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) => {
-            // Undo: Ctrl+Z (Cmd+Z on Mac)
             if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
                 e.preventDefault();
-                handleUndo();
+                undo();
             }
-            // 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();
+                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) {
+        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 = () => __awaiter(void 0, void 0, void 0, function* () {
         const prefab = yield 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 _jsxs("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",
-        }, children: [_jsx(PanelButton, { onClick: () => onEditModeChange(!editMode), children: editMode ? "▶" : "⏸" }), _jsx("span", { style: { opacity: 0.35 }, children: "|" }), _jsx(PanelButton, { onClick: handleUndo, disabled: !canUndo, title: "Undo (Ctrl+Z)", children: "\u21B6" }), _jsx(PanelButton, { onClick: handleRedo, disabled: !canRedo, title: "Redo (Ctrl+Shift+Z)", children: "\u21B7" }), _jsx("span", { style: { opacity: 0.35 }, children: "|" }), _jsx(PanelButton, { onClick: handleLoad, title: "Load JSON", children: "\uD83D\uDCE5" }), _jsx(PanelButton, { onClick: () => saveJson(currentData, "prefab"), title: "Save JSON", children: "\uD83D\uDCBE" })] });
-};
-const PanelButton = ({ onClick, disabled, title, children }) => {
-    return _jsx("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.style.background = "rgba(255,255,255,0.08)";
-            }
-        }, onPointerLeave: (e) => {
-            e.currentTarget.style.background = "transparent";
-        }, children: children });
+    return _jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: () => onEditModeChange(!editMode), children: editMode ? "▶" : "⏸" }), _jsx("div", { style: toolbar.divider }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), (canUndo ? {} : toolbar.disabled)), onClick: undo, disabled: !canUndo, children: "\u21B6" }), _jsx("button", { style: Object.assign(Object.assign({}, base.btn), (canRedo ? {} : toolbar.disabled)), onClick: redo, disabled: !canRedo, children: "\u21B7" }), _jsx("div", { style: toolbar.divider }), _jsx("button", { style: base.btn, onClick: handleLoad, children: "\uD83D\uDCE5" }), _jsx("button", { style: base.btn, onClick: () => saveJson(currentData, "prefab"), children: "\uD83D\uDCBE" })] });
 };
 const saveJson = (data, filename) => {
     const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));

package/dist/tools/prefabeditor/PrefabRoot.d.ts

@@ -7,7 +7,6 @@ export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
     transformMode?: "translate" | "rotate" | "scale";
-    setTransformMode?: (mode: "translate" | "rotate" | "scale") => void;
     basePath?: string;
 } & import("react").RefAttributes<Group<import("three").Object3DEventMap>>>;
 export default PrefabRoot;

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -12,42 +12,26 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { MapControls, TransformControls } from "@react-three/drei";
 import { useState, useRef, useEffect, forwardRef, useCallback } from "react";
 import { Vector3, Euler, Quaternion, SRGBColorSpace, TextureLoader, Matrix4 } from "three";
-import { getComponent } from "./components/ComponentRegistry";
+import { getComponent, registerComponent } from "./components/ComponentRegistry";
 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/';
+// Register all components
 components.forEach(registerComponent);
-function updatePrefabNode(root, id, update) {
-    if (root.id === id) {
-        return update(root);
-    }
-    if (root.children) {
-        return Object.assign(Object.assign({}, root), { children: root.children.map(child => updatePrefabNode(child, id, update)) });
-    }
-    return root;
-}
-export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, setTransformMode, basePath = "" }, ref) => {
+export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, transformMode, basePath = "" }, ref) => {
     const [loadedModels, setLoadedModels] = useState({});
     const [loadedTextures, setLoadedTextures] = useState({});
-    // const [prefabRoot, setPrefabRoot] = useState<Prefab>(data); // Removed local state
     const loadingRefs = useRef(new Set());
     const objectRefs = useRef({});
     const [selectedObject, setSelectedObject] = useState(null);
     const registerRef = useCallback((id, obj) => {
         objectRefs.current[id] = obj;
-        if (id === selectedId) {
+        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 = () => {
         if (!selectedId || !onPrefabChange)
@@ -68,7 +52,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
         localMatrix.decompose(lp, lq, ls);
         const le = new Euler().setFromQuaternion(lq);
         // 4. Write back LOCAL transform into the prefab node
-        const newRoot = updatePrefabNode(data.root, selectedId, (node) => (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node === null || node === void 0 ? void 0 : node.components), { transform: {
+        const newRoot = updateNode(data.root, selectedId, (node) => (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node.components), { transform: {
                     type: "Transform",
                     properties: {
                         position: [lp.x, lp.y, lp.z],

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

@@ -35,30 +35,44 @@ function DirectionalLightView({ properties, editMode }) {
     const { scene } = useThree();
     const directionalLightRef = useRef(null);
     const targetRef = useRef(new Object3D());
-    const lastUpdate = useRef(0);
     const cameraHelperRef = useRef(null);
-    const lastPositionRef = useRef(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) {
+        var _a;
+        if (editMode && ((_a = directionalLightRef.current) === null || _a === void 0 ? void 0 : _a.shadow.camera)) {
             const helper = new CameraHelper(directionalLightRef.current.shadow.camera);
             cameraHelperRef.current = helper;
             scene.add(helper);
@@ -66,37 +80,11 @@ function DirectionalLightView({ properties, editMode }) {
                 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 (_jsxs(_Fragment, { children: [_jsx("directionalLight", { ref: directionalLightRef, color: color, intensity: intensity, castShadow: castShadow, "shadow-mapSize": [shadowMapSize, shadowMapSize], "shadow-bias": -0.001, "shadow-normalBias": 0.02, children: _jsx("orthographicCamera", { attach: "shadow-camera", near: shadowCameraNear, far: shadowCameraFar, top: shadowCameraTop, bottom: shadowCameraBottom, left: shadowCameraLeft, right: shadowCameraRight }) }), editMode && (_jsxs(_Fragment, { children: [_jsxs("mesh", { children: [_jsx("sphereGeometry", { args: [0.3, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true })] }), _jsxs("mesh", { position: targetOffset, children: [_jsx("sphereGeometry", { args: [0.2, 8, 6] }), _jsx("meshBasicMaterial", { color: color, wireframe: true, opacity: 0.5, transparent: true })] }), _jsxs("line", { children: [_jsx("bufferGeometry", { onUpdate: (geo) => {
                                     const points = [
                                         new Vector3(0, 0, 0),