react-three-game 0.0.93 → 0.0.94

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -10,10 +10,10 @@ 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, useHelper } from "@react-three/drei";
 import GameCanvas from "../../shared/GameCanvas";
-import { useCallback, useEffect, useRef, useState, forwardRef, useImperativeHandle, createContext, useContext } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle, createContext, useContext } from "react";
 import { BoxHelper } from "three";
 import { findComponentEntry } from "./types";
-import { PrefabRootInternal } from "./PrefabRoot";
+import { PrefabEditorMode, PrefabRoot } from "./PrefabRoot";
 import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
 import { computeParentWorldMatrix, decompose, exportGLB as exportGLBFile, exportGLBData, focusCameraOnObject, regenerateIds } from "./utils";
@@ -37,12 +37,8 @@ function SelectionHelper({ object }) {
     useHelper(object ? objectRef : null, BoxHelper, "cyan");
     return null;
 }
-export var PrefabEditorMode;
-(function (PrefabEditorMode) {
-    PrefabEditorMode["Edit"] = "edit";
-    PrefabEditorMode["Play"] = "play";
-})(PrefabEditorMode || (PrefabEditorMode = {}));
 export const EditorContext = createContext(null);
+export const EditorRefContext = createContext(null);
 export function useEditorContext() {
     const context = useContext(EditorContext);
     if (!context) {
@@ -50,6 +46,13 @@ export function useEditorContext() {
     }
     return context;
 }
+export function useEditorRef() {
+    const editorRef = useContext(EditorRefContext);
+    if (!editorRef) {
+        throw new Error("useEditorRef must be used within PrefabEditor");
+    }
+    return editorRef;
+}
 const MAX_HISTORY_LENGTH = 50;
 const HISTORY_DEBOUNCE_MS = 500;
 const DEFAULT_PREFAB = {
@@ -68,35 +71,68 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
     const [prefabStore] = useState(() => createPrefabStore(startingPrefab));
     const [history, setHistory] = useState([startingPrefab]);
     const [historyIndex, setHistoryIndex] = useState(0);
-    const changeOriginRef = useRef(null);
     const historyIndexRef = useRef(0);
+    const historyTimeoutRef = useRef(null);
     const prefabRootRef = useRef(null);
     const canvasRef = useRef(null);
     const controlsRef = useRef(null);
     const transformControlsRef = useRef(null);
     const onChangeRef = useRef(onChange);
-    const sceneChangeListenersRef = useRef(new Set());
     const isEditMode = mode === PrefabEditorMode.Edit;
     const getPrefab = useCallback(() => denormalizePrefab(prefabStore.getState()), [prefabStore]);
     const getNode = useCallback((nodeId) => { var _a; return (_a = prefabStore.getState().nodesById[nodeId]) !== null && _a !== void 0 ? _a : null; }, [prefabStore]);
-    const getSceneRootObject = useCallback(() => { var _a, _b; return (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.root) !== null && _b !== void 0 ? _b : null; }, []);
-    const getNodeObject = useCallback((nodeId) => { var _a, _b; return (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getNodeObject(nodeId)) !== null && _b !== void 0 ? _b : null; }, []);
-    const getNodeHandle = useCallback((nodeId, kind) => { var _a, _b; return (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getNodeHandle(nodeId, kind)) !== null && _b !== void 0 ? _b : null; }, []);
-    const updateNode = useCallback((nodeId, update) => {
-        prefabStore.getState().updateNode(nodeId, update);
-    }, [prefabStore]);
-    const updateNodes = useCallback((updates) => {
-        prefabStore.getState().updateNodes(updates);
-    }, [prefabStore]);
-    const deleteNode = useCallback((nodeId) => {
-        prefabStore.getState().deleteNode(nodeId);
-    }, [prefabStore]);
-    const duplicateNode = useCallback((nodeId) => {
-        return prefabStore.getState().duplicateNode(nodeId);
-    }, [prefabStore]);
-    const moveNode = useCallback((draggedId, targetId, position) => {
-        prefabStore.getState().moveNode(draggedId, targetId, position);
-    }, [prefabStore]);
+    const getRoot = useCallback(() => { var _a, _b; return (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.root) !== null && _b !== void 0 ? _b : null; }, []);
+    const getObject = useCallback((nodeId) => { var _a, _b; return (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getObject(nodeId)) !== null && _b !== void 0 ? _b : null; }, []);
+    const getHandle = useCallback((nodeId, kind) => { var _a, _b; return (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getHandle(nodeId, kind)) !== null && _b !== void 0 ? _b : null; }, []);
+    const scheduleHistory = useCallback((nextPrefab) => {
+        if (historyTimeoutRef.current) {
+            clearTimeout(historyTimeoutRef.current);
+            historyTimeoutRef.current = null;
+        }
+        historyTimeoutRef.current = setTimeout(() => {
+            const currentHistoryIndex = historyIndexRef.current;
+            setHistory(prev => {
+                const nextHistory = [...prev.slice(0, currentHistoryIndex + 1), nextPrefab];
+                return nextHistory.length > MAX_HISTORY_LENGTH ? nextHistory.slice(1) : nextHistory;
+            });
+            const nextHistoryIndex = Math.min(currentHistoryIndex + 1, MAX_HISTORY_LENGTH - 1);
+            historyIndexRef.current = nextHistoryIndex;
+            setHistoryIndex(nextHistoryIndex);
+            historyTimeoutRef.current = null;
+        }, HISTORY_DEBOUNCE_MS);
+    }, []);
+    const mutate = useCallback((run, pushHistory = isEditMode) => {
+        var _a;
+        const before = prefabStore.getState();
+        const result = run(before);
+        const after = prefabStore.getState();
+        if (after === before)
+            return result;
+        const prefab = denormalizePrefab(after);
+        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, prefab);
+        if (pushHistory)
+            scheduleHistory(prefab);
+        return result;
+    }, [isEditMode, prefabStore, scheduleHistory]);
+    const update = useCallback((id, fn) => {
+        mutate(s => s.updateNode(id, fn));
+    }, [mutate]);
+    const remove = useCallback((id) => {
+        mutate(s => s.deleteNode(id));
+    }, [mutate]);
+    const duplicate = useCallback((id) => {
+        return mutate(s => s.duplicateNode(id));
+    }, [mutate]);
+    const move = useCallback((draggedId, targetId, position) => {
+        mutate(s => s.moveNode(draggedId, targetId, position));
+    }, [mutate]);
+    const add = useCallback((node, parentId) => {
+        mutate(s => s.addChild(parentId !== null && parentId !== void 0 ? parentId : s.rootId, node));
+        return node;
+    }, [mutate]);
+    const replace = useCallback((prefab) => {
+        mutate(s => s.replacePrefab(prefab), false);
+    }, [mutate]);
     onChangeRef.current = onChange;
     const setSelection = useCallback((nodeId) => {
         const nextNode = nodeId ? prefabStore.getState().nodesById[nodeId] : null;
@@ -122,10 +158,14 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
         updateMode(initialMode);
     }, [initialMode, updateMode]);
     const loadPrefab = useCallback((prefab, options) => {
-        var _a;
-        changeOriginRef.current = (options === null || options === void 0 ? void 0 : options.notifyChange) === false ? "replace-silent" : "replace";
+        var _a, _b;
         (_a = transformControlsRef.current) === null || _a === void 0 ? void 0 : _a.detach();
+        const before = prefabStore.getState();
         prefabStore.getState().replacePrefab(prefab);
+        const after = prefabStore.getState();
+        if (after !== before && (options === null || options === void 0 ? void 0 : options.notifyChange) !== false) {
+            (_b = onChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeRef, prefab);
+        }
         if (options === null || options === void 0 ? void 0 : options.resetHistory) {
             setSelectedId(null);
             setHistory([prefab]);
@@ -141,47 +181,12 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
             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;
-            }
-            lastRevision = state.revision;
-            sceneChangeListenersRef.current.forEach(listener => listener(state.revision));
-            const nextPrefab = denormalizePrefab(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 || !isEditMode) {
-                changeOriginRef.current = null;
-                return;
-            }
-            historyTimeout = setTimeout(() => {
-                const currentHistoryIndex = historyIndexRef.current;
-                setHistory(prev => {
-                    const nextHistory = [...prev.slice(0, currentHistoryIndex + 1), nextPrefab];
-                    return nextHistory.length > MAX_HISTORY_LENGTH ? nextHistory.slice(1) : nextHistory;
-                });
-                const nextHistoryIndex = Math.min(currentHistoryIndex + 1, MAX_HISTORY_LENGTH - 1);
-                historyIndexRef.current = nextHistoryIndex;
-                setHistoryIndex(nextHistoryIndex);
-                historyTimeout = null;
-            }, HISTORY_DEBOUNCE_MS);
-        });
         return () => {
-            if (historyTimeout) {
-                clearTimeout(historyTimeout);
+            if (historyTimeoutRef.current) {
+                clearTimeout(historyTimeoutRef.current);
             }
-            unsubscribe();
         };
-    }, [isEditMode, prefabStore]);
+    }, []);
     useEffect(() => {
         if (!selectedId)
             return;
@@ -192,42 +197,19 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
         });
         return () => unsubscribe();
     }, [prefabStore, selectedId]);
