react-three-game 0.0.17 → 0.0.19

package/src/tools/prefabeditor/components/index.ts

@@ -3,6 +3,7 @@ import TransformComponent from './TransformComponent';
 import MaterialComponent from './MaterialComponent';
 import PhysicsComponent from './PhysicsComponent';
 import SpotLightComponent from './SpotLightComponent';
+import DirectionalLightComponent from './DirectionalLightComponent';
 import ModelComponent from './ModelComponent';
 
 export default [
@@ -11,6 +12,7 @@ export default [
     MaterialComponent,
     PhysicsComponent,
     SpotLightComponent,
+    DirectionalLightComponent,
     ModelComponent
 ];
 

package/src/tools/prefabeditor/styles.ts

@@ -0,0 +1,195 @@
+// Shared editor styles - single source of truth for all prefab editor UI
+
+export const colors = {
+    bg: 'rgba(0,0,0,0.6)',
+    bgLight: 'rgba(255,255,255,0.06)',
+    bgHover: 'rgba(255,255,255,0.1)',
+    border: 'rgba(255,255,255,0.15)',
+    borderLight: 'rgba(255,255,255,0.1)',
+    borderFaint: 'rgba(255,255,255,0.05)',
+    text: '#fff',
+    textMuted: 'rgba(255,255,255,0.7)',
+    danger: '#ffaaaa',
+    dangerBg: 'rgba(255,80,80,0.2)',
+    dangerBorder: 'rgba(255,80,80,0.4)',
+};
+
+export const fonts = {
+    family: 'system-ui, sans-serif',
+    size: 11,
+    sizeSm: 10,
+};
+
+// Base component styles
+export const base = {
+    panel: {
+        background: colors.bg,
+        color: colors.text,
+        border: `1px solid ${colors.border}`,
+        borderRadius: 4,
+        overflow: 'hidden',
+        backdropFilter: 'blur(8px)',
+        fontFamily: fonts.family,
+        fontSize: fonts.size,
+    } as React.CSSProperties,
+
+    header: {
+        padding: '6px 8px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        cursor: 'pointer',
+        background: colors.bgLight,
+        borderBottom: `1px solid ${colors.borderLight}`,
+        fontSize: fonts.size,
+        fontWeight: 500,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    } as React.CSSProperties,
+
+    input: {
+        width: '100%',
+        background: colors.bgHover,
+        border: `1px solid ${colors.border}`,
+        borderRadius: 3,
+        padding: '4px 6px',
+        color: colors.text,
+        fontSize: fonts.size,
+        outline: 'none',
+    } as React.CSSProperties,
+
+    btn: {
+        background: colors.bgHover,
+        border: `1px solid ${colors.border}`,
+        borderRadius: 3,
+        padding: '4px 8px',
+        color: colors.text,
+        fontSize: fonts.size,
+        cursor: 'pointer',
+        outline: 'none',
+    } as React.CSSProperties,
+
+    btnDanger: {
+        background: colors.dangerBg,
+        borderColor: colors.dangerBorder,
+        color: colors.danger,
+    } as React.CSSProperties,
+
+    label: {
+        fontSize: fonts.sizeSm,
+        opacity: 0.7,
+        marginBottom: 4,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    } as React.CSSProperties,
+
+    row: {
+        display: 'flex',
+        gap: 6,
+    } as React.CSSProperties,
+
+    section: {
+        paddingBottom: 8,
+        borderBottom: `1px solid ${colors.borderLight}`,
+    } as React.CSSProperties,
+};
+
+// Specific panel styles
+export const inspector = {
+    panel: {
+        ...base.panel,
+        position: 'absolute' as const,
+        top: 8,
+        right: 8,
+        zIndex: 20,
+        width: 260,
+    },
+    content: {
+        padding: 8,
+        maxHeight: '80vh',
+        overflowY: 'auto' as const,
+        display: 'flex',
+        flexDirection: 'column' as const,
+        gap: 8,
+    },
+};
+
+export const tree = {
+    panel: {
+        ...base.panel,
+        maxHeight: '85vh',
+        display: 'flex',
+        flexDirection: 'column' as const,
+        userSelect: 'none' as const,
+    },
+    scroll: {
+        overflowY: 'auto' as const,
+        padding: 4,
+    },
+    row: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '3px 6px',
+        borderBottom: `1px solid ${colors.borderFaint}`,
+        cursor: 'pointer',
+        whiteSpace: 'nowrap' as const,
+    } as React.CSSProperties,
+    selected: {
+        background: 'rgba(255,255,255,0.12)',
+    },
+};
+
+export const menu = {
+    container: {
+        position: 'fixed' as const,
+        zIndex: 50,
+        minWidth: 120,
+        background: 'rgba(0,0,0,0.85)',
+        border: `1px solid ${colors.border}`,
+        borderRadius: 4,
+        overflow: 'hidden',
+        boxShadow: '0 8px 24px rgba(0,0,0,0.5)',
+        backdropFilter: 'blur(8px)',
+    },
+    item: {
+        width: '100%',
+        textAlign: 'left' as const,
+        padding: '6px 8px',
+        background: 'transparent',
+        border: 'none',
+        color: colors.text,
+        fontSize: fonts.size,
+        cursor: 'pointer',
+        outline: 'none',
+    } as React.CSSProperties,
+    danger: {
+        color: colors.danger,
+    },
+};
+
+export const toolbar = {
+    panel: {
+        position: 'absolute' as const,
+        top: 8,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        display: 'flex',
+        gap: 6,
+        padding: '4px 6px',
+        background: colors.bg,
+        border: `1px solid ${colors.border}`,
+        borderRadius: 4,
+        color: colors.text,
+        fontFamily: fonts.family,
+        fontSize: fonts.size,
+        backdropFilter: 'blur(8px)',
+    },
+    divider: {
+        width: 1,
+        background: 'rgba(255,255,255,0.2)',
+    },
+    disabled: {
+        opacity: 0.4,
+        cursor: 'not-allowed',
+    },
+};

