react-three-game 0.0.85 → 0.0.87

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

@@ -3,9 +3,9 @@ import { useEffect, useRef } from 'react';
 import { useThree } from '@react-three/fiber';
 import { SoundPicker } from '../../assetviewer/page';
 import { sound as soundManager } from '../../../helpers/SoundManager';
+import { useAssetRuntime, useEntityRuntime } from '../assetRuntime';
 import { gameEvents } from '../GameEvents';
-import { useAssetRuntime, useEntityRuntime } from '../runtime';
-import { BooleanField, EventField, FieldGroup, FieldRenderer, ListEditor, NumberField, SelectField } from './Input';
+import { BooleanField, FieldGroup, FieldRenderer, ListEditor, NumberField, SelectField, StringField } from './Input';
 import { colors } from '../styles';
 import { AudioListener } from 'three';
 const CLIP_MODE_OPTIONS = [
@@ -63,6 +63,21 @@ function pickClip(paths, mode, sequenceIndexRef) {
     }
     return paths[Math.floor(Math.random() * paths.length)];
 }
+function payloadMatchesNode(nodeId, payload) {
+    if (!nodeId || !payload || typeof payload !== 'object') {
+        return true;
+    }
+    const eventPayload = payload;
+    const relatedNodeIds = [
+        eventPayload.nodeId,
+        eventPayload.sourceEntityId,
+        eventPayload.sourceNodeId,
+        eventPayload.targetEntityId,
+        eventPayload.targetNodeId,
+        eventPayload.instanceEntityId,
+    ].filter((value) => typeof value === 'string');
+    return relatedNodeIds.length > 0 ? relatedNodeIds.includes(nodeId) : true;
+}
 function SoundComponentEditor({ component, onUpdate, basePath = '' }) {
     const clips = Array.isArray(component.properties.clips)
         ? component.properties.clips.map((clip) => typeof clip === 'string' ? clip : '')
@@ -84,7 +99,7 @@ function SoundComponentEditor({ component, onUpdate, basePath = '' }) {
     const removeClip = (index) => {
         setClips(clips.filter((_, clipIndex) => clipIndex !== index));
     };
-    return (_jsxs(FieldGroup, { children: [_jsx(EventField, { name: "eventName", label: "Listen Event", values: component.properties, onChange: onUpdate, placeholder: "click" }), _jsx(FieldRenderer, { fields: [
+    return (_jsxs(FieldGroup, { children: [_jsx(StringField, { name: "eventName", label: "Listen Event", values: component.properties, onChange: onUpdate, placeholder: "player:footstep" }), _jsx(FieldRenderer, { fields: [
                     {
                         name: 'clipMode',
                         label: 'Clip Mode',
@@ -115,14 +130,6 @@ function SoundComponentEditor({ component, onUpdate, basePath = '' }) {
                             { value: 'exponential', label: 'Exponential' },
                         ] })] })) : null, _jsx(BooleanField, { name: "randomizePitch", label: "Random Pitch", values: component.properties, onChange: onUpdate, fallback: false }), randomizePitch ? (_jsxs(_Fragment, { children: [_jsx(NumberField, { name: "minPitch", label: "Min Pitch", values: component.properties, onChange: onUpdate, fallback: 0.96, step: 0.01, min: 0.1 }), _jsx(NumberField, { name: "maxPitch", label: "Max Pitch", values: component.properties, onChange: onUpdate, fallback: 1.04, step: 0.01, min: 0.1 })] })) : (_jsx(NumberField, { name: "pitch", label: "Pitch", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.01, min: 0.1 })), _jsx(BooleanField, { name: "randomizeVolume", label: "Random Volume", values: component.properties, onChange: onUpdate, fallback: false }), randomizeVolume ? (_jsxs(_Fragment, { children: [_jsx(NumberField, { name: "minVolume", label: "Min Volume", values: component.properties, onChange: onUpdate, fallback: 0.9, step: 0.01, min: 0 }), _jsx(NumberField, { name: "maxVolume", label: "Max Volume", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.01, min: 0 })] })) : (_jsx(NumberField, { name: "volume", label: "Volume", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.01, min: 0 }))] }));
 }
-function payloadMatchesNode(nodeId, payload) {
-    if (!nodeId || !payload || typeof payload !== 'object')
-        return true;
-    const eventPayload = payload;
-    const ids = [eventPayload.sourceEntityId, eventPayload.targetEntityId, eventPayload.instanceEntityId];
-    const hasEntityIds = ids.some(id => typeof id === 'string');
-    return hasEntityIds ? ids.includes(nodeId) : true;
-}
 function SoundComponentView({ properties, children }) {
     const { getSound } = useAssetRuntime();
     const { editMode, nodeId } = useEntityRuntime();

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

@@ -3,7 +3,7 @@ import { useHelper } from "@react-three/drei";
 import { useRef, useEffect } from "react";
 import { BooleanField, ColorField, Label, NumberField, Vector3Input } from "./Input";
 import { SpotLightHelper } from "three";
-import { useAssetRuntime, useEntityRuntime } from "../runtime";
+import { useAssetRuntime, useEntityRuntime } from "../assetRuntime";
 import { useFrame } from "@react-three/fiber";
 import { TexturePicker } from "../../assetviewer/page";
 import { LightSection, ShadowBiasField, mergeWithDefaults } from "./lightUtils";

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

@@ -11,8 +11,8 @@ import DirectionalLightComponent from './DirectionalLightComponent';
 import AmbientLightComponent from './AmbientLightComponent';
 import EnvironmentComponent from './EnvironmentComponent';
 import CameraComponent from './CameraComponent';
-import ClickComponent from './ClickComponent';
 import SoundComponent from './SoundComponent';
+import DataComponent from './DataComponent';
 export const builtinComponents = [
     TransformComponent,
     GeometryComponent,
@@ -27,6 +27,6 @@ export const builtinComponents = [
     AmbientLightComponent,
     EnvironmentComponent,
     CameraComponent,
-    ClickComponent,
     SoundComponent,
+    DataComponent,
 ];

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

@@ -29,4 +29,5 @@ export declare function findComponent(node: ComponentHost | null | undefined, na
 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 declare function getNodeUserData(node: GameObject | null | undefined): Record<string, unknown>;
 export {};

package/dist/tools/prefabeditor/types.js

@@ -1,3 +1,7 @@
+const RESERVED_USER_DATA_KEYS = new Set([
+    'prefabNodeId',
+    'prefabNodeName',
+]);
 /** Find a component on a node by type name or key (e.g. "Model", "transform"). */
 export function findComponent(node, name) {
     var _a;
@@ -26,3 +30,17 @@ export function findComponentEntry(node, name) {
 export function hasComponent(node, typeName) {
     return findComponentEntry(node, typeName) !== undefined;
 }
+export function getNodeUserData(node) {
+    var _a, _b;
+    const data = (_b = (_a = findComponent(node, 'Data')) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.data;
+    if (!data || typeof data !== 'object' || Array.isArray(data)) {
+        return {};
+    }
+    return Object.entries(data).reduce((result, [key, value]) => {
+        if (!key.trim() || RESERVED_USER_DATA_KEYS.has(key) || value === undefined) {
+            return result;
+        }
+        result[key] = value;
+        return result;
+    }, {});
+}

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

@@ -0,0 +1,27 @@
+import type { ThreeEvent } from "@react-three/fiber";
+export type PointerHandler<T> = (event: ThreeEvent<PointerEvent>, entity: T) => void;
+export interface PointerEventHandlers<T> {
+    onClick?: PointerHandler<T>;
+    onPointerDown?: PointerHandler<T>;
+    onPointerUp?: PointerHandler<T>;
+    onPointerMove?: PointerHandler<T>;
+    onPointerEnter?: PointerHandler<T>;
+    onPointerLeave?: PointerHandler<T>;
+    onPointerOver?: PointerHandler<T>;
+    onPointerOut?: PointerHandler<T>;
+}
+export interface UsePointerEventsOptions<T> extends PointerEventHandlers<T> {
+    enabled: boolean;
+    entity: T | null | undefined;
+}
+export declare function hasPointerEventHandlers<T>(handlers: PointerEventHandlers<T>): boolean;
+export declare function usePointerEvents<T>({ enabled, entity, onClick, onPointerDown, onPointerUp, onPointerMove, onPointerEnter, onPointerLeave, onPointerOver, onPointerOut, }: UsePointerEventsOptions<T>): {
+    onClick: ((event: ThreeEvent<PointerEvent>) => void) | undefined;
+    onPointerDown: ((event: ThreeEvent<PointerEvent>) => void) | undefined;
+    onPointerMove: ((event: ThreeEvent<PointerEvent>) => void) | undefined;
+    onPointerUp: ((event: ThreeEvent<PointerEvent>) => void) | undefined;
+    onPointerEnter: ((event: ThreeEvent<PointerEvent>) => void) | undefined;
+    onPointerLeave: ((event: ThreeEvent<PointerEvent>) => void) | undefined;
+    onPointerOver: ((event: ThreeEvent<PointerEvent>) => void) | undefined;
+    onPointerOut: ((event: ThreeEvent<PointerEvent>) => void) | undefined;
+};

package/dist/tools/prefabeditor/usePointerEvents.js

@@ -0,0 +1,52 @@
+export function hasPointerEventHandlers(handlers) {
+    return Boolean(handlers.onClick
+        || handlers.onPointerDown
+        || handlers.onPointerUp
+        || handlers.onPointerMove
+        || handlers.onPointerEnter
+        || handlers.onPointerLeave
+        || handlers.onPointerOver
+        || handlers.onPointerOut);
+}
+export function usePointerEvents({ enabled, entity, onClick, onPointerDown, onPointerUp, onPointerMove, onPointerEnter, onPointerLeave, onPointerOver, onPointerOut, }) {
+    if (!enabled) {
+        return {
+            onClick: undefined,
+            onPointerDown: undefined,
+            onPointerMove: undefined,
+            onPointerUp: undefined,
+            onPointerEnter: undefined,
+            onPointerLeave: undefined,
+            onPointerOver: undefined,
+            onPointerOut: undefined,
+        };
+    }
+    const forward = (handler) => {
+        if (!handler)
+            return undefined;
+        return (event) => {
+            event.stopPropagation();
+            if (!entity)
+                return;
+            handler(event, entity);
+        };
+    };
+    const forwardMove = onPointerMove
+        ? (event) => {
+            event.stopPropagation();
+            if (!entity)
+                return;
+            onPointerMove(event, entity);
+        }
+        : undefined;
+    return {
+        onClick: forward(onClick),
+        onPointerDown: forward(onPointerDown),
+        onPointerMove: forwardMove,
+        onPointerUp: forward(onPointerUp),
+        onPointerEnter: forward(onPointerEnter),
+        onPointerLeave: forward(onPointerLeave),
+        onPointerOver: forward(onPointerOver),
+        onPointerOut: forward(onPointerOut),
+    };
+}

package/package.json

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

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

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

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

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { gameEvents } from '../GameEvents';
-import { useEntityRuntime } from '../runtime';
-import { EventField, FieldGroup } from './Input';
-function ClickComponentEditor({ component, onUpdate }) {
-    return (_jsxs(FieldGroup, { children: [_jsx("div", { style: { fontSize: 12, opacity: 0.8 }, children: "Emits a game event in play mode when this entity is clicked." }), _jsx(EventField, { name: "eventName", label: "Emit Event", values: component.properties, onChange: onUpdate, placeholder: "click" })] }));
-}
-function ClickComponentView({ children, properties }) {
-    const clickValid = useRef(false);
-    const { editMode, nodeId } = useEntityRuntime();
-    const eventName = (properties === null || properties === void 0 ? void 0 : properties.eventName) || 'click';
-    const emitClick = (event) => {
-        if (!nodeId)
-            return;
-        gameEvents.emit(eventName, {
-            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;
-        }, onClick: (event) => {
-            event.stopPropagation();
-        }, 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: {
-        eventName: 'click',
-    },
-};
-export default ClickComponent;

package/dist/tools/prefabeditor/runtime.js

@@ -1,184 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from "react";
-import { getComponentDef } from "./components/ComponentRegistry";
-import { createScene } from "./scene";
-export const AssetRuntimeContext = createContext(null);
-const EntityRuntimeContext = createContext(null);
-export function useAssetRuntime() {
-    const ctx = useContext(AssetRuntimeContext);
-    if (!ctx)
-        throw new Error("useAssetRuntime must be used inside <PrefabRoot>");
-    return ctx;
-}
-export function useEntityRuntime() {
-    const ctx = useContext(EntityRuntimeContext);
-    if (!ctx)
-        throw new Error("useEntityRuntime must be used inside a component View rendered by <PrefabRoot>");
-    return ctx;
-}
-export function useEntityObjectRef() {
-    const { getObject } = useEntityRuntime();
-    return useMemo(() => ({ get current() { return getObject(); } }), [getObject]);
-}
-export function useEntityRigidBodyRef() {
-    const { getRigidBody } = useEntityRuntime();
-    return useMemo(() => ({ get current() { return getRigidBody(); } }), [getRigidBody]);
-}
-export function EntityRuntimeScope({ nodeId, editMode, isSelected, children, }) {
-    const asset = useContext(AssetRuntimeContext);
-    if (!asset)
-        throw new Error("EntityRuntimeScope must be used inside <PrefabRoot>");
-    const value = useMemo(() => ({
-        nodeId,
-        editMode,
-        isSelected,
-        getObject: () => asset.getObject(nodeId),
-        getRigidBody: () => asset.getRigidBody(nodeId),
-    }), [asset, editMode, isSelected, nodeId]);
-    return _jsx(EntityRuntimeContext.Provider, { value: value, children: children });
-}
-export function createRuntimeEngine({ store, getObject, getRigidBody, }) {
-    const scene = createScene({
-        getRootId: () => store.getState().rootId,
-        getNode: (id) => { var _a; return (_a = store.getState().nodesById[id]) !== null && _a !== void 0 ? _a : null; },
-        getChildIds: (id) => { var _a; return (_a = store.getState().childIdsById[id]) !== null && _a !== void 0 ? _a : []; },
-        getParentId: (id) => { var _a; return (_a = store.getState().parentIdById[id]) !== null && _a !== void 0 ? _a : null; },
-        updateNode: (id, update) => store.getState().updateNode(id, update),
-        updateNodes: (updates) => {
-            store.getState().updateNodes(Object.entries(updates).map(([id, update]) => ({ id, update })));
-        },
-        addNode: (node, options) => {
-            var _a;
-            const parentId = (_a = options === null || options === void 0 ? void 0 : options.parentId) !== null && _a !== void 0 ? _a : store.getState().rootId;
-            store.getState().addChild(parentId, node);
-            return node.id;
-        },
-        removeNode: (id) => store.getState().deleteNode(id),
-        getObject,
-        getRigidBody,
-    });
-    // key = `${nodeId}:${componentKey}:${componentType}`
-    const instances = new Map();
-    let active = false;
-    let dirty = true;
-    let lastRevision = store.getState().revision;
-    const unsubscribe = store.subscribe((state) => {
-        if (state.revision === lastRevision)
-            return;
-        lastRevision = state.revision;
-        dirty = true;
-    });
-    function destroy(key) {
-        var _a, _b;
-        const record = instances.get(key);
-        if (!record)
-            return;
-        try {
-            (_b = (_a = record.instance).destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
-        }
-        catch (error) {
-            console.error(`[runtime] destroy ${key}`, error);
-        }
-        instances.delete(key);
-    }
-    function sync() {
-        const state = store.getState();
-        const live = new Set();
-        let hasPendingMount = false;
-        const visit = (nodeId) => {
-            var _a, _b, _c;
-            const node = state.nodesById[nodeId];
-            if (!node)
-                return;
-            if (!node.disabled && node.components) {
-                for (const componentKey in node.components) {
-                    const data = node.components[componentKey];
-                    if (!(data === null || data === void 0 ? void 0 : data.type))
-                        continue;
-                    const def = getComponentDef(data.type);
-                    if (!(def === null || def === void 0 ? void 0 : def.create))
-                        continue;
-                    const key = `${nodeId}:${componentKey}:${data.type}`;
-                    live.add(key);
-                    const object = getObject(nodeId);
-                    if (!object) {
-                        hasPendingMount = true;
-                        continue;
-                    }
-                    const rigidBody = getRigidBody(nodeId);
-                    const existing = instances.get(key);
-                    if (existing && existing.object === object && existing.rigidBody === rigidBody) {
-                        continue;
-                    }
-                    if (existing) {
-                        destroy(key);
-                    }
-                    const entity = scene.find(nodeId);
-                    const component = entity === null || entity === void 0 ? void 0 : entity.getComponent(componentKey);
-                    if (!entity || !component)
-                        continue;
-                    let instance;
-                    try {
-                        instance = (_a = def.create({ scene, component, object, rigidBody })) !== null && _a !== void 0 ? _a : {};
-                    }
-                    catch (error) {
-                        console.error(`[runtime] create ${key}`, error);
-                        continue;
-                    }
-                    instances.set(key, { instance, object, rigidBody });
-                    try {
-                        (_b = instance.start) === null || _b === void 0 ? void 0 : _b.call(instance);
-                    }
-                    catch (error) {
-                        console.error(`[runtime] start ${key}`, error);
-                    }
-                }
-            }
-            for (const childId of (_c = state.childIdsById[nodeId]) !== null && _c !== void 0 ? _c : [])
-                visit(childId);
-        };
-        visit(state.rootId);
-        for (const key of Array.from(instances.keys())) {
-            if (!live.has(key))
-                destroy(key);
-        }
-        dirty = hasPendingMount;
-    }
-    return {
-        tick(dt) {
-            if (!active)
-                return;
-            if (dirty)
-                sync();
-            for (const [key, record] of instances) {
-                if (!record.instance.update)
-                    continue;
-                try {
-                    record.instance.update(dt);
-                }
-                catch (error) {
-                    console.error(`[runtime] update ${key}`, error);
-                }
-            }
-        },
-        setActive(nextActive) {
-            if (active === nextActive)
-                return;
-            active = nextActive;
-            dirty = true;
-            if (!active) {
-                for (const key of Array.from(instances.keys()))
-                    destroy(key);
-            }
-        },
-        invalidate() {
-            dirty = true;
-        },
-        dispose() {
-            active = false;
-            for (const key of Array.from(instances.keys()))
-                destroy(key);
-            unsubscribe();
-        },
-    };
-}