react-three-game 0.0.64 → 0.0.66

package/dist/tools/prefabeditor/InstanceProvider.js

@@ -1,8 +1,73 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { createContext, useContext, useMemo, useRef, useState, useEffect, useCallback } from "react";
 import { Merged, useHelper } from '@react-three/drei';
 import { InstancedRigidBodies } from "@react-three/rapier";
+import { ActiveCollisionTypes } from "@dimforge/rapier3d-compat";
 import { Mesh, Matrix4, Vector3, Quaternion, Euler, BoxHelper } from "three";
+import { gameEvents, getEntityIdFromRigidBody } from "./GameEvents";
+export const DEFAULT_REPEAT_AXES = [{ axis: 'x', count: 1, offset: 1 }];
+export function normalizeRepeatAxes(value) {
+    if (!Array.isArray(value)) {
+        return DEFAULT_REPEAT_AXES;
+    }
+    const seen = new Set();
+    const normalized = value.flatMap((entry) => {
+        if (!entry || typeof entry !== 'object')
+            return [];
+        const axisValue = entry.axis;
+        if (axisValue !== 'x' && axisValue !== 'y' && axisValue !== 'z')
+            return [];
+        if (seen.has(axisValue))
+            return [];
+        seen.add(axisValue);
+        const countValue = Number(entry.count);
+        const offsetValue = Number(entry.offset);
+        return [{
+                axis: axisValue,
+                count: Number.isFinite(countValue) ? Math.max(1, Math.floor(countValue)) : 1,
+                offset: Number.isFinite(offsetValue) ? offsetValue : 1,
+            }];
+    });
+    return normalized.length > 0 ? normalized : DEFAULT_REPEAT_AXES;
+}
+function toVector3Tuple(value, fallback) {
+    if (!Array.isArray(value) || value.length !== 3)
+        return fallback;
+    return value.map((entry, index) => {
+        const next = typeof entry === 'number' ? entry : Number(entry);
+        return Number.isFinite(next) ? next : fallback[index];
+    });
+}
+export function getRepeatAxesFromModelProperties(properties) {
+    var _a;
+    if (Array.isArray(properties.repeatAxes)) {
+        return normalizeRepeatAxes(properties.repeatAxes);
+    }
+    const repeatCount = toVector3Tuple(properties.repeatCount, [1, 1, 1]).map(value => Math.max(1, Math.floor(value)));
+    const repeatOffset = toVector3Tuple(properties.repeatOffset, [1, 1, 1]);
+    const legacyAxes = [];
+    if ((_a = properties.repeatX) !== null && _a !== void 0 ? _a : true) {
+        legacyAxes.push({ axis: 'x', count: repeatCount[0], offset: repeatOffset[0] });
+    }
+    if (properties.repeatY) {
+        legacyAxes.push({ axis: 'y', count: repeatCount[1], offset: repeatOffset[1] });
+    }
+    if (properties.repeatZ) {
+        legacyAxes.push({ axis: 'z', count: repeatCount[2], offset: repeatOffset[2] });
+    }
+    return legacyAxes.length > 0 ? legacyAxes : DEFAULT_REPEAT_AXES;
+}
 // Helper functions for comparison
 function arrayEquals(a, b) {
     if (a === b)
@@ -15,14 +80,77 @@ function arrayEquals(a, b) {
     }
     return true;
 }
