react-three-game 0.0.91 → 0.0.92

package/dist/tools/assetviewer/page.js

@@ -12,6 +12,34 @@ const styles = {
     textLight: { color: '#f9fafb' },
     iconLarge: { fontSize: 20 }
 };
+const assetViewerColors = {
+    panelBg: '#111827',
+    controlBg: '#1f2937',
+    text: '#f9fafb',
+    border: 'rgba(255,255,255,0.12)',
+    accentBorder: 'rgba(34, 211, 238, 0.3)',
+};
+const assetPickerPopupBaseStyle = {
+    background: assetViewerColors.panelBg,
+    border: `1px solid ${assetViewerColors.border}`,
+    borderRadius: 0,
+    boxShadow: '0 4px 16px rgba(0,0,0,0.6)',
+};
+const assetPickerButtonBaseStyle = {
+    backgroundColor: assetViewerColors.controlBg,
+    color: 'inherit',
+    fontSize: 10,
+    cursor: 'pointer',
+    border: `1px solid ${assetViewerColors.border}`,
+    borderRadius: 0,
+};
+const assetPickerWideButtonStyle = Object.assign(Object.assign({}, assetPickerButtonBaseStyle), { width: '100%', padding: '6px 8px' });
+const assetPickerSmallButtonStyle = Object.assign(Object.assign({}, assetPickerButtonBaseStyle), { padding: '4px 8px' });
+const assetPickerEmptyPreviewStyle = {
+    backgroundColor: assetViewerColors.controlBg,
+    border: `1px dashed ${assetViewerColors.border}`,
+    borderRadius: 0,
+};
 function getItemsInPath(files, currentPath) {
     // Remove the leading category folder (e.g., /textures/, /models/, /sounds/)
     const filesWithoutCategory = files.map(file => {
@@ -39,8 +67,8 @@ function FolderTile({ name, onClick }) {
     return (_jsxs("div", { onClick: onClick, style: {
             maxWidth: 60,
             aspectRatio: '1 / 1',
-            backgroundColor: '#1f2937', /* gray-800 */
-            color: '#f9fafb',
+            backgroundColor: assetViewerColors.controlBg,
+            color: assetViewerColors.text,
             cursor: 'pointer',
             display: 'flex',
             flexDirection: 'column',
@@ -73,7 +101,7 @@ function AssetListViewer({ files, selected, onSelect, renderCard }) {
                     const pathParts = currentPath.split('/').filter(Boolean);
                     pathParts.pop();
                     setCurrentPath(pathParts.join('/'));
-                }, style: { marginBottom: 4, padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 12, cursor: 'pointer', border: 'none' }, children: "\u2190 Back" })), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }, children: [folders.map((folder) => (_jsx(FolderTile, { name: folder, onClick: () => setCurrentPath(currentPath ? `${currentPath}/${folder}` : folder) }, folder))), filesInCurrentPath.map((file) => (_jsx("div", { children: renderCard(file, onSelect) }, file)))] })] }));
+                }, style: Object.assign(Object.assign({}, assetPickerSmallButtonStyle), { marginBottom: 4, fontSize: 12, border: 'none' }), children: "\u2190 Back" })), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }, children: [folders.map((folder) => (_jsx(FolderTile, { name: folder, onClick: () => setCurrentPath(currentPath ? `${currentPath}/${folder}` : folder) }, folder))), filesInCurrentPath.map((file) => (_jsx("div", { children: renderCard(file, onSelect) }, file)))] })] }));
 }
 export function TextureListViewer({ files, selected, onSelect, basePath = "" }) {
     return (_jsxs("div", { style: { position: 'relative', width: '100%', height: '100%' }, children: [_jsx("div", { style: { width: '100%', height: '100%', overflowY: 'auto', overflowX: 'hidden', paddingRight: 4 }, children: _jsx(AssetListViewer, { files: files, selected: selected, onSelect: onSelect, renderCard: (file, onSelectHandler) => (_jsx(TextureCard, { file: file, basePath: basePath, onSelect: onSelectHandler })) }) }), _jsx(SharedCanvas, {})] }));
@@ -172,8 +200,8 @@ function AssetPicker({ value, onChange, basePath, manifestFolder, preview, rende
             const fitsLeft = preferredLeft >= 8;
             const left = fitsLeft ? preferredLeft : Math.min(fallbackLeft, window.innerWidth - PICKER_POPUP_WIDTH - 8);
             const top = Math.min(Math.max(8, rect.top), window.innerHeight - PICKER_POPUP_HEIGHT - 8);
-            setResolvedPopupStyle(Object.assign({ position: 'fixed', left,
-                top, padding: 12, width: PICKER_POPUP_WIDTH, height: PICKER_POPUP_HEIGHT, overflow: 'hidden', zIndex: 1000, boxShadow: '0 4px 16px rgba(0,0,0,0.6)', background: '#111827', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 6 }, popupStyle));
+            setResolvedPopupStyle(Object.assign(Object.assign({ position: 'fixed', left,
+                top, padding: 12, width: PICKER_POPUP_WIDTH, height: PICKER_POPUP_HEIGHT, overflow: 'hidden', zIndex: 1000 }, assetPickerPopupBaseStyle), popupStyle));
         };
         updatePosition();
         window.addEventListener('resize', updatePosition);
@@ -194,23 +222,23 @@ function AssetPicker({ value, onChange, basePath, manifestFolder, preview, rende
                 }) }), document.body)] }));
 }
 export function TexturePicker({ value, onChange, basePath = "" }) {
-    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "textures", rootStyle: { maxHeight: 128, overflow: 'visible', position: 'relative', display: 'flex', alignItems: 'center' }, changeButtonStyle: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 3, marginTop: 4 }, clearButtonStyle: { padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 3, marginTop: 4, marginLeft: 4 }, preview: _jsx(SingleTextureViewer, { file: value, basePath: basePath }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(TextureListViewer, { files: files, selected: selectedValue || undefined, onSelect: onSelect, basePath: currentBasePath })) }));
+    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "textures", rootStyle: { maxHeight: 128, overflow: 'visible', position: 'relative', display: 'flex', alignItems: 'center' }, changeButtonStyle: Object.assign(Object.assign({}, assetPickerSmallButtonStyle), { marginTop: 4 }), clearButtonStyle: Object.assign(Object.assign({}, assetPickerSmallButtonStyle), { marginTop: 4, marginLeft: 4 }), preview: _jsx(SingleTextureViewer, { file: value, basePath: basePath }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(TextureListViewer, { files: files, selected: selectedValue || undefined, onSelect: onSelect, basePath: currentBasePath })) }));
 }
 export function ModelPicker({ value, onChange, basePath = "", pickerKey }) {
-    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "models", rootStyle: { maxHeight: 160, overflow: 'visible', position: 'relative', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }, controlsStyle: { display: 'flex', flexDirection: 'column', gap: 6, flex: '0 0 84px', minWidth: 84, justifyContent: 'flex-end' }, changeButtonStyle: { width: '100%', padding: '6px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)' }, clearButtonStyle: { width: '100%', padding: '6px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)' }, popupStyle: { background: 'rgba(0,0,0,0.9)', border: '1px solid rgba(34, 211, 238, 0.3)' }, preview: _jsx("div", { style: { flex: '0 0 auto' }, children: _jsx(SingleModelViewer, { file: value ? `/${value}` : undefined, basePath: basePath }) }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(ModelListViewer, { files: files, selected: selectedValue ? `/${selectedValue}` : undefined, onSelect: (file) => onSelect(file.startsWith('/') ? file.slice(1) : file), basePath: currentBasePath }, pickerKey)) }));
+    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "models", rootStyle: { maxHeight: 160, overflow: 'visible', position: 'relative', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }, controlsStyle: { display: 'flex', flexDirection: 'column', gap: 6, flex: '0 0 84px', minWidth: 84, justifyContent: 'flex-end' }, changeButtonStyle: Object.assign(Object.assign({}, assetPickerWideButtonStyle), { border: `1px solid ${assetViewerColors.accentBorder}` }), clearButtonStyle: Object.assign(Object.assign({}, assetPickerWideButtonStyle), { border: `1px solid ${assetViewerColors.accentBorder}` }), popupStyle: { background: 'rgba(0,0,0,0.9)', border: `1px solid ${assetViewerColors.accentBorder}` }, preview: _jsx("div", { style: { flex: '0 0 auto' }, children: _jsx(SingleModelViewer, { file: value ? `/${value}` : undefined, basePath: basePath }) }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(ModelListViewer, { files: files, selected: selectedValue ? `/${selectedValue}` : undefined, onSelect: (file) => onSelect(file.startsWith('/') ? file.slice(1) : file), basePath: currentBasePath }, pickerKey)) }));
 }
 export function SoundPicker({ value, onChange, basePath = "" }) {
-    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "sound", rootStyle: { maxHeight: 76, overflow: 'visible', position: 'relative', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }, controlsStyle: { display: 'flex', flexDirection: 'column', gap: 6, flex: '0 0 84px', minWidth: 84, justifyContent: 'flex-end' }, changeButtonStyle: { width: '100%', padding: '6px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 3 }, clearButtonStyle: { width: '100%', padding: '6px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 3 }, preview: _jsx("div", { style: { flex: '0 0 auto', minWidth: 84 }, children: value ? _jsx(SingleSoundViewer, { file: value, basePath: basePath }) : _jsx("div", { style: { width: 84, height: 60, backgroundColor: '#1f2937', border: '1px dashed rgba(255,255,255,0.12)', borderRadius: 4 } }) }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(SoundListViewer, { files: files, selected: selectedValue || undefined, onSelect: onSelect, basePath: currentBasePath })) }));
+    return (_jsx(AssetPicker, { value: value, onChange: onChange, basePath: basePath, manifestFolder: "sound", rootStyle: { maxHeight: 76, overflow: 'visible', position: 'relative', display: 'flex', gap: 8, alignItems: 'center', justifyContent: 'center' }, controlsStyle: { display: 'flex', flexDirection: 'column', gap: 6, flex: '0 0 84px', minWidth: 84, justifyContent: 'flex-end' }, changeButtonStyle: assetPickerWideButtonStyle, clearButtonStyle: assetPickerWideButtonStyle, preview: _jsx("div", { style: { flex: '0 0 auto', minWidth: 84 }, children: value ? _jsx(SingleSoundViewer, { file: value, basePath: basePath }) : _jsx("div", { style: Object.assign({ width: 84, height: 60 }, assetPickerEmptyPreviewStyle) }) }), renderList: ({ files, value: selectedValue, onSelect, basePath: currentBasePath }) => (_jsx(SoundListViewer, { files: files, selected: selectedValue || undefined, onSelect: onSelect, basePath: currentBasePath })) }));
 }
 // Single Asset Viewer Components - display only one selected asset
 export function SingleTextureViewer({ file, basePath = "" }) {
     if (!file)
-        return _jsx("div", { style: { width: 60, aspectRatio: '1 / 1', backgroundColor: '#1f2937', border: '1px dashed rgba(255,255,255,0.12)' } });
+        return _jsx("div", { style: Object.assign({ width: 60, aspectRatio: '1 / 1' }, assetPickerEmptyPreviewStyle) });
     return (_jsxs(_Fragment, { children: [_jsx(TextureCard, { file: file, basePath: basePath, onSelect: () => { } }), _jsx(SharedCanvas, {})] }));
 }
 export function SingleModelViewer({ file, basePath = "" }) {
     if (!file)
-        return _jsx("div", { style: { width: 112, aspectRatio: '1 / 1', backgroundColor: '#1f2937', border: '1px dashed rgba(255,255,255,0.12)' } });
+        return _jsx("div", { style: Object.assign({ width: 112, aspectRatio: '1 / 1' }, assetPickerEmptyPreviewStyle) });
     return (_jsxs(_Fragment, { children: [_jsx(ModelCard, { file: file, basePath: basePath, onSelect: () => { }, size: 112 }), _jsx(SharedCanvas, {})] }));
 }
 export function SingleSoundViewer({ file, basePath = "" }) {

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -8,9 +8,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 } from "@react-three/drei";
+import { MapControls, TransformControls, useHelper } from "@react-three/drei";
 import GameCanvas from "../../shared/GameCanvas";
