react-three-game 0.0.65 → 0.0.67

package/dist/tools/prefabeditor/PrefabRoot.js

@@ -8,25 +8,17 @@ 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 { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { BoxHelper, Euler, Matrix4, Quaternion, SRGBColorSpace, TextureLoader, Vector3, } from "three";
-import { getComponent, registerComponent, getNonComposableKeys } from "./components/ComponentRegistry";
+import { useHelper } from "@react-three/drei";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { BoxHelper, Euler, Matrix4, Quaternion, Vector3, } from "three";
+import { getComponent, registerComponent } from "./components/ComponentRegistry";
 import components from "./components";
-import { loadModel } from "../dragdrop";
+import { loadModel, loadTexture } from "../dragdrop";
 import { GameInstance, GameInstanceProvider, getRepeatAxesFromModelProperties, useInstanceCheck } from "./InstanceProvider";
-import { focusCameraOnObject, updateNode } from "./utils";
-import { EditorContext } from "./EditorContext";
+import { decompose } from "./utils";
 components.forEach(registerComponent);
 const IDENTITY = new Matrix4();
-export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selectedId, onSelect, onClick, basePath = "", injectedModels = {}, injectedTextures = {} }, ref) => {
-    var _a, _b, _c, _d;
-    // optional editor context
-    const editorContext = useContext(EditorContext);
-    const transformMode = (_a = editorContext === null || editorContext === void 0 ? void 0 : editorContext.transformMode) !== null && _a !== void 0 ? _a : "translate";
-    const snapResolution = (_b = editorContext === null || editorContext === void 0 ? void 0 : editorContext.snapResolution) !== null && _b !== void 0 ? _b : 0;
-    const positionSnap = (_c = editorContext === null || editorContext === void 0 ? void 0 : editorContext.positionSnap) !== null && _c !== void 0 ? _c : 0.5;
-    const rotationSnap = (_d = editorContext === null || editorContext === void 0 ? void 0 : editorContext.rotationSnap) !== null && _d !== void 0 ? _d : Math.PI / 4;
+export const PrefabRoot = forwardRef(({ editMode, data, selectedId, onSelect, onClick, onSelectedObjectChange, onFocusNode, basePath = "", injectedModels = {}, injectedTextures = {} }, ref) => {
     // prefab root state
     const [models, setModels] = useState({});
     const [textures, setTextures] = useState({});
@@ -34,28 +26,21 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
     const failedTextures = useRef(new Set());
     const objectRefs = useRef({});
     const rigidBodyRefs = useRef(new Map());
-    const [selectedObject, setSelectedObject] = useState(null);
     const rootRef = useRef(null);
-    const controlsRef = useRef(null);
     const availableModels = useMemo(() => (Object.assign(Object.assign({}, models), injectedModels)), [models, injectedModels]);
     const availableTextures = useMemo(() => (Object.assign(Object.assign({}, textures), injectedTextures)), [textures, injectedTextures]);
     useImperativeHandle(ref, () => ({
         root: rootRef.current,
         rigidBodyRefs: rigidBodyRefs.current,
-        focusNode: (nodeId) => {
-            const object = objectRefs.current[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); });
-        }
-    }), []);
+        getObject: (nodeId) => { var _a; return (_a = objectRefs.current[nodeId]) !== null && _a !== void 0 ? _a : null; },
+        focusNode: (nodeId) => onFocusNode === null || onFocusNode === void 0 ? void 0 : onFocusNode(nodeId),
+    }), [onFocusNode]);
     const registerRef = useCallback((id, obj) => {
         objectRefs.current[id] = obj;
-        if (id === selectedId)
-            setSelectedObject(obj);
-    }, [selectedId]);
+        if (id === selectedId) {
+            onSelectedObjectChange === null || onSelectedObjectChange === void 0 ? void 0 : onSelectedObjectChange(obj);
+        }
+    }, [onSelectedObjectChange, selectedId]);
     const registerRigidBodyRef = useCallback((id, rb) => {
         rigidBodyRefs.current.set(id, rb);
     }, []);
@@ -68,36 +53,26 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
         };
         return () => { console.error = originalError; };
     }, []);
