react-three-game 0.0.42 → 0.0.45

package/src/tools/prefabeditor/components/ModelComponent.tsx

@@ -1,10 +1,20 @@
 import { ModelListViewer, SingleModelViewer } from '../../assetviewer/page';
 import { useEffect, useState, useMemo } from 'react';
 import { Component } from './ComponentRegistry';
-import { Label } from './Input';
+import { FieldRenderer, FieldDefinition } from './Input';
 import { GameObject } from '../types';
 
-function ModelComponentEditor({ component, node, onUpdate, basePath = "" }: { component: any; node?: GameObject; onUpdate: (newComp: any) => void; basePath?: string }) {
+function ModelPicker({
+    value,
+    onChange,
+    basePath,
+    nodeId
+}: {
+    value: string | undefined;
+    onChange: (v: string) => void;
+    basePath: string;
+    nodeId?: string;
+}) {
     const [modelFiles, setModelFiles] = useState<string[]>([]);
     const [showPicker, setShowPicker] = useState(false);
 
@@ -17,49 +27,60 @@ function ModelComponentEditor({ component, node, onUpdate, basePath = "" }: { co
     }, [basePath]);
 
     const handleModelSelect = (file: string) => {
-        // Remove leading slash for prefab compatibility
         const filename = file.startsWith('/') ? file.slice(1) : file;
-        onUpdate({ 'filename': filename });
+        onChange(filename);
+        setShowPicker(false);
     };
 
-    return <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-        <div>
-            <Label>Model File</Label>
-            <div style={{ maxHeight: 128, overflowY: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }}>
-                <SingleModelViewer file={component.properties.filename ? `/${component.properties.filename}` : undefined} basePath={basePath} />
-                <button
-                    onClick={() => setShowPicker(!showPicker)}
-                    style={{ padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }}
-                >
-                    {showPicker ? 'Hide' : 'Change'}
-                </button>
-                {showPicker && (
-                    <div style={{ position: 'fixed', left: '-10px', top: '50%', transform: 'translate(-100%, -50%)', background: 'rgba(0,0,0,0.9)', padding: 16, border: '1px solid rgba(34, 211, 238, 0.3)', maxHeight: '80vh', overflowY: 'auto', zIndex: 1000 }}>
-                        <ModelListViewer
-                            key={node?.id}
-                            files={modelFiles}
-                            selected={component.properties.filename ? `/${component.properties.filename}` : undefined}
-                            onSelect={(file) => {
-                                handleModelSelect(file);
-                                setShowPicker(false);
-                            }}
-                            basePath={basePath}
-                        />
-                    </div>
-                )}
-            </div>
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-            <input
-                type="checkbox"
-                id="instanced-checkbox"
-                checked={component.properties.instanced || false}
-                onChange={e => onUpdate({ instanced: e.target.checked })}
-                style={{ width: 12, height: 12 }}
-            />
-            <label htmlFor="instanced-checkbox" style={{ fontSize: '9px', color: 'rgba(34, 211, 238, 0.6)' }}>Instanced</label>
+    return (
+        <div style={{ maxHeight: 128, overflowY: 'auto', position: 'relative', display: 'flex', alignItems: 'center' }}>
+            <SingleModelViewer file={value ? `/${value}` : undefined} basePath={basePath} />
+            <button
+                onClick={() => setShowPicker(!showPicker)}
+                style={{ padding: '4px 8px', backgroundColor: '#1f2937', color: 'inherit', fontSize: 10, cursor: 'pointer', border: '1px solid rgba(34, 211, 238, 0.3)', marginTop: 4 }}
+            >
+                {showPicker ? 'Hide' : 'Change'}
+            </button>
+            {showPicker && (
+                <div style={{ position: 'fixed', left: '-10px', top: '50%', transform: 'translate(-100%, -50%)', background: 'rgba(0,0,0,0.9)', padding: 16, border: '1px solid rgba(34, 211, 238, 0.3)', maxHeight: '80vh', overflowY: 'auto', zIndex: 1000 }}>
+                    <ModelListViewer
+                        key={nodeId}
+                        files={modelFiles}
+                        selected={value ? `/${value}` : undefined}
+                        onSelect={handleModelSelect}
+                        basePath={basePath}
+                    />
+                </div>
+            )}
         </div>
-    </div>;
+    );
+}
+
+function ModelComponentEditor({ component, node, onUpdate, basePath = "" }: { component: any; node?: GameObject; onUpdate: (newComp: any) => void; basePath?: string }) {
+    const fields: FieldDefinition[] = [
+        {
+            name: 'filename',
+            type: 'custom',
+            label: 'Model File',
+            render: ({ value, onChange }) => (
+                <ModelPicker
+                    value={value}
+                    onChange={onChange}
+                    basePath={basePath}
+                    nodeId={node?.id}
+                />
+            ),
+        },
+        { name: 'instanced', type: 'boolean', label: 'Instanced' },
+    ];
+
+    return (
+        <FieldRenderer
+            fields={fields}
+            values={component.properties}
+            onChange={onUpdate}
+        />
+    );
 }
 
 // View for Model component

package/src/tools/prefabeditor/components/PhysicsComponent.tsx

@@ -2,7 +2,7 @@ import { RigidBody, RapierRigidBody } from "@react-three/rapier";
 import type { ReactNode } from 'react';
 import { useEffect, useRef } from 'react';
 import { Component } from "./ComponentRegistry";
-import { Label } from "./Input";
+import { FieldRenderer, FieldDefinition } from "./Input";
 import { Quaternion, Euler } from 'three';
 
 export interface PhysicsProps {
@@ -13,40 +13,36 @@ export interface PhysicsProps {
     friction?: number;
 }
 
-function PhysicsComponentEditor({ component, onUpdate }: { component: { properties: { type?: 'dynamic' | 'fixed'; collider?: string;[k: string]: any } }; onUpdate: (props: Partial<Record<string, any>>) => void }) {
-    const { type = 'dynamic', collider = 'hull' } = component.properties;
-
-    const selectStyle = {
-        width: '100%',
-        backgroundColor: 'rgba(0, 0, 0, 0.4)',
-        border: '1px solid rgba(34, 211, 238, 0.3)',
-        padding: '2px 4px',
-        fontSize: '10px',
-        color: 'rgba(165, 243, 252, 1)',
-        fontFamily: 'monospace',
-        outline: 'none',
-    };
+const physicsFields: FieldDefinition[] = [
+    {
+        name: 'type',
+        type: 'select',
+        label: 'Type',
+        options: [
+            { value: 'dynamic', label: 'Dynamic' },
+            { value: 'fixed', label: 'Fixed' },
+        ],
+    },
+    {
+        name: 'collider',
+        type: 'select',
+        label: 'Collider',
+        options: [
+            { value: 'hull', label: 'Hull (convex)' },
+            { value: 'trimesh', label: 'Trimesh (exact)' },
+            { value: 'cuboid', label: 'Cuboid (box)' },
+            { value: 'ball', label: 'Ball (sphere)' },
+        ],
+    },
+];
 
+function PhysicsComponentEditor({ component, onUpdate }: { component: { properties: { type?: 'dynamic' | 'fixed'; collider?: string;[k: string]: any } }; onUpdate: (props: Partial<Record<string, any>>) => void }) {
     return (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            <div>
-                <Label>Type</Label>
-                <select style={selectStyle} value={type} onChange={e => onUpdate({ type: e.target.value })}>
-                    <option value="dynamic">Dynamic</option>
-                    <option value="fixed">Fixed</option>
-                </select>
-            </div>
-
-            <div>
-                <Label>Collider</Label>
-                <select style={selectStyle} value={collider} onChange={e => onUpdate({ collider: e.target.value })}>
-                    <option value="hull">Hull (convex)</option>
-                    <option value="trimesh">Trimesh (exact)</option>
-                    <option value="cuboid">Cuboid (box)</option>
-                    <option value="ball">Ball (sphere)</option>
-                </select>
-            </div>
-        </div>
+        <FieldRenderer
+            fields={physicsFields}
+            values={component.properties}
+            onChange={onUpdate}
+        />
     );
 }
 

package/src/tools/prefabeditor/components/SpotLightComponent.tsx

@@ -1,72 +1,24 @@
 import { Component } from "./ComponentRegistry";
 import { useRef, useEffect } from "react";
-import { Input, Label } from "./Input";
+import { FieldRenderer, FieldDefinition } from "./Input";
 
-function SpotLightComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
-    const props = {
-        color: component.properties.color ?? '#ffffff',
-        intensity: component.properties.intensity ?? 1.0,
-        angle: component.properties.angle ?? Math.PI / 6,
-        penumbra: component.properties.penumbra ?? 0.5,
-        distance: component.properties.distance ?? 100,
-        castShadow: component.properties.castShadow ?? true
-    };
-
-    const textInputStyle = {
-        flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.4)',
-        border: '1px solid rgba(34, 211, 238, 0.3)',
-        padding: '2px 4px',
-        fontSize: '10px',
-        color: 'rgba(165, 243, 252, 1)',
-        fontFamily: 'monospace',
-        outline: 'none',
-    };
+const spotLightFields: FieldDefinition[] = [
+    { name: 'color', type: 'color', label: 'Color' },
+    { name: 'intensity', type: 'number', label: 'Intensity', step: 0.1, min: 0 },
+    { name: 'angle', type: 'number', label: 'Angle', step: 0.1, min: 0, max: Math.PI },
+    { name: 'penumbra', type: 'number', label: 'Penumbra', step: 0.1, min: 0, max: 1 },
+    { name: 'distance', type: 'number', label: 'Distance', step: 1, min: 0 },
+    { name: 'castShadow', type: 'boolean', label: 'Cast Shadow' },
+];
 
-    return <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-        <div>
-            <Label>Color</Label>
-            <div style={{ display: 'flex', gap: 2 }}>
-                <input
-                    type="color"
-                    style={{ height: 20, width: 20, backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }}
-                    value={props.color}
-                    onChange={e => onUpdate({ ...component.properties, color: e.target.value })}
-                />
-                <input
-                    type="text"
-                    style={textInputStyle}
-                    value={props.color}
-                    onChange={e => onUpdate({ ...component.properties, color: e.target.value })}
-                />
-            </div>
-        </div>
-        <div>
-            <Label>Intensity</Label>
-            <Input step="0.1" value={props.intensity} onChange={value => onUpdate({ ...component.properties, intensity: value })} />
-        </div>
-        <div>
-            <Label>Angle</Label>
-            <Input step="0.1" min={0} max={Math.PI} value={props.angle} onChange={value => onUpdate({ ...component.properties, angle: value })} />
-        </div>
-        <div>
-            <Label>Penumbra</Label>
-            <Input step="0.1" min={0} max={1} value={props.penumbra} onChange={value => onUpdate({ ...component.properties, penumbra: value })} />
-        </div>
-        <div>
-            <Label>Distance</Label>
-            <Input step="1" min={0} value={props.distance} onChange={value => onUpdate({ ...component.properties, distance: value })} />
-        </div>
-        <div>
-            <Label>Cast Shadow</Label>
-            <input
-                type="checkbox"
-                style={{ height: 16, width: 16, backgroundColor: 'rgba(0, 0, 0, 0.4)', border: '1px solid rgba(34, 211, 238, 0.3)', cursor: 'pointer' }}
-                checked={props.castShadow}
-                onChange={e => onUpdate({ ...component.properties, castShadow: e.target.checked })}
-            />
-        </div>
-    </div>;
+function SpotLightComponentEditor({ component, onUpdate }: { component: any; onUpdate: (newComp: any) => void }) {
+    return (
+        <FieldRenderer
+            fields={spotLightFields}
+            values={component.properties}
+            onChange={onUpdate}
+        />
+    );
 }
 
 function SpotLightView({ properties, editMode }: { properties: any; editMode?: boolean }) {

package/src/tools/prefabeditor/components/TransformComponent.tsx

@@ -1,5 +1,5 @@
 import { Component } from "./ComponentRegistry";
-import { Vector3Input, Label } from "./Input";
+import { FieldRenderer, FieldDefinition, Label } from "./Input";
 import { useEditorContext } from "../EditorContext";
 
 const buttonStyle = {
@@ -13,65 +13,92 @@ const buttonStyle = {
     flex: 1,
 };
 
-function TransformComponentEditor({ component, onUpdate, transformMode, setTransformMode }: {
+function TransformModeSelector({
+    transformMode,
+    setTransformMode,
+    snapResolution,
+    setSnapResolution
+}: {
+    transformMode: "translate" | "rotate" | "scale";
+    setTransformMode: (m: "translate" | "rotate" | "scale") => void;
+    snapResolution: number;
+    setSnapResolution: (v: number) => void;
+}) {
+    return (
+        <div style={{ marginBottom: 8 }}>
+            <Label>Transform Mode {snapResolution > 0 && `(Snap: ${snapResolution})`}</Label>
+            <div style={{ display: 'flex', gap: 6 }}>
+                {["translate", "rotate", "scale"].map(mode => {
+                    const isActive = transformMode === mode;
+                    return (
+                        <button
+                            key={mode}
+                            onClick={() => setTransformMode(mode as any)}
+                            style={{
+                                ...buttonStyle,
+                                background: isActive ? 'rgba(255,255,255,0.10)' : 'transparent',
+                            }}
+                            onPointerEnter={(e) => {
+                                if (!isActive) e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                            }}
+                            onPointerLeave={(e) => {
+                                if (!isActive) e.currentTarget.style.background = 'transparent';
+                            }}
+                        >
+                            {mode}
+                        </button>
+                    );
+                })}
+            </div>
+            <div style={{ marginTop: 6 }}>
+                <button
+                    onClick={() => setSnapResolution(snapResolution > 0 ? 0 : 0.1)}
+                    style={{
+                        ...buttonStyle,
+                        background: snapResolution > 0 ? 'rgba(255,255,255,0.10)' : 'transparent',
+                        width: '100%',
+                    }}
+                    onPointerEnter={(e) => {
+                        if (snapResolution === 0) e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
+                    }}
+                    onPointerLeave={(e) => {
+                        if (snapResolution === 0) e.currentTarget.style.background = 'transparent';
+                    }}
+                >
+                    Snap: {snapResolution > 0 ? `ON (${snapResolution})` : 'OFF'}
+                </button>
+            </div>
+        </div>
+    );
+}
+
+function TransformComponentEditor({ component, onUpdate }: {
     component: any;
     onUpdate: (newComp: any) => void;
-    transformMode?: "translate" | "rotate" | "scale";
-    setTransformMode?: (m: "translate" | "rotate" | "scale") => void;
 }) {
-    const { snapResolution, setSnapResolution } = useEditorContext();
+    const { transformMode, setTransformMode, snapResolution, setSnapResolution } = useEditorContext();
 
-    return <div style={{ display: 'flex', flexDirection: 'column' }}>
-        {transformMode && setTransformMode && (
-            <div style={{ marginBottom: 8 }}>
-                <Label>Transform Mode {snapResolution > 0 && `(Snap: ${snapResolution})`}</Label>
-                <div style={{ display: 'flex', gap: 6 }}>
-                    {["translate", "rotate", "scale"].map(mode => {
-                        const isActive = transformMode === mode;
-                        return (
-                            <button
-                                key={mode}
-                                onClick={() => setTransformMode(mode as any)}
-                                style={{
-                                    ...buttonStyle,
-                                    background: isActive ? 'rgba(255,255,255,0.10)' : 'transparent',
-                                }}
-                                onPointerEnter={(e) => {
-                                    if (!isActive) e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
-                                }}
-                                onPointerLeave={(e) => {
-                                    if (!isActive) e.currentTarget.style.background = 'transparent';
-                                }}
-                            >
-                                {mode}
-                            </button>
-                        );
-                    })}
-                </div>
-                <div style={{ marginTop: 6 }}>
-                    <button
-                        onClick={() => setSnapResolution(snapResolution > 0 ? 0 : 0.1)}
-                        style={{
-                            ...buttonStyle,
-                            background: snapResolution > 0 ? 'rgba(255,255,255,0.10)' : 'transparent',
-                            width: '100%',
-                        }}
-                        onPointerEnter={(e) => {
-                            if (snapResolution === 0) e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
-                        }}
-                        onPointerLeave={(e) => {
-                            if (snapResolution === 0) e.currentTarget.style.background = 'transparent';
-                        }}
-                    >
-                        Snap: {snapResolution > 0 ? `ON (${snapResolution})` : 'OFF'}
-                    </button>
-                </div>
-            </div>
-        )}
-        <Vector3Input label="Position" value={component.properties.position} onChange={v => onUpdate({ position: v })} snap={snapResolution} />
-        <Vector3Input label="Rotation" value={component.properties.rotation} onChange={v => onUpdate({ rotation: v })} snap={snapResolution} />
-        <Vector3Input label="Scale" value={component.properties.scale} onChange={v => onUpdate({ scale: v })} snap={snapResolution} />
-    </div>;
+    const fields: FieldDefinition[] = [
+        { name: 'position', type: 'vector3', label: 'Position', snap: snapResolution },
+        { name: 'rotation', type: 'vector3', label: 'Rotation', snap: snapResolution },
+        { name: 'scale', type: 'vector3', label: 'Scale', snap: snapResolution },
+    ];
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <TransformModeSelector
+                transformMode={transformMode}
+                setTransformMode={setTransformMode}
+                snapResolution={snapResolution}
+                setSnapResolution={setSnapResolution}
+            />
+            <FieldRenderer
+                fields={fields}
+                values={component.properties}
+                onChange={onUpdate}
+            />
+        </div>
+    );
 }
 
 const TransformComponent: Component = {

package/src/tools/prefabeditor/page.tsx

@@ -2,7 +2,7 @@ import PrefabEditor from "./PrefabEditor";
 
 
 export default function PrefabEditorPage() {
-    return <div className="w-screen h-screen">
+    return <div style={{ width: '100%', height: '100%' }}>
         <PrefabEditor>
             <directionalLight position={[5, 10, 7.5]} intensity={1} castShadow />
         </PrefabEditor>