fix bugs

Author: prnthh

src/index.ts

@@ -1,7 +1,18 @@
-// Components
+// Core Components
 export { default as GameCanvas } from './shared/GameCanvas';
+
+// Prefab Editor
 export { default as PrefabEditor } from './tools/prefabeditor/PrefabEditor';
+export type { PrefabEditorRef } from './tools/prefabeditor/PrefabEditor';
 export { default as PrefabRoot } from './tools/prefabeditor/PrefabRoot';
+export type { PrefabRootRef } from './tools/prefabeditor/PrefabRoot';
+export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
+export type { Component } from './tools/prefabeditor/components/ComponentRegistry';
+export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';
+export * as editorStyles from './tools/prefabeditor/styles';
+export * from './tools/prefabeditor/utils';
+
+// Asset Tools
 export { DragDropLoader } from './tools/dragdrop/DragDropLoader';
 export {
   TextureListViewer,
@@ -10,16 +21,5 @@ export {
   SharedCanvas,
 } from './tools/assetviewer/page';
 
-// Component Registry
-export { registerComponent } from './tools/prefabeditor/components/ComponentRegistry';
-export type { Component } from './tools/prefabeditor/components/ComponentRegistry';
-
-// Editor Styles & Utils
-export * as editorStyles from './tools/prefabeditor/styles';
-export * from './tools/prefabeditor/utils';
-
 // Helpers
 export * from './helpers';
-
-// Types
-export type { Prefab, GameObject, ComponentData } from './tools/prefabeditor/types';

src/tools/prefabeditor/EditorContext.tsx

@@ -0,0 +1,20 @@
+import { createContext, useContext } from "react";
+
+interface EditorContextType {
+    transformMode: "translate" | "rotate" | "scale";
+    setTransformMode: (mode: "translate" | "rotate" | "scale") => void;
+    snapResolution: number;
+    setSnapResolution: (resolution: number) => void;
+    onScreenshot?: () => void;
+    onExportGLB?: () => void;
+}
+
+export const EditorContext = createContext<EditorContextType | null>(null);
+
+export function useEditorContext() {
+    const context = useContext(EditorContext);
+    if (!context) {
+        throw new Error("useEditorContext must be used within EditorContext.Provider");
+    }
+    return context;
+}

src/tools/prefabeditor/EditorTree.tsx

@@ -2,15 +2,14 @@ import { Dispatch, SetStateAction, useState, MouseEvent } from 'react';
 import { Prefab, GameObject } from "./types";
 import { getComponent } from './components/ComponentRegistry';
 import { base, tree, menu } from './styles';
-import { findNode, findParent, deleteNode, cloneNode, updateNodeById } from './utils';
+import { findNode, findParent, deleteNode, cloneNode, updateNodeById, loadJson, saveJson, regenerateIds } from './utils';
+import { useEditorContext } from './EditorContext';
 
 export default function EditorTree({
     prefabData,
     setPrefabData,
     selectedId,
     setSelectedId,
-    onSave,
-    onLoad,
     onUndo,
     onRedo,
     canUndo,
@@ -20,8 +19,6 @@ export default function EditorTree({
     setPrefabData?: Dispatch<SetStateAction<Prefab>>;
     selectedId: string | null;
     setSelectedId: Dispatch<SetStateAction<string | null>>;
-    onSave?: () => void;
-    onLoad?: () => void;
     onUndo?: () => void;
     onRedo?: () => void;
     canUndo?: boolean;
@@ -212,23 +209,11 @@ export default function EditorTree({
                                     ⋮
                                 </button>
                                 {fileMenuOpen && (
-                                    <div
-                                        style={{ ...menu.container, top: 28, right: 0 }}
-                                        onClick={(e) => e.stopPropagation()}
-                                    >
-                                        <button
-                                            style={menu.item}
-                                            onClick={() => { onLoad?.(); setFileMenuOpen(false); }}
-                                        >
-                                            📥 Load
-                                        </button>
-                                        <button
-                                            style={menu.item}
-                                            onClick={() => { onSave?.(); setFileMenuOpen(false); }}
-                                        >
-                                            💾 Save
-                                        </button>
-                                    </div>
+                                    <FileMenu
+                                        prefabData={prefabData}
+                                        setPrefabData={setPrefabData}
+                                        onClose={() => setFileMenuOpen(false)}
+                                    />
                                 )}
                             </div>
                         </div>
@@ -261,3 +246,79 @@ export default function EditorTree({
         </>
     );
 }
+
+function FileMenu({
+    prefabData,
+    setPrefabData,
+    onClose
+}: {
+    prefabData: Prefab;
+    setPrefabData: Dispatch<SetStateAction<Prefab>>;
+    onClose: () => void;
+}) {
+    const { onScreenshot, onExportGLB } = useEditorContext();
+
+    const handleLoad = async () => {
+        const loadedPrefab = await loadJson();
+        if (!loadedPrefab) return;
+        setPrefabData(loadedPrefab);
+        onClose();
+    };
+
+    const handleSave = () => {
+        saveJson(prefabData, "prefab");
+        onClose();
+    };
+
+    const handleLoadIntoScene = async () => {
+        const loadedPrefab = await loadJson();
+        if (!loadedPrefab) return;
+
+        setPrefabData(prev => ({
+            ...prev,
+            root: updateNodeById(prev.root, prev.root.id, root => ({
+                ...root,
+                children: [...(root.children ?? []), regenerateIds(loadedPrefab.root)]
+            }))
+        }));
+        onClose();
+    };
+
+    return (
+        <div
+            style={{ ...menu.container, top: 28, right: 0 }}
+            onClick={(e) => e.stopPropagation()}
+        >
+            <button
+                style={menu.item}
+                onClick={handleLoad}
+            >
+                📥 Load Prefab JSON
+            </button>
+            <button
+                style={menu.item}
+                onClick={handleSave}
+            >
+                💾 Save Prefab JSON
+            </button>
+            <button
+                style={menu.item}
+                onClick={handleLoadIntoScene}
+            >
+                📂 Load into Scene
+            </button>
+            <button
+                style={menu.item}
+                onClick={() => { onScreenshot?.(); onClose(); }}
+            >
+                📸 Screenshot
+            </button>
+            <button
+                style={menu.item}
+                onClick={() => { onExportGLB?.(); onClose(); }}
+            >
+                📦 Export GLB
+            </button>
+        </div>
+    );
+}

src/tools/prefabeditor/EditorUI.tsx

@@ -4,17 +4,14 @@ import EditorTree from './EditorTree';
 import { getAllComponents } from './components/ComponentRegistry';
 import { base, inspector } from './styles';
 import { findNode, updateNode, deleteNode } from './utils';
+import { useEditorContext } from './EditorContext';
 
 function EditorUI({
     prefabData,
     setPrefabData,
     selectedId,
     setSelectedId,
-    transformMode,
-    setTransformMode,
     basePath,
-    onSave,
-    onLoad,
     onUndo,
     onRedo,
     canUndo,
@@ -24,17 +21,14 @@ function EditorUI({
     setPrefabData?: Dispatch<SetStateAction<Prefab>>;
     selectedId: string | null;
     setSelectedId: Dispatch<SetStateAction<string | null>>;
-    transformMode: "translate" | "rotate" | "scale";
-    setTransformMode: (m: "translate" | "rotate" | "scale") => void;
     basePath?: string;
-    onSave?: () => void;
-    onLoad?: () => void;
     onUndo?: () => void;
     onRedo?: () => void;
     canUndo?: boolean;
     canRedo?: boolean;
 }) {
     const [collapsed, setCollapsed] = useState(false);
+    const { transformMode, setTransformMode } = useEditorContext();
 
     const updateNodeHandler = (updater: (n: GameObjectType) => GameObjectType) => {
         if (!prefabData || !setPrefabData || !selectedId) return;
@@ -81,8 +75,6 @@ function EditorUI({
                 setPrefabData={setPrefabData}
                 selectedId={selectedId}
                 setSelectedId={setSelectedId}
-                onSave={onSave}
-                onLoad={onLoad}
                 onUndo={onUndo}
                 onRedo={onRedo}
                 canUndo={canUndo}