-import { useCallback, useEffect, useReducer, useRef, useState, forwardRef, useImperativeHandle, createContext, useContext } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, forwardRef, useImperativeHandle, createContext, useContext } from "react";
+import { BoxHelper } from "three";
 import { findComponentEntry } from "./types";
 import PrefabRoot from "./PrefabRoot";
 import { Physics } from "@react-three/rapier";
@@ -31,6 +32,12 @@ function isObjectAttachedToRoot(root, object) {
     }
     return false;
 }
+function SelectionHelper({ object }) {
+    const objectRef = useRef(null);
+    objectRef.current = object;
+    useHelper(object ? objectRef : null, BoxHelper, "cyan");
+    return null;
+}
 export var PrefabEditorMode;
 (function (PrefabEditorMode) {
     PrefabEditorMode["Edit"] = "edit";
@@ -52,6 +59,7 @@ const DEFAULT_PREFAB = {
     root: createNode('Root', {}, { id: 'root' })
 };
 const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode: initialMode = PrefabEditorMode.Edit, onChange, showUI = true, enableWindowDrop = true, canvasProps, uiPlugins, children }, ref) => {
+    var _a, _b;
     const [mode, setMode] = useState(initialMode);
     const [selectedId, setSelectedId] = useState(null);
     const [transformMode, setTransformMode] = useState("translate");
@@ -64,21 +72,17 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
     const [historyIndex, setHistoryIndex] = useState(0);
     const changeOriginRef = useRef(null);
     const historyIndexRef = useRef(0);
-    const [, bumpSelectedObjectVersion] = useReducer((value) => value + 1, 0);
     const prefabRootRef = useRef(null);
     const canvasRef = useRef(null);
     const controlsRef = useRef(null);
+    const transformControlsRef = useRef(null);
+    const transformProxyRef = useRef(null);
     const onChangeRef = useRef(onChange);
     const isEditMode = mode === PrefabEditorMode.Edit;
     const getPrefab = useCallback(() => denormalizePrefab(prefabStore.getState()), [prefabStore]);
     const getRootObject = 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 getRigidBody = useCallback((nodeId) => { var _a, _b; return (_b = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getRigidBody(nodeId)) !== null && _b !== void 0 ? _b : null; }, []);
-    const handleObjectRefChange = useCallback((nodeId) => {
-        if (nodeId !== selectedId)
-            return;
-        bumpSelectedObjectVersion();
-    }, [selectedId]);
     onChangeRef.current = onChange;
     const setSelection = useCallback((nodeId) => {
         const nextNode = nodeId ? prefabStore.getState().nodesById[nodeId] : null;
@@ -104,7 +108,9 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
         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";
+        (_a = transformControlsRef.current) === null || _a === void 0 ? void 0 : _a.detach();
         prefabStore.getState().replacePrefab(prefab);
         if (options === null || options === void 0 ? void 0 : options.resetHistory) {
             setSelectedId(null);
@@ -171,10 +177,23 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
         });
         return () => unsubscribe();
     }, [prefabStore, selectedId]);
