react-three-game 0.0.60 → 0.0.62

package/src/tools/prefabeditor/EditorTreeMenus.tsx

@@ -1,307 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { Prefab } from './types';
-import { menu } from './styles';
-import { useEditorContext } from './EditorContext';
-import { getComponent } from './components/ComponentRegistry';
-import { loadJson, saveJson, regenerateIds, updateNodeById } from './utils';
-
-export type TreeContextMenuState = { nodeId: string; x: number; y: number } | null;
-
-function createEmptyPrefab(): Prefab {
-    return {
-        id: crypto.randomUUID(),
-        name: 'New Scene',
-        root: {
-            id: crypto.randomUUID(),
-            name: 'Scene',
-            components: {
-                transform: {
-                    type: 'Transform',
-                    properties: { ...getComponent('Transform')?.defaultProperties }
-                }
-            },
-            children: []
-        }
-    };
-}
-
-function MenuPanel({
-    children,
-    style,
-}: {
-    children: React.ReactNode;
-    style?: React.CSSProperties;
-}) {
-    return (
-        <div style={{ ...menu.container, position: 'static', ...style }} onClick={(e) => e.stopPropagation()}>
-            {children}
-        </div>
-    );
-}
-
-function MenuItemButton({
-    children,
-    onClick,
-    danger = false,
-    style,
-}: {
-    children: React.ReactNode;
-    onClick: () => void;
-    danger?: boolean;
-    style?: React.CSSProperties;
-}) {
-    return (
-        <button
-            style={danger ? { ...menu.item, ...menu.danger, ...style } : { ...menu.item, ...style }}
-            onClick={onClick}
-        >
-            {children}
-        </button>
-    );
-}
-
-function MenuSubmenu({
-    label,
-    children,
-}: {
-    label: string;
-    children: React.ReactNode;
-}) {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-        <div
-            style={{ position: 'relative' }}
-            onMouseEnter={() => setIsOpen(true)}
-            onMouseLeave={() => setIsOpen(false)}
-        >
-            <MenuItemButton
-                onClick={() => setIsOpen(open => !open)}
-                style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}
-            >
-                <span>{label}</span>
-                <span aria-hidden="true">›</span>
-            </MenuItemButton>
-            {isOpen && (
-                <div
-                    style={{
-                        position: 'absolute',
-                        top: 0,
-                        left: '100%',
-                        zIndex: 1,
-                    }}
-                >
-                    <MenuPanel>{children}</MenuPanel>
-                </div>
-            )}
-        </div>
-    );
-}
-
-export function MenuTriggerButton({
-    buttonRef,
-    onToggle,
-    title,
-    style,
-    children,
-}: {
-    buttonRef: React.RefObject<HTMLButtonElement | null>;
-    onToggle: () => void;
-    title: string;
-    style: React.CSSProperties;
-    children: React.ReactNode;
-}) {
-    return (
-        <button
-            ref={buttonRef}
-            style={style}
-            onClick={(e) => {
-                e.stopPropagation();
-                onToggle();
-            }}
-            title={title}
-        >
-            {children}
-        </button>
-    );
-}
-
-export function TreeNodeMenu({
-    isRoot,
-    nodeId,
-    onAddChild,
-    onFocus,
-    onDuplicate,
-    onDelete,
-    onClose,
-}: {
-    isRoot: boolean;
-    nodeId: string;
-    onAddChild: (parentId: string) => void;
-    onFocus: (nodeId: string) => void;
-    onDuplicate?: (nodeId: string) => void;
-    onDelete?: (nodeId: string) => void;
-    onClose: () => void;
-}) {
-    return (
-        <MenuPanel>
-            <MenuItemButton onClick={() => { onAddChild(nodeId); onClose(); }}>
-                Add Child
-            </MenuItemButton>
-            <MenuItemButton onClick={() => { onFocus(nodeId); onClose(); }}>
-                Focus Camera
-            </MenuItemButton>
-            {!isRoot && onDuplicate && (
-                <MenuItemButton onClick={() => { onDuplicate(nodeId); onClose(); }}>
-                    Duplicate
-                </MenuItemButton>
-            )}
-            {!isRoot && onDelete && (
-                <MenuItemButton danger onClick={() => { onDelete(nodeId); onClose(); }}>
-                    Delete
-                </MenuItemButton>
-            )}
-        </MenuPanel>
-    );
-}
-
-export function TreeContextMenu({
-    contextMenu,
-    onClose,
-    children,
-}: {
-    contextMenu: TreeContextMenuState;
-    onClose: () => void;
-    children: (nodeId: string, onClose: () => void) => React.ReactNode;
-}) {
-    const panelRef = useRef<HTMLDivElement>(null);
-    const [position, setPosition] = useState<{ left: number; top: number } | null>(null);
-
-    useEffect(() => {
-        if (!contextMenu) return;
-
-        const handlePointerDown = (event: PointerEvent) => {
-            const target = event.target as Node | null;
-            if (!target) return;
-            if (panelRef.current?.contains(target)) return;
-            onClose();
-        };
-
-        const handleKeyDown = (event: KeyboardEvent) => {
-            if (event.key === 'Escape') onClose();
-        };
-
-        document.addEventListener('pointerdown', handlePointerDown);
-        document.addEventListener('keydown', handleKeyDown);
-
-        return () => {
-            document.removeEventListener('pointerdown', handlePointerDown);
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, [contextMenu, onClose]);
-
-    useEffect(() => {
-        if (!contextMenu || !panelRef.current || typeof window === 'undefined') return;
-
-        const panelRect = panelRef.current.getBoundingClientRect();
-        const left = Math.max(8, Math.min(contextMenu.x, window.innerWidth - panelRect.width - 8));
-        const top = Math.max(8, Math.min(contextMenu.y, window.innerHeight - panelRect.height - 8));
-        setPosition({ left, top });
-    }, [contextMenu]);
-
-    useEffect(() => {
-        if (!contextMenu) {
-            setPosition(null);
-        }
-    }, [contextMenu]);
-
-    if (!contextMenu || typeof document === 'undefined') return null;
-
-    return createPortal(
-        <div
-            ref={panelRef}
-            style={{
-                position: 'fixed',
-                left: position?.left ?? contextMenu.x,
-                top: position?.top ?? contextMenu.y,
-                zIndex: 1000,
-            }}
-            onMouseLeave={onClose}
-            onContextMenu={(e) => e.preventDefault()}
-        >
-            {children(contextMenu.nodeId, onClose)}
-        </div>,
-        document.body
-    );
-}
-
-export function FileMenu({
-    prefabData,
-    setPrefabData,
-    onClose
-}: {
-    prefabData: Prefab;
-    setPrefabData: Dispatch<SetStateAction<Prefab>>;
-    onClose: () => void;
-}) {
-    const { onScreenshot, onExportGLB } = useEditorContext();
-
-    const handleNewScene = () => {
-        setPrefabData(createEmptyPrefab());
-        onClose();
-    };
-
-    const handleNewSceneFromPrefab = 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 (
-        <MenuPanel style={{ overflow: 'visible' }}>
-            <MenuSubmenu label="File">
-                <MenuItemButton onClick={handleNewScene}>
-                    New Scene
-                </MenuItemButton>
-                <MenuItemButton onClick={handleNewSceneFromPrefab}>
-                    New Scene from Prefab
-                </MenuItemButton>
-                <MenuItemButton onClick={handleLoadIntoScene}>
-                    Load Prefab into Scene
-                </MenuItemButton>
-                <MenuItemButton onClick={handleSave}>
-                    Save Prefab
-                </MenuItemButton>
-            </MenuSubmenu>
-            <MenuSubmenu label="Export">
-                <MenuItemButton onClick={() => { onExportGLB?.(); onClose(); }}>
-                    GLB
-                </MenuItemButton>
-                <MenuItemButton onClick={() => { onScreenshot?.(); onClose(); }}>
-                    PNG
-                </MenuItemButton>
-            </MenuSubmenu>
-        </MenuPanel>
-    );
-}

package/src/tools/prefabeditor/EditorUI.tsx

@@ -1,204 +0,0 @@
-import { Dispatch, SetStateAction, useState, useEffect } from 'react';
-import { Prefab, GameObject as GameObjectType } from "./types";
-import EditorTree from './EditorTree';
-import { getAllComponents } from './components/ComponentRegistry';
-import { base, colors, inspector, scrollbarCSS, componentCard } from './styles';
-import { findNode, updateNode, deleteNode } from './utils';
-
-function EditorUI({
-    prefabData,
-    setPrefabData,
-    selectedId,
-    setSelectedId,
-    basePath,
-    onUndo,
-    onRedo,
-    canUndo,
-    canRedo
-}: {
-    prefabData?: Prefab;
-    setPrefabData?: Dispatch<SetStateAction<Prefab>>;
-    selectedId: string | null;
-    setSelectedId: Dispatch<SetStateAction<string | null>>;
-    basePath?: string;
-    onUndo?: () => void;
-    onRedo?: () => void;
-    canUndo?: boolean;
-    canRedo?: boolean;
-}) {
-    const [collapsed, setCollapsed] = useState(false);
-
-    const updateNodeHandler = (updater: (n: GameObjectType) => GameObjectType) => {
-        if (!prefabData || !setPrefabData || !selectedId) return;
-        setPrefabData(prev => ({
-            ...prev,
-            root: updateNode(prev.root, selectedId, updater)
-        }));
-    };
-
-    const deleteNodeHandler = () => {
-        if (!prefabData || !setPrefabData || !selectedId || selectedId === prefabData.root.id) return;
-        setPrefabData(prev => ({ ...prev, root: deleteNode(prev.root, selectedId)! }));
-        setSelectedId(null);
-    };
-
-    const selectedNode = selectedId && prefabData ? findNode(prefabData.root, selectedId) : null;
-
-    return <>
-        <style>{scrollbarCSS}</style>
-        <div style={inspector.panel}>
-            <div style={base.header} onClick={() => setCollapsed(!collapsed)}>
-                <span>Inspector</span>
-                <span>{collapsed ? '◀' : '▼'}</span>
-            </div>
-            {!collapsed && selectedNode && (
-                <NodeInspector
-                    node={selectedNode}
-                    updateNode={updateNodeHandler}
-                    deleteNode={deleteNodeHandler}
-                    basePath={basePath}
-                />
-            )}
-        </div>
-        <div style={{ position: 'absolute', top: 8, left: 8, zIndex: 20 }}>
-            <EditorTree
-                prefabData={prefabData}
-                setPrefabData={setPrefabData}
-                selectedId={selectedId}
-                setSelectedId={setSelectedId}
-                onUndo={onUndo}
-                onRedo={onRedo}
-                canUndo={canUndo}
-                canRedo={canRedo}
-            />
-        </div>
-    </>;
-}
-
-
-function NodeInspector({
-    node,
-    updateNode,
-    deleteNode,
-    basePath
-}: {
-    node: GameObjectType;
-    updateNode: (updater: (n: GameObjectType) => GameObjectType) => void;
-    deleteNode: () => void;
-    basePath?: string;
-}) {
-    const ALL_COMPONENTS = getAllComponents();
-    const allKeys = Object.keys(ALL_COMPONENTS);
-    const available = allKeys.filter(k => !node.components?.[k.toLowerCase()]);
-    const [addType, setAddType] = useState(available[0] || "");
-
-    useEffect(() => {
-        const newAvailable = allKeys.filter(k => !node.components?.[k.toLowerCase()]);
-        if (!newAvailable.includes(addType)) setAddType(newAvailable[0] || "");
-    }, [Object.keys(node.components || {}).join(',')]);
-
-    return <div style={inspector.content} className="prefab-scroll">
-        {/* Node Name */}
-        <div style={base.section}>
-            <div style={{ display: "flex", marginBottom: 8, alignItems: 'center', gap: 8 }}>
-                <div style={{ fontSize: 10, color: colors.textDim, wordBreak: 'break-all', border: `1px solid ${colors.border}`, padding: '2px 6px', borderRadius: 3, flex: 1, fontFamily: 'monospace' }}>
-                    {node.id}
-                </div>
-                <button style={{ ...base.btn, ...base.btnDanger }} title="Delete Node" onClick={deleteNode}>❌</button>
-            </div>
-
-            <input
-                style={base.input}
-                value={node.name ?? ""}
-                placeholder='Node name'
-                onChange={e =>
-                    updateNode(n => ({ ...n, name: e.target.value }))
-                }
-            />
-        </div>
-
-        {/* Components */}
-        <div style={base.section}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
-                <div style={base.label}>Components</div>
-            </div>
-
-            {node.components && Object.entries(node.components).map(([key, comp]: [string, any]) => {
-                if (!comp) return null;
-                const def = ALL_COMPONENTS[comp.type];
-                if (!def) return <div key={key} style={{ color: colors.danger, fontSize: 11 }}>
-                    Unknown: {comp.type}
-                </div>;
-
-                return (
-                    <div key={key} style={componentCard.container}>
-                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
-                            <div style={{ fontSize: 11, fontWeight: 500 }}>{key}</div>
-                            <button
-                                style={{ ...base.btn, padding: '2px 6px' }}
-                                title="Remove Component"
-                                onClick={() => updateNode(n => {
-                                    const { [key]: _, ...rest } = n.components || {};
-                                    return { ...n, components: rest };
-                                })}
-                            >
-                                ✕
-                            </button>
-                        </div>
-                        {def.Editor && (
-                            <def.Editor
-                                component={comp}
-                                node={node}
-                                onUpdate={(newProps: any) => updateNode(n => ({
-                                    ...n,
-                                    components: {
-                                        ...n.components,
-                                        [key]: { ...comp, properties: { ...comp.properties, ...newProps } }
-                                    }
-                                }))}
-                                basePath={basePath}
-                            />
-                        )}
-                    </div>
-                );
-            })}
-        </div>
-
-        {/* Add Component */}
-        {available.length > 0 && (
-            <div>
-                <div style={base.row}>
-                    <select
-                        style={{ ...base.input, flex: 1 }}
-                        value={addType}
-                        onChange={e => setAddType(e.target.value)}
-                    >
-                        {available.map(k => <option key={k} value={k}>{k}</option>)}
-                    </select>
-                    <button
-                        style={base.btn}
-                        disabled={!addType}
-                        onClick={() => {
-                            if (!addType) return;
-                            const def = ALL_COMPONENTS[addType];
-                            if (def) {
-                                updateNode(n => ({
-                                    ...n,
-                                    components: {
-                                        ...n.components,
-                                        [addType.toLowerCase()]: { type: def.name, properties: def.defaultProperties }
-                                    }
-                                }));
-                            }
-                        }}
-                        title="Add Component"
-                    >
-                        +
-                    </button>
-                </div>
-            </div>
-        )}
-    </div>
-}
-
-export default EditorUI;

package/src/tools/prefabeditor/EventSystem.tsx

@@ -1,36 +0,0 @@
-import { useRef, useImperativeHandle, forwardRef, useCallback } from 'react';
-
-interface EventSystemRef {
-    fire: (eventType: string, data?: any) => void;
-}
-
-const EventSystemHook = forwardRef<EventSystemRef, { entityId: string }>(
-    ({ entityId }, ref) => {
-        const targetRef = useRef<EventTarget>(typeof window !== 'undefined' ? window : null);
-
-        // Fire a global JS event with entityId as source
-        const fire = useCallback((eventType: string, data?: any) => {
-            if (!targetRef.current) return;
-
-            const event = new CustomEvent(eventType, {
-                detail: {
-                    entityId,
-                    data,
-                },
-            });
-
-            targetRef.current.dispatchEvent(event);
-        }, [entityId]);
-
-        // Expose ref API
-        useImperativeHandle(ref, () => ({
-            fire,
-        }), [fire]);
-
-        return null;
-    }
-);
-
-EventSystemHook.displayName = 'EventSystemHook';
-
-export default EventSystemHook;