react-three-game 0.0.69 → 0.0.70

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

@@ -51,6 +51,11 @@ const SpotLightComponent = {
     name: 'SpotLight',
     Editor: SpotLightComponentEditor,
     View: SpotLightView,
-    defaultProperties: spotLightDefaults
+    defaultProperties: spotLightDefaults,
+    getAssetRefs: (properties) => {
+        if (properties.map)
+            return [{ type: 'texture', path: properties.map }];
+        return [];
+    },
 };
 export default SpotLightComponent;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Label, Vector3Input } from "./Input";
-import { useEditorContext } from "../EditorContext";
+import { useEditorContext } from "../PrefabEditor";
 import { colors } from "../styles";
 const buttonStyle = {
     padding: '4px 8px',
@@ -48,7 +48,7 @@ function TransformComponentEditor({ component, onUpdate }) {
 const TransformComponent = {
     name: 'Transform',
     Editor: TransformComponentEditor,
-    nonComposable: true,
+    isWrapper: true,
     defaultProperties: {
         position: [0, 0, 0],
         rotation: [0, 0, 0],

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

@@ -10,6 +10,7 @@ import TextComponent from './TextComponent';
 import EnvironmentComponent from './EnvironmentComponent';
 import CameraComponent from './CameraComponent';
 import ClickComponent from './ClickComponent';
+import SoundComponent from './SoundComponent';
 export default [
     GeometryComponent,
     TransformComponent,
@@ -23,4 +24,5 @@ export default [
     EnvironmentComponent,
     CameraComponent,
     ClickComponent,
+    SoundComponent,
 ];

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

@@ -33,6 +33,7 @@ export declare function PrefabStoreProvider({ store, children, }: {
     children: ReactNode;
 }): import("react").FunctionComponentElement<import("react").ProviderProps<PrefabStoreApi | null>>;
 export declare function usePrefabStoreApi(): PrefabStoreApi;
+export declare function useOptionalPrefabStoreApi(): PrefabStoreApi | null;
 export declare function usePrefabStore<T>(selector: (state: PrefabStoreState) => T): T;
 export declare function usePrefabRootId(): string;
 export declare function usePrefabNode(nodeId: string | null | undefined): PrefabNodeRecord | null;

package/dist/tools/prefabeditor/prefabStore.js

@@ -13,6 +13,7 @@ import { createContext, createElement, useContext } from "react";
 import { subscribeWithSelector } from "zustand/middleware";
 import { useStore } from "zustand";
 import { createStore } from "zustand/vanilla";
+import { getComponentAssetRefs } from "./components/ComponentRegistry";
 const PrefabStoreContext = createContext(null);
 const EMPTY_CHILD_IDS = [];
 export function PrefabStoreProvider({ store, children, }) {
@@ -25,6 +26,9 @@ export function usePrefabStoreApi() {
     }
     return store;
 }
+export function useOptionalPrefabStoreApi() {
+    return useContext(PrefabStoreContext);
+}
 export function usePrefabStore(selector) {
     return useStore(usePrefabStoreApi(), selector);
 }
@@ -296,26 +300,20 @@ function collectSubtreeAssetRefs(node) {
     return refs;
 }
 function collectAssetRefsForIds(ids, nodesById) {
-    return ids.flatMap(id => getAssetRefs(nodesById[id]));
+    return ids.reduce((refs, id) => {
+        refs.push(...getAssetRefs(nodesById[id]));
+        return refs;
+    }, []);
 }
 function getAssetRefs(node) {
     var _a;
     const refs = [];
     Object.values((_a = node === null || node === void 0 ? void 0 : node.components) !== null && _a !== void 0 ? _a : {}).forEach(component => {
-        var _a, _b, _c, _d;
+        var _a;
         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)) {
-            refs.push(`model:${component.properties.filename}`);
-        }
-        if (component.type === "Material") {
-            if ((_b = component.properties) === null || _b === void 0 ? void 0 : _b.texture)
-                refs.push(`texture:${component.properties.texture}`);
-            if ((_c = component.properties) === null || _c === void 0 ? void 0 : _c.normalMapTexture)
-                refs.push(`texture:${component.properties.normalMapTexture}`);
-        }
-        if (component.type === "SpotLight" && ((_d = component.properties) === null || _d === void 0 ? void 0 : _d.map)) {
-            refs.push(`texture:${component.properties.map}`);
+        for (const ref of getComponentAssetRefs(component.type, (_a = component.properties) !== null && _a !== void 0 ? _a : {})) {
+            refs.push(`${ref.type}:${ref.path}`);
         }
     });
     return refs.sort();

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

@@ -15,16 +15,27 @@ export interface EntityComponent<TProperties = Record<string, any>> {
 }
 export interface Entity {
     readonly id: string;
+    readonly name: string | undefined;
+    readonly enabled: boolean;
+    readonly parent: Entity | null;
+    readonly children: Entity[];
     set: (data: EntityData) => void;
     update: (update: (node: EntityData) => EntityData) => void;
     getComponent: <TProperties = Record<string, any>>(name: string) => EntityComponent<TProperties> | null;
+    addComponent: (type: string, properties?: Record<string, any>) => EntityComponent | null;
+    removeComponent: (name: string) => void;
+    destroy: () => void;
 }
 export type EntityUpdate = (node: EntityData) => EntityData;
 export type SceneUpdates = Record<string, EntityUpdate>;
 export interface Scene {
     readonly rootId: string;
-    find: (id: string) => Entity | null;
+    find: (nameOrId: string) => Entity | null;
     get: (id: string) => Entity;
+    create: (name: string, components?: Record<string, {
+        type: string;
+        properties?: Record<string, any>;
+    }>, options?: SpawnOptions) => Entity;
     update: {
         (id: string, update: EntityUpdate): void;
         (updates: SceneUpdates): void;
@@ -35,6 +46,9 @@ export interface Scene {
 interface SceneAdapter {
     getRootId: () => string;
     getNode: (id: string) => EntityData | null;
+    getChildIds: (id: string) => string[];
+    getParentId: (id: string) => string | null;
+    findByName: (name: string) => string | null;
     updateNode: (id: string, update: (node: EntityData) => EntityData) => void;
     updateNodes: (updates: Record<string, (node: EntityData) => EntityData>) => void;
     addNode: (node: GameObject, options?: SpawnOptions) => string;

package/dist/tools/prefabeditor/sceneApi.js

@@ -1,14 +1,23 @@
+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 { findComponentEntry } from "./types";
+import { getComponentDef } from "./components/ComponentRegistry";
 function missingNode(id) {
     throw new Error(`Scene node not found: ${id}`);
 }
 function normalizePath(path) {
-    if (path === undefined) {
+    if (!path)
         return [];
-    }
-    if (Array.isArray(path)) {
-        return path;
-    }
-    return path.split(".").filter(Boolean);
+    return Array.isArray(path) ? path : path.split(".").filter(Boolean);
 }
 function getValueAtPath(value, path) {
     const segments = normalizePath(path);
@@ -47,28 +56,12 @@ function setValueAtPath(value, path, nextValue) {
     };
     return cloneBranch(value, 0);
 }
-function findComponentEntry(node, name) {
-    if (!node.components) {
-        return null;
-    }
-    const direct = node.components[name];
-    if (direct) {
-        return [name, direct];
-    }
-    const normalizedName = name.toLowerCase();
-    for (const [key, component] of Object.entries(node.components)) {
-        if (!component) {
-            continue;
-        }
-        if (key.toLowerCase() === normalizedName || component.type.toLowerCase() === normalizedName) {
-            return [key, component];
-        }
-    }
-    return null;
-}
 export function createScene(adapter) {
-    const findNode = (id) => adapter.getNode(id) ? createNode(id) : null;
-    const getNode = (id) => { var _a; return (_a = findNode(id)) !== null && _a !== void 0 ? _a : missingNode(id); };
+    const getNode = (id) => {
+        if (!adapter.getNode(id))
+            missingNode(id);
+        return createNode(id);
+    };
     function createComponent(entityId, componentKey, componentType) {
         return {
             key: componentKey,
@@ -111,6 +104,21 @@ export function createScene(adapter) {
     function createNode(id) {
         return {
             id,
+            get name() {
+                var _a;
+                return (_a = adapter.getNode(id)) === null || _a === void 0 ? void 0 : _a.name;
+            },
+            get enabled() {
+                var _a;
+                return !((_a = adapter.getNode(id)) === null || _a === void 0 ? void 0 : _a.disabled);
+            },
+            get parent() {
+                const parentId = adapter.getParentId(id);
+                return parentId ? createNode(parentId) : null;
+            },
+            get children() {
+                return adapter.getChildIds(id).map(createNode);
+            },
             set(data) {
                 adapter.updateNode(id, () => data);
             },
@@ -119,16 +127,36 @@ export function createScene(adapter) {
             },
             getComponent(name) {
                 const node = adapter.getNode(id);
-                if (!node) {
+                if (!node)
                     return null;
-                }
                 const entry = findComponentEntry(node, name);
-                if (!entry) {
+                if (!entry)
                     return null;
-                }
                 const [componentKey, component] = entry;
                 return createComponent(id, componentKey, component.type);
             },
+            addComponent(type, properties) {
+                var _a;
+                const def = getComponentDef(type);
+                const key = type.toLowerCase();
+                const props = (_a = properties !== null && properties !== void 0 ? properties : def === null || def === void 0 ? void 0 : def.defaultProperties) !== null && _a !== void 0 ? _a : {};
+                adapter.updateNode(id, node => (Object.assign(Object.assign({}, node), { components: Object.assign(Object.assign({}, node.components), { [key]: { type, properties: props } }) })));
+                return createComponent(id, key, type);
+            },
+            removeComponent(name) {
+                adapter.updateNode(id, node => {
+                    var _a;
+                    const entry = findComponentEntry(node, name);
+                    if (!entry)
+                        return node;
+                    const [key] = entry;
+                    const _b = (_a = node.components) !== null && _a !== void 0 ? _a : {}, _c = key, _ = _b[_c], rest = __rest(_b, [typeof _c === "symbol" ? _c : _c + ""]);
+                    return Object.assign(Object.assign({}, node), { components: rest });
+                });
+            },
+            destroy() {
+                adapter.removeNode(id);
+            },
         };
     }
     function update(idOrUpdates, mutate) {
@@ -148,8 +176,25 @@ export function createScene(adapter) {
         get rootId() {
             return adapter.getRootId();
         },
-        find: findNode,
+        find(nameOrId) {
+            // Try by ID first, then by name
+            if (adapter.getNode(nameOrId))
+                return createNode(nameOrId);
+            const foundId = adapter.findByName(nameOrId);
+            return foundId ? createNode(foundId) : null;
+        },
         get: getNode,
+        create(name, components, options) {
+            const node = {
+                id: crypto.randomUUID(),
+                name,
+                components: Object.assign({ transform: {
+                        type: "Transform",
+                        properties: { position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1] },
+                    } }, components),
+            };
+            return createNode(adapter.addNode(node, options));
+        },
         update,
         add(node, options) {
             return createNode(adapter.addNode(node, options));

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

@@ -1771,6 +1771,7 @@ export declare const tree: {
         background: string;
         borderBottomColor: string;
     };
+    iconButton: React.CSSProperties;
 };
 export declare const menu: {
     container: {

package/dist/tools/prefabeditor/styles.js

@@ -129,6 +129,15 @@ export const tree = {
         background: colors.accentBg,
         borderBottomColor: colors.accentBorder,
     },
+    iconButton: {
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        padding: '0 4px',
+        fontSize: 14,
+        opacity: 0.7,
+        color: 'inherit',
+    },
 };
 export const menu = {
     container: {

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

@@ -17,3 +17,16 @@ export interface ComponentData {
     type: string;
     properties: Record<string, any>;
 }
+type ComponentHost = {
+    components?: Record<string, {
+        type?: string;
+        properties?: Record<string, any>;
+    } | undefined>;
+};
+/** Find a component on a node by type name or key (e.g. "Model", "transform"). */
+export declare function findComponent(node: ComponentHost | null | undefined, name: string): ComponentData | undefined;
+/** Find a component entry [key, data] by type name or key — use when you need the key for mutations. */
+export declare function findComponentEntry(node: ComponentHost | null | undefined, name: string): [string, ComponentData] | undefined;
+/** Check if a node has a component of the given type. */
+export declare function hasComponent(node: ComponentHost | null | undefined, typeName: string): boolean;
+export {};

package/dist/tools/prefabeditor/types.js

@@ -1 +1,28 @@
-export {};
+/** Find a component on a node by type name or key (e.g. "Model", "transform"). */
+export function findComponent(node, name) {
+    var _a;
+    return (_a = findComponentEntry(node, name)) === null || _a === void 0 ? void 0 : _a[1];
+}
+/** Find a component entry [key, data] by type name or key — use when you need the key for mutations. */
+export function findComponentEntry(node, name) {
+    if (!(node === null || node === void 0 ? void 0 : node.components))
+        return undefined;
+    // Direct key match
+    const direct = node.components[name];
+    if (direct === null || direct === void 0 ? void 0 : direct.type)
+        return [name, direct];
+    // Case-insensitive key + type scan
+    const normalized = name.toLowerCase();
+    for (const [key, comp] of Object.entries(node.components)) {
+        if (!(comp === null || comp === void 0 ? void 0 : comp.type))
+            continue;
+        if (key.toLowerCase() === normalized || comp.type.toLowerCase() === normalized) {
+            return [key, comp];
+        }
+    }
+    return undefined;
+}
+/** Check if a node has a component of the given type. */
+export function hasComponent(node, typeName) {
+    return findComponentEntry(node, typeName) !== undefined;
+}

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

@@ -0,0 +1,13 @@
+/**
+ * Shared click-valid pattern: tracks pointer down → move → up
+ * to distinguish clicks from drags. Returns handlers to spread onto a group.
+ */
+export declare function useClickValid(enabled: boolean, onValidClick: (e: any) => void): {
+    onPointerDown: undefined;
+    onPointerMove: undefined;
+    onPointerUp: undefined;
+} | {
+    onPointerDown: (e: any) => void;
+    onPointerMove: () => void;
+    onPointerUp: (e: any) => void;
+};

package/dist/tools/prefabeditor/useClickValid.js

@@ -0,0 +1,21 @@
+import { useRef } from "react";
+/**
+ * Shared click-valid pattern: tracks pointer down → move → up
+ * to distinguish clicks from drags. Returns handlers to spread onto a group.
+ */
+export function useClickValid(enabled, onValidClick) {
+    const clickValid = useRef(false);
+    if (!enabled)
+        return { onPointerDown: undefined, onPointerMove: undefined, onPointerUp: undefined };
+    return {
+        onPointerDown: (e) => { e.stopPropagation(); clickValid.current = true; },
+        onPointerMove: () => { clickValid.current = false; },
+        onPointerUp: (e) => {
+            if (clickValid.current) {
+                e.stopPropagation();
+                onValidClick(e);
+            }
+            clickValid.current = false;
+        }
+    };
+}

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

@@ -21,6 +21,8 @@ export declare function decompose(m: Matrix4): {
     rotation: [number, number, number];
     scale: [number, number, number];
 };
+/** Build a local Matrix4 from position/rotation/scale arrays. */
+export declare function composeTransform(position?: [number, number, number], rotation?: [number, number, number], scale?: [number, number, number]): Matrix4;
 /** Compute the parent world matrix for a node using the normalized store data */
 export declare function computeParentWorldMatrix(state: {
     nodesById: Record<string, {

package/dist/tools/prefabeditor/utils.js

@@ -7,6 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { findComponent } from "./types";
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
 import { Box3, Euler, Matrix4, PerspectiveCamera, Quaternion, Vector3 } from 'three';
 /** Save scene JSON, showing a Save As dialog when supported */
@@ -129,9 +130,13 @@ export function decompose(m) {
         scale: [s.x, s.y, s.z],
     };
 }
+/** Build a local Matrix4 from position/rotation/scale arrays. */
+export function composeTransform(position = [0, 0, 0], rotation = [0, 0, 0], scale = [1, 1, 1]) {
+    return new Matrix4().compose(new Vector3(...position), new Quaternion().setFromEuler(new Euler(...rotation)), new Vector3(...scale));
+}
 /** Compute the parent world matrix for a node using the normalized store data */
 export function computeParentWorldMatrix(state, targetId) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a;
     const parentWorld = new Matrix4();
     const chain = [];
     let currentId = state.parentIdById[targetId];
@@ -140,8 +145,8 @@ export function computeParentWorldMatrix(state, targetId) {
         currentId = state.parentIdById[currentId];
     }
     for (const nodeId of chain) {
-        const transform = (_c = (_b = (_a = state.nodesById[nodeId]) === null || _a === void 0 ? void 0 : _a.components) === null || _b === void 0 ? void 0 : _b.transform) === null || _c === void 0 ? void 0 : _c.properties;
-        parentWorld.multiply(new Matrix4().compose(new Vector3(...((_d = transform === null || transform === void 0 ? void 0 : transform.position) !== null && _d !== void 0 ? _d : [0, 0, 0])), new Quaternion().setFromEuler(new Euler(...((_e = transform === null || transform === void 0 ? void 0 : transform.rotation) !== null && _e !== void 0 ? _e : [0, 0, 0]))), new Vector3(...((_f = transform === null || transform === void 0 ? void 0 : transform.scale) !== null && _f !== void 0 ? _f : [1, 1, 1]))));
+        const transform = (_a = findComponent(state.nodesById[nodeId], "Transform")) === null || _a === void 0 ? void 0 : _a.properties;
+        parentWorld.multiply(composeTransform(transform === null || transform === void 0 ? void 0 : transform.position, transform === null || transform === void 0 ? void 0 : transform.rotation, transform === null || transform === void 0 ? void 0 : transform.scale));
     }
     return parentWorld;
 }
@@ -150,46 +155,40 @@ export function regenerateIds(node) {
     var _a;
     return Object.assign(Object.assign({}, node), { id: crypto.randomUUID(), children: (_a = node.children) === null || _a === void 0 ? void 0 : _a.map(regenerateIds) });
 }
-/** Create a GameObject node for a 3D model file */
-export function createModelNode(filename, name) {
+function createNode(path, name, extraComponents) {
     return {
         id: crypto.randomUUID(),
-        name: name !== null && name !== void 0 ? name : filename.replace(/^.*[\/]/, '').replace(/\.[^.]+$/, ''),
-        components: {
-            transform: {
+        name: name !== null && name !== void 0 ? name : path.replace(/^.*[\/]/, '').replace(/\.[^.]+$/, ''),
+        components: Object.assign({ transform: {
                 type: 'Transform',
                 properties: { position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1] }
-            },
-            model: {
-                type: 'Model',
-                properties: {
-                    filename,
-                    instanced: false,
-                    repeat: false,
-                    repeatAxes: [{ axis: 'x', count: 1, offset: 1 }]
-                }
+            } }, extraComponents)
+    };
+}
+/** Create a GameObject node for a 3D model file */
+export function createModelNode(filename, name) {
+    return createNode(filename, name, {
+        model: {
+            type: 'Model',
+            properties: {
+                filename,
+                instanced: false,
+                repeat: false,
+                repeatAxes: [{ axis: 'x', count: 1, offset: 1 }]
             }
         }
-    };
+    });
 }
 /** Create a GameObject node for an image as a textured plane */
 export function createImageNode(texturePath, name) {
-    return {
-        id: crypto.randomUUID(),
-        name: name !== null && name !== void 0 ? name : texturePath.replace(/^.*[\/]/, '').replace(/\.[^.]+$/, ''),
-        components: {
-            transform: {
-                type: 'Transform',
-                properties: { position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1] }
-            },
-            geometry: {
-                type: 'Geometry',
-                properties: { geometryType: 'plane', args: [1, 1] }
-            },
-            material: {
-                type: 'Material',
-                properties: { color: '#ffffff', texture: texturePath }
-            }
+    return createNode(texturePath, name, {
+        geometry: {
+            type: 'Geometry',
+            properties: { geometryType: 'plane', args: [1, 1] }
+        },
+        material: {
+            type: 'Material',
+            properties: { color: '#ffffff', texture: texturePath }
         }
-    };
+    });
 }

package/package.json

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

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

@@ -1,16 +0,0 @@
-export interface EditorContextType {
-    editMode: boolean;
-    transformMode: "translate" | "rotate" | "scale";
-    setTransformMode: (mode: "translate" | "rotate" | "scale") => void;
-    scaleSnap: number;
-    setScaleSnap: (resolution: number) => void;
-    positionSnap: number;
-    setPositionSnap: (resolution: number) => void;
-    rotationSnap: number;
-    setRotationSnap: (resolution: number) => void;
-    onFocusNode?: (nodeId: string) => void;
-    onScreenshot?: () => void;
-    onExportGLB?: () => void;
-}
-export declare const EditorContext: import("react").Context<EditorContextType | null>;
-export declare function useEditorContext(): EditorContextType;

package/dist/tools/prefabeditor/EditorContext.js

@@ -1,9 +0,0 @@
-import { createContext, useContext } from "react";
-export const EditorContext = createContext(null);
-export function useEditorContext() {
-    const context = useContext(EditorContext);
-    if (!context) {
-        throw new Error("useEditorContext must be used within EditorContext.Provider");
-    }
-    return context;
-}