+    const selectedNode = selectedId ? (_a = prefabStore.getState().nodesById[selectedId]) !== null && _a !== void 0 ? _a : null : null;
     const selectedObject = selectedId ? getObject(selectedId) : null;
-    const transformObject = isObjectAttachedToRoot(getRootObject(), selectedObject)
-        ? selectedObject
+    const selectedHasPhysics = Object.values((_b = selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.components) !== null && _b !== void 0 ? _b : {}).some(component => (component === null || component === void 0 ? void 0 : component.type) === "Physics");
+    const transformObject = isEditMode && (selectedHasPhysics ? transformProxyRef.current : selectedObject)
+        && isObjectAttachedToRoot(getRootObject(), selectedObject)
+        ? (selectedHasPhysics ? transformProxyRef.current : selectedObject)
         : null;
+    useLayoutEffect(() => {
+        if (!isEditMode || !selectedHasPhysics || !selectedObject || !transformProxyRef.current) {
+            return;
+        }
+        selectedObject.updateMatrixWorld(true);
+        transformProxyRef.current.matrixAutoUpdate = true;
+        selectedObject.matrixWorld.decompose(transformProxyRef.current.position, transformProxyRef.current.quaternion, transformProxyRef.current.scale);
+        transformProxyRef.current.updateMatrix();
+        transformProxyRef.current.updateMatrixWorld(true);
+    }, [isEditMode, selectedHasPhysics, selectedId, selectedObject]);
     const addNode = useCallback((node, options) => {
         var _a;
         const { addChild, rootId } = prefabStore.getState();
@@ -202,7 +221,9 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
         return node;
     }, [addNode]);
     const applyHistory = (index) => {
+        var _a;
         changeOriginRef.current = "history";
+        (_a = transformControlsRef.current) === null || _a === void 0 ? void 0 : _a.detach();
         prefabStore.getState().replacePrefab(history[index]);
         historyIndexRef.current = index;
         setHistoryIndex(index);
@@ -274,7 +295,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
     const handleTransformChange = () => {
         if (!selectedId)
             return;
-        const object = getObject(selectedId);
+        const object = selectedHasPhysics ? transformProxyRef.current : getObject(selectedId);
         if (!object)
             return;
         const parentWorld = computeParentWorldMatrix(prefabStore.getState(), selectedId);
@@ -341,7 +362,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
         addModel,
         addTexture
     }), [addModel, addNode, addTexture, clearSelection, getObject, getPrefab, getRigidBody, getRootObject, handleExportGLB, handleExportGLBData, handleScreenshot, loadPrefab, prefabStore]);
