react-three-game 0.0.17 → 0.0.19

package/src/tools/prefabeditor/InstanceProvider.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useMemo, useRef, useState, useEffect, useCallback } from "react";
 import { Merged } from '@react-three/drei';
-import * as THREE from 'three';
 import { InstancedRigidBodies } from "@react-three/rapier";
+import { Mesh, Matrix4, Object3D, Group } from "three";
 
 // --- Types ---
 export type InstanceData = {
@@ -13,7 +13,8 @@ export type InstanceData = {
     physics?: { type: 'dynamic' | 'fixed' };
 };
 
-function arrayEquals(a: number[], b: number[]) {
+// Helper functions for comparison
+function arrayEquals(a: number[], b: number[]): boolean {
     if (a === b) return true;
     if (a.length !== b.length) return false;
     for (let i = 0; i < a.length; i++) {
@@ -22,7 +23,7 @@ function arrayEquals(a: number[], b: number[]) {
     return true;
 }
 
-function instanceEquals(a: InstanceData, b: InstanceData) {
+function instanceEquals(a: InstanceData, b: InstanceData): boolean {
     return a.id === b.id &&
         a.meshPath === b.meshPath &&
         arrayEquals(a.position, b.position) &&
@@ -36,7 +37,7 @@ type GameInstanceContextType = {
     addInstance: (instance: InstanceData) => void;
     removeInstance: (id: string) => void;
     instances: InstanceData[];
-    meshes: Record<string, THREE.Mesh>;
+    meshes: Record<string, Mesh>;
     instancesMap?: Record<string, React.ComponentType<any>>;
     modelParts?: Record<string, number>;
 };
@@ -44,13 +45,14 @@ const GameInstanceContext = createContext<GameInstanceContextType | null>(null);
 
 export function GameInstanceProvider({
     children,
-    models
-    , onSelect, registerRef
+    models,
+    onSelect,
+    registerRef
 }: {
     children: React.ReactNode,
-    models: { [filename: string]: THREE.Object3D },
+    models: { [filename: string]: Object3D },
     onSelect?: (id: string | null) => void,
-    registerRef?: (id: string, obj: THREE.Object3D | null) => void,
+    registerRef?: (id: string, obj: Object3D | null) => void,
 }) {
     const [instances, setInstances] = useState<InstanceData[]>([]);
 
@@ -58,6 +60,7 @@ export function GameInstanceProvider({
         setInstances(prev => {
             const idx = prev.findIndex(i => i.id === instance.id);
             if (idx !== -1) {
+                // Update existing if changed
                 if (instanceEquals(prev[idx], instance)) {
                     return prev;
                 }
@@ -65,6 +68,7 @@ export function GameInstanceProvider({
                 copy[idx] = instance;
                 return copy;
             }
+            // Add new
             return [...prev, instance];
         });
     }, []);
@@ -76,27 +80,26 @@ export function GameInstanceProvider({
         });
     }, []);
 
-    // Flatten all model meshes once
+    // Flatten all model meshes once (models → flat mesh parts)
     const { flatMeshes, modelParts } = useMemo(() => {
-        const flatMeshes: Record<string, THREE.Mesh> = {};
+        const flatMeshes: Record<string, Mesh> = {};
         const modelParts: Record<string, number> = {};
 
         Object.entries(models).forEach(([modelKey, model]) => {
             const root = model;
             root.updateWorldMatrix(false, true);
-            const rootInverse = new THREE.Matrix4().copy(root.matrixWorld).invert();
+            const rootInverse = new Matrix4().copy(root.matrixWorld).invert();
 
             let partIndex = 0;
 
             root.traverse((obj: any) => {
                 if (obj.isMesh) {
                     const geom = obj.geometry.clone();
-
                     const relativeTransform = obj.matrixWorld.clone().premultiply(rootInverse);
                     geom.applyMatrix4(relativeTransform);
 
                     const partKey = `${modelKey}__${partIndex}`;
-                    flatMeshes[partKey] = new THREE.Mesh(geom, obj.material);
+                    flatMeshes[partKey] = new Mesh(geom, obj.material);
                     partIndex++;
                 }
             });
@@ -106,7 +109,7 @@ export function GameInstanceProvider({
         return { flatMeshes, modelParts };
     }, [models]);
 
-    // Group instances by meshPath + physics type
+    // Group instances by meshPath + physics type for batch rendering
     const grouped = useMemo(() => {
         const groups: Record<string, { physicsType: string, instances: InstanceData[] }> = {};
         for (const inst of instances) {
@@ -128,10 +131,10 @@ export function GameInstanceProvider({
                 modelParts
             }}
         >
-            {/* 1) Normal prefab hierarchy: NOT inside any <Merged> */}
+            {/* Render normal prefab hierarchy (non-instanced objects) */}
             {children}
 
-            {/* 2) Physics instanced groups: no <Merged>, just InstancedRigidBodies */}
+            {/* Render physics-enabled instanced groups using InstancedRigidBodies */}
             {Object.entries(grouped).map(([key, group]) => {
                 if (group.physicsType === 'none') return null;
                 const modelKey = group.instances[0].meshPath;
@@ -149,7 +152,7 @@ export function GameInstanceProvider({
                 );
             })}
 
-            {/* 3) Non-physics instanced visuals: own <Merged> per model */}
+            {/* Render non-physics instanced visuals using Merged (one per model type) */}
             {Object.entries(grouped).map(([key, group]) => {
                 if (group.physicsType !== 'none') return null;
 
@@ -157,8 +160,8 @@ export function GameInstanceProvider({
                 const partCount = modelParts[modelKey] || 0;
                 if (partCount === 0) return null;
 
-                // Restrict meshes to just this model's parts for this Merged
-                const meshesForModel: Record<string, THREE.Mesh> = {};
+                // Create mesh subset for this specific model
+                const meshesForModel: Record<string, Mesh> = {};
                 for (let i = 0; i < partCount; i++) {
                     const partKey = `${modelKey}__${i}`;
                     meshesForModel[partKey] = flatMeshes[partKey];
@@ -188,7 +191,7 @@ export function GameInstanceProvider({
     );
 }
 
-// Physics instancing stays the same
+// Render physics-enabled instances using InstancedRigidBodies
 function InstancedRigidGroup({
     group,
     modelKey,
@@ -198,7 +201,7 @@ function InstancedRigidGroup({
     group: { physicsType: string, instances: InstanceData[] },
     modelKey: string,
     partCount: number,
-    flatMeshes: Record<string, THREE.Mesh>
+    flatMeshes: Record<string, Mesh>
 }) {
     const instances = useMemo(
         () => group.instances.map(inst => ({
@@ -232,24 +235,33 @@ function InstancedRigidGroup({
     );
 }
 
-// Non-physics instanced visuals: per-instance group using Merged's Instance components
+// Render non-physics instances using Merged's per-instance groups
 function NonPhysicsInstancedGroup({
     modelKey,
     group,
     partCount,
-    instancesMap
-    , onSelect, registerRef
+    instancesMap,
+    onSelect,
+    registerRef
 }: {
     modelKey: string;
     group: { physicsType: string, instances: InstanceData[] };
     partCount: number;
     instancesMap: Record<string, React.ComponentType<any>>;
     onSelect?: (id: string | null) => void;
-    registerRef?: (id: string, obj: THREE.Object3D | null) => void;
+    registerRef?: (id: string, obj: Object3D | null) => void;
 }) {
     const clickValid = useRef(false);
-    const handlePointerDown = (e: any) => { e.stopPropagation(); clickValid.current = true; };
-    const handlePointerMove = () => { if (clickValid.current) clickValid.current = false; };
+
+    const handlePointerDown = (e: any) => {
+        e.stopPropagation();
+        clickValid.current = true;
+    };
+
+    const handlePointerMove = () => {
+        if (clickValid.current) clickValid.current = false;
+    };
+
     const handlePointerUp = (e: any, id: string) => {
         if (clickValid.current) {
             e.stopPropagation();
@@ -263,7 +275,7 @@ function NonPhysicsInstancedGroup({
             {group.instances.map(inst => (
                 <group
                     key={inst.id}
-                    ref={(el) => { registerRef?.(inst.id, el as unknown as THREE.Object3D | null); }}
+                    ref={(el) => { registerRef?.(inst.id, el as unknown as Object3D | null); }}
                     position={inst.position}
                     rotation={inst.rotation}
                     scale={inst.scale}
@@ -283,8 +295,8 @@ function NonPhysicsInstancedGroup({
 }
 
 
-// --- GameInstance: just registers an instance, renders nothing ---
-export const GameInstance = React.forwardRef<THREE.Group, {
+// GameInstance component: registers an instance for batch rendering (renders nothing itself)
+export const GameInstance = React.forwardRef<Group, {
     id: string;
     modelUrl: string;
     position: [number, number, number];
@@ -320,7 +332,6 @@ export const GameInstance = React.forwardRef<THREE.Group, {
         };
     }, [addInstance, removeInstance, instance]);
 
-
-    // No visual here – provider will render visuals for all instances
+    // No visual rendering - provider handles all instanced visuals
     return null;
 });

package/src/tools/prefabeditor/PrefabEditor.tsx

@@ -2,34 +2,29 @@
 
 import GameCanvas from "../../shared/GameCanvas";
 import { useState, useRef, useEffect } from "react";
-import { Group, } from "three";
-import { Prefab, } from "./types";
+import { Prefab } from "./types";
 import PrefabRoot from "./PrefabRoot";
 import { Physics } from "@react-three/rapier";
 import EditorUI from "./EditorUI";
+import { base, toolbar } from "./styles";
 
 const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }: { basePath?: string, initialPrefab?: Prefab, onPrefabChange?: (prefab: Prefab) => void, children?: React.ReactNode }) => {
     const [editMode, setEditMode] = useState(true);
     const [loadedPrefab, setLoadedPrefab] = useState<Prefab>(initialPrefab ?? {
-        "id": "prefab-default",
-        "name": "New Prefab",
-        "root": {
-            "id": "root",
-            "components": {
-                "transform": {
-                    "type": "Transform",
-                    "properties": {
-                        "position": [0, 0, 0],
-                        "rotation": [0, 0, 0],
-                        "scale": [1, 1, 1]
-                    }
+        id: "prefab-default",
+        name: "New Prefab",
+        root: {
+            id: "root",
+            components: {
+                transform: {
+                    type: "Transform",
+                    properties: { position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1] }
                 }
             }
         }
     });
     const [selectedId, setSelectedId] = useState<string | null>(null);
     const [transformMode, setTransformMode] = useState<"translate" | "rotate" | "scale">("translate");
-    const prefabRef = useRef<Group>(null);
 
     // Sync internal state with external initialPrefab prop
     useEffect(() => {
@@ -52,15 +47,11 @@ const PrefabEditor = ({ basePath, initialPrefab, onPrefabChange, children }: { b
                 <gridHelper args={[10, 10]} position={[0, -1, 0]} />
                 <PrefabRoot
                     data={loadedPrefab}
-                    ref={prefabRef}
-
-                    // props for edit mode
                     editMode={editMode}
                     onPrefabChange={updatePrefab}
                     selectedId={selectedId}
                     onSelect={setSelectedId}
                     transformMode={transformMode}
-                    setTransformMode={setTransformMode}
                     basePath={basePath}
                 />
                 {children}
@@ -98,189 +89,87 @@ const SaveDataPanel = ({
 }) => {
     const [history, setHistory] = useState<Prefab[]>([currentData]);
     const [historyIndex, setHistoryIndex] = useState(0);
-    const throttleTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-    const lastSavedDataRef = useRef<string>(JSON.stringify(currentData));
+    const throttleRef = useRef<NodeJS.Timeout | null>(null);
+    const lastDataRef = useRef<string>(JSON.stringify(currentData));
 
-    // Define undo/redo handlers
-    const handleUndo = () => {
+    const undo = () => {
         if (historyIndex > 0) {
             const newIndex = historyIndex - 1;
             setHistoryIndex(newIndex);
-            lastSavedDataRef.current = JSON.stringify(history[newIndex]);
+            lastDataRef.current = JSON.stringify(history[newIndex]);
             onDataChange(history[newIndex]);
         }
     };
 
-    const handleRedo = () => {
+    const redo = () => {
         if (historyIndex < history.length - 1) {
             const newIndex = historyIndex + 1;
             setHistoryIndex(newIndex);
-            lastSavedDataRef.current = JSON.stringify(history[newIndex]);
+            lastDataRef.current = JSON.stringify(history[newIndex]);
             onDataChange(history[newIndex]);
         }
     };
 
-    // Keyboard shortcuts for undo/redo
     useEffect(() => {
         const handleKeyDown = (e: KeyboardEvent) => {
-            // Undo: Ctrl+Z (Cmd+Z on Mac)
             if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
                 e.preventDefault();
-                handleUndo();
-            }
-            // Redo: Ctrl+Shift+Z or Ctrl+Y (Cmd+Shift+Z or Cmd+Y on Mac)
-            else if ((e.ctrlKey || e.metaKey) && (e.shiftKey && e.key === 'z' || e.key === 'y')) {
+                undo();
+            } else if ((e.ctrlKey || e.metaKey) && (e.shiftKey && e.key === 'z' || e.key === 'y')) {
                 e.preventDefault();
-                handleRedo();
+                redo();
             }
         };
-
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [historyIndex, history]);
 
-    // Throttled history update when currentData changes
     useEffect(() => {
-        const currentDataStr = JSON.stringify(currentData);
-
-        // Skip if data hasn't actually changed
-        if (currentDataStr === lastSavedDataRef.current) {
-            return;
-        }
+        const currentStr = JSON.stringify(currentData);
+        if (currentStr === lastDataRef.current) return;
 
-        // Clear existing throttle timeout
-        if (throttleTimeoutRef.current) {
-            clearTimeout(throttleTimeoutRef.current);
-        }
-
-        // Set new throttled update
-        throttleTimeoutRef.current = setTimeout(() => {
-            lastSavedDataRef.current = currentDataStr;
+        if (throttleRef.current) clearTimeout(throttleRef.current);
 
+        throttleRef.current = setTimeout(() => {
+            lastDataRef.current = currentStr;
             setHistory(prev => {
-                // Slice history at current index (discard future states)
-                const newHistory = prev.slice(0, historyIndex + 1);
-                // Add new state
-                newHistory.push(currentData);
-                // Limit history size to 50 states
-                if (newHistory.length > 50) {
-                    newHistory.shift();
-                    return newHistory;
-                }
-                return newHistory;
+                const newHistory = [...prev.slice(0, historyIndex + 1), currentData];
+                return newHistory.length > 50 ? newHistory.slice(1) : newHistory;
             });
-
-            setHistoryIndex(prev => {
-                const newHistory = history.slice(0, prev + 1);
-                newHistory.push(currentData);
-                return Math.min(newHistory.length - 1, 49);
-            });
-        }, 500); // 500ms throttle
+            setHistoryIndex(prev => Math.min(prev + 1, 49));
+        }, 500);
 
         return () => {
-            if (throttleTimeoutRef.current) {
-                clearTimeout(throttleTimeoutRef.current);
-            }
+            if (throttleRef.current) clearTimeout(throttleRef.current);
         };
-    }, [currentData, historyIndex, history]);
+    }, [currentData]);
 
     const handleLoad = async () => {
         const prefab = await loadJson();
         if (prefab) {
             onDataChange(prefab);
-            // Reset history when loading new file
             setHistory([prefab]);
             setHistoryIndex(0);
-            lastSavedDataRef.current = JSON.stringify(prefab);
+            lastDataRef.current = JSON.stringify(prefab);
         }
     };
 
     const canUndo = historyIndex > 0;
     const canRedo = historyIndex < history.length - 1;
 
-    return <div style={{
-        position: "absolute",
-        top: 8,
-        left: "50%",
-        transform: "translateX(-50%)",
-        display: "flex",
-        alignItems: "center",
-        gap: 6,
-        padding: "2px 4px",
-        background: "rgba(0,0,0,0.55)",
-        border: "1px solid rgba(255,255,255,0.12)",
-        borderRadius: 4,
-        color: "rgba(255,255,255,0.9)",
-        fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-        fontSize: 11,
-        lineHeight: 1,
-        WebkitUserSelect: "none",
-        userSelect: "none",
-    }}>
-        <PanelButton onClick={() => onEditModeChange(!editMode)}>
+    return <div style={toolbar.panel}>
+        <button style={base.btn} onClick={() => onEditModeChange(!editMode)}>
             {editMode ? "▶" : "⏸"}
-        </PanelButton>
-
-        <span style={{ opacity: 0.35 }}>|</span>
-
-        <PanelButton onClick={handleUndo} disabled={!canUndo} title="Undo (Ctrl+Z)">
-            ↶
-        </PanelButton>
-
-        <PanelButton onClick={handleRedo} disabled={!canRedo} title="Redo (Ctrl+Shift+Z)">
-            ↷
-        </PanelButton>
-
-        <span style={{ opacity: 0.35 }}>|</span>
-
-        <PanelButton onClick={handleLoad} title="Load JSON">
-            📥
-        </PanelButton>
-
-        <PanelButton onClick={() => saveJson(currentData, "prefab")} title="Save JSON">
-            💾
-        </PanelButton>
+        </button>
+        <div style={toolbar.divider} />
+        <button style={{ ...base.btn, ...(canUndo ? {} : toolbar.disabled) }} onClick={undo} disabled={!canUndo}>↶</button>
+        <button style={{ ...base.btn, ...(canRedo ? {} : toolbar.disabled) }} onClick={redo} disabled={!canRedo}>↷</button>
+        <div style={toolbar.divider} />
+        <button style={base.btn} onClick={handleLoad}>📥</button>
+        <button style={base.btn} onClick={() => saveJson(currentData, "prefab")}>💾</button>
     </div>;
 };
 
-const PanelButton = ({
-    onClick,
-    disabled,
-    title,
-    children
-}: {
-    onClick: () => void;
-    disabled?: boolean;
-    title?: string;
-    children: React.ReactNode;
-}) => {
-    return <button
-        style={{
-            padding: "2px 6px",
-            font: "inherit",
-            background: "transparent",
-            color: disabled ? "rgba(255,255,255,0.3)" : "inherit",
-            border: "1px solid rgba(255,255,255,0.18)",
-            borderRadius: 3,
-            cursor: disabled ? "not-allowed" : "pointer",
-            opacity: disabled ? 0.5 : 1,
-        }}
-        onClick={onClick}
-        disabled={disabled}
-        title={title}
-        onPointerEnter={(e) => {
-            if (!disabled) {
-                (e.currentTarget as HTMLButtonElement).style.background = "rgba(255,255,255,0.08)";
-            }
-        }}
-        onPointerLeave={(e) => {
-            (e.currentTarget as HTMLButtonElement).style.background = "transparent";
-        }}
-    >
-        {children}
-    </button>;
-};
-
 const saveJson = (data: any, filename: string) => {
     const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data, null, 2));
     const downloadAnchorNode = document.createElement('a');