-    useEffect(() => {
-        var _a;
-        setSelectedObject(selectedId ? (_a = objectRefs.current[selectedId]) !== null && _a !== void 0 ? _a : null : null);
-    }, [selectedId]);
-    const onTransformChange = () => {
-        if (!selectedId || !onPrefabChange)
-            return;
-        const obj = objectRefs.current[selectedId];
-        if (!obj)
-            return;
-        const parentWorld = computeParentWorldMatrix(data.root, selectedId);
-        const local = parentWorld.clone().invert().multiply(obj.matrixWorld);
-        const { position, rotation, scale } = decompose(local);
-        const root = updateNode(data.root, selectedId, node => (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node.components), { transform: {
-                    type: "Transform",
-                    properties: { position, rotation, scale },
-                } }) })));
-        onPrefabChange(Object.assign(Object.assign({}, data), { root }));
-    };
     useEffect(() => {
         const modelsToLoad = new Set();
         const texturesToLoad = new Set();
         walk(data.root, node => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            ((_c = (_b = (_a = node.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) === null || _c === void 0 ? void 0 : _c.filename) &&
-                modelsToLoad.add(node.components.model.properties.filename);
-            ((_f = (_e = (_d = node.components) === null || _d === void 0 ? void 0 : _d.material) === null || _e === void 0 ? void 0 : _e.properties) === null || _f === void 0 ? void 0 : _f.texture) &&
-                texturesToLoad.add(node.components.material.properties.texture);
-            ((_j = (_h = (_g = node.components) === null || _g === void 0 ? void 0 : _g.material) === null || _h === void 0 ? void 0 : _h.properties) === null || _j === void 0 ? void 0 : _j.normalMapTexture) &&
-                texturesToLoad.add(node.components.material.properties.normalMapTexture);
+            var _a;
+            Object.values((_a = node.components) !== null && _a !== void 0 ? _a : {}).forEach(component => {
+                var _a, _b, _c, _d;
+                if (!(component === null || component === void 0 ? void 0 : component.type))
+                    return;
+                if (component.type === 'Model' && ((_a = component.properties) === null || _a === void 0 ? void 0 : _a.filename)) {
+                    modelsToLoad.add(component.properties.filename);
+                }
+                if (component.type === 'Material') {
+                    ((_b = component.properties) === null || _b === void 0 ? void 0 : _b.texture) && texturesToLoad.add(component.properties.texture);
+                    ((_c = component.properties) === null || _c === void 0 ? void 0 : _c.normalMapTexture) && texturesToLoad.add(component.properties.normalMapTexture);
+                }
+                if (component.type === 'SpotLight' && ((_d = component.properties) === null || _d === void 0 ? void 0 : _d.map)) {
+                    texturesToLoad.add(component.properties.map);
+                }
+            });
         });
         modelsToLoad.forEach((file) => __awaiter(void 0, void 0, void 0, function* () {
             if (availableModels[file] || loading.current.has(file))
@@ -112,7 +87,6 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
                 setModels(m => (Object.assign(Object.assign({}, m), { [file]: model })));
             }
         }));
-        const loader = new TextureLoader();
         texturesToLoad.forEach(file => {
             if (availableTextures[file] || loading.current.has(file) || failedTextures.current.has(file))
                 return;
@@ -123,17 +97,18 @@ export const PrefabRoot = forwardRef(({ editMode, data, onPrefabChange, selected
                 : file.startsWith("/")
                     ? `${basePath}${file}`
                     : `${basePath}/${file}`;
-            loader.load(path, tex => {
-                tex.colorSpace = SRGBColorSpace;
-                setTextures(t => (Object.assign(Object.assign({}, t), { [file]: tex })));
-            }, undefined, (err) => {
-                console.warn(`Failed to load texture: ${path}`, err);
+            void loadTexture(path).then(result => {
+                if (result.success && result.texture) {
+                    setTextures(t => (Object.assign(Object.assign({}, t), { [file]: result.texture })));
+                    return;
+                }
+                console.warn(`Failed to load texture: ${path}`, result.error);
                 loading.current.delete(file);
                 failedTextures.current.add(file);
             });
         });
     }, [data, availableModels, availableTextures, basePath]);
-    return (_jsxs("group", { ref: rootRef, children: [_jsx(GameInstanceProvider, { models: availableModels, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, loadedModels: availableModels, loadedTextures: availableTextures, editMode: editMode, parentMatrix: IDENTITY }) }), editMode && (_jsxs(_Fragment, { children: [_jsx(MapControls, { ref: controlsRef, makeDefault: true }), selectedObject && (_jsx(TransformControls, { object: selectedObject, mode: transformMode, space: "local", onObjectChange: onTransformChange, translationSnap: positionSnap > 0 ? positionSnap : undefined, rotationSnap: rotationSnap > 0 ? rotationSnap : undefined, scaleSnap: snapResolution > 0 ? snapResolution : undefined }, `transform-${transformMode}-${positionSnap}-${rotationSnap}-${snapResolution}`))] }))] }));
+    return (_jsx("group", { ref: rootRef, children: _jsx(GameInstanceProvider, { models: availableModels, selectedId: selectedId, editMode: editMode, onSelect: editMode ? onSelect : undefined, registerRef: registerRef, children: _jsx(GameObjectRenderer, { gameObject: data.root, selectedId: selectedId, onSelect: editMode ? onSelect : undefined, onClick: onClick, registerRef: registerRef, registerRigidBodyRef: registerRigidBodyRef, loadedModels: availableModels, loadedTextures: availableTextures, editMode: editMode, parentMatrix: IDENTITY }) }) }));
 });
 export function GameObjectRenderer(props) {
     var _a, _b, _c;
@@ -162,12 +137,14 @@ function isPhysicsProps(v) {
     return (v === null || v === void 0 ? void 0 : v.type) === "fixed" || (v === null || v === void 0 ? void 0 : v.type) === "dynamic" || (v === null || v === void 0 ? void 0 : v.type) === "kinematicPosition" || (v === null || v === void 0 ? void 0 : v.type) === "kinematicVelocity";
 }
 function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, registerRef, selectedId: _selectedId, onSelect, onClick }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const localTransform = getNodeTransformProps(gameObject);
-    const physicsProps = isPhysicsProps((_b = (_a = gameObject.components) === null || _a === void 0 ? void 0 : _a.physics) === null || _b === void 0 ? void 0 : _b.properties)
-        ? (_d = (_c = gameObject.components) === null || _c === void 0 ? void 0 : _c.physics) === null || _d === void 0 ? void 0 : _d.properties
+    const isLocked = Boolean(gameObject.locked);
+    const clickable = Object.values((_a = gameObject.components) !== null && _a !== void 0 ? _a : {}).some(component => (component === null || component === void 0 ? void 0 : component.type) === 'Click');
+    const physicsProps = isPhysicsProps((_c = (_b = gameObject.components) === null || _b === void 0 ? void 0 : _b.physics) === null || _c === void 0 ? void 0 : _c.properties)
+        ? (_e = (_d = gameObject.components) === null || _d === void 0 ? void 0 : _d.physics) === null || _e === void 0 ? void 0 : _e.properties
         : undefined;
-    const modelUrl = (_g = (_f = (_e = gameObject.components) === null || _e === void 0 ? void 0 : _e.model) === null || _f === void 0 ? void 0 : _f.properties) === null || _g === void 0 ? void 0 : _g.filename;
+    const modelUrl = (_h = (_g = (_f = gameObject.components) === null || _f === void 0 ? void 0 : _f.model) === null || _g === void 0 ? void 0 : _g.properties) === null || _h === void 0 ? void 0 : _h.filename;
     const instances = useMemo(() => buildRepeatedInstances(gameObject, parentMatrix, modelUrl, physicsProps), [gameObject, modelUrl, parentMatrix, physicsProps]);
     const groupRef = useRef(null);
     const clickValid = useRef(false);
@@ -178,22 +155,23 @@ function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, register
         }
     }, [gameObject.id, registerRef, editMode]);
     if (editMode) {
-        return (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: localTransform.position, rotation: localTransform.rotation, scale: localTransform.scale, onPointerDown: (e) => { e.stopPropagation(); clickValid.current = true; }, onPointerMove: () => { clickValid.current = false; }, onPointerUp: (e) => {
+        return (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: localTransform.position, rotation: localTransform.rotation, scale: localTransform.scale, onPointerDown: isLocked ? undefined : (e) => { e.stopPropagation(); clickValid.current = true; }, onPointerMove: isLocked ? undefined : () => { clickValid.current = false; }, onPointerUp: isLocked ? undefined : (e) => {
                         if (clickValid.current) {
                             e.stopPropagation();
                             onSelect === null || onSelect === void 0 ? void 0 : onSelect(gameObject.id);
                             onClick === null || onClick === void 0 ? void 0 : onClick(e, gameObject);
                         }
                         clickValid.current = false;
-                    }, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, physics: instance.physics }, instance.id)))] }));
+                    }, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, clickable: clickable, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, locked: isLocked, physics: instance.physics }, instance.id)))] }));
     }