-    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, onObjectRefChange: handleObjectRefChange, basePath: basePath }), children] }));
+    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] }));
     const handleCanvasCreated = useCallback((state) => {
         var _a;
         canvasRef.current = state.gl.domElement;
@@ -370,7 +391,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, mode
                             }
                             (_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, { colliders: false, debug: isEditMode, paused: isEditMode, children: content })) : content, isEditMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, enableDamping: false, makeDefault: true }), transformObject && (_jsx(TransformControls, { 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: [physics ? (_jsx(Physics, { colliders: false, debug: isEditMode, paused: isEditMode, children: content })) : content, _jsx("group", { ref: transformProxyRef, visible: false }), 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

@@ -18,7 +18,6 @@ export interface PrefabRootProps {
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
     onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
-    onObjectRefChange?: (id: string, object: Object3D | null) => void;
     basePath?: string;
 }
 export declare const PrefabRoot: import("react").ForwardRefExoticComponent<PrefabRootProps & import("react").RefAttributes<PrefabRootRef>>;

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -10,9 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useHelper } from "@react-three/drei";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { BoxHelper, Euler, Matrix4, } from "three";
+import { Euler, Matrix4, } from "three";
 import { useStore } from "zustand";
 import { useClickValid } from "./useClickValid";
 import { findComponent, getNodeUserData } from "./types";
@@ -69,7 +68,7 @@ function getNodeMetadataProps(node) {
         userData: Object.assign(Object.assign({ prefabNodeId: node.id }, (nodeName ? { prefabNodeName: nodeName } : {})), getNodeUserData(node)),
     };
 }
-export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSelect, onClick, onObjectRefChange, basePath = "" }, ref) => {
+export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSelect, onClick, basePath = "" }, ref) => {
     var _a;
     const [models, setModels] = useState({});
     const [textures, setTextures] = useState({});
@@ -120,8 +119,7 @@ export const PrefabRoot = forwardRef(({ editMode, data, store, selectedId, onSel
     }), [getObject]);
     const registerRef = useCallback((id, obj) => {
         objectRefs.current[id] = obj;
-        onObjectRefChange === null || onObjectRefChange === void 0 ? void 0 : onObjectRefChange(id, obj);
-    }, [onObjectRefChange]);
+    }, []);
     const registerRigidBodyRef = useCallback((id, rb) => {
         rigidBodyRefs.current.set(id, rb);
     }, []);