+function stableSerialize(value) {
+    if (Array.isArray(value)) {
+        return `[${value.map(stableSerialize).join(',')}]`;
+    }
+    if (value && typeof value === 'object') {
+        const entries = Object.entries(value)
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([key, entry]) => `${key}:${stableSerialize(entry)}`);
+        return `{${entries.join(',')}}`;
+    }
+    return JSON.stringify(value);
+}
+function getPhysicsSignature(physics) {
+    return physics ? stableSerialize(physics) : 'none';
+}
+function hasPhysics(instance) {
+    return Boolean(instance.physics);
+}
+function getColliderType(physics) {
+    return physics.colliders || (physics.type === 'fixed' ? 'trimesh' : 'hull');
+}
+function emitSensorEnter(sourceId, payload) {
+    gameEvents.emit('sensor:enter', {
+        sourceEntityId: sourceId,
+        targetEntityId: getEntityIdFromRigidBody(payload.other.rigidBody),
+        targetRigidBody: payload.other.rigidBody,
+    });
+}
+function emitSensorExit(sourceId, payload) {
+    gameEvents.emit('sensor:exit', {
+        sourceEntityId: sourceId,
+        targetEntityId: getEntityIdFromRigidBody(payload.other.rigidBody),
+        targetRigidBody: payload.other.rigidBody,
+    });
+}
+function emitCollisionEnter(sourceId, payload) {
+    gameEvents.emit('collision:enter', {
+        sourceEntityId: sourceId,
+        targetEntityId: getEntityIdFromRigidBody(payload.other.rigidBody),
+        targetRigidBody: payload.other.rigidBody,
+    });
+}
+function emitCollisionExit(sourceId, payload) {
+    gameEvents.emit('collision:exit', {
+        sourceEntityId: sourceId,
+        targetEntityId: getEntityIdFromRigidBody(payload.other.rigidBody),
+        targetRigidBody: payload.other.rigidBody,
+    });
+}
+function emitClick(sourceId, instanceId, event) {
+    gameEvents.emit('click', {
+        sourceEntityId: sourceId,
+        instanceEntityId: instanceId && instanceId !== sourceId ? instanceId : undefined,
+        point: [event.point.x, event.point.y, event.point.z],
+        button: event.button,
+        altKey: event.nativeEvent.altKey,
+        ctrlKey: event.nativeEvent.ctrlKey,
+        metaKey: event.nativeEvent.metaKey,
+        shiftKey: event.nativeEvent.shiftKey,
+    });
+}
 function instanceEquals(a, b) {
-    var _a, _b;
     return a.id === b.id &&
+        a.sourceId === b.sourceId &&
+        a.clickable === b.clickable &&
+        a.locked === b.locked &&
         a.meshPath === b.meshPath &&
         arrayEquals(a.position, b.position) &&
         arrayEquals(a.rotation, b.rotation) &&
         arrayEquals(a.scale, b.scale) &&
-        ((_a = a.physics) === null || _a === void 0 ? void 0 : _a.type) === ((_b = b.physics) === null || _b === void 0 ? void 0 : _b.type);
+        getPhysicsSignature(a.physics) === getPhysicsSignature(b.physics);
 }
 const GameInstanceContext = createContext(null);
 export function GameInstanceProvider({ children, models, onSelect, registerRef, selectedId, editMode }) {
@@ -51,7 +179,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
         });
     }, []);
     const hasInstance = useCallback((id) => {
-        return instances.some(i => i.id === id);
+        return instances.some(i => i.id === id || i.sourceId === id);
     }, [instances]);
     // Flatten all model meshes once (models → flat mesh parts)
     // Note: Geometry is cloned with baked transforms for instancing
@@ -82,17 +210,18 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
             Object.values(flatMeshes).forEach(mesh => mesh.geometry.dispose());
         };
     }, [flatMeshes]);