-    return (_jsx(_Fragment, { children: instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, physics: instance.physics }, instance.id))) }));
+    return (_jsx(_Fragment, { children: instances.map(instance => (_jsx(GameInstance, { id: instance.id, sourceId: gameObject.id, clickable: clickable, modelUrl: instance.modelUrl, position: instance.position, rotation: instance.rotation, scale: instance.scale, locked: isLocked, physics: instance.physics }, instance.id))) }));
 }
 function StandardNode({ gameObject, selectedId, onSelect, onClick, registerRef, registerRigidBodyRef, loadedModels, loadedTextures, editMode, parentMatrix = IDENTITY, }) {
     var _a, _b, _c, _d, _e;
     const groupRef = useRef(null);
     const helperRef = useRef(null);
     const clickValid = useRef(false);
+    const isLocked = Boolean(gameObject.locked);
     const isSelected = selectedId === gameObject.id;
     const stillInstanced = useInstanceCheck(gameObject.id);
     useHelper(editMode && isSelected ? helperRef : null, BoxHelper, "cyan");
@@ -235,26 +213,22 @@ function StandardNode({ gameObject, selectedId, onSelect, onClick, registerRef,
             loadedTextures,
             editMode,
         });
-    const inner = (_jsx("group", { onPointerDown: editMode ? onDown : undefined, onPointerMove: editMode ? () => (clickValid.current = false) : undefined, onPointerUp: editMode ? onUp : undefined, children: renderCompositionNode(gameObject, renderCtx, parentMatrix, childNodes) }));
+    const inner = (_jsx("group", { onPointerDown: editMode && !isLocked ? onDown : undefined, onPointerMove: editMode && !isLocked ? () => (clickValid.current = false) : undefined, onPointerUp: editMode && !isLocked ? onUp : undefined, children: renderCompositionNode(gameObject, renderCtx, parentMatrix, childNodes) }));
     if (editMode) {
         return (_jsxs(_Fragment, { children: [_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: _jsx("mesh", { visible: false, children: _jsx("boxGeometry", { args: [0.01, 0.01, 0.01] }) }) }), _jsx("group", { ref: helperRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }), hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View) ? (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, nodeId: gameObject.id, registerRigidBodyRef: registerRigidBodyRef, children: inner }, physicsKey)) : null] }));
     }
     if (hasPhysics && (physicsDef === null || physicsDef === void 0 ? void 0 : physicsDef.View)) {
         return (_jsx(physicsDef.View, { properties: physics.properties, position: transform.position, rotation: transform.rotation, scale: transform.scale, editMode: editMode, nodeId: gameObject.id, registerRigidBodyRef: registerRigidBodyRef, children: inner }, physicsKey));
     }