package/src/tools/prefabeditor/types.ts

@@ -1,28 +1,20 @@
-// import { ThreeElements } from "@react-three/fiber"
-
 export interface Prefab {
     id?: string;
     name?: string;
-    description?: string;
-    author?: string;
-    version?: string;
-    assets?: string[] | {[assetName: string]: string}; // List of asset URLs or a mapping of asset names to URLs
-    onStart?: (target: any) => void; // The logic function to run when the map starts
-    root: GameObject; // The root node of the scene graph
+    root: GameObject;
 }
 
 export interface GameObject {
     id: string;
     disabled?: boolean;
     hidden?: boolean;
-    ref?: any;
     children?: GameObject[];
     components?: {
-        [uuid: string]: Component | undefined;
+        [key: string]: ComponentData | undefined;
     };
 }
 
-interface Component {
+export interface ComponentData {
     type: string;
-    properties: { [key: string]: any };
+    properties: Record<string, any>;
 }

package/src/tools/prefabeditor/utils.ts

@@ -0,0 +1,80 @@
+import { GameObject } from "./types";
+
+/** Find a node by ID in the tree */
+export function findNode(root: GameObject, id: string): GameObject | null {
+    if (root.id === id) return root;
+    for (const child of root.children ?? []) {
+        const found = findNode(child, id);
+        if (found) return found;
+    }
+    return null;
+}
+
+/** Find the parent of a node by ID */
+export function findParent(root: GameObject, id: string): GameObject | null {
+    for (const child of root.children ?? []) {
+        if (child.id === id) return root;
+        const found = findParent(child, id);
+        if (found) return found;
+    }
+    return null;
+}
+
+/** Find all nodes matching a predicate */
+export function findAll(root: GameObject, predicate: (node: GameObject) => boolean): GameObject[] {
+    const results: GameObject[] = [];
+    if (predicate(root)) results.push(root);
+    for (const child of root.children ?? []) {
+        results.push(...findAll(child, predicate));
+    }
+    return results;
+}
+
+/** Find all nodes that have a specific component type */
+export function findByComponent(root: GameObject, componentType: string): GameObject[] {
+    return findAll(root, node => 
+        Object.values(node.components ?? {}).some(c => c?.type === componentType)
+    );
+}
+
+/** Get a flattened list of all nodes */
+export function flatten(root: GameObject): GameObject[] {
+    return findAll(root, () => true);
+}
+
+/** Immutably update a node by ID */
+export function updateNode(root: GameObject, id: string, update: (node: GameObject) => GameObject): GameObject {
+    if (root.id === id) return update(root);
+    if (!root.children) return root;
+    return {
+        ...root,
+        children: root.children.map(child => updateNode(child, id, update))
+    };
+}
+
+/** Immutably delete a node by ID */
+export function deleteNode(root: GameObject, id: string): GameObject | null {
+    if (root.id === id) return null;
+    if (!root.children) return root;
+    return {
+        ...root,
+        children: root.children
+            .map(child => deleteNode(child, id))
+            .filter((child): child is GameObject => child !== null)
+    };
+}
+
+/** Deep clone a node with new IDs */
+export function cloneNode(node: GameObject): GameObject {
+    return {
+        ...node,
+        id: crypto.randomUUID(),
+        children: node.children?.map(cloneNode)
+    };
+}
+
+/** Get component data from a node */
+export function getComponent<T = any>(node: GameObject, type: string): T | undefined {
+    const comp = Object.values(node.components ?? {}).find(c => c?.type === type);
+    return comp?.properties as T | undefined;
+}