react-three-game 0.0.67 → 0.0.69

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -10,14 +10,16 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MapControls, TransformControls } from "@react-three/drei";
 import GameCanvas from "../../shared/GameCanvas";
-import { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from "react";
 import PrefabRoot from "./PrefabRoot";
 import { Physics } from "@react-three/rapier";
 import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
 import { EditorContext } from "./EditorContext";
-import { computeParentWorldMatrix, createImageNode, createModelNode, decompose, exportGLB as exportSceneGLB, exportGLBData, findNode, focusCameraOnObject, insertNode, updateNode } from "./utils";
+import { createImageNode, createModelNode, computeParentWorldMatrix, decompose, exportGLB as exportGLBFile, exportGLBData, focusCameraOnObject, regenerateIds } from "./utils";
 import { loadFiles } from "../dragdrop";
+import { createPrefabStore, PrefabStoreProvider, prefabStoreToPrefab } from "./prefabStore";
+import { createScene } from "./sceneApi";
 const DEFAULT_PREFAB = {
     id: "prefab-default",
     name: "New Prefab",
@@ -31,36 +33,35 @@ const DEFAULT_PREFAB = {
         }
     }
 };
-const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPrefabChange, showUI = true, enableWindowDrop = true, canvasProps, uiPlugins, children }, ref) => {
+const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onChange, showUI = true, enableWindowDrop = true, canvasProps, uiPlugins, children }, ref) => {
     const [editMode, setEditMode] = useState(true);
-    const [loadedPrefab, setLoadedPrefab] = useState(initialPrefab !== null && initialPrefab !== void 0 ? initialPrefab : DEFAULT_PREFAB);
     const [selectedId, setSelectedId] = useState(null);
     const [transformMode, setTransformMode] = useState("translate");
-    const [snapResolution, setSnapResolution] = useState(0);
+    const [scaleSnap, setScaleSnap] = useState(0);
     const [positionSnap, setPositionSnap] = useState(0.5);
     const [rotationSnap, setRotationSnap] = useState(Math.PI / 4);
-    const [history, setHistory] = useState([loadedPrefab]);
+    const startingPrefab = initialPrefab !== null && initialPrefab !== void 0 ? initialPrefab : DEFAULT_PREFAB;
+    const [prefabStore] = useState(() => createPrefabStore(startingPrefab));
+    const [history, setHistory] = useState([startingPrefab]);
     const [historyIndex, setHistoryIndex] = useState(0);
+    const changeOriginRef = useRef(null);
+    const historyIndexRef = useRef(0);
     const [selectedObject, setSelectedObject] = useState(null);
-    const throttleRef = useRef(null);
-    const lastDataRef = useRef(JSON.stringify(loadedPrefab));
     const prefabRootRef = useRef(null);
     const canvasRef = useRef(null);
     const controlsRef = useRef(null);
-    const onPrefabChangeRef = useRef(onPrefabChange);
-    const pendingPrefabChangeRef = useRef(null);
+    const onChangeRef = useRef(onChange);
     const [injectedModels, setInjectedModels] = useState({});
     const [injectedTextures, setInjectedTextures] = useState({});
-    onPrefabChangeRef.current = onPrefabChange;
-    const setSelection = (nodeId) => {
-        var _a, _b;
-        const nextNode = nodeId ? findNode(loadedPrefab.root, nodeId) : null;
+    const getPrefab = useCallback(() => prefabStoreToPrefab(prefabStore.getState()), [prefabStore]);
+    onChangeRef.current = onChange;
+    const setSelection = useCallback((nodeId) => {
+        const nextNode = nodeId ? prefabStore.getState().nodesById[nodeId] : null;
         if (nextNode === null || nextNode === void 0 ? void 0 : nextNode.locked) {
             return;
         }
         setSelectedId(nodeId);
-        setSelectedObject(nodeId ? (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getObject(nodeId)) !== null && _b !== void 0 ? _b : null : null);
-    };
+    }, [prefabStore]);
     const toggleEditMode = () => {
         setEditMode(prev => {
             const next = !prev;
@@ -71,75 +72,117 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             return next;
         });
     };
-    const setSelectedIdState = (value) => {
-        setSelection(typeof value === 'function' ? value(selectedId) : value);
-    };
-    const replacePrefab = (prefab, options) => {
-        if (throttleRef.current)
-            clearTimeout(throttleRef.current);
-        lastDataRef.current = JSON.stringify(prefab);
-        pendingPrefabChangeRef.current = (options === null || options === void 0 ? void 0 : options.notifyChange) === false ? null : prefab;
-        setSelection(null);
-        setInjectedModels({});
-        setInjectedTextures({});
-        setHistory([prefab]);
-        setHistoryIndex(0);
-        setLoadedPrefab(prefab);
-    };
-    const setPrefab = (prefab) => {
-        if (selectedId && !findNode(prefab.root, selectedId)) {
-            setSelection(null);
+    const loadPrefab = useCallback((prefab, options) => {
+        changeOriginRef.current = (options === null || options === void 0 ? void 0 : options.notifyChange) === false ? "replace-silent" : "replace";
+        prefabStore.getState().replacePrefab(prefab);
+        setSelectedObject(null);
+        if (options === null || options === void 0 ? void 0 : options.resetHistory) {
+            setSelectedId(null);
+            setInjectedModels({});
+            setInjectedTextures({});
+            setHistory([prefab]);
+            historyIndexRef.current = 0;
+            setHistoryIndex(0);
         }
-        updatePrefab(prefab);
-    };
+        else {
+            setSelectedId(prev => prev && prefabStore.getState().nodesById[prev] ? prev : null);
+        }
+    }, [prefabStore]);
     useEffect(() => {
         if (initialPrefab)
-            replacePrefab(initialPrefab, { notifyChange: false });
-    }, [initialPrefab]);
-    const updatePrefab = (newPrefab) => {
-        setLoadedPrefab(prev => {
-            const resolved = typeof newPrefab === 'function' ? newPrefab(prev) : newPrefab;
-            if (Object.is(resolved, prev)) {
-                pendingPrefabChangeRef.current = null;
-                return prev;
+            loadPrefab(initialPrefab, { resetHistory: true, notifyChange: false });
+    }, [initialPrefab, loadPrefab]);
+    useEffect(() => {
+        let historyTimeout = null;
+        let lastRevision = prefabStore.getState().revision;
+        const unsubscribe = prefabStore.subscribe((state) => {
+            var _a;
+            if (state.revision === lastRevision) {
+                return;
             }
-            pendingPrefabChangeRef.current = resolved;
-            return resolved;
+            lastRevision = state.revision;
+            const nextPrefab = prefabStoreToPrefab(state);
+            const changeOrigin = changeOriginRef.current;
+            if (changeOrigin !== "replace-silent") {
+                (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, nextPrefab);
+            }
+            if (historyTimeout) {
+                clearTimeout(historyTimeout);
+                historyTimeout = null;
+            }
+            if (changeOrigin || !editMode) {
+                changeOriginRef.current = null;
+                return;
+            }
+            historyTimeout = setTimeout(() => {
+                const currentHistoryIndex = historyIndexRef.current;
+                setHistory(prev => {
+                    const nextHistory = [...prev.slice(0, currentHistoryIndex + 1), nextPrefab];
+                    return nextHistory.length > 50 ? nextHistory.slice(1) : nextHistory;
+                });
+                const nextHistoryIndex = Math.min(currentHistoryIndex + 1, 49);
+                historyIndexRef.current = nextHistoryIndex;
+                setHistoryIndex(nextHistoryIndex);
+                historyTimeout = null;
+            }, 500);
         });
-    };
+        return () => {
+            if (historyTimeout) {
+                clearTimeout(historyTimeout);
+            }
+            unsubscribe();
+        };
+    }, [editMode, prefabStore]);
     useEffect(() => {
-        var _a;
-        if (pendingPrefabChangeRef.current !== loadedPrefab)
+        if (!selectedId)
             return;
-        (_a = onPrefabChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onPrefabChangeRef, loadedPrefab);
-        pendingPrefabChangeRef.current = null;
-    }, [loadedPrefab]);
-    const insertPrefabNode = (node, options) => {
-        updatePrefab(prev => {
-            return Object.assign(Object.assign({}, prev), { root: insertNode(prev.root, node, options === null || options === void 0 ? void 0 : options.parentId) });
+        const unsubscribe = prefabStore.subscribe((state) => {
+            if (state.nodesById[selectedId])
+                return;
+            setSelectedId(null);
+            setSelectedObject(null);
         });
+        return () => unsubscribe();
+    }, [prefabStore, selectedId]);
+    useEffect(() => {
+        var _a, _b;
+        if (!selectedId) {
+            setSelectedObject(null);
+            return;
+        }
+        setSelectedObject((_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getObject(selectedId)) !== null && _b !== void 0 ? _b : null);
+    }, [selectedId]);
+    const addNode = useCallback((node, options) => {
+        var _a;
+        const { addChild, rootId } = prefabStore.getState();
+        addChild((_a = options === null || options === void 0 ? void 0 : options.parentId) !== null && _a !== void 0 ? _a : rootId, node);
         if ((options === null || options === void 0 ? void 0 : options.select) !== false) {
             setSelection(node.id);
         }
         return node;
-    };
-    const addModel = (path, model, options) => {
+    }, [prefabStore, setSelection]);
+    const importPrefab = useCallback((prefab) => {
+        addNode(regenerateIds(prefab.root), { select: false });
+    }, [addNode]);
+    const addModel = useCallback((path, model, options) => {
         const node = createModelNode(path, options === null || options === void 0 ? void 0 : options.name);
-        insertPrefabNode(node, options);
+        addNode(node, options);
         setInjectedModels(prev => (Object.assign(Object.assign({}, prev), { [path]: model })));
         return node;
-    };
-    const addTexture = (path, texture, options) => {
+    }, [addNode]);
+    const addTexture = useCallback((path, texture, options) => {
         const node = createImageNode(path, options === null || options === void 0 ? void 0 : options.name);
-        insertPrefabNode(node, options);
+        addNode(node, options);
         setInjectedTextures(prev => (Object.assign(Object.assign({}, prev), { [path]: texture })));
         return node;
-    };
+    }, [addNode]);
     const applyHistory = (index) => {
+        changeOriginRef.current = "history";
+        prefabStore.getState().replacePrefab(history[index]);
+        historyIndexRef.current = index;
         setHistoryIndex(index);
-        lastDataRef.current = JSON.stringify(history[index]);
-        pendingPrefabChangeRef.current = history[index];
-        setLoadedPrefab(history[index]);
+        setSelectedObject(null);
+        setSelectedId(prev => prev && prefabStore.getState().nodesById[prev] ? prev : null);
     };
     const undo = () => historyIndex > 0 && applyHistory(historyIndex - 1);
     const redo = () => historyIndex < history.length - 1 && applyHistory(historyIndex + 1);
@@ -161,24 +204,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [editMode, historyIndex, history]);
-    useEffect(() => {
-        const currentStr = JSON.stringify(loadedPrefab);
-        if (currentStr === lastDataRef.current)
-            return;
-        if (throttleRef.current)
-            clearTimeout(throttleRef.current);
-        throttleRef.current = setTimeout(() => {
-            lastDataRef.current = currentStr;
-            setHistory(prev => {
-                const newHistory = [...prev.slice(0, historyIndex + 1), loadedPrefab];
-                return newHistory.length > 50 ? newHistory.slice(1) : newHistory;
-            });
-            setHistoryIndex(prev => Math.min(prev + 1, 49));
-        }, 500);
-        return () => { if (throttleRef.current)
-            clearTimeout(throttleRef.current); };
-    }, [loadedPrefab]);
-    const handleScreenshot = () => {
+    const handleScreenshot = useCallback(() => {
         const canvas = canvasRef.current;
         if (!canvas)
             return;
@@ -188,38 +214,34 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
             a.href = url;
-            a.download = `${loadedPrefab.name || 'screenshot'}.png`;
+            a.download = `${prefabStore.getState().prefabName || 'screenshot'}.png`;
             a.click();
             URL.revokeObjectURL(url);
         });
-    };
-    const clearSelection = () => __awaiter(void 0, void 0, void 0, function* () {
-        if (!selectedId)
-            return;
+    }, [prefabStore]);
+    const clearSelection = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         setSelection(null);
         yield new Promise(resolve => {
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => resolve());
-            });
+            requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
         });