-    return (_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, onPointerDown: onDown, onPointerMove: () => (clickValid.current = false), onPointerUp: onUp, children: inner }));
-}
-const CHILD_HOST_COMPONENT_TYPES = new Set(["Environment"]);
-function isChildHostType(type) {
-    return CHILD_HOST_COMPONENT_TYPES.has(type);
+    return (_jsx("group", { ref: groupRef, position: transform.position, rotation: transform.rotation, scale: transform.scale, children: inner }));
 }
 function getChildHostComponents(gameObject) {
     var _a;
     return Object.entries((_a = gameObject.components) !== null && _a !== void 0 ? _a : {}).flatMap(([key, comp]) => {
-        if (!(comp === null || comp === void 0 ? void 0 : comp.type) || !isChildHostType(comp.type))
+        if (!(comp === null || comp === void 0 ? void 0 : comp.type))
             return [];
         const def = getComponent(comp.type);
-        if (!(def === null || def === void 0 ? void 0 : def.View))
+        if (!(def === null || def === void 0 ? void 0 : def.View) || def.nonComposable)
             return [];
         return { key, View: def.View, properties: comp.properties };
     });
@@ -327,16 +301,6 @@ function buildRepeatedInstances(gameObject, parentMatrix, modelUrl, physics) {
     }
     return instances;
 }
-function decompose(m) {
-    const p = new Vector3(), q = new Quaternion(), s = new Vector3();
-    m.decompose(p, q, s);
-    const e = new Euler().setFromQuaternion(q);
-    return {
-        position: [p.x, p.y, p.z],
-        rotation: [e.x, e.y, e.z],
-        scale: [s.x, s.y, s.z],
-    };
-}
 function getNodeTransformProps(node) {
     var _a, _b, _c, _d, _e;
     const t = (_b = (_a = node === null || node === void 0 ? void 0 : node.components) === null || _a === void 0 ? void 0 : _a.transform) === null || _b === void 0 ? void 0 : _b.properties;
@@ -346,20 +310,6 @@ function getNodeTransformProps(node) {
         scale: (_e = t === null || t === void 0 ? void 0 : t.scale) !== null && _e !== void 0 ? _e : [1, 1, 1],
     };
 }
