react-three-game 0.0.108 → 0.0.110

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -9,18 +9,18 @@ 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, useMemo, useRef, useState, forwardRef, useImperativeHandle, createContext, useContext } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from "react";
 import { BoxHelper } from "three";
 import { findComponentEntry } from "./types";
-import { PrefabEditorMode, PrefabRoot } from "./PrefabRoot";
+import { GameCanvas, PrefabRoot, PrefabEditorMode, SceneContext, AssetRuntimeProvider, createImageNode, createModelNode, denormalizePrefab } from "../../viewer";
 import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
 import { computeParentWorldMatrix, decompose, exportGLB as exportGLBFile, exportGLBData, focusCameraOnObject, isExternalPath, regenerateIds, withBasePath } from "./utils";
 import { loadDroppedAssets } from "../dragdrop";
-import { denormalizePrefab, createImageNode, createModelNode, createNode } from './prefab';
+import { createNode } from './prefab';
 import { createPrefabStore, PrefabStoreProvider } from "./prefabStore";
 import { decomposeModelToPrefabNodes, hasCollisionMeshConventions } from "./modelPrefab";
+import { EditorContext, EditorRefContext } from "./EditorContext";
 function isObjectAttachedToRoot(root, object) {
     if (!root || !object)
         return false;
@@ -48,22 +48,7 @@ function SelectionHelper({ object }) {
     useHelper(helperTarget, BoxHelper, "cyan");
     return null;
 }
-export const EditorContext = createContext(null);
-export const EditorRefContext = createContext(null);
-export function useEditorContext() {
-    const context = useContext(EditorContext);
-    if (!context) {
-        throw new Error("useEditorContext must be used within EditorContext.Provider");
-    }
-    return context;
-}
-export function useEditorRef() {
-    const editorRef = useContext(EditorRefContext);
-    if (!editorRef) {
-        throw new Error("useEditorRef must be used within PrefabEditor");
-    }
-    return editorRef;
-}
+export { EditorContext, EditorRefContext, useEditorContext, useEditorRef } from "./EditorContext";
 const MAX_HISTORY_LENGTH = 50;
 const HISTORY_DEBOUNCE_MS = 500;
 const DEFAULT_PREFAB = {
@@ -80,11 +65,12 @@ const PrefabEditor = forwardRef(({ basePath = "", initialPrefab, mode: initialMo
     const [rotationSnap, setRotationSnap] = useState(Math.PI / 4);
     const startingPrefab = initialPrefab !== null && initialPrefab !== void 0 ? initialPrefab : DEFAULT_PREFAB;
     const [prefabStore] = useState(() => createPrefabStore(startingPrefab));
-    const [history, setHistory] = useState([startingPrefab]);
+    const [history, setHistory] = useState(() => [prefabStore.getState()]);
     const [historyIndex, setHistoryIndex] = useState(0);
     const historyIndexRef = useRef(0);
     const historyTimeoutRef = useRef(null);
-    const prefabRootRef = useRef(null);
+    const notifyRafRef = useRef(null);
+    const runtimeRef = useRef(null);
     const canvasRef = useRef(null);
     const controlsRef = useRef(null);
     const transformControlsRef = useRef(null);
@@ -96,11 +82,14 @@ const PrefabEditor = forwardRef(({ basePath = "", initialPrefab, mode: initialMo
     }, []);
     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 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 getModel = useCallback((path) => { var _a, _b; return (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getModel(path)) !== null && _b !== void 0 ? _b : null; }, []);
-    const scheduleHistory = useCallback((nextPrefab) => {
+    const getRoot = useCallback(() => { var _a, _b; return (_b = (_a = runtimeRef.current) === null || _a === void 0 ? void 0 : _a.getObject(prefabStore.getState().rootId)) !== null && _b !== void 0 ? _b : null; }, [prefabStore]);
+    const getObject = useCallback((nodeId) => { var _a, _b; return (_b = (_a = runtimeRef.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 = runtimeRef.current) === null || _a === void 0 ? void 0 : _a.getHandle(nodeId, kind)) !== null && _b !== void 0 ? _b : null; }, []);
+    const getModel = useCallback((path) => { var _a, _b; return (_b = (_a = runtimeRef.current) === null || _a === void 0 ? void 0 : _a.getModel(path)) !== null && _b !== void 0 ? _b : null; }, []);
+    // History stores normalized state snapshots. Because store mutations use
+    // structural sharing (unchanged nodes keep their references), capturing a
+    // snapshot is O(1) instead of deep-cloning the whole prefab tree.
+    const scheduleHistory = useCallback((snapshot) => {
         if (historyTimeoutRef.current) {
             clearTimeout(historyTimeoutRef.current);
             historyTimeoutRef.current = null;
@@ -108,7 +97,7 @@ const PrefabEditor = forwardRef(({ basePath = "", initialPrefab, mode: initialMo
         historyTimeoutRef.current = setTimeout(() => {
             const currentHistoryIndex = historyIndexRef.current;
             setHistory(prev => {
-                const nextHistory = [...prev.slice(0, currentHistoryIndex + 1), nextPrefab];
+                const nextHistory = [...prev.slice(0, currentHistoryIndex + 1), snapshot];
                 return nextHistory.length > MAX_HISTORY_LENGTH ? nextHistory.slice(1) : nextHistory;
             });
             const nextHistoryIndex = Math.min(currentHistoryIndex + 1, MAX_HISTORY_LENGTH - 1);
@@ -117,19 +106,29 @@ const PrefabEditor = forwardRef(({ basePath = "", initialPrefab, mode: initialMo
             historyTimeoutRef.current = null;
         }, HISTORY_DEBOUNCE_MS);
     }, []);
+    // Coalesce onChange notifications to once per frame. denormalizePrefab walks
+    // the entire tree, so calling it on every mutation (e.g. per-frame gizmo
+    // drags) does not scale. We only pay that cost once, with the latest state.
+    const scheduleChange = useCallback(() => {
+        if (!onChangeRef.current || notifyRafRef.current != null)
+            return;
+        notifyRafRef.current = requestAnimationFrame(() => {
+            var _a;
+            notifyRafRef.current = null;
+            (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, denormalizePrefab(prefabStore.getState()));
+        });
+    }, [prefabStore]);
     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);
+        scheduleChange();
         if (pushHistory)
-            scheduleHistory(prefab);
+            scheduleHistory(after);
         return result;
-    }, [isEditMode, prefabStore, scheduleHistory]);
+    }, [isEditMode, prefabStore, scheduleChange, scheduleHistory]);
     const update = useCallback((id, fn) => {
         mutate(s => s.updateNode(id, fn));
     }, [mutate]);
@@ -187,7 +186,7 @@ const PrefabEditor = forwardRef(({ basePath = "", initialPrefab, mode: initialMo
         }
         if (options === null || options === void 0 ? void 0 : options.resetHistory) {
             setSelectedId(null);
-            setHistory([prefab]);
+            setHistory([prefabStore.getState()]);
             historyIndexRef.current = 0;
             setHistoryIndex(0);
         }
@@ -204,6 +203,9 @@ const PrefabEditor = forwardRef(({ basePath = "", initialPrefab, mode: initialMo
             if (historyTimeoutRef.current) {
                 clearTimeout(historyTimeoutRef.current);
             }
+            if (notifyRafRef.current != null) {
+                cancelAnimationFrame(notifyRafRef.current);
+            }
         };
     }, []);
     useEffect(() => {
@@ -225,14 +227,13 @@ const PrefabEditor = forwardRef(({ basePath = "", initialPrefab, mode: initialMo
         add(regenerateIds(prefab.root));
     }, [add]);
     const applyHistory = useCallback((index) => {
-        var _a;
         detachTransformControls();
-        prefabStore.getState().replacePrefab(history[index]);
-        (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, history[index]);
+        prefabStore.getState().restoreState(history[index]);
+        scheduleChange();
         historyIndexRef.current = index;
         setHistoryIndex(index);
         setSelectedId(prev => prev && prefabStore.getState().nodesById[prev] ? prev : null);
-    }, [detachTransformControls, history, prefabStore]);
+    }, [detachTransformControls, history, prefabStore, scheduleChange]);
     const undo = useCallback(() => {
         if (historyIndex > 0) {
             applyHistory(historyIndex - 1);
@@ -334,11 +335,11 @@ const PrefabEditor = forwardRef(({ basePath = "", initialPrefab, mode: initialMo
         function handleDrop(e) {
             e.preventDefault();
             e.stopPropagation();
-            const scene = prefabRootRef.current;
+            const runtime = runtimeRef.current;
             void loadDroppedAssets(e.dataTransfer, {
                 onModelLoaded: (model, filename, file) => {
                     const path = getPrefabAssetRef(filename, 'models');
-                    scene === null || scene === void 0 ? void 0 : scene.addModel(path, model);
+                    runtime === null || runtime === void 0 ? void 0 : runtime.registerModel(path, model);
                     const modelName = file.name.replace(/\.[^.]+$/, '');
                     const modelIdPrefix = modelName.replace(/[^\w-]+/g, '-') || 'model';
                     if (hasCollisionMeshConventions(model)) {
@@ -351,7 +352,7 @@ const PrefabEditor = forwardRef(({ basePath = "", initialPrefab, mode: initialMo
                                 return key;
                             },
                         });
-                        textureRefs.forEach((texture, path) => scene === null || scene === void 0 ? void 0 : scene.addTexture(path, texture));
+                        textureRefs.forEach((texture, path) => { runtime === null || runtime === void 0 ? void 0 : runtime.registerTexture(path, texture); });
                         add(Object.assign(Object.assign({}, decomposed), { name: modelName || decomposed.name }));
                         return;
                     }
@@ -359,7 +360,7 @@ const PrefabEditor = forwardRef(({ basePath = "", initialPrefab, mode: initialMo
                 },
                 onTextureLoaded: (texture, filename, file) => {
                     const path = getPrefabAssetRef(filename, 'textures');
-                    scene === null || scene === void 0 ? void 0 : scene.addTexture(path, texture);
+                    runtime === null || runtime === void 0 ? void 0 : runtime.registerTexture(path, texture);
                     add(createImageNode(path, file.name.replace(/\.[^.]+$/, '')));
                 },
                 onLoadError: error => {
@@ -391,44 +392,44 @@ const PrefabEditor = forwardRef(({ basePath = "", initialPrefab, mode: initialMo
         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); },
+        addModel: (path, model) => { var _a; return (_a = runtimeRef.current) === null || _a === void 0 ? void 0 : _a.registerModel(path, model); },
+        addTexture: (path, texture) => { var _a; return (_a = runtimeRef.current) === null || _a === void 0 ? void 0 : _a.registerTexture(path, texture); },
+        addSound: (path, sound) => { var _a; return (_a = runtimeRef.current) === null || _a === void 0 ? void 0 : _a.registerSound(path, sound); },
     }), [add, basePath, duplicate, getHandle, getModel, getNode, getObject, getRoot, mode, move, remove, replace, replaceNode, 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 content = (_jsxs(_Fragment, { children: [isEditMode ? _jsx("gridHelper", { args: [10, 10], position: [0, -1, 0] }) : null, _jsx(PrefabRoot, { 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: _jsx(EditorRefContext.Provider, { value: editorRefValue, children: _jsxs(EditorContext.Provider, { value: {
-                    mode,
-                    basePath,
-                    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);
-                            }
-                            : 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: transformMode === "translate" ? "world" : "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", { type: "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 }))] }))] }) }) });
+    return _jsx(PrefabStoreProvider, { store: prefabStore, children: _jsx(AssetRuntimeProvider, { runtimeRef: runtimeRef, children: _jsx(EditorRefContext.Provider, { value: editorRefValue, children: _jsx(EditorContext.Provider, { value: {
+                        mode,
+                        basePath,
+                        setMode: updateMode,
+                        transformMode,
+                        setTransformMode,
+                        scaleSnap,
+                        setScaleSnap,
+                        positionSnap,
+                        setPositionSnap,
+                        rotationSnap,
+                        setRotationSnap,
+                        onFocusNode: isEditMode ? handleFocusNode : undefined,
+                        onScreenshot: handleScreenshot,
+                        onExportGLB: handleExportGLB
+                    }, children: _jsxs(SceneContext.Provider, { value: sceneValue, 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);
+                                    }
+                                    : 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: transformMode === "translate" ? "world" : "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", { type: "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,35 +1,11 @@
 import { Matrix4 } from "three";
-import type { Object3D, Texture } from "three";
-import { type ThreeEvent } from "@react-three/fiber";
+import type { Object3D } from "three";
+import type { ThreeEvent } from "@react-three/fiber";
 import type { GameObject as GameObjectType, Prefab } from "./types";
 import type { LoadedModels } from "../dragdrop";
 import type { PrefabStoreApi } from "./prefabStore";
-export declare enum PrefabEditorMode {
-    Edit = "edit",
-    Play = "play"
-}
-export type PrefabNode = Omit<GameObjectType, "children">;
-export interface Scene {
-    root: Object3D | null;
-    mode: PrefabEditorMode;
-    basePath: string;
-    get(id: string): GameObjectType | null;
-    getObject(id: string): Object3D | null;
-    getHandle<T = unknown>(id: string, kind: string): T | null;
-    getModel(path: string): Object3D | null;
-    add(node: GameObjectType, parentId?: string): GameObjectType;
-    update(id: string, fn: (node: PrefabNode) => PrefabNode): void;
-    replaceNode(id: string, node: GameObjectType): 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;
+import { type Scene } from "./SceneContext";
+export type { Scene };
 export interface PrefabRootProps {
     editMode?: boolean;
     data?: Prefab;
@@ -42,7 +18,7 @@ export interface PrefabRootProps {
     children?: React.ReactNode;
 }
 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;
+export declare function GameObjectRenderer(props: RendererProps): import("react").JSX.Element | null;
 interface RendererProps {
     nodeId: string;
     selectedId?: string | null;