-    const selectedObject = selectedId ? getNodeObject(selectedId) : null;
+    const selectedObject = selectedId ? getObject(selectedId) : null;
     const transformObject = isEditMode && selectedObject
-        && isObjectAttachedToRoot(getSceneRootObject(), selectedObject)
+        && isObjectAttachedToRoot(getRoot(), selectedObject)
         ? selectedObject
         : null;
-    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;
-    }, [prefabStore, setSelection]);
     const importPrefab = useCallback((prefab) => {
-        addNode(regenerateIds(prefab.root), { select: false });
-    }, [addNode]);
-    const addModel = useCallback((path, model, options) => {
-        var _a;
-        const node = createModelNode(path, options === null || options === void 0 ? void 0 : options.name);
-        addNode(node, options);
-        (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.addModel(path, model);
-        return node;
-    }, [addNode]);
-    const addTexture = useCallback((path, texture, options) => {
-        var _a;
-        const node = createImageNode(path, options === null || options === void 0 ? void 0 : options.name);
-        addNode(node, options);
-        (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.addTexture(path, texture);
-        return node;
-    }, [addNode]);
+        add(regenerateIds(prefab.root));
+    }, [add]);
     const applyHistory = (index) => {
-        var _a;
-        changeOriginRef.current = "history";
+        var _a, _b;
         (_a = transformControlsRef.current) === null || _a === void 0 ? void 0 : _a.detach();
         prefabStore.getState().replacePrefab(history[index]);
+        (_b = onChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeRef, history[index]);
         historyIndexRef.current = index;
         setHistoryIndex(index);
         setSelectedId(prev => prev && prefabStore.getState().nodesById[prev] ? prev : null);
@@ -275,36 +257,36 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
     }), [setSelection]);
     const handleExportGLB = useCallback((...args_1) => __awaiter(void 0, [...args_1], void 0, function* (options = {}) {
         yield clearSelection();
-        const rootObject = getSceneRootObject();
+        const rootObject = getRoot();
         if (!rootObject)
             return;
         return exportGLBFile(rootObject, Object.assign({ filename: `${prefabStore.getState().prefabName || 'prefab'}.glb` }, options));
-    }), [clearSelection, getSceneRootObject, prefabStore]);
+    }), [clearSelection, getRoot, prefabStore]);
     const handleExportGLBData = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         yield clearSelection();