-function computeParentWorldMatrix(root, targetId) {
-    let result = null;
-    const visit = (node, parent) => {
-        var _a;
-        if (node.id === targetId) {
-            result = parent.clone();
-            return;
-        }
-        const world = parent.clone().multiply(compose(node));
-        (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(c => !result && visit(c, world));
-    };
-    visit(root, IDENTITY);
-    return result !== null && result !== void 0 ? result : IDENTITY;
-}
 function renderCompositionSubtree(gameObject, ctx, parentMatrix = IDENTITY) {
     if (!gameObject || gameObject.disabled)
         return null;
@@ -374,9 +324,7 @@ function renderHostedChildren(gameObject, ctx, parentMatrix) {
 }
 function renderCompositionNode(gameObject, ctx, parentMatrix, childNodes) {
     const ownContent = renderNodeOwnContent(gameObject, ctx, parentMatrix);
-    const siblingContent = renderNodeSiblingComponents(gameObject, ctx, parentMatrix);
-    const subtree = _jsxs(_Fragment, { children: [ownContent, siblingContent, childNodes] });
-    return wrapWithChildHosts(gameObject, ctx, parentMatrix, subtree);
+    return wrapWithChildHosts(gameObject, ctx, parentMatrix, _jsxs(_Fragment, { children: [ownContent, childNodes] }));
 }
 function renderNodeOwnContent(gameObject, ctx, parentMatrix) {
     var _a, _b, _c, _d;
@@ -412,28 +360,6 @@ function renderNodeOwnContent(gameObject, ctx, parentMatrix) {
     }
     return core;
 }
-function renderNodeSiblingComponents(gameObject, ctx, parentMatrix) {
-    var _a;
-    const contextProps = {
-        loadedModels: ctx.loadedModels,
-        loadedTextures: ctx.loadedTextures,
-        editMode: ctx.editMode,
-        isSelected: ctx.selectedId === gameObject.id,
-        nodeId: gameObject.id,
-        parentMatrix,
-        registerRef: ctx.registerRef,
-    };
-    return Object.entries((_a = gameObject.components) !== null && _a !== void 0 ? _a : {})
-        .filter(([key]) => !getNonComposableKeys().includes(key))
-        .flatMap(([key, comp]) => {
-        if (!(comp === null || comp === void 0 ? void 0 : comp.type) || isChildHostType(comp.type))
-            return [];
-        const def = getComponent(comp.type);
-        if (!(def === null || def === void 0 ? void 0 : def.View))
-            return [];
-        return _jsx(def.View, Object.assign({ properties: comp.properties }, contextProps), key);
-    });
-}
 function wrapWithChildHosts(gameObject, ctx, parentMatrix, subtree) {
     const contextProps = {
         loadedModels: ctx.loadedModels,

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

@@ -34,7 +34,7 @@ function CameraComponentView({ properties, editMode, isSelected }) {
             cameraHelper.update();
         }
     });
-    return (_jsxs(_Fragment, { children: [_jsx(PerspectiveCamera, { ref: (instance) => setCamera(instance), makeDefault: !editMode, fov: fov, near: near, zoom: zoom, far: far }), editMode && isSelected && cameraHelper && (_jsx("primitive", { object: cameraHelper })), editMode && !isSelected ? (_jsxs("mesh", { children: [_jsx("boxGeometry", { args: [0.34, 0.22, 0.18] }), _jsx("meshBasicMaterial", { color: "#22d3ee", wireframe: true })] })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsx(PerspectiveCamera, { ref: (instance) => setCamera(instance), makeDefault: !editMode, fov: fov, near: near, zoom: zoom, far: far }), editMode && isSelected && cameraHelper && (_jsx("primitive", { object: cameraHelper })), editMode ? (_jsxs("group", { children: [_jsxs("mesh", { children: [_jsx("boxGeometry", { args: [0.3, 0.3, 0.5] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] }), _jsxs("mesh", { position: [0, 0, -0.25], rotation: [Math.PI / 2, 0, 0], children: [_jsx("coneGeometry", { args: [0.08, 0.16, 16] }), _jsx("meshBasicMaterial", { color: '#22d3ee', wireframe: true })] })] })) : null] }));
 }
 const CameraComponent = {
     name: 'Camera',

package/dist/tools/prefabeditor/components/ClickComponent.d.ts

@@ -0,0 +1,3 @@
+import { Component } from './ComponentRegistry';
+declare const ClickComponent: Component;
+export default ClickComponent;

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { gameEvents } from '../GameEvents';
+import { FieldGroup } from './Input';
+function ClickComponentEditor() {
+    return (_jsx(FieldGroup, { children: _jsx("div", { style: { fontSize: 12, opacity: 0.8 }, children: "Emits a click game event in play mode when this entity is clicked." }) }));
+}
+function ClickComponentView({ children, editMode, nodeId }) {
+    const clickValid = useRef(false);
+    const emitClick = (event) => {
+        if (!nodeId)
+            return;
+        gameEvents.emit('click', {
+            sourceEntityId: nodeId,
+            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,
+        });
+    };
+    if (editMode) {
+        return _jsx(_Fragment, { children: children });
+    }
+    return (_jsx("group", { onPointerDown: (event) => {
+            event.stopPropagation();
+            clickValid.current = true;
+        }, onPointerMove: () => {
+            clickValid.current = false;
+        }, onPointerUp: (event) => {
+            if (!clickValid.current)
+                return;
+            event.stopPropagation();
+            emitClick(event);
+            clickValid.current = false;
+        }, children: children }));
+}
+const ClickComponent = {
+    name: 'Click',
+    Editor: ClickComponentEditor,
+    View: ClickComponentView,
+    defaultProperties: {},
+};
+export default ClickComponent;

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

@@ -1,8 +1,5 @@
 const REGISTRY = {};
 export function registerComponent(component) {
-    if (REGISTRY[component.name]) {
-        throw new Error(`Component with name ${component.name} already registered.`);
-    }
     REGISTRY[component.name] = component;
 }
 export function getComponent(name) {

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useRef, useEffect, useMemo, useState } from "react";
 import { useFrame } from "@react-three/fiber";
 import { CameraHelper, Vector3 } from "three";
-import { FieldRenderer, Input } from "./Input";
+import { FieldRenderer, NumberInput } from "./Input";
 const smallLabel = { display: 'block', fontSize: '8px', color: 'rgba(34, 211, 238, 0.5)', marginBottom: 2 };
 const directionalLightDefaults = {
     color: '#ffffff',
@@ -28,7 +28,7 @@ const directionalLightFields = [
         label: 'Shadow Camera',
         render: ({ values, onChangeMultiple }) => {
             var _a, _b, _c, _d, _e, _f;
-            return (_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Near" }), _jsx(Input, { step: 0.1, value: (_a = values.shadowCameraNear) !== null && _a !== void 0 ? _a : 0.1, onChange: v => onChangeMultiple({ shadowCameraNear: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Far" }), _jsx(Input, { step: 1, value: (_b = values.shadowCameraFar) !== null && _b !== void 0 ? _b : 100, onChange: v => onChangeMultiple({ shadowCameraFar: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Top" }), _jsx(Input, { step: 1, value: (_c = values.shadowCameraTop) !== null && _c !== void 0 ? _c : 30, onChange: v => onChangeMultiple({ shadowCameraTop: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Bottom" }), _jsx(Input, { step: 1, value: (_d = values.shadowCameraBottom) !== null && _d !== void 0 ? _d : -30, onChange: v => onChangeMultiple({ shadowCameraBottom: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Left" }), _jsx(Input, { step: 1, value: (_e = values.shadowCameraLeft) !== null && _e !== void 0 ? _e : -30, onChange: v => onChangeMultiple({ shadowCameraLeft: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Right" }), _jsx(Input, { step: 1, value: (_f = values.shadowCameraRight) !== null && _f !== void 0 ? _f : 30, onChange: v => onChangeMultiple({ shadowCameraRight: v }) })] })] }));
+            return (_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Near" }), _jsx(NumberInput, { step: 0.1, value: (_a = values.shadowCameraNear) !== null && _a !== void 0 ? _a : 0.1, onChange: v => onChangeMultiple({ shadowCameraNear: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Far" }), _jsx(NumberInput, { step: 1, value: (_b = values.shadowCameraFar) !== null && _b !== void 0 ? _b : 100, onChange: v => onChangeMultiple({ shadowCameraFar: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Top" }), _jsx(NumberInput, { step: 1, value: (_c = values.shadowCameraTop) !== null && _c !== void 0 ? _c : 30, onChange: v => onChangeMultiple({ shadowCameraTop: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Bottom" }), _jsx(NumberInput, { step: 1, value: (_d = values.shadowCameraBottom) !== null && _d !== void 0 ? _d : -30, onChange: v => onChangeMultiple({ shadowCameraBottom: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Left" }), _jsx(NumberInput, { step: 1, value: (_e = values.shadowCameraLeft) !== null && _e !== void 0 ? _e : -30, onChange: v => onChangeMultiple({ shadowCameraLeft: v }) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Right" }), _jsx(NumberInput, { step: 1, value: (_f = values.shadowCameraRight) !== null && _f !== void 0 ? _f : 30, onChange: v => onChangeMultiple({ shadowCameraRight: v }) })] })] }));
         },
     },
     {
@@ -37,7 +37,7 @@ const directionalLightFields = [
         label: 'Target Offset',
         render: ({ value, onChange }) => {
             const offset = value !== null && value !== void 0 ? value : [0, -5, 0];
-            return (_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "X" }), _jsx(Input, { step: 0.5, value: offset[0], onChange: v => onChange([v, offset[1], offset[2]]) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Y" }), _jsx(Input, { step: 0.5, value: offset[1], onChange: v => onChange([offset[0], v, offset[2]]) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Z" }), _jsx(Input, { step: 0.5, value: offset[2], onChange: v => onChange([offset[0], offset[1], v]) })] })] }));
+            return (_jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }, children: [_jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "X" }), _jsx(NumberInput, { step: 0.5, value: offset[0], onChange: v => onChange([v, offset[1], offset[2]]) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Y" }), _jsx(NumberInput, { step: 0.5, value: offset[1], onChange: v => onChange([offset[0], v, offset[2]]) })] }), _jsxs("div", { children: [_jsx("label", { style: smallLabel, children: "Z" }), _jsx(NumberInput, { step: 0.5, value: offset[2], onChange: v => onChange([offset[0], offset[1], v]) })] })] }));
         },
     },
 ];