@@ -293,18 +291,10 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, load
     const clickEventName = getNodeClickEventName(gameObject);
     const metadataProps = getNodeMetadataProps(gameObject);
     const groupRef = useRef(null);
-    const helperRef = useRef(null);
     const handleGroupRef = useCallback((object) => {
         groupRef.current = object;
         registerRef(nodeId, object);
     }, [nodeId, registerRef]);
-    const handleHelperRef = useCallback((object) => {
-        helperRef.current = object;
-    }, []);
-    const handleEditGroupRef = useCallback((object) => {
-        handleGroupRef(object);
-        handleHelperRef(object);
-    }, [handleGroupRef, handleHelperRef]);
     const editClickHandlers = useClickValid(!!editMode && !isLocked, (event) => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(nodeId);
         onClick === null || onClick === void 0 ? void 0 : onClick(event, gameObject);
@@ -318,7 +308,6 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, load
             },
         }
         : undefined;
-    useHelper(editMode && isSelected ? helperRef : null, BoxHelper, "cyan");
     const world = parentMatrix.clone().multiply(compose(gameObject));
     const physics = findComponent(gameObject, "Physics");
     const ready = isNodeReady(gameObject, loadedModels);
@@ -337,8 +326,8 @@ function StandardNode({ nodeId, selectedId, onSelect, onClick, registerRef, load
     const childNodes = _jsx(ChildNodes, { childIds: childIds, parentMatrix: world, selectedId: selectedId, onSelect: onSelect, onClick: onClick, registerRef: registerRef, loadedModels: loadedModels, editMode: editMode });
     const inner = renderCompositionNode(gameObject, renderCtx, primaryClickHandlers, childNodes);
     const editAnchor = editMode ? (_jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) })) : null;