-        const rootObject = getSceneRootObject();
+        const rootObject = getRoot();
         if (!rootObject)
             return;
         return exportGLBData(rootObject);
-    }), [clearSelection, getSceneRootObject]);
+    }), [clearSelection, getRoot]);
     const handleFocusNode = useCallback((nodeId) => {
-        const object = getNodeObject(nodeId);
+        const object = getObject(nodeId);
         const controls = controlsRef.current;
         const camera = controls === null || controls === void 0 ? void 0 : controls.object;
         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); });
-    }, [getNodeObject]);
+    }, [getObject]);
     const handleTransformChange = () => {
         if (!selectedId)
             return;
-        const object = getNodeObject(selectedId);
+        const object = getObject(selectedId);
         if (!object)
             return;
         const parentWorld = computeParentWorldMatrix(prefabStore.getState(), selectedId);
         const local = parentWorld.clone().invert().multiply(object.matrixWorld);
         const { position, rotation, scale } = decompose(local);
-        prefabStore.getState().updateNode(selectedId, node => {
+        update(selectedId, node => {
             var _a;
             const entry = findComponentEntry(node, "Transform");
             const key = (_a = entry === null || entry === void 0 ? void 0 : entry[0]) !== null && _a !== void 0 ? _a : "transform";
@@ -327,16 +309,17 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
             e.preventDefault();
             e.stopPropagation();
             const files = ((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) ? Array.from(e.dataTransfer.files) : [];
+            const scene = prefabRootRef.current;
             void loadFiles(files, {
                 onModelLoaded: (model, filename) => {
-                    addModel(`models/${filename}`, model, {
-                        name: filename.replace(/\.[^.]+$/, '')
-                    });
+                    const path = `models/${filename}`;
+                    scene === null || scene === void 0 ? void 0 : scene.addModel(path, model);
+                    add(createModelNode(path, filename.replace(/\.[^.]+$/, '')));
                 },
                 onTextureLoaded: (texture, filename) => {
-                    addTexture(`textures/${filename}`, texture, {
-                        name: filename.replace(/\.[^.]+$/, '')
-                    });
+                    const path = `textures/${filename}`;
+                    scene === null || scene === void 0 ? void 0 : scene.addTexture(path, texture);
+                    add(createImageNode(path, filename.replace(/\.[^.]+$/, '')));
                 },
                 onLoadError: error => {
                     console.error('Drop asset error:', error);
@@ -349,65 +332,58 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, mode: initialMode =
             window.removeEventListener('dragover', handleDragOver);
             window.removeEventListener('drop', handleDrop);
         };
-    }, [addModel, addTexture, isEditMode, enableWindowDrop]);
-    useImperativeHandle(ref, () => ({
+    }, [add, isEditMode, enableWindowDrop]);
+    const sceneValue = useMemo(() => ({
         get root() {
-            return getSceneRootObject();
-        },
-        getNode,
-        getNodeObject,
-        getNodeHandle,
-        onSceneChange: (listener) => {
-            sceneChangeListenersRef.current.add(listener);
-            return () => {
-                sceneChangeListenersRef.current.delete(listener);
-            };
+            return getRoot();
         },
-        screenshot: handleScreenshot,
-        exportGLB: handleExportGLB,
-        exportGLBData: handleExportGLBData,
-        clearSelection,
-        save: getPrefab,
-        load: loadPrefab,
-        updateNode,
-        updateNodes,
-        deleteNode,
-        duplicateNode,
-        moveNode,
-        addNode,
-        addModel,
-        addTexture
-    }), [addModel, addNode, addTexture, clearSelection, deleteNode, duplicateNode, getNode, getNodeHandle, getNodeObject, getPrefab, getSceneRootObject, handleExportGLB, handleExportGLBData, handleScreenshot, loadPrefab, moveNode, updateNode, updateNodes]);
-    const content = (_jsxs(_Fragment, { children: [isEditMode ? _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }) : null, _jsx(PrefabRootInternal, { ref: prefabRootRef, store: prefabStore, editMode: isEditMode, selectedId: selectedId, onSelect: setSelection, basePath: basePath }), children] }));
+        mode,
+        get: getNode,
+        getObject,
+        getHandle,
+        add,
+        update,
+        remove,
+        duplicate,
+        move,
+        replace,
+        addModel: (path, model) => { var _a; return (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.addModel(path, model); },
+        addTexture: (path, texture) => { var _a; return (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.addTexture(path, texture); },
+        addSound: (path, sound) => { var _a; return (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.addSound(path, sound); },
+    }), [add, duplicate, getHandle, getNode, getObject, getRoot, mode, move, remove, replace, update]);
+    const editorRefValue = useMemo(() => (Object.assign(Object.assign({}, sceneValue), { save: getPrefab, load: loadPrefab, undo,
+        redo, screenshot: handleScreenshot, exportGLB: handleExportGLB, exportGLBData: handleExportGLBData, clearSelection })), [clearSelection, getPrefab, handleExportGLB, handleExportGLBData, handleScreenshot, loadPrefab, redo, sceneValue, undo]);
+    useImperativeHandle(ref, () => editorRefValue, [editorRefValue]);
+    const content = (_jsxs(_Fragment, { children: [isEditMode ? _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }) : null, _jsx(PrefabRoot, { ref: prefabRootRef, store: prefabStore, editMode: isEditMode, selectedId: selectedId, onSelect: setSelection, basePath: basePath, children: children })] }));
     const handleCanvasCreated = useCallback((state) => {
         var _a;
         canvasRef.current = state.gl.domElement;
         (_a = canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onCreated) === null || _a === void 0 ? void 0 : _a.call(canvasProps, state);
     }, [canvasProps]);
-    return _jsx(PrefabStoreProvider, { store: prefabStore, children: _jsxs(EditorContext.Provider, { value: {
-                mode,
-                setMode: updateMode,
-                transformMode,
-                setTransformMode,
-                scaleSnap,
-                setScaleSnap,
-                positionSnap,
-                setPositionSnap,
-                rotationSnap,
-                setRotationSnap,
-                onFocusNode: isEditMode ? handleFocusNode : undefined,
-                onScreenshot: handleScreenshot,
-                onExportGLB: handleExportGLB
-            }, children: [_jsxs(GameCanvas, Object.assign({ camera: { position: [0, 5, 15] } }, canvasProps, { onCreated: handleCanvasCreated, onPointerMissed: isEditMode
-                        ? (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);
+    return _jsx(PrefabStoreProvider, { store: prefabStore, children: _jsx(EditorRefContext.Provider, { value: editorRefValue, children: _jsxs(EditorContext.Provider, { value: {
+                    mode,
+                    setMode: updateMode,
+                    transformMode,
+                    setTransformMode,
+                    scaleSnap,
+                    setScaleSnap,
+                    positionSnap,
+                    setPositionSnap,
+                    rotationSnap,
+                    setRotationSnap,
+                    onFocusNode: isEditMode ? handleFocusNode : undefined,
+                    onScreenshot: handleScreenshot,
+                    onExportGLB: handleExportGLB
+                }, children: [_jsxs(GameCanvas, Object.assign({ camera: { position: [0, 5, 15] } }, canvasProps, { onCreated: handleCanvasCreated, onPointerMissed: isEditMode
+                            ? (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: [content, isEditMode ? _jsx(SelectionHelper, { object: transformObject }) : null, isEditMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, enableDamping: false, makeDefault: true }), transformObject && (_jsx(TransformControls, { ref: transformControlsRef, object: transformObject, mode: transformMode, space: "local", onObjectChange: handleTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: scaleSnap > 0 ? scaleSnap : undefined }, `transform-${selectedId}-${transformMode}-${positionSnap}-${rotationSnap}-${scaleSnap}`))] }))] })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: toggleMode, children: isEditMode ? "▶" : "⏸" }), uiPlugins] }), isEditMode && (_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 }))] }))] }) });
+                            : canvasProps === null || canvasProps === void 0 ? void 0 : canvasProps.onPointerMissed, children: [content, isEditMode ? _jsx(SelectionHelper, { object: transformObject }) : null, isEditMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, enableDamping: false, makeDefault: true }), transformObject && (_jsx(TransformControls, { ref: transformControlsRef, object: transformObject, mode: transformMode, space: "local", onObjectChange: handleTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: scaleSnap > 0 ? scaleSnap : undefined }, `transform-${selectedId}-${transformMode}-${positionSnap}-${rotationSnap}-${scaleSnap}`))] }))] })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: toggleMode, children: isEditMode ? "▶" : "⏸" }), uiPlugins] }), isEditMode && (_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,31 +1,43 @@
-import { type ForwardRefExoticComponent, type RefAttributes } from "react";
 import { Matrix4, Object3D, Texture } from "three";
 import { ThreeEvent } from "@react-three/fiber";
 import { GameObject as GameObjectType, Prefab } from "./types";
 import { LoadedModels } from "../dragdrop";
 import { PrefabStoreApi } from "./prefabStore";
-export interface PrefabRootRef {
+export declare enum PrefabEditorMode {
+    Edit = "edit",
+    Play = "play"
+}
+export type PrefabNode = Omit<GameObjectType, "children">;
+export interface Scene {
     root: Object3D | null;
-    getNodeObject: (nodeId: string) => Object3D | null;
-    getNodeHandle: <T = unknown>(nodeId: string, kind: string) => T | null;
-    addModel: (path: string, model: Object3D) => void;
-    addTexture: (path: string, texture: Texture) => void;
-    addSound: (path: string, sound: AudioBuffer) => void;
+    mode: PrefabEditorMode;
+    get(id: string): GameObjectType | null;
+    getObject(id: string): Object3D | null;
+    getHandle<T = unknown>(id: string, kind: string): T | null;
+    add(node: GameObjectType, parentId?: string): GameObjectType;
+    update(id: string, fn: (node: PrefabNode) => PrefabNode): void;
+    remove(id: string): void;
+    duplicate(id: string): string | null;
+    move(draggedId: string, targetId: string, position: "before" | "inside"): void;
+    replace(prefab: Prefab): void;
+    addModel(path: string, model: Object3D): void;
+    addTexture(path: string, texture: Texture): void;
+    addSound(path: string, sound: AudioBuffer): void;
 }
+export declare const SceneContext: import("react").Context<Scene | null>;
+export declare function useScene(): Scene;
 export interface PrefabRootProps {
     editMode?: boolean;
     data?: Prefab;
+    store?: PrefabStoreApi;
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
     onClick?: (event: ThreeEvent<PointerEvent>, node: GameObjectType) => void;
     onEditNodeClick?: (event: ThreeEvent<PointerEvent>, node: GameObjectType) => void;
     basePath?: string;
+    children?: React.ReactNode;
 }
-interface PrefabRootInternalProps extends PrefabRootProps {
-    store?: PrefabStoreApi;
-}
-export declare const PrefabRootInternal: ForwardRefExoticComponent<PrefabRootInternalProps & RefAttributes<PrefabRootRef>>;
-export declare const PrefabRoot: ForwardRefExoticComponent<PrefabRootProps & RefAttributes<PrefabRootRef>>;
+export declare const PrefabRoot: import("react").ForwardRefExoticComponent<PrefabRootProps & import("react").RefAttributes<Scene>>;
 export declare function GameObjectRenderer(props: RendererProps): import("react/jsx-runtime").JSX.Element | null;
 interface RendererProps {
     nodeId: string;