-    });
-    const handleExportGLB = (...args_1) => __awaiter(void 0, [...args_1], void 0, function* (options = {}) {
+    }), [setSelection]);
+    const handleExportGLB = useCallback((...args_1) => __awaiter(void 0, [...args_1], void 0, function* (options = {}) {
         var _a;
         yield clearSelection();
-        const sceneRoot = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.root;
-        if (!sceneRoot)
+        const rootObject = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.root;
+        if (!rootObject)
             return;
-        return exportSceneGLB(sceneRoot, Object.assign({ filename: `${loadedPrefab.name || 'scene'}.glb` }, options));
-    });
-    const handleExportGLBData = () => __awaiter(void 0, void 0, void 0, function* () {
+        return exportGLBFile(rootObject, Object.assign({ filename: `${prefabStore.getState().prefabName || 'prefab'}.glb` }, options));
+    }), [clearSelection, prefabStore]);
+    const handleExportGLBData = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         var _a;
         yield clearSelection();
-        const sceneRoot = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.root;
-        if (!sceneRoot)
+        const rootObject = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.root;
+        if (!rootObject)
             return;
-        return exportGLBData(sceneRoot);
-    });
-    const handleFocusNode = (nodeId) => {
+        return exportGLBData(rootObject);
+    }), [clearSelection]);
+    const handleFocusNode = useCallback((nodeId) => {
         var _a;
         const object = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getObject(nodeId);
         const controls = controlsRef.current;
@@ -227,7 +249,15 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
         if (!object || !controls || !camera)
             return;
         focusCameraOnObject(object, camera, controls.target, () => { var _a; return (_a = controls.update) === null || _a === void 0 ? void 0 : _a.call(controls); });
-    };
+    }, []);
+    const scene = useMemo(() => createScene({
+        getRootId: () => prefabStore.getState().rootId,
+        getNode: (id) => { var _a; return (_a = prefabStore.getState().nodesById[id]) !== null && _a !== void 0 ? _a : null; },
+        updateNode: (id, update) => prefabStore.getState().updateNode(id, update),
+        updateNodes: (updates) => prefabStore.getState().updateNodes(Object.entries(updates).map(([id, update]) => ({ id, update }))),
+        addNode: (node, options) => addNode(node, options).id,
+        removeNode: (id) => prefabStore.getState().deleteNode(id),
+    }), [addNode, prefabStore]);
     const handleTransformChange = () => {
         var _a;
         if (!selectedId)
@@ -235,13 +265,13 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
         const object = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getObject(selectedId);
         if (!object)
             return;
-        const parentWorld = computeParentWorldMatrix(loadedPrefab.root, selectedId);
+        const parentWorld = computeParentWorldMatrix(prefabStore.getState(), selectedId);
         const local = parentWorld.clone().invert().multiply(object.matrixWorld);
         const { position, rotation, scale } = decompose(local);
-        updatePrefab(prev => (Object.assign(Object.assign({}, prev), { root: updateNode(prev.root, selectedId, node => (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node.components), { transform: {
-                        type: "Transform",
-                        properties: { position, rotation, scale },
-                    } }) }))) })));
+        prefabStore.getState().updateNode(selectedId, node => (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node.components), { transform: {
+                    type: "Transform",
+                    properties: { position, rotation, scale },
+                } }) })));
     };
     // --- Drag & drop files to add nodes ---
     useEffect(() => {
@@ -278,43 +308,43 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             window.removeEventListener('dragover', handleDragOver);
             window.removeEventListener('drop', handleDrop);
         };
-    }, [editMode, enableWindowDrop]);
+    }, [addModel, addTexture, editMode, enableWindowDrop]);
     useImperativeHandle(ref, () => ({
         screenshot: handleScreenshot,
         exportGLB: handleExportGLB,
         exportGLBData: handleExportGLBData,
         clearSelection,
-        prefab: loadedPrefab,
-        setPrefab,
-        replacePrefab,
+        save: getPrefab,
+        scene,
+        load: loadPrefab,
         addModel,
         addTexture,
-        rootRef: prefabRootRef
-    }));
-    const content = (_jsxs(_Fragment, { children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { ref: prefabRootRef, data: loadedPrefab, editMode: editMode, selectedId: selectedId, onSelect: setSelection, onSelectedObjectChange: editMode ? setSelectedObject : undefined, onFocusNode: editMode ? handleFocusNode : undefined, basePath: basePath, injectedModels: injectedModels, injectedTextures: injectedTextures }), children] }));
-    return _jsxs(EditorContext.Provider, { value: {
-            editMode,
-            transformMode,
-            setTransformMode,
-            snapResolution,
-            setSnapResolution,
-            positionSnap,
-            setPositionSnap,
-            rotationSnap,
-            setRotationSnap,
-            onFocusNode: editMode ? handleFocusNode : undefined,
-            onScreenshot: handleScreenshot,
-            onExportGLB: handleExportGLB
-        }, children: [_jsxs(GameCanvas, Object.assign({ camera: { position: [0, 5, 15] }, canvasRef: canvasRef }, canvasProps, { onPointerMissed: editMode
-                    ? (event) => {
-                        var _a, _b, _c, _d;
-                        const button = (_c = (_a = event.button) !== null && _a !== void 0 ? _a : (_b = event.sourceEvent) === null || _b === void 0 ? void 0 : _b.button) !== null && _c !== void 0 ? _c : 0;
-                        if (button === 0 && selectedId) {
-                            setSelection(null);
+        viewRef: prefabRootRef
+    }), [addModel, addTexture, clearSelection, getPrefab, handleExportGLB, handleExportGLBData, handleScreenshot, loadPrefab, scene]);
+    const content = (_jsxs(_Fragment, { children: [_jsx("ambientLight", { intensity: 1.5 }), _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }), _jsx(PrefabRoot, { ref: prefabRootRef, store: prefabStore, editMode: editMode, selectedId: selectedId, onSelect: setSelection, onSelectedObjectChange: editMode ? setSelectedObject : undefined, onFocusNode: editMode ? handleFocusNode : undefined, basePath: basePath, injectedModels: injectedModels, injectedTextures: injectedTextures }), children] }));
+    return _jsx(PrefabStoreProvider, { store: prefabStore, children: _jsxs(EditorContext.Provider, { value: {
+                editMode,
+                transformMode,
+                setTransformMode,
+                scaleSnap,
+                setScaleSnap,
+                positionSnap,
+                setPositionSnap,
+                rotationSnap,
+                setRotationSnap,
+                onFocusNode: editMode ? handleFocusNode : undefined,
+                onScreenshot: handleScreenshot,
+                onExportGLB: handleExportGLB
+            }, children: [_jsxs(GameCanvas, Object.assign({ camera: { position: [0, 5, 15] }, canvasRef: canvasRef }, canvasProps, { onPointerMissed: editMode
+                        ? (event) => {
+                            var _a, _b, _c, _d;
+                            const button = (_c = (_a = event.button) !== null && _a !== void 0 ? _a : (_b = event.sourceEvent) === null || _b === void 0 ? void 0 : _b.button) !== null && _c !== void 0 ? _c : 0;
+                            if (button === 0 && selectedId) {
+                                setSelection(null);
+                            }
+                            (_d = canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed) === null || _d === void 0 ? void 0 : _d.call(canvasProps, event);
                         }
-                        (_d = canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed) === null || _d === void 0 ? void 0 : _d.call(canvasProps, event);
-                    }
-                    : canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed, children: [physics ? (_jsx(Physics, { debug: editMode, paused: editMode, children: content })) : content, editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: handleTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: snapResolution > 0 ? snapResolution : undefined }, `transform-${transformMode}-${positionSnap}-${rotationSnap}-${snapResolution}`))] }))] })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: toggleEditMode, children: editMode ? "▶" : "⏸" }), uiPlugins] }), editMode && (_jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedIdState, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 }))] }))] });
+                        : canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed, children: [physics ? (_jsx(Physics, { debug: editMode, paused: editMode, children: content })) : content, editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: handleTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: scaleSnap > 0 ? scaleSnap : undefined }, `transform-${transformMode}-${positionSnap}-${rotationSnap}-${scaleSnap}`))] }))] })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: toggleEditMode, children: editMode ? "▶" : "⏸" }), uiPlugins] }), editMode && (_jsx(EditorUI, { selectedId: selectedId, setSelectedId: setSelection, getPrefab: getPrefab, onReplacePrefab: (prefab) => loadPrefab(prefab, { resetHistory: true }), onImportPrefab: importPrefab, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 }))] }))] }) });
 });
 PrefabEditor.displayName = "PrefabEditor";
 export default PrefabEditor;

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