package/dist/tools/prefabeditor/components/Input.d.ts

@@ -52,12 +52,15 @@ interface InputProps {
     min?: number;
     max?: number;
     style?: React.CSSProperties;
-    label?: string;
 }
-export declare function Input({ value, onChange, step, min, max, style, label }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumberInput({ value, onChange, step, min, max, style }: InputProps): import("react/jsx-runtime").JSX.Element;
 export declare function Label({ children }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function FieldRow({ label, children, }: {
+    label: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 export declare function Vector3Input({ label, value, onChange, snap, labelExtra }: {
     label: string;
     value: [number, number, number];

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

@@ -49,23 +49,59 @@ function getStepPrecision(step) {
     const decimal = stepString.split('.')[1];
     return (_a = decimal === null || decimal === void 0 ? void 0 : decimal.length) !== null && _a !== void 0 ? _a : 0;
 }
-export function Input({ value, onChange, step, min, max, style, label }) {
+function clampNumber(value, min, max) {
+    if (min !== undefined && value < min)
+        return min;
+    if (max !== undefined && value > max)
+        return max;
+    return value;
+}
+function normalizeNumber(value, step, min, max) {
+    const clampedValue = clampNumber(value, min, max);
+    const normalizedStep = getNumericStep(step, 0);
+    if (!Number.isFinite(normalizedStep) || normalizedStep <= 0)
+        return clampedValue;
+    const precision = getStepPrecision(normalizedStep);
+    const stepBase = min !== null && min !== void 0 ? min : 0;
+    const steppedValue = stepBase + Math.round((clampedValue - stepBase) / normalizedStep) * normalizedStep;
+    return Number(steppedValue.toFixed(precision));
+}
+function isIncompleteNumber(value) {
+    return value === '' || value === '-' || value === '.' || value === '-.';
+}
+export function NumberInput({ value, onChange, step, min, max, style }) {
     const [draft, setDraft] = useState(() => value.toString());
+    const [isFocused, setIsFocused] = useState(false);
     useEffect(() => {
-        setDraft(value.toString());
-    }, [value]);
+        if (!isFocused) {
+            setDraft(value.toString());
+        }
+    }, [value, isFocused]);
     const handleChange = (e) => {
         const inputValue = e.target.value;
         setDraft(inputValue);
-        const num = parseFloat(inputValue);
+        if (isIncompleteNumber(inputValue))
+            return;
+        const num = Number(inputValue);
         if (Number.isFinite(num)) {
-            onChange(num);
+            onChange(clampNumber(num, min, max));
         }
     };
     const handleBlur = () => {
-        const num = parseFloat(draft);
+        setIsFocused(false);
+        if (isIncompleteNumber(draft)) {
+            setDraft(value.toString());
+            return;
+        }
+        const num = Number(draft);
         if (!Number.isFinite(num)) {
             setDraft(value.toString());
+            return;
+        }
+        const normalized = normalizeNumber(num, step, min, max);
+        setDraft(normalized.toString());
+        if (normalized !== value) {
+            onChange(normalized);
         }
     };
     const dragState = useRef(null);
@@ -88,15 +124,10 @@ export function Input({ value, onChange, step, min, max, style, label }) {
             scrubStep /= 10;
         if (e.altKey)
             scrubStep *= 10;
-        const precision = getStepPrecision(scrubStep);
         const deltaSteps = Math.round(dx / 8);
-        let nextValue = startValue + deltaSteps * scrubStep;
-        // Apply min/max constraints
-        if (min !== undefined && nextValue < min)
-            nextValue = min;
-        if (max !== undefined && nextValue > max)
-            nextValue = max;
-        setDraft(nextValue.toFixed(precision));
+        const rawValue = startValue + deltaSteps * scrubStep;
+        const nextValue = normalizeNumber(rawValue, scrubStep, min, max);
+        setDraft(nextValue.toString());
         onChange(nextValue);
     };
     const endScrub = (e) => {
@@ -106,26 +137,23 @@ export function Input({ value, onChange, step, min, max, style, label }) {
         document.body.style.cursor = "";
         e.currentTarget.releasePointerCapture(e.pointerId);
     };
-    if (label) {
-        return (_jsxs("div", { style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-            }, children: [_jsx("span", { style: Object.assign(Object.assign({}, styles.label), { marginBottom: 0, userSelect: 'none', flex: '0 0 auto', minWidth: 20 }), children: label }), _jsx("input", { type: "text", value: draft, onChange: handleChange, onBlur: handleBlur, onKeyDown: e => {
-                        if (e.key === 'Enter') {
-                            e.target.blur();
-                        }
-                    }, step: step, min: min, max: max, style: Object.assign(Object.assign(Object.assign({}, styles.input), { cursor: 'ew-resize' }), style), onPointerDown: startScrub, onPointerMove: onScrubMove, onPointerUp: endScrub })] }));
-    }
-    return (_jsx("input", { type: "text", value: draft, onChange: handleChange, onBlur: handleBlur, onKeyDown: e => {
+    return (_jsx("input", { type: "number", inputMode: "decimal", value: draft, onChange: handleChange, onFocus: () => setIsFocused(true), onBlur: handleBlur, onKeyDown: e => {
             if (e.key === 'Enter') {
                 e.target.blur();
             }
-        }, step: step, min: min, max: max, style: Object.assign(Object.assign(Object.assign({}, styles.input), { cursor: 'ew-resize' }), style), onPointerDown: startScrub, onPointerMove: onScrubMove, onPointerUp: endScrub }));
+        }, step: step !== null && step !== void 0 ? step : 'any', min: min, max: max, style: Object.assign(Object.assign(Object.assign({}, styles.input), { cursor: 'ew-resize' }), style), onPointerDown: startScrub, onPointerMove: onScrubMove, onPointerUp: endScrub }));
 }
 export function Label({ children }) {
     return _jsx("label", { style: styles.label, children: children });
 }
+export function FieldRow({ label, children, }) {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 8,
+        }, children: [_jsx("span", { style: Object.assign(Object.assign({}, styles.label), { marginBottom: 0, userSelect: 'none', flex: '0 0 auto', minWidth: 20 }), children: label }), children] }));
+}
 export function Vector3Input({ label, value, onChange, snap, labelExtra }) {
     const snapValue = (num) => {
         if (!snap)
@@ -133,18 +161,23 @@ export function Vector3Input({ label, value, onChange, snap, labelExtra }) {
         return Math.round(num / snap) * snap;
     };
     const [draft, setDraft] = useState(() => value.map(v => v.toString()));
-    // Sync external changes (gizmo, undo, etc.)
     useEffect(() => {
         setDraft(value.map(v => v.toString()));
-    }, [value[0], value[1], value[2]]);
+    }, [value]);
     const dragState = useRef(null);
     const commit = (index) => {
-        const num = parseFloat(draft[index]);
-        if (Number.isFinite(num)) {
-            const next = [...value];
-            next[index] = snapValue(num);
-            onChange(next);
+        if (isIncompleteNumber(draft[index])) {
+            setDraft(value.map(v => v.toString()));
+            return;
         }
+        const num = Number(draft[index]);
+        if (!Number.isFinite(num)) {
+            setDraft(value.map(v => v.toString()));
+            return;
+        }
+        const next = [...value];
+        next[index] = snapValue(num);
+        onChange(next);
     };
     const startScrub = (e, index) => {
         dragState.current = {
@@ -171,7 +204,7 @@ export function Vector3Input({ label, value, onChange, snap, labelExtra }) {
         next[index] = nextValue;
         setDraft(d => {
             const copy = [...d];
-            copy[index] = nextValue.toFixed(3);
+            copy[index] = nextValue.toString();
             return copy;
         });
         onChange(next);
@@ -216,7 +249,7 @@ export function Vector3Input({ label, value, onChange, snap, labelExtra }) {
                                 width: '100%',
                                 minWidth: 0,
                                 cursor: 'inherit',
-                            }, type: "text", value: draft[index], onChange: e => {
+                            }, type: "number", inputMode: "decimal", step: snap !== null && snap !== void 0 ? snap : 'any', value: draft[index], onChange: e => {
                                 const next = [...draft];
                                 next[index] = e.target.value;
                                 setDraft(next);
@@ -263,7 +296,7 @@ export function FieldGroup({ children }) {
 }
 export function NumberField({ name, label, values, onChange, fallback = 0, step, min, max, style, }) {
     var _a;
-    return (_jsx(Input, { label: label, value: (_a = values[name]) !== null && _a !== void 0 ? _a : fallback, onChange: bindFieldChange(name, onChange), step: step, min: min, max: max, style: style }));
+    return (_jsx(FieldRow, { label: label, children: _jsx(NumberInput, { value: (_a = values[name]) !== null && _a !== void 0 ? _a : fallback, onChange: bindFieldChange(name, onChange), step: step, min: min, max: max, style: style }) }));
 }
 export function StringField({ name, label, values, onChange, fallback = '', placeholder, }) {
     var _a;
@@ -296,7 +329,7 @@ export function FieldRenderer({ fields, values, onChange }) {
                 case 'vector3':
                     return (_jsx(Vector3Input, { label: field.label, value: value !== null && value !== void 0 ? value : [0, 0, 0], onChange: v => updateField(field.name, v), snap: field.snap }, field.name));
                 case 'number':
-                    return (_jsx(Input, { label: field.label, value: value !== null && value !== void 0 ? value : 0, onChange: v => updateField(field.name, v), min: field.min, max: field.max, step: field.step }, field.name));
+                    return (_jsx(FieldRow, { label: field.label, children: _jsx(NumberInput, { value: value !== null && value !== void 0 ? value : 0, onChange: v => updateField(field.name, v), min: field.min, max: field.max, step: field.step }) }, field.name));
                 case 'string':
                     return (_jsx(StringInput, { label: field.label, value: value !== null && value !== void 0 ? value : '', onChange: v => updateField(field.name, v), placeholder: field.placeholder }, field.name));
                 case 'color':