-    const standardNode = (_jsxs("group", Object.assign({ ref: editMode ? handleEditGroupRef : handleGroupRef }, groupProps, (editMode ? editClickHandlers : undefined), { children: [editAnchor, inner] })));
-    const physicsNode = hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, Object.assign({ properties: physics.properties }, transformProps, { children: _jsxs("group", Object.assign({ ref: editMode ? handleEditGroupRef : handleGroupRef }, metadataProps, (editMode ? editClickHandlers : undefined), { children: [editAnchor, inner] })) }), physicsKey)) : null;
+    const standardNode = (_jsxs("group", Object.assign({ ref: handleGroupRef }, groupProps, (editMode ? editClickHandlers : undefined), { children: [editAnchor, inner] })));
+    const physicsNode = hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, Object.assign({ properties: physics.properties }, transformProps, { children: _jsxs("group", Object.assign({ ref: handleGroupRef }, metadataProps, (editMode ? editClickHandlers : undefined), { children: [editAnchor, inner] })) }), physicsKey)) : null;
     return (_jsx(EntityRuntimeScope, { nodeId: nodeId, editMode: editMode, isSelected: isSelected, children: physicsNode !== null && physicsNode !== void 0 ? physicsNode : standardNode }));
 }
 function isRendererHandledComponent(componentType) {

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

@@ -43,7 +43,7 @@ const frustumInputStyle = {
 const centerLockButtonStyle = {
     width: 34,
     height: 34,
-    borderRadius: 999,
+    borderRadius: 0,
     border: `1px solid ${colors.border}`,
     background: colors.bgInput,
     color: colors.textMuted,

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

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { BallCollider, CapsuleCollider, CuboidCollider, RigidBody, useRapier } from "@react-three/rapier";
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useAssetRuntime, useEntityRuntime } from "../assetRuntime";
 import { gameEvents, getEntityIdFromRigidBody } from "../GameEvents";
 import { usePrefabNode, usePrefabStore } from "../prefabStore";
@@ -27,6 +27,7 @@ const colliderSizeFallback = [1, 1, 1];
 const colliderRadiusFallback = 0.5;
 const capsuleRadiusFallback = 0.35;
 const capsuleHalfHeightFallback = 0.45;
+const EDIT_MODE_DEBUG_REFRESH_THROTTLE_MS = 120;
 function isManualColliderShape(value) {
     return value === 'cuboid' || value === 'ball' || value === 'capsule';
 }
@@ -146,11 +147,12 @@ function PhysicsComponentView({ properties, children, position, rotation, scale
         ? 'capsule'
         : resolvedManualColliderShape;
     const rigidBodyRef = useRef(null);
+    const [editRefreshVersion, setEditRefreshVersion] = useState(0);
+    const lastEditRefreshAtRef = useRef(0);
     const linearVelocityKey = linearVelocity.join(',');
     const angularVelocityKey = angularVelocity.join(',');
-    const rbKey = editMode
-        ? `${type || 'dynamic'}_${colliderType}_${resolvedManualColliderShape}_${colliderSize.join(',')}_${colliderRadius}_${capsuleRadius}_${capsuleHalfHeight}_${position === null || position === void 0 ? void 0 : position.join(',')}_${rotation === null || rotation === void 0 ? void 0 : rotation.join(',')}`
-        : `${type || 'dynamic'}_${colliderType}_${resolvedManualColliderShape}_${colliderSize.join(',')}_${colliderRadius}_${capsuleRadius}_${capsuleHalfHeight}`;
+    const transformSignature = `${position === null || position === void 0 ? void 0 : position.join(',')}_${rotation === null || rotation === void 0 ? void 0 : rotation.join(',')}_${scale === null || scale === void 0 ? void 0 : scale.join(',')}`;
+    const rbKey = `${type || 'dynamic'}_${colliderType}_${resolvedManualColliderShape}_${colliderSize.join(',')}_${colliderRadius}_${capsuleRadius}_${capsuleHalfHeight}_${editMode ? editRefreshVersion : 0}`;
     const handleRigidBodyRef = useCallback((rigidBody) => {
         rigidBodyRef.current = rigidBody;
         if (!nodeId)
@@ -179,6 +181,23 @@ function PhysicsComponentView({ properties, children, position, rotation, scale
             }
         }
     }, [activeCollisionTypes, rapier, type, colliders]);
+    useEffect(() => {
+        if (!editMode) {
+            return;
+        }
+        const now = Date.now();
+        const delay = Math.max(0, EDIT_MODE_DEBUG_REFRESH_THROTTLE_MS - (now - lastEditRefreshAtRef.current));
+        if (delay === 0) {
+            lastEditRefreshAtRef.current = now;
+            setEditRefreshVersion(version => version + 1);
+            return;
+        }
+        const timeoutId = setTimeout(() => {
+            lastEditRefreshAtRef.current = Date.now();
+            setEditRefreshVersion(version => version + 1);
+        }, delay);
+        return () => clearTimeout(timeoutId);
+    }, [editMode, transformSignature]);
     // Seed authored velocities when the body instance changes or the authored values change.
     useEffect(() => {
         if (!rigidBodyRef.current)
@@ -238,14 +257,10 @@ function PhysicsComponentView({ properties, children, position, rotation, scale
             return;
         dispatchPhysicsEvent(collisionExitEventName, payload);
     }, [collisionExitEventName, dispatchPhysicsEvent, emitCollisionExitEvent]);
-    const editModeTransformProps = editMode
-        ? {
-            position,
-            rotation,
-            scale,
-        }
-        : undefined;
-    const rigidBodyProps = Object.assign({ ref: handleRigidBodyRef, type, colliders: usesAutomaticColliderSource ? colliderType : false, position: editMode ? undefined : position, rotation: editMode ? undefined : rotation, scale: editMode ? undefined : scale, sensor,
+    const rigidBodyProps = Object.assign({ ref: handleRigidBodyRef, type, colliders: usesAutomaticColliderSource ? colliderType : false, position,
+        rotation,
+        scale,
+        sensor,
         enabledTranslations,
         enabledRotations, name: nodeName, userData: Object.assign({ entityId: nodeId }, userData), onIntersectionEnter: emitSensorEnterEvent ? handleIntersectionEnter : undefined, onIntersectionExit: emitSensorExitEvent ? handleIntersectionExit : undefined, onCollisionEnter: emitCollisionEnterEvent ? handleCollisionEnter : undefined, onCollisionExit: emitCollisionExitEvent ? handleCollisionExit : undefined }, otherProps);
     const rigidBodyContent = (_jsxs(_Fragment, { children: [!usesAutomaticColliderSource ? renderManualCollider({
@@ -256,7 +271,7 @@ function PhysicsComponentView({ properties, children, position, rotation, scale
                 capsuleRadius,
                 capsuleHalfHeight,
             }) : null, children] }));
-    return (_jsx(RigidBody, Object.assign({}, rigidBodyProps, { children: editMode ? (_jsx("group", Object.assign({}, editModeTransformProps, { children: rigidBodyContent }))) : rigidBodyContent }), rbKey));
+    return (_jsx(RigidBody, Object.assign({}, rigidBodyProps, { children: rigidBodyContent }), rbKey));
 }
 const PhysicsComponent = {
     name: 'Physics',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.91",
+  "version": "0.0.92",
   "description": "high performance 3D game engine built in React",
   "main": "dist/index.js",
   "module": "dist/index.js",