react-three-game 0.0.64 → 0.0.66

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 { GameInstance, GameInstanceProvider, useInstanceCheck } from "./InstanceProvider";
-import { focusCameraOnObject, updateNode } from "./utils";
-import { EditorContext } from "./EditorContext";
+import { loadModel, loadTexture } from "../dragdrop";
+import { GameInstance, GameInstanceProvider, getRepeatAxesFromModelProperties, useInstanceCheck } from "./InstanceProvider";
+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,25 +53,6 @@ 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();
@@ -112,7 +78,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 +88,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;
@@ -159,16 +125,18 @@ export function GameObjectRenderer(props) {
         : _jsx(StandardNode, Object.assign({}, props), key);
 }
 function isPhysicsProps(v) {
-    return (v === null || v === void 0 ? void 0 : v.type) === "fixed" || (v === null || v === void 0 ? void 0 : v.type) === "dynamic";
+    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, _h, _j, _k;
-    const world = parentMatrix.clone().multiply(compose(gameObject));
-    const { position: worldPosition, rotation: worldRotation, scale: worldScale } = decompose(world);
+    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 = (_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);
     useEffect(() => {
@@ -177,24 +145,24 @@ function InstancedNode({ gameObject, parentMatrix = IDENTITY, editMode, register
             return () => registerRef(gameObject.id, null);
         }
     }, [gameObject.id, registerRef, editMode]);
-    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;
     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] }) }) }), _jsx(GameInstance, { id: gameObject.id, modelUrl: modelUrl, position: worldPosition, rotation: worldRotation, scale: worldScale, physics: physicsProps })] }));
+                    }, 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(GameInstance, { id: gameObject.id, modelUrl: (_k = (_j = (_h = gameObject.components) === null || _h === void 0 ? void 0 : _h.model) === null || _j === void 0 ? void 0 : _j.properties) === null || _k === void 0 ? void 0 : _k.filename, position: worldPosition, rotation: worldRotation, scale: worldScale, physics: physicsProps }));
+    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");
@@ -236,26 +204,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 };
     });
@@ -276,16 +240,58 @@ function compose(node) {
     const { position, rotation, scale } = getNodeTransformProps(node);
     return new Matrix4().compose(new Vector3(...position), new Quaternion().setFromEuler(new Euler(...rotation)), new Vector3(...scale));
 }
-function decompose(m) {
-    const p = new Vector3(), q = new Quaternion(), s = new Vector3();
-    m.decompose(p, q, s);
-    const e = new Euler().setFromQuaternion(q);
+function getModelRepeatSettings(node) {
+    var _a, _b, _c;
+    const properties = (_c = (_b = (_a = node === null || node === void 0 ? void 0 : node.components) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.properties) !== null && _c !== void 0 ? _c : {};
     return {
-        position: [p.x, p.y, p.z],
-        rotation: [e.x, e.y, e.z],
-        scale: [s.x, s.y, s.z],
+        repeat: Boolean(properties.repeat),
+        repeatAxes: getRepeatAxesFromModelProperties(properties),
     };
 }
+function buildRepeatedInstances(gameObject, parentMatrix, modelUrl, physics) {
+    if (!modelUrl)
+        return [];
+    const transform = getNodeTransformProps(gameObject);
+    const repeat = getModelRepeatSettings(gameObject);
+    const counts = [1, 1, 1];
+    const offsets = [0, 0, 0];
+    if (repeat.repeat) {
+        for (const entry of repeat.repeatAxes) {
+            const axisIndex = entry.axis === 'x' ? 0 : entry.axis === 'y' ? 1 : 2;
+            counts[axisIndex] = entry.count;
+            offsets[axisIndex] = entry.offset;
+        }
+    }
+    const baseTranslation = new Matrix4().makeTranslation(transform.position[0], transform.position[1], transform.position[2]);
+    const baseRotation = new Matrix4().makeRotationFromEuler(new Euler(...transform.rotation));
+    const baseScale = new Matrix4().makeScale(transform.scale[0], transform.scale[1], transform.scale[2]);
+    const offsetMatrix = new Matrix4();
+    const worldMatrix = new Matrix4();
+    const instances = [];
+    for (let x = 0; x < counts[0]; x++) {
+        for (let y = 0; y < counts[1]; y++) {
+            for (let z = 0; z < counts[2]; z++) {
+                offsetMatrix.makeTranslation(x * offsets[0], y * offsets[1], z * offsets[2]);
+                worldMatrix.copy(parentMatrix)
+                    .multiply(baseTranslation)
+                    .multiply(baseRotation)
+                    .multiply(offsetMatrix)
+                    .multiply(baseScale);
+                const { position, rotation, scale } = decompose(worldMatrix);
+                const isBaseInstance = x === 0 && y === 0 && z === 0;
+                instances.push({
+                    id: isBaseInstance ? gameObject.id : `${gameObject.id}__repeat_${x}_${y}_${z}`,
+                    modelUrl,
+                    position,
+                    rotation,
+                    scale,
+                    physics,
+                });
+            }
+        }
+    }
+    return instances;
+}
 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;
@@ -295,20 +301,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;
@@ -323,9 +315,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;
@@ -361,28 +351,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];