@@ -1,16 +1,18 @@
 import { Group, Matrix4, Object3D } from "three";
 import { ThreeEvent } from "@react-three/fiber";
-import { Prefab, GameObject as GameObjectType } from "./types";
+import { GameObject as GameObjectType, Prefab } from "./types";
 import { LoadedModels, LoadedTextures } from "../dragdrop";
+import { PrefabStoreApi } from "./prefabStore";
 export interface PrefabRootRef {
     root: Group | null;
     rigidBodyRefs: Map<string, any>;
     getObject: (nodeId: string) => Object3D | null;
     focusNode: (nodeId: string) => void;
 }
-export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
+export interface PrefabRootProps {
     editMode?: boolean;
-    data: Prefab;
+    data?: Prefab;
+    store?: PrefabStoreApi;
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
     onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
@@ -19,10 +21,11 @@ export declare const PrefabRoot: import("react").ForwardRefExoticComponent<{
     basePath?: string;
     injectedModels?: LoadedModels;
     injectedTextures?: LoadedTextures;
-} & import("react").RefAttributes<PrefabRootRef>>;
+}
+export declare const PrefabRoot: import("react").ForwardRefExoticComponent<PrefabRootProps & import("react").RefAttributes<PrefabRootRef>>;
 export declare function GameObjectRenderer(props: RendererProps): import("react/jsx-runtime").JSX.Element | null;
 interface RendererProps {
-    gameObject: GameObjectType;
+    nodeId: string;
     selectedId?: string | null;
     onSelect?: (id: string) => void;
     onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;