-    // Group instances by meshPath + physics type for batch rendering
+    // Group instances by meshPath and physics presence for batch rendering.
     const grouped = useMemo(() => {
-        var _a;
         const groups = {};
         for (const inst of instances) {
-            const type = ((_a = inst.physics) === null || _a === void 0 ? void 0 : _a.type) || 'none';
-            const key = `${inst.meshPath}__${type}`;
+            const key = `${inst.meshPath}__${inst.physics ? 'physics' : 'visual'}`;
             if (!groups[key])
-                groups[key] = { physicsType: type, instances: [] };
+                groups[key] = { hasPhysics: Boolean(inst.physics), instances: [] };
             groups[key].instances.push(inst);
         }
+        Object.values(groups).forEach(group => {
+            group.instances.sort((a, b) => a.id.localeCompare(b.id));
+        });
         return groups;
     }, [instances]);
     return (_jsxs(GameInstanceContext.Provider, { value: {
@@ -103,7 +232,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
             modelParts,
             hasInstance
         }, children: [children, Object.entries(grouped).map(([key, group]) => {
-                if (group.physicsType === 'none')
+                if (!group.hasPhysics)
                     return null;
                 const modelKey = group.instances[0].meshPath;
                 const partCount = modelParts[modelKey] || 0;
@@ -111,7 +240,7 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
                     return null;
                 return (_jsx(InstancedRigidGroup, { group: group, modelKey: modelKey, partCount: partCount, flatMeshes: flatMeshes, onSelect: onSelect, editMode: editMode }, key));
             }), Object.entries(grouped).map(([key, group]) => {
-                if (group.physicsType !== 'none')
+                if (group.hasPhysics)
                     return null;
                 const modelKey = group.instances[0].meshPath;
                 const partCount = modelParts[modelKey] || 0;
@@ -130,12 +259,10 @@ export function GameInstanceProvider({ children, models, onSelect, registerRef,
 function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes, onSelect, editMode }) {
     const meshRefs = useRef([]);
     const rigidBodiesRef = useRef(null);
-    const instances = useMemo(() => group.instances.map(inst => ({
-        key: inst.id,
-        position: inst.position,
-        rotation: inst.rotation,
-        scale: inst.scale,
-    })), [group.instances]);
+    const instances = useMemo(() => group.instances.filter(hasPhysics).map(inst => {
+        const _a = inst.physics, { activeCollisionTypes: _activeCollisionTypes, colliders: _colliders, userData } = _a, rigidBodyProps = __rest(_a, ["activeCollisionTypes", "colliders", "userData"]);
+        return Object.assign(Object.assign({ key: inst.id, position: inst.position, rotation: inst.rotation, scale: inst.scale }, rigidBodyProps), { colliders: getColliderType(inst.physics), userData: Object.assign(Object.assign({}, userData), { entityId: inst.sourceId }), onIntersectionEnter: (payload) => emitSensorEnter(inst.sourceId, payload), onIntersectionExit: (payload) => emitSensorExit(inst.sourceId, payload), onCollisionEnter: (payload) => emitCollisionEnter(inst.sourceId, payload), onCollisionExit: (payload) => emitCollisionExit(inst.sourceId, payload) });
+    }), [group.instances]);
     // Apply scale to visual meshes (InstancedRigidBodies only scales colliders, not visuals)
     useEffect(() => {
         const matrix = new Matrix4();
@@ -161,7 +288,7 @@ function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes, onSelect,
             try {
                 group.instances.forEach((inst, i) => {
                     var _a;
-                    const body = (_a = rigidBodiesRef.current) === null || _a === void 0 ? void 0 : _a.at(i);
+                    const body = (_a = rigidBodiesRef.current) === null || _a === void 0 ? void 0 : _a[i];
                     if (body && body.setTranslation && body.setRotation) {
                         pos.set(...inst.position);
                         euler.set(...inst.rotation);
@@ -177,25 +304,48 @@ function InstancedRigidGroup({ group, modelKey, partCount, flatMeshes, onSelect,
             }
         }
     }, [group.instances]);
-    const colliders = group.physicsType === 'fixed' ? 'trimesh' : 'hull';
+    useEffect(() => {
+        group.instances.forEach((inst, i) => {
+            var _a, _b;
+            if (!inst.physics || inst.physics.activeCollisionTypes !== 'all')
+                return;
+            const body = (_a = rigidBodiesRef.current) === null || _a === void 0 ? void 0 : _a[i];
+            if (!body || !body.numColliders || !body.collider)
+                return;
+            for (let colliderIndex = 0; colliderIndex < body.numColliders(); colliderIndex++) {
+                const collider = body.collider(colliderIndex);
+                (_b = collider.setActiveCollisionTypes) === null || _b === void 0 ? void 0 : _b.call(collider, ActiveCollisionTypes.DEFAULT |
+                    ActiveCollisionTypes.KINEMATIC_FIXED |
+                    ActiveCollisionTypes.KINEMATIC_KINEMATIC);
+            }
+        });
+    }, [group.instances]);
     // Handle click on instanced mesh in edit mode
     const handleClick = (e) => {
-        if (!editMode || !onSelect)
-            return;
-        e.stopPropagation();
-        // Get the instance index from the intersection
         const instanceId = e.instanceId;
-        if (instanceId !== undefined && group.instances[instanceId]) {
-            onSelect(group.instances[instanceId].id);
+        const instance = instanceId !== undefined ? group.instances[instanceId] : undefined;
+        if (!instance)
+            return;
+        if (editMode) {
+            if (!onSelect || instance.locked)
+                return;
+            e.stopPropagation();
+            onSelect(instance.sourceId);
+            return;
         }
+        if (!instance.clickable)
+            return;
+        e.stopPropagation();
+        emitClick(instance.sourceId, instance.id, e);
     };
+    const shouldHandleClick = editMode || group.instances.some(inst => inst.clickable);
     // Add key to force remount when instance count changes significantly (helps with cleanup)
-    const rigidBodyKey = `rb_${modelKey}_${group.physicsType}_${group.instances.length}`;
-    return (_jsx(InstancedRigidBodies, { ref: rigidBodiesRef, instances: instances, colliders: colliders, type: group.physicsType, children: Array.from({ length: partCount }).map((_, i) => {
+    const rigidBodyKey = `rb_${modelKey}_${group.instances.map(inst => `${inst.id}:${getPhysicsSignature(inst.physics)}`).join('|')}`;
+    return (_jsx(InstancedRigidBodies, { ref: rigidBodiesRef, instances: instances, children: Array.from({ length: partCount }).map((_, i) => {
             const mesh = flatMeshes[`${modelKey}__${i}`];
             if (!mesh)
                 return null;
-            return (_jsx("instancedMesh", { ref: el => { meshRefs.current[i] = el; }, args: [mesh.geometry, mesh.material, group.instances.length], castShadow: true, receiveShadow: true, frustumCulled: false, onClick: editMode ? handleClick : undefined }, i));
+            return (_jsx("instancedMesh", { ref: el => { meshRefs.current[i] = el; }, args: [mesh.geometry, mesh.material, group.instances.length], castShadow: true, receiveShadow: true, frustumCulled: false, onClick: shouldHandleClick ? handleClick : undefined }, i));
         }) }, rigidBodyKey));
 }
 // Render non-physics instances using Merged (instancing without rigid bodies)
@@ -208,19 +358,30 @@ function NonPhysicsInstancedGroup({ modelKey, group, partCount, instancesMap, on
 function InstanceGroupItem({ instance, InstanceComponents, onSelect, registerRef, selectedId, editMode }) {
     const clickValid = useRef(false);
     const groupRef = useRef(null);
-    const isSelected = selectedId === instance.id;
+    const isLocked = Boolean(instance.locked);
+    const isSelected = selectedId === instance.id || selectedId === instance.sourceId;
+    const canSelect = editMode && !isLocked;
+    const canClick = !editMode && Boolean(instance.clickable);
     // Use BoxHelper when object is selected in edit mode
     useHelper(editMode && isSelected ? groupRef : null, BoxHelper, 'cyan');
     useEffect(() => {
+        if (editMode)
+            return;
         registerRef === null || registerRef === void 0 ? void 0 : registerRef(instance.id, groupRef.current);
-    }, [instance.id, registerRef]);
-    return (_jsx("group", { ref: groupRef, position: instance.position, rotation: instance.rotation, scale: instance.scale, onPointerDown: (e) => { e.stopPropagation(); clickValid.current = true; }, onPointerMove: () => { clickValid.current = false; }, onPointerUp: (e) => {
+        return () => registerRef === null || registerRef === void 0 ? void 0 : registerRef(instance.id, null);
+    }, [editMode, instance.id, registerRef]);
+    return (_jsx("group", { ref: groupRef, position: instance.position, rotation: instance.rotation, scale: instance.scale, onPointerDown: canSelect || canClick ? (e) => { e.stopPropagation(); clickValid.current = true; } : undefined, onPointerMove: canSelect || canClick ? () => { clickValid.current = false; } : undefined, onPointerUp: canSelect || canClick ? (e) => {
             if (clickValid.current) {
                 e.stopPropagation();
-                onSelect === null || onSelect === void 0 ? void 0 : onSelect(instance.id);
+                if (editMode) {
+                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(instance.sourceId);
+                }
+                else if (instance.clickable) {
+                    emitClick(instance.sourceId, instance.id, e);
+                }
             }
             clickValid.current = false;
-        }, children: InstanceComponents.map((Instance, i) => _jsx(Instance, {}, i)) }));
+        } : undefined, children: InstanceComponents.map((Instance, i) => _jsx(Instance, {}, i)) }));
 }
 // Hook to check if an instance exists
 export function useInstanceCheck(id) {
@@ -229,18 +390,21 @@ export function useInstanceCheck(id) {
     return (_a = ctx === null || ctx === void 0 ? void 0 : ctx.hasInstance(id)) !== null && _a !== void 0 ? _a : false;
 }
 // GameInstance component: registers an instance for batch rendering (renders nothing itself)
-export const GameInstance = React.forwardRef(({ id, modelUrl, position, rotation, scale, physics = undefined, }, ref) => {
+export const GameInstance = React.forwardRef(({ id, sourceId, clickable = false, modelUrl, locked = false, position, rotation, scale, physics = undefined, }, ref) => {
     const ctx = useContext(GameInstanceContext);
     const addInstance = ctx === null || ctx === void 0 ? void 0 : ctx.addInstance;
     const removeInstance = ctx === null || ctx === void 0 ? void 0 : ctx.removeInstance;
     const instance = useMemo(() => ({
         id,
+        sourceId: sourceId !== null && sourceId !== void 0 ? sourceId : id,
+        clickable,
+        locked,
         meshPath: modelUrl,
         position,
         rotation,
         scale,
         physics,
-    }), [id, modelUrl, JSON.stringify(position), JSON.stringify(rotation), JSON.stringify(scale), JSON.stringify(physics)]);
+    }), [id, sourceId, clickable, locked, modelUrl, JSON.stringify(position), JSON.stringify(rotation), JSON.stringify(scale), getPhysicsSignature(physics)]);
     useEffect(() => {
         if (!addInstance || !removeInstance)
             return;

package/dist/tools/prefabeditor/PrefabEditor.js

@@ -8,6 +8,7 @@ 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 PrefabRoot from "./PrefabRoot";
@@ -15,7 +16,7 @@ import { Physics } from "@react-three/rapier";
 import EditorUI from "./EditorUI";
 import { base, toolbar } from "./styles";
 import { EditorContext } from "./EditorContext";
-import { createImageNode, createModelNode, exportGLB as exportSceneGLB, exportGLBData, insertNode } from "./utils";
+import { computeParentWorldMatrix, createImageNode, createModelNode, decompose, exportGLB as exportSceneGLB, exportGLBData, findNode, focusCameraOnObject, insertNode, updateNode } from "./utils";
 import { loadFiles } from "../dragdrop";
 const DEFAULT_PREFAB = {
     id: "prefab-default",
@@ -40,29 +41,57 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
     const [rotationSnap, setRotationSnap] = useState(Math.PI / 4);
     const [history, setHistory] = useState([loadedPrefab]);
     const [historyIndex, setHistoryIndex] = useState(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 [injectedModels, setInjectedModels] = useState({});
     const [injectedTextures, setInjectedTextures] = useState({});
-    useEffect(() => {
-        onPrefabChangeRef.current = onPrefabChange;
-    }, [onPrefabChange]);
+    onPrefabChangeRef.current = onPrefabChange;
+    const setSelection = (nodeId) => {
+        var _a, _b;
+        const nextNode = nodeId ? findNode(loadedPrefab.root, 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);
+    };
+    const toggleEditMode = () => {
+        setEditMode(prev => {
+            const next = !prev;
+            if (!next) {
+                setSelectedId(null);
+                setSelectedObject(null);
+            }
+            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;
-        setSelectedId(null);
+        setSelection(null);
         setInjectedModels({});
         setInjectedTextures({});
         setHistory([prefab]);
         setHistoryIndex(0);
         setLoadedPrefab(prefab);
     };
+    const setPrefab = (prefab) => {
+        if (selectedId && !findNode(prefab.root, selectedId)) {
+            setSelection(null);
+        }
+        updatePrefab(prefab);
+    };
     useEffect(() => {
         if (initialPrefab)
             replacePrefab(initialPrefab, { notifyChange: false });
@@ -90,7 +119,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             return Object.assign(Object.assign({}, prev), { root: insertNode(prev.root, node, options === null || options === void 0 ? void 0 : options.parentId) });
         });
         if ((options === null || options === void 0 ? void 0 : options.select) !== false) {
-            setSelectedId(node.id);
+            setSelection(node.id);
         }
         return node;
     };
@@ -115,6 +144,8 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
     const undo = () => historyIndex > 0 && applyHistory(historyIndex - 1);
     const redo = () => historyIndex < history.length - 1 && applyHistory(historyIndex + 1);
     useEffect(() => {
+        if (!editMode)
+            return;
         const handleKeyDown = (e) => {
             if (!(e.ctrlKey || e.metaKey))
                 return;
@@ -129,7 +160,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [historyIndex, history]);
+    }, [editMode, historyIndex, history]);
     useEffect(() => {
         const currentStr = JSON.stringify(loadedPrefab);
         if (currentStr === lastDataRef.current)
@@ -165,7 +196,7 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
     const clearSelection = () => __awaiter(void 0, void 0, void 0, function* () {
         if (!selectedId)
             return;
-        setSelectedId(null);
+        setSelection(null);
         yield new Promise(resolve => {
             requestAnimationFrame(() => {
                 requestAnimationFrame(() => resolve());
@@ -190,11 +221,31 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
     });
     const handleFocusNode = (nodeId) => {
         var _a;
-        (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.focusNode(nodeId);
+        const object = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.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); });
+    };
+    const handleTransformChange = () => {
+        var _a;
+        if (!selectedId)
+            return;
+        const object = (_a = prefabRootRef.current) === null || _a === void 0 ? void 0 : _a.getObject(selectedId);
+        if (!object)
+            return;
+        const parentWorld = computeParentWorldMatrix(loadedPrefab.root, 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 },
+                    } }) }))) })));
     };
     // --- Drag & drop files to add nodes ---
     useEffect(() => {
-        if (!enableWindowDrop)
+        if (!enableWindowDrop || !editMode)
             return;
         function handleDragOver(e) {
             e.preventDefault();
@@ -227,21 +278,22 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             window.removeEventListener('dragover', handleDragOver);
             window.removeEventListener('drop', handleDrop);
         };
-    }, [enableWindowDrop]);
+    }, [editMode, enableWindowDrop]);
     useImperativeHandle(ref, () => ({
         screenshot: handleScreenshot,
         exportGLB: handleExportGLB,
         exportGLBData: handleExportGLBData,
         clearSelection,
         prefab: loadedPrefab,
-        setPrefab: replacePrefab,
+        setPrefab,
         replacePrefab,
         addModel,
         addTexture,
         rootRef: prefabRootRef
-    }), [loadedPrefab]);
-    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, onPrefabChange: updatePrefab, selectedId: selectedId, onSelect: setSelectedId, basePath: basePath, injectedModels: injectedModels, injectedTextures: injectedTextures }), children] }));
+    }));
+    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,
@@ -250,10 +302,19 @@ const PrefabEditor = forwardRef(({ basePath, initialPrefab, physics = true, onPr
             setPositionSnap,
             rotationSnap,
             setRotationSnap,
-            onFocusNode: handleFocusNode,
+            onFocusNode: editMode ? handleFocusNode : undefined,
             onScreenshot: handleScreenshot,
             onExportGLB: handleExportGLB
-        }, children: [_jsx(GameCanvas, Object.assign({ camera: { position: [0, 5, 15] }, canvasRef: canvasRef }, canvasProps, { children: physics ? (_jsx(Physics, { debug: editMode, paused: editMode, children: content })) : content })), showUI && (_jsxs(_Fragment, { children: [_jsxs("div", { style: toolbar.panel, children: [_jsx("button", { style: base.btn, onClick: () => setEditMode(!editMode), children: editMode ? "▶" : "⏸" }), uiPlugins] }), _jsx(EditorUI, { prefabData: loadedPrefab, setPrefabData: updatePrefab, selectedId: selectedId, setSelectedId: setSelectedId, basePath: basePath, onUndo: undo, onRedo: redo, canUndo: historyIndex > 0, canRedo: historyIndex < history.length - 1 })] }))] });
+        }, 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);
+                    }
+                    : 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 }))] }))] });
 });
 PrefabEditor.displayName = "PrefabEditor";
 export default PrefabEditor;

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

@@ -4,15 +4,17 @@ import { Prefab, GameObject as GameObjectType } from "./types";
 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<{
     editMode?: boolean;
     data: Prefab;
-    onPrefabChange?: (data: Prefab) => void;
     selectedId?: string | null;
     onSelect?: (id: string | null) => void;
     onClick?: (event: ThreeEvent<PointerEvent>, entity: GameObjectType) => void;
+    onSelectedObjectChange?: (object: Object3D | null) => void;
+    onFocusNode?: (nodeId: string) => void;
     basePath?: string;
     injectedModels?: Record<string, Object3D>;
     injectedTextures?: Record